/* --------------------------
   Grundlegendes Reset / Base
--------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

html {
    width: 100%;
    max-width: 100%;
    overflow-x: clip; /* clip verhindert horizontalen Scrollbalken zuverlässig */
}

body {
    background: linear-gradient(180deg, #e0f7fa 0%, #d0ecf0 50%, #c8e6ea 100%);
    color: #004d40;
    line-height: 1.5;
    font-size: 14px;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Login: Verlauf an der Bildschirmgröße festhalten (kein sichtbares „Weiterlaufen“ unter dem Footer) */
body.login-page {
    min-height: 100vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* --------------------------
   Floating Action Button (FAB)
--------------------------- */
.fab {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: rgba(0, 121, 107, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: #004d40;
    border: 1px solid rgba(0, 121, 107, 0.25);
    border-radius: 50%;
    font-size: 32px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(0, 121, 107, 0.15);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
    text-decoration: none;
    padding: 0;
}

.fab:hover {
    transform: scale(1.1);
    background: rgba(0, 121, 107, 0.75);
    color: white;
    box-shadow: 0 4px 16px rgba(0, 121, 107, 0.25);
}

.fab:active {
    transform: scale(0.95);
}

.floating-actions-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.floating-actions-wrap .fab {
    position: static;
    right: auto;
    bottom: auto;
}

.fab-social {
    font-size: 24px;
    background: rgba(0, 121, 107, 0.62);
    color: #ffffff;
    border-color: rgba(0, 121, 107, 0.42);
    box-shadow: 0 4px 14px rgba(0, 121, 107, 0.28);
}

.fab-social-global {
    position: fixed;
    right: 20px;
    bottom: 92px;
    z-index: 1000;
}

.fab-social:hover {
    background: rgba(0, 121, 107, 0.86);
    box-shadow: 0 6px 18px rgba(0, 121, 107, 0.35);
}

.fab-social-icon {
    display: flex;
    font-size: 24px;
    line-height: 1;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    transform: translateY(0);
}

.fab-social-badge {
    position: absolute;
    top: -4px;
    right: -2px;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    border: 2px solid #fff;
}

.fab-social.has-unread {
    animation: socialPulseGlow 1.7s ease-in-out infinite;
}

@keyframes socialPulseGlow {
    0% { box-shadow: 0 0 0 0 rgba(0, 121, 107, 0.52), 0 6px 16px rgba(0, 121, 107, 0.26); }
    70% { box-shadow: 0 0 0 14px rgba(0, 121, 107, 0), 0 8px 18px rgba(0, 121, 107, 0.34); }
    100% { box-shadow: 0 0 0 0 rgba(0, 121, 107, 0), 0 6px 16px rgba(0, 121, 107, 0.26); }
}

.social-action-panel {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    width: min(340px, calc(100vw - 28px));
    max-height: 68vh;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid rgba(0, 121, 107, 0.25);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    padding: 12px;
}

@media (max-width: 768px) {
    .social-action-panel {
        right: 14px;
        left: 14px;
        width: auto;
        top: 50%;
        transform: translateY(-50%);
        max-height: 64vh;
    }
}

.social-action-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.social-action-close-btn {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.social-action-choices {
    display: grid;
    gap: 8px;
}

.social-action-form {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

.social-action-form textarea,
.social-action-form input,
.social-action-form select {
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    padding: 8px;
    font-size: 0.9rem;
}

.social-action-form-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .social-action-panel {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - 24px);
        box-sizing: border-box;
    }

    .social-action-form-buttons {
        flex-direction: column;
    }

    .social-action-form-buttons .btn {
        width: 100%;
    }
}

.social-inbox {
    margin-top: 12px;
    display: grid;
    gap: 8px;
}

.social-inbox-item {
    border: 1px solid #dce8ea;
    border-left: 4px solid #00796b;
    border-radius: 8px;
    padding: 10px;
    background: #fff;
}

.social-inbox-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 4px;
}

.social-inbox-item-meta {
    font-size: 0.82rem;
    color: #546e7a;
}

.social-response-summary {
    margin-top: 0.45rem;
    display: flex;
    gap: 0.8rem;
    font-size: 0.78rem;
    color: #4f6470;
}

.social-response-buttons {
    margin-top: 0.5rem;
    display: grid;
    gap: 0.45rem;
}

.social-response-participants {
    margin-top: 0.55rem;
    margin-bottom: 0.6rem;
    border: 1px solid #d8e7eb;
    border-radius: 8px;
    background: #f8fcfd;
    padding: 0.45rem 0.55rem;
}

.social-response-participants-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: #45606e;
    margin-bottom: 0.35rem;
}

.social-response-participants-empty {
    font-size: 0.8rem;
    color: #6f8792;
}

.social-response-participant-row {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    font-size: 0.82rem;
    padding: 0.18rem 0;
    margin-bottom: 0.18rem;
}

.social-response-participant-row:last-child {
    margin-bottom: 0;
}

.social-response-participant-name {
    font-weight: 600;
    color: #2f4858;
}

.social-response-participant-type {
    color: #4f6470;
}

.social-respond-btn {
    font-size: 0.86rem;
    padding: 0.45rem 0.6rem;
}

.social-respond-btn.active {
    border: 1px solid rgba(0, 121, 107, 0.55);
    background: rgba(0, 121, 107, 0.16);
    color: #004d40;
}

.social-respond-ignore {
    border-color: rgba(120, 144, 156, 0.45);
    color: #455a64;
}

.social-respond-ignore:hover {
    background: rgba(120, 144, 156, 0.16);
}

.social-inbox-kind-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.25;
    border-radius: 999px;
    padding: 0.22rem 0.58rem;
    background: rgba(0, 121, 107, 0.12);
    color: #00695c;
    border: 1px solid rgba(0, 121, 107, 0.24);
}

.social-inbox-item.kind-plan {
    border-left-color: #00897b;
    background: linear-gradient(180deg, #f4fbfb 0%, #ffffff 100%);
}

.social-inbox-item.kind-plan .social-inbox-kind-pill {
    background: rgba(0, 137, 123, 0.14);
    border-color: rgba(0, 137, 123, 0.26);
    color: #00695c;
}

.social-inbox-item.kind-help {
    border-left-color: #ef5350;
}

.social-inbox-item.kind-help .social-inbox-kind-pill {
    background: rgba(239, 83, 80, 0.14);
    border-color: rgba(239, 83, 80, 0.3);
    color: #b71c1c;
}

.social-inbox-item.kind-free {
    border-left-color: #5c6bc0;
}

.social-inbox-item.kind-free .social-inbox-kind-pill {
    background: rgba(92, 107, 192, 0.14);
    border-color: rgba(92, 107, 192, 0.3);
    color: #303f9f;
}

.social-action-feedback {
    margin-top: 10px;
    padding: 8px;
    border-radius: 8px;
    font-size: 0.9rem;
    background: #e8f5e9;
    color: #1b5e20;
}

.social-action-feedback.error {
    background: #ffebee;
    color: #b71c1c;
}

/* --------------------------
   Freunde-Seite
--------------------------- */
.friends-page {
    max-width: 980px;
    display: grid;
    row-gap: 1rem;
}

.friends-page-intro {
    color: #607d8b;
    margin-bottom: 0.75rem;
}

.friends-feedback {
    margin: 0.75rem 0 1rem;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    background: #e8f5e9;
    color: #1b5e20;
}

.friends-feedback.error {
    background: #ffebee;
    color: #b71c1c;
}

.friends-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.friends-card {
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 121, 107, 0.18);
    border-radius: 10px;
    padding: 1.15rem 1rem;
    margin-bottom: 1rem;
}

.friends-card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.friends-search-form {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.friends-search-form input {
    flex: 1;
    padding: 0.6rem;
    border: 1px solid #cfd8dc;
    border-radius: 8px;
    min-width: 160px;
}

.friends-list {
    display: grid;
    gap: 0.55rem;
}

#friends-search-results {
    padding: 0.35rem 0.15rem 0.2rem;
}

.friends-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.65rem 0.75rem;
    border-radius: 8px;
    background: #f6fbfc;
    border: 1px solid #e2edf0;
}

.friend-level-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    padding: 0.16rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: rgba(0, 121, 107, 0.14);
    border: 1px solid rgba(0, 121, 107, 0.28);
    color: #00695c;
}

.friends-empty {
    color: #607d8b;
    font-size: 0.92rem;
}

.friends-muted {
    color: #78909c;
    font-size: 0.9rem;
}

@media (max-width: 900px) {
    .friends-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .friends-page {
        padding-left: 0.35rem;
        padding-right: 0.35rem;
    }

    .friends-card {
        padding: 1rem 0.85rem;
        border-radius: 9px;
        margin-bottom: 1rem;
    }

    .friends-columns {
        row-gap: 1rem;
    }

    .friends-card h2 {
        font-size: 1rem;
        margin-bottom: 0.6rem;
    }

    .friends-search-form {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .friends-search-form input,
    .friends-search-form button {
        width: 100%;
        min-width: 0;
    }

    .friends-item {
        flex-direction: column;
        align-items: stretch;
        gap: 0.45rem;
        padding: 0.6rem;
    }

    .friends-item .btn,
    .friends-item button {
        width: 100%;
    }
}

.fab.fab-stale {
    background: rgba(255, 193, 7, 0.8);
    border-color: rgba(255, 193, 7, 0.85);
    color: #3e2723;
    box-shadow: 0 0 0 rgba(255, 193, 7, 0.0), 0 6px 16px rgba(255, 193, 7, 0.4);
    animation: fabStaleGlow 1.8s ease-in-out infinite;
}

.fab.fab-stale:hover {
    background: rgba(255, 193, 7, 0.9);
    color: #2d1f1a;
}

@keyframes fabStaleGlow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 193, 7, 0.0), 0 6px 16px rgba(255, 193, 7, 0.35);
    }
    50% {
        box-shadow: 0 0 18px rgba(255, 193, 7, 0.95), 0 0 34px rgba(255, 193, 7, 0.55), 0 8px 20px rgba(255, 193, 7, 0.6);
    }
}

@media (min-width: 769px) {
    .fab {
        align-items: center;
        font-size: 0;
    }
    
    .fab::before {
        content: '+';
        display: block;
        font-size: 32px;
        font-weight: bold;
        color: white;
        line-height: 1;
        transform: translateY(-1px);
    }

    .fab-social::before {
        content: '';
        display: none;
    }
}

/* --------------------------
   Footer Impressum (unten auf jeder Seite)
--------------------------- */
.footer-impressum {
    text-align: center;
    padding: 1rem;
    margin-top: 2rem;
    font-size: 0.7rem;
    color: #78909c;
}

.footer-impressum a {
    color: #607d8b;
    text-decoration: none;
}

.footer-impressum a:hover {
    text-decoration: underline;
    color: #00796b;
}

.dark-mode .footer-impressum {
    color: #8d99a6;
}

.dark-mode .footer-impressum a {
    color: #9aa0a6;
}

.dark-mode .footer-impressum a:hover {
    color: #81c784;
}

/* --------------------------
   Navigation
--------------------------- */
header {
    background: rgba(178, 223, 219, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #004d40;
    position: fixed;
    top: 0;
    z-index: 10002; /* Höher als Dropdown, damit Header immer sichtbar bleibt */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 0;
    margin: 0;
    width: 100%;
    left: 0;
    right: 0;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.logo {
    font-size: 1.3rem;
    font-weight: bold;
    color: #00796b;
    text-decoration: none;
}

/* Hamburger Menu */
.nav-toggle-label {
    display: block;
    width: 25px;
    height: 20px;
    cursor: pointer;
    position: relative;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
    display: block;
    background-color: #004d40;
    height: 2px;
    width: 100%;
    border-radius: 2px;
    position: absolute;
    transition: all 0.3s;
}

.nav-toggle-label span {
    top: 50%;
    transform: translateY(-50%);
}

.nav-toggle-label span::before { top: -7px; content: ''; }
.nav-toggle-label span::after  { top: 7px; content: ''; }

.nav-links {
    list-style: none;
    display: none; /* default hidden */
    flex-direction: column;
    gap: 0.8rem;
    background: #b2dfdb;
    position: absolute;
    width: 100%;
    top: 50px;
    left: 0;
    padding: 0.8rem 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Toggled state per JS */
.nav-links.active {
    display: flex;
}

.nav-links li a {
    color: #004d40;
    text-decoration: none;
    font-weight: 500;
    padding: 0.4rem 0.8rem;
    display: block;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
}

.nav-friends-link {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
}

.nav-friends-badge {
    min-width: 1.25rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    align-items: center;
    justify-content: center;
    padding: 0 0.3rem;
    box-shadow: 0 0 0 2px rgba(178, 223, 219, 0.95);
}

.nav-friends-has-pending {
    background-color: rgba(211, 47, 47, 0.12) !important;
    animation: navFriendsAttention 1.7s ease-in-out infinite;
}

@keyframes navFriendsAttention {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(211, 47, 47, 0.18); }
    50% { box-shadow: inset 0 0 0 999px rgba(211, 47, 47, 0.07); }
}

/* Logout-Link speziell hervorheben */
.nav-links li a.logout-link {
    color: #d32f2f;
    font-weight: 600;
}

.nav-links li a.logout-link:hover {
    background-color: rgba(211, 47, 47, 0.15);
    color: #b71c1c;
}

.nav-links li a:hover,
.nav-links li a.active {
    background-color: rgba(0, 121, 107, 0.2);
    color: #004d40;
}

.nav-links li a.active {
    background-color: rgba(0, 121, 107, 0.3);
}

/* Dropdown-Menü Styles */
.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.nav-dropdown-toggle .dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}

.nav-dropdown.active .nav-dropdown-toggle .dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    list-style: none;
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    background: #b2dfdb;
    padding: 0.5rem 0;
    margin-top: 0.3rem;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    min-width: 150px;
    border: 1px solid rgba(0, 121, 107, 0.15);
}

.nav-dropdown.active .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu li a {
    padding: 0.5rem 1rem;
    color: #004d40;
    text-decoration: none;
    font-weight: 500;
    display: block;
    border-radius: 0;
    transition: background-color 0.3s, color 0.3s;
}

.nav-dropdown-menu li a:hover {
    background-color: rgba(0, 121, 107, 0.2);
    color: #004d40;
}

/* Desktop Styles */
@media screen and (min-width: 1024px) {
    .nav-toggle-label { display: none; }
    .nav-links {
        display: flex;
        flex-direction: row;
        gap: 1.5rem;
        position: static;
        background: none;
        width: auto;
        padding: 0;
        box-shadow: none;
    }
    .dark-mode .nav-links {
        background: none;
    }
    
    .nav-dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 0.5rem;
        z-index: 10001;
        min-width: 180px;
    }
}

/* Mobile first: im aufklappbaren Menü klar sichtbar */
@media (max-width: 768px) {
    .nav-links li a.nav-friends-link {
        justify-content: space-between;
        width: calc(100% - 1.6rem);
        margin: 0 auto;
    }

    .nav-links li a.nav-friends-has-pending {
        border: 1px solid rgba(211, 47, 47, 0.3);
        border-radius: 8px;
    }
}

/* --------------------------
   Main / Card Sections
--------------------------- */
main {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 1rem;
    padding-top: calc(1.5rem + 60px); /* Platz für fixierte Navbar */
    min-height: calc(100vh - 50px);
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.welcome, .overview, .log-section, .stats, .settings, .log-container {
    text-align: center;
    max-width: 800px;
    background: linear-gradient(145deg, #9dd5d0 0%, #8dc7c2 100%);
    padding: 1.5rem;
    border-radius: 18px;
    border: 1px solid rgba(0, 121, 107, 0.15);
    box-shadow: 0 2px 8px rgba(0, 77, 64, 0.08),
                0 12px 32px rgba(0, 121, 107, 0.12),
                inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease,
                border-color 0.2s ease;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.log-container {
    padding-top: 0.525rem;
    padding-bottom: 0.525rem;
}

.welcome:hover, .overview:hover, .log-section:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 77, 64, 0.12),
                0 20px 48px rgba(0, 121, 107, 0.15);
    border-color: rgba(0, 121, 107, 0.2);
}

.welcome h1, .overview h1, .log-container h1 {
    font-size: 1.7rem;
    margin-bottom: 0.4rem;
    color: #004d40;
}

.log-container h2 {
    margin-bottom: 1rem;
    color: #004d40;
}

.welcome p, .overview p, .log-container p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
}

/* --------------------------
   Buttons (Glassmorphism)
--------------------------- */
.btn, .btn-primary, .btn-secondary {
    text-decoration: none;
    background: rgba(0, 121, 107, 0.5);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #004d40;
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
    border: 1px solid rgba(0, 121, 107, 0.2);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 121, 107, 0.08);
}

.btn:hover, .btn-primary:hover {
    background: rgba(0, 121, 107, 0.65);
    color: #fff;
    border-color: rgba(0, 121, 107, 0.3);
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 121, 107, 0.15);
}

.btn-primary {
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}

.btn-secondary {
    background: rgba(178, 223, 219, 0.5);
    color: #004d40;
    border-color: rgba(128, 203, 196, 0.25);
    padding: 0.7rem 1.5rem;
    font-size: 1rem;
}

.btn-secondary:hover {
    background: rgba(128, 203, 196, 0.7);
    color: #004d40;
    border-color: rgba(128, 203, 196, 0.35);
    transform: scale(1.02);
}

/* Ja/Nein Buttons für Medical und Activity */
.yes-no-buttons {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.btn-yes-no {
    flex: 1;
    padding: 0.35rem 0.5rem;
    border: 1px solid rgba(0, 121, 107, 0.3);
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #00796b;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.3s ease;
    min-height: 2rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-yes-no:hover {
    background: rgba(178, 223, 219, 0.5);
    border-color: rgba(0, 121, 107, 0.4);
}

.btn-yes-no.active {
    background: rgba(0, 121, 107, 0.55);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: white;
    border-color: rgba(0, 121, 107, 0.35);
}

.btn-yes-no.active:hover {
    background: rgba(0, 121, 107, 0.7);
    border-color: rgba(0, 121, 107, 0.4);
}

/* Grüne Hervorhebung für "Etwas unternommen" (activity = 1) */
.activity-positive {
    background-color: #c8e6c9;
    padding: 0.5rem;
    border-radius: 5px;
    border-left: 4px solid #4caf50;
    font-weight: 500;
}

.activity-positive input {
    background-color: #e8f5e9;
    border-color: #4caf50;
}

/* Button-Gruppen (Zurück + Weiter) */
.button-group {
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-top: 1.5rem;
}

/* Edit-Button in Details */
.btn-edit {
    background: rgba(255, 152, 0, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e65100;
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    border: 1px solid rgba(255, 152, 0, 0.25);
    cursor: pointer;
    margin-top: 1rem;
    transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-edit:hover {
    background: rgba(255, 152, 0, 0.6);
    color: #fff;
    border-color: rgba(255, 152, 0, 0.35);
    transform: scale(1.02);
}

/* Edit-Modus */
.edit-mode {
    background-color: #fff9e6;
    border: 2px solid #ff9800;
    border-radius: 10px;
    padding: 0.8rem;
    max-height: 70vh;
    overflow-y: auto;
}

.edit-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #ff9800;
}

.edit-header h3 {
    margin: 0 0 0.3rem 0;
    color: #ff9800;
    font-size: 1rem;
}

.edit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}

.edit-field {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.edit-field label {
    font-weight: 600;
    font-size: 0.75rem;
    color: #004d40;
    margin: 0;
    line-height: 1.2;
}

.edit-field-full {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    margin-bottom: 0.8rem;
}

.edit-field-full label {
    font-weight: 600;
    font-size: 0.8rem;
    color: #004d40;
    margin: 0;
}

.edit-input, .edit-textarea, select.edit-input, select.edit-input-small {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #00796b;
    border-radius: 4px;
    font-size: 0.8rem;
    background-color: #fff;
    color: #004d40;
    text-align: center;
    min-height: 2rem;
    box-sizing: border-box;
}

.edit-textarea {
    resize: vertical;
    min-height: 50px;
    max-height: 120px;
}

.edit-input:focus, .edit-textarea:focus {
    outline: none;
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

/* Responsive: 3 Spalten auf mobilen Geräten, 2 auf sehr kleinen */

.edit-buttons {
    display: flex;
    gap: 0.8rem;
    margin-top: 1rem;
    justify-content: flex-end;
}

.btn-save {
    background: rgba(76, 175, 80, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #2e7d32;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(76, 175, 80, 0.25);
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-save:hover {
    background: rgba(76, 175, 80, 0.65);
    color: #fff;
    border-color: rgba(76, 175, 80, 0.35);
    transform: scale(1.02);
}

.btn-cancel {
    background: rgba(244, 67, 54, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #c62828;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid rgba(244, 67, 54, 0.2);
    cursor: pointer;
    transition: background 0.25s, transform 0.2s, box-shadow 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-cancel:hover {
    background: rgba(244, 67, 54, 0.55);
    color: #fff;
    border-color: rgba(244, 67, 54, 0.3);
    transform: scale(1.02);
}

/* --------------------------
   Formulare
--------------------------- */
.form-group {
    margin-bottom: 1.25rem;
    text-align: left;
}

/* Log-Container: Formularfelder zentrieren (Titel, Button etc. sind bereits zentriert) */
.log-container .form-group {
    text-align: center;
}

label {
    display: block;
    font-weight: 600;
    color: #004d40;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
}

input[type="date"],
input[type="text"],
input[type="password"],
select,
input[type="number"],
textarea {
    width: 100%;
    padding: 0.6rem;
    border-radius: 10px;
    border: 1px solid #00796b;
    font-size: 0.95rem;
    background-color: #fff;
    color: #004d40;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    text-align: center;
}

/* Datumsfeld zentrieren - speziell für log-step (Basis für alle Viewports) */
/* direction: rtl = Workaround für Chrome Android: Layout-Inhalt zentriert statt links */
#log-date {
    position: relative;
    direction: rtl;
    text-align: center !important;
    text-align-last: center !important;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

/* Datum DD.MM.YYYY lesbar halten (LTR) */
#log-date::-webkit-date-and-time-value,
#log-date::-webkit-datetime-edit,
#log-date::-webkit-datetime-edit-fields-wrapper,
#log-date::-webkit-datetime-edit-text,
#log-date::-webkit-datetime-edit-month-field,
#log-date::-webkit-datetime-edit-day-field,
#log-date::-webkit-datetime-edit-year-field {
    direction: ltr !important;
}

/* Kalender-Icon ausblenden – gesamtes Feld bleibt klickbar für Datepicker */
#log-date::-webkit-calendar-picker-indicator {
    position: absolute !important;
    right: 0;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* iOS Safari + Android Chrome: Datumstext zentrieren */
#log-date::-webkit-date-and-time-value {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* Android/Chrome: Container und Felder zentrieren */
#log-date::-webkit-datetime-edit {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    flex: 1 1 0 !important;
}

#log-date::-webkit-datetime-edit-fields-wrapper {
    display: flex !important;
    justify-content: center !important;
    flex: 1 !important;
    min-width: 0 !important;
}

#log-date::-webkit-datetime-edit-text,
#log-date::-webkit-datetime-edit-month-field,
#log-date::-webkit-datetime-edit-day-field,
#log-date::-webkit-datetime-edit-year-field {
    text-align: center !important;
}

/* Mobile: Datum zentrieren auch nach Auswahl */

/* Passwort-Eingabefelder: Punkte zentrieren */
input[type="password"] {
    letter-spacing: 0.2em;
    font-family: 'Courier New', monospace;
}

input[type="number"] {
    text-align: center;
    padding: 0.75rem;
}

textarea {
    resize: vertical;
    min-height: 100px;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,121,107,0.3);
    transform: translateY(-2px);
}

/* --------------------------
   Settings / Checkboxes
--------------------------- */
.settings-group {
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.55);
    border-radius: 14px;
    border: 1px solid rgba(0, 121, 107, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.settings-group h3 {
    margin-bottom: 1rem;
    color: #00796b;
    font-size: 1.1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    margin-bottom: 0.4rem;
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    border-radius: 10px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.checkbox-label:hover {
    background-color: rgba(0, 121, 107, 0.07);
}

.checkbox-label:active {
    transform: scale(0.99);
}

/* Custom Checkbox Styling */
.checkbox-label input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid #b0bec5;
    border-radius: 6px;
    margin-right: 0.75rem;
    cursor: pointer;
    position: relative;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(255, 255, 255, 0.8);
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:hover {
    border-color: #00796b;
    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.08);
}

.checkbox-label input[type="checkbox"]:checked {
    background: #00796b;
    border-color: #00796b;
    box-shadow: 0 1px 4px rgba(0, 121, 107, 0.3);
}

.checkbox-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
    animation: checkPop 0.2s ease-out;
}

@keyframes checkPop {
    0% { transform: rotate(45deg) scale(0); }
    60% { transform: rotate(45deg) scale(1.15); }
    100% { transform: rotate(45deg) scale(1); }
}

.checkbox-label input[type="checkbox"]:focus-visible {
    outline: 2px solid rgba(0, 121, 107, 0.4);
    outline-offset: 2px;
}

.checkbox-label input[type="checkbox"]:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.checkbox-label input[type="checkbox"]:disabled + span {
    opacity: 0.5;
}

.checkbox-label span {
    font-weight: 500;
    color: #37474f;
    user-select: none;
    font-size: 0.93rem;
    line-height: 1.4;
}

/* Settings Seite: alle Checkbox-Texte linksbündig und konsistent */
.settings-page .checkbox-label {
    align-items: center;
    gap: 0.5rem;
}

.settings-page .checkbox-label span,
.settings-page .checkbox-label small {
    text-align: left;
    display: block;
    width: 100%;
    margin-left: 0;
}

/* Toggle Switch */
.toggle-switch-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0.75rem 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
    transition: background-color 0.2s ease;
}

.toggle-switch-label:hover {
    background-color: rgba(0, 121, 107, 0.07);
}

.toggle-switch-label .toggle-text {
    font-weight: 500;
    color: #37474f;
    user-select: none;
    font-size: 0.95rem;
}

.toggle-switch {
    position: relative;
    width: 48px;
    height: 26px;
    flex-shrink: 0;
    margin-left: 1rem;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cfd8dc;
    border-radius: 26px;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s;
}

.toggle-slider::before {
    content: '';
    position: absolute;
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked + .toggle-slider {
    background: #00796b;
    box-shadow: 0 1px 4px rgba(0, 121, 107, 0.3);
}

.toggle-switch input:checked + .toggle-slider::before {
    transform: translateX(22px);
}

.toggle-switch input:focus-visible + .toggle-slider {
    outline: 2px solid rgba(0, 121, 107, 0.4);
    outline-offset: 2px;
}

.toggle-description {
    font-size: 0.83rem;
    color: #78909c;
    margin-top: 0.15rem;
    margin-left: 1rem;
    margin-bottom: 0.75rem;
    line-height: 1.4;
}

/* --------------------------
   Settings Page - Categories
--------------------------- */
.settings-category {
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 121, 107, 0.12);
    border-radius: 16px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.settings-category:hover {
    box-shadow: 0 2px 12px rgba(0, 77, 64, 0.06);
}

/* Nur Einstellungen: medizinisch.html nutzt dieselbe Klasse mit eigenem (dunklem) Header */
.settings-category .category-header {
    background: rgba(255, 255, 255, 0.45);
    color: #004d40;
    padding: 1rem 1.25rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background 0.25s ease;
    border-left: 4px solid #00796b;
}

.settings-category .category-header:hover {
    background: rgba(255, 255, 255, 0.65);
}

.settings-category .category-header.premium {
    border-left-color: #ff9800;
}

.settings-category .category-header.premium:hover {
    background: rgba(255, 152, 0, 0.06);
}

.settings-category .category-header.userdata {
    border-left-color: #2196F3;
}

.settings-category .category-header.userdata:hover {
    background: rgba(33, 150, 243, 0.06);
}

/* Werte zusammenführen - Tabs */
.merge-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}
.merge-tab {
    padding: 0.5rem 1.15rem;
    border: 1.5px solid rgba(0, 121, 107, 0.15);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.93rem;
    font-weight: 500;
    transition: all 0.2s ease;
}
.merge-tab:hover {
    background: rgba(0, 121, 107, 0.06);
    border-color: rgba(0, 121, 107, 0.25);
}
.merge-tab.active {
    background: #00796b;
    color: white;
    border-color: #00796b;
    box-shadow: 0 2px 8px rgba(0, 121, 107, 0.25);
}
.merge-panel {
    display: none;
    padding: 0.5rem 0;
}
.merge-panel.active {
    display: block;
}
.merge-message {
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.settings-category .category-header h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    flex: 1;
    text-align: left;
}

.toggle-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 1.2rem;
}

.toggle-icon.open {
    transform: rotate(180deg);
}

.settings-page .toggle-icon {
    font-size: 1.3rem;
    opacity: 0.45;
    margin-left: 0.5rem;
    font-weight: 300;
}

.settings-page .toggle-icon.open {
    transform: rotate(90deg);
    opacity: 0.7;
}

.category-content {
    padding: 0 1.5rem;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.62s cubic-bezier(0.22, 1, 0.36, 1),
                padding 0.45s ease,
                opacity 0.38s ease;
}

.category-content.open {
    /* Sehr grosszügiger Fallback; JS setzt nach der Animation max-height: none,
       damit der Accordion-Inhalt auf keinen Fall abgeschnitten wird. */
    max-height: 10000px;
    opacity: 1;
    padding: 1.25rem 1.5rem 2rem;
}

@media (max-width: 768px) {
    .category-content.open {
        padding: 1rem 1rem 3rem;
    }
}

.settings-group h4 {
    color: #00796b;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 121, 107, 0.1);
}

/* Premium-Features Grid Layout */
.premium-features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: start;
}

.premium-features-grid .checkbox-label {
    margin-bottom: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.8rem;
    row-gap: 0.3rem;
    align-items: center;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(0, 121, 107, 0.1);
    border-radius: 14px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.premium-features-grid .checkbox-label:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 77, 64, 0.08);
    border-color: rgba(0, 121, 107, 0.2);
    background: rgba(255, 255, 255, 0.7);
}

.premium-features-grid .checkbox-label input[type="checkbox"] {
    grid-row: 1 / 3;
    align-self: center;
    margin: 0;
    flex-shrink: 0;
}

.premium-features-grid .checkbox-label > span {
    grid-column: 2;
    width: 100%;
    font-weight: 600;
    color: #004d40;
    text-align: left;
    font-size: 0.93rem;
}

.premium-features-grid .checkbox-label small {
    grid-column: 2;
    margin: 0;
    display: block;
    width: 100%;
    text-align: left;
    color: #78909c;
    font-size: 0.82rem;
    line-height: 1.35;
}


/* Category Content Text Styles */
.category-content > p {
    font-size: 0.9rem;
    color: #607d8b;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.category-content hr {
    margin: 1.5rem 0;
    border: none;
    border-top: 1px solid rgba(0, 121, 107, 0.1);
}

.category-content h4.password-section {
    color: #00796b;
    margin-bottom: 1rem;
    text-transform: none;
    font-size: 1rem;
    letter-spacing: normal;
    border-bottom: none;
    padding-bottom: 0;
}

#change-password-btn {
    margin-top: 0.5rem;
}

#password-change-message {
    margin-top: 0.5rem;
}

#is_vacation-label {
    display: none;
    background: transparent !important;
    background-color: transparent !important;
}

#time-tracking-fields {
    margin-left: 1.5rem;
    margin-top: 0.5rem;
}

.settings-group p.dark-mode-description {
    display: none;
}

/* Formular-Felder Styling - .form-group ist bereits in Zeile 602 definiert */

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1.5px solid rgba(0, 121, 107, 0.15);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
    background: rgba(255, 255, 255, 0.7);
}

.form-input::placeholder {
    font-family: inherit;
    color: #90a4ae;
}

.form-input:focus {
    outline: none;
    border-color: #00796b;
    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.1);
    background: rgba(255, 255, 255, 0.9);
}

/* Settings: robuste Feld-Darstellung (kein abgeschnittener Inhalt) */
.settings-page .form-input,
.settings-page input[type="text"],
.settings-page input[type="password"],
.settings-page input[type="number"],
.settings-page select {
    box-sizing: border-box;
    min-height: 44px;
    line-height: 1.4;
    text-align: left;
}

/* Globale Passwort-Optik nicht auf Settings erzwingen */
.settings-page input[type="password"] {
    letter-spacing: normal;
    font-family: inherit;
}

/* Settings Save Button */
.settings-save-btn {
    width: 100%;
    padding: 0.85rem 1.5rem !important;
    font-size: 1rem !important;
    border-radius: 14px !important;
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
    transition: all 0.25s ease !important;
}

.settings-save-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 121, 107, 0.25) !important;
}

/* Settings Page Heading */
.settings-page > h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.2rem;
}

/* Dark Mode Override für Premium-Features */
:root.dark-mode .premium-features-grid .checkbox-label > span {
    color: var(--dark-text-primary, #e0e0e0) !important;
}

/* --------------------------
   Messages
--------------------------- */
/* Toast-Nachricht für Erfolgsmeldungen (fixed position) */
.toast-success-message {
    position: fixed;
    top: 80px;
    right: 1rem;
    z-index: 9999;
    background: #4caf50;
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    font-weight: 500;
    animation: slideInRight 0.3s ease-out;
    max-width: calc(100% - 2rem);
    word-wrap: break-word;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (min-width: 769px) {
    .toast-success-message {
        top: 20px;
        right: 20px;
        max-width: 400px;
    }
}


.dark-mode .toast-success-message {
    background: #4caf50;
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.success-message,
.error-message {
    margin-top: 0.8rem;
    margin-bottom: 1.25rem;
    padding: 0.75rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-align: center;
}

.success-message { 
    background: rgba(76,175,80,0.3); 
    color: #1b5e20; 
    border: 2px solid rgba(76,175,80,0.5);
    font-weight: 500;
}
.error-message { background: rgba(255,82,82,0.15); color: #b71c1c; }

.page-message {
    position: sticky;
    top: 60px;
    z-index: 10001; /* direkt unter dem Header (10002) */
    width: 100%;
    padding: 0.5rem 1rem;
    margin-top: calc(60px + 0.5rem); /* Abstand unter die fixe Navbar */
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    pointer-events: none;
}

#response-message {
    margin: 0 auto 0.4rem;
    width: 100%;
    max-width: 800px;
    display: block;
    opacity: 1;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Toast-Meldung für Settings-Seite - immer relativ zum Viewport */
/* Wichtig: Diese Regeln müssen alle anderen Positionierungsregeln überschreiben */
/* Positioniert unter dem Header (der fixed ist) für bessere Sichtbarkeit */
/* Berücksichtigt expandierende Accordions - Position bleibt immer gleich */
.settings-page #response-message.error-message,
.settings-page #response-message.success-message {
    position: fixed !important;
    top: 80px !important; /* Unter dem Header (Header ist ca. 50-60px hoch + etwas Abstand) */
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, 0) !important;
    z-index: 10001 !important; /* Höher als Header (10002) aber niedriger als Modals */
    width: auto !important;
    max-width: calc(100% - 2rem) !important;
    min-width: 280px;
    padding: 1.5rem 2rem !important;
    margin: 0 !important;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    word-wrap: break-word;
    display: block !important;
    animation: fadeInDownSettings 0.3s ease-out;
}

/* Allgemeine Toast-Meldung für andere Seiten */
#response-message.error-message,
#response-message.success-message {
    position: fixed !important;
    top: 20% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, 0) !important;
    z-index: 10001 !important;
    width: auto !important;
    max-width: calc(100% - 2rem) !important;
    min-width: 280px;
    padding: 1.5rem 2rem !important;
    margin: 0 !important;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
    word-wrap: break-word;
    display: block !important;
    animation: fadeInDown 0.3s ease-out;
}

/* Fade-in Animation von oben für Settings-Seite */
@keyframes fadeInDownSettings {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Fade-in Animation von oben für andere Seiten */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate(-50%, -20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* Spezifische Farben für Overlay-Fehlermeldungen */
#response-message.error-message {
    background: rgba(244, 67, 54, 0.95);
    color: white;
    border: none;
}

#response-message.success-message {
    background: rgba(76, 175, 80, 0.95);
    color: white;
    border: none;
}

/* Fade-out für Overlay-Meldungen - höhere Spezifität erforderlich */
.settings-page #response-message.error-message.fade-out,
.settings-page #response-message.success-message.fade-out,
#response-message.error-message.fade-out,
#response-message.success-message.fade-out {
    opacity: 0 !important;
    transform: translate(-50%, -30px) !important;
    pointer-events: none;
}

/* Mobile Optimierung */

/* Reduziere padding-top von main, wenn page-message vorhanden ist */
.page-message ~ main {
    padding-top: 0.4rem;
}

/* --------------------------
   Missing Dates Notification
--------------------------- */
/* --------------------------
   Einheitliche Info-Boxen
--------------------------- */
.info-box {
    display: none;
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem auto;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    max-width: 100%;
    box-sizing: border-box;
}

.info-box.show {
    display: block;
}

.info-box-message {
    margin: 1rem 0 1.5rem 0;
    line-height: 1.6;
}

.missing-dates-notification {
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 2px solid #ffc107;
}

.existing-entries-notification {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 2px solid #2196f3;
    padding: 1.2rem;
    border-radius: 12px;
}

.info-box h3 {
    margin: 0 0 0.8rem 0;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.missing-dates-notification h3 {
    color: #856404;
}

.existing-entries-notification h3 {
    color: #1565c0;
}

.missing-dates-notification .missing-dates-list {
    margin: 0.8rem 0 0 0;
    padding: 0;
    list-style: none;
}

.missing-dates-notification .missing-dates-list li {
    padding: 0.5rem 0.8rem;
    margin: 0.4rem 0;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    color: #856404;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-block;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    border-left: 3px solid #ffc107;
}

.info-box p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.missing-dates-notification p {
    color: #856404;
}

.existing-entries-notification p {
    color: #1565c0;
}

.existing-entries-notification #existing-entries-details {
    background: rgba(255, 255, 255, 0.7);
    border-radius: 8px;
    color: #1565c0;
    font-size: 0.9rem;
    text-align: left;
    border-left: 3px solid #2196f3;
    padding: 0.6rem 0.8rem;
    margin-top: 0.75rem;
}

.existing-entries-notification #existing-entries-details ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.existing-entries-notification #existing-entries-details li {
    margin: 0.3rem 0;
    color: #1565c0;
}

.existing-entries-notification button {
    margin-top: 0.5rem;
}

/* Abstand zum Log-Button auf log.html */
.log-action {
    margin-top: 1.25rem;
}

/* --------------------------
   Tables / Overview
--------------------------- */
.table-container {
    width: 100%;
    overflow: visible;
    margin-top: 1rem;
    background: #b2dfdb;
    padding: 1rem;
    border-radius: 15px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.table-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
    min-width: 300px;
}

.table-container th,
.table-container td {
    padding: 0.6rem 0.8rem;
    text-align: center;
    font-size: 0.9rem;
}

.table-container th {
    background-color: #00796b;
    color: #fff;
    font-weight: 600;
}

.table-container td {
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.table-container tr:nth-child(even) {
    background-color: rgba(0,0,0,0.03);
}

.table-container tr:hover td:not(.mood-cell) {
    background-color: rgba(0,121,107,0.1);
    transition: background-color 0.2s;
}

/* Stimmung farblich */
.entry-row { cursor: pointer; }
.mood-cell { text-align: center; font-weight: 600; vertical-align: middle; }
.stimmung-1 { background-color: #ff4d4d; color: #fff; }
.stimmung-2 { background-color: #ff6666; color: #fff; }
.stimmung-3 { background-color: #ff8080; color: #fff; }
.stimmung-4 { background-color: #ff9999; color: #000; }
.stimmung-5 { background-color: #ffcc80; color: #000; }
.stimmung-6 { background-color: #d4f07c; color: #000; }
.stimmung-7 { background-color: #a6e22e; color: #000; }
.stimmung-8 { background-color: #6ddc24; color: #fff; }
.stimmung-9 { background-color: #3fc825; color: #fff; }
.stimmung-10 { background-color: #2aa10f; color: #fff; }

/* Dark Mode: Stimmung nur als Rahmen einfärben */
.dark-mode .mood-cell {
    background: transparent !important;
    color: var(--dark-text-primary);
    border: 2px solid var(--dark-border);
}

.dark-mode .stimmung-1 { border-color: #ff4d4d; }
.dark-mode .stimmung-2 { border-color: #ff6666; }
.dark-mode .stimmung-3 { border-color: #ff8080; }
.dark-mode .stimmung-4 { border-color: #ff9999; }
.dark-mode .stimmung-5 { border-color: #ffcc80; }
.dark-mode .stimmung-6 { border-color: #d4f07c; }
.dark-mode .stimmung-7 { border-color: #a6e22e; }
.dark-mode .stimmung-8 { border-color: #6ddc24; }
.dark-mode .stimmung-9 { border-color: #3fc825; }
.dark-mode .stimmung-10 { border-color: #2aa10f; }

/* --------------------------
   Entry Details
--------------------------- */
.entry-details td {
    padding: 0.8rem 1rem;
    border-top: 1px solid #b2dfdb;
    background-color: #e6f2f2;
}

.entry-details .details-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;
}

.entry-details .details-container.show {
    max-height: 1000px;
    opacity: 1;
    padding: 0.5rem 0;
}

.entry-details .details-container p {
    margin: 0.25rem 0;
    text-align: left;
}

/* --------------------------
   Animations
--------------------------- */
.entry-details-content {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeSlideIn 0.8s forwards;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* --------------------------
   Month View (Monatsansicht)
--------------------------- */
.month-row {
    cursor: pointer;
    background: linear-gradient(135deg, #b2dfdb 0%, #80cbc4 100%);
    font-weight: bold;
    transition: background-color 0.3s;
}

.month-row:hover {
    background: linear-gradient(135deg, #80cbc4 0%, #4db6ac 100%);
}

/* Jahres-Zeile (für ältere Jahre) */
.year-row {
    cursor: pointer;
    background: linear-gradient(135deg, #90caf9 0%, #64b5f6 100%);
    font-weight: bold;
    transition: background-color 0.3s;
}

.year-row:hover {
    background: linear-gradient(135deg, #64b5f6 0%, #42a5f5 100%);
}

.year-details {
    display: none; /* Marker-Zeile, wird nicht angezeigt */
}

.year-month-row {
    background-color: #e3f2fd;
    transition: opacity 0.3s ease;
}

.month-details {
    background-color: #e0f2f1;
}

.month-details td {
    padding: 0;
    vertical-align: top;
}

.month-details-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.4s ease;
    padding: 0;
}

.month-details-container.show {
    max-height: 5000px;
    overflow: visible;
    opacity: 1;
    padding: 0.5rem;
    margin: 0.5rem 0;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

.month-details-container.show::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

/* Statistik-Zeile (immer sichtbar wenn Feature aktiviert) */
.month-stats-row {
    background-color: rgba(230, 247, 245, 0.5);
    border-left: 3px solid rgba(0, 121, 107, 0.4);
    cursor: pointer;
    transition: background-color 0.2s;
}

.month-stats-row:hover {
    background-color: rgba(230, 247, 245, 0.7);
}

.month-stats-row td {
    padding: 0.8rem 1rem;
}

.month-stats-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
    line-height: 1.6;
}

.stat-item-inline {
    display: inline-flex;
    align-items: center;
    font-size: 0.9rem;
    color: #004d40;
    font-weight: 500;
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    transition: none;
}

.stat-item-inline:not(:last-child)::after {
    content: ' • ';
    margin: 0 0.25rem;
    color: rgba(0, 121, 107, 0.5);
    font-weight: normal;
}

.stat-item-inline:hover {
    background: transparent;
}

.stat-item-inline .stat-label {
    color: #004d40;
}

/* Monats-Statistiken */
.month-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    border-left: 4px solid #00796b;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.stat-label {
    font-size: 0.8rem;
    color: #666;
    margin-bottom: 0.3rem;
}

.stat-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00796b;
}

/* Tage-Tabelle in Monatsansicht */
.days-table {
    overflow: hidden; /* verhindert horizontales Überlaufen beim Expandieren */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.days-table::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
    width: 0;
    height: 0;
}

.days-table table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 8px;
    table-layout: fixed;
    box-sizing: border-box;
}

.days-table th {
    background-color: #00796b;
    color: #fff;
    padding: 0.6rem;
    font-size: 0.85rem;
    text-align: center;
}

.days-table td {
    padding: 0.5rem;
    border-bottom: 1px solid #e0e0e0;
    font-size: 0.85rem;
}

.day-row {
    transition: background-color 0.2s;
    cursor: pointer;
}

.day-row:hover {
    background-color: rgba(0, 121, 107, 0.05);
}

/* Breitere erste Spalte (ca. +5%) für bessere Lesbarkeit */
.days-table th:nth-child(1),
.days-table td:nth-child(1) {
    width: 35%;
}

.days-table th:nth-child(2),
.days-table td:nth-child(2) {
    width: 28%;
}

/* Tag-Details beim Klick auf einen Tag */
.day-details {
    background-color: #f9f9f9;
}

.day-details-container {
    padding: 0.7rem;
    animation: fadeIn 0.3s ease-in;
}

.detail-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.28rem;
}

.detail-item {
    padding: 0.35rem;
    background: white;
    border-left: 3px solid #00796b;
    border-radius: 3px;
}

.detail-item.full-width {
    grid-column: 1 / -1;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Kompakte Edit-Buttons in Tage-Tabelle */
.btn-edit-small {
    background: rgba(255, 152, 0, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #e65100;
    padding: 0.3rem 0.6rem;
    border-radius: 5px;
    font-size: 0.85rem;
    border: 1px solid rgba(255, 152, 0, 0.25);
    cursor: pointer;
    transition: background 0.2s;
}

.btn-edit-small:hover {
    background: rgba(255, 152, 0, 0.6);
    color: #fff;
}

/* Inline-Edit in Tage-Tabelle */
.day-edit-container {
    padding: 0.8rem;
    background: #fff9e6;
    border: 2px solid #ff9800;
    border-radius: 8px;
}

.edit-grid-compact {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.edit-input-small, .edit-textarea-small {
    width: 100%;
    padding: 0.35rem 0.5rem;
    border: 1px solid #00796b;
    border-radius: 4px;
    font-size: 0.8rem;
    text-align: center;
    min-height: 2rem;
    box-sizing: border-box;
}

.edit-textarea-small {
    resize: vertical;
    min-height: 40px;
}

.edit-buttons-small {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.6rem;
}

.btn-save-small, .btn-cancel-small {
    padding: 0.4rem 0.8rem;
    border-radius: 5px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.2s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.btn-save-small {
    background: rgba(76, 175, 80, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.btn-save-small:hover {
    background: rgba(76, 175, 80, 0.65);
    color: #fff;
}

.btn-cancel-small {
    background: rgba(244, 67, 54, 0.3);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #c62828;
    border: 1px solid rgba(244, 67, 54, 0.2);
}

.btn-cancel-small:hover {
    background: rgba(244, 67, 54, 0.55);
    color: #fff;
}


/* --------------------------
   Utilities
--------------------------- */
.hidden { display: none; }

/* --------------------------
   Log-Step spezifische Styles
--------------------------- */
/* Notification Styles */
.missing-dates-notification {
    /* Als farbige Infobox darstellen (z.B. auf log-step.html) */
    background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
    border: 2px solid #ffc107;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.missing-dates-message {
    margin-bottom: 1.5rem;
}

.existing-entries-message {
    margin-bottom: 1rem;
}

.existing-entries-details {
    margin-bottom: 1rem;
    padding: 1rem;
    background: #f5f5f5;
    border-radius: 6px;
}

.existing-entries-buttons {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

.existing-entries-buttons button {
    flex: 1 1 0;
    min-width: 150px;
}

/* Form Group Hidden States */
.form-group-hidden {
    display: none;
}

/* Supplements Suggestions */
.supplements-suggestions {
    margin-bottom: 0.5rem;
    display: none;
}

.supplements-suggestions-label {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 0.5rem;
    display: block;
}

.supplements-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.supplements-checkboxes label {
    background: #f5f5f5;
}

/* Trash Drop Zone for Quick-Selection */
.trash-drop-zone {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    border: 2px dashed #ef5350;
    border-radius: 8px;
    background: rgba(239, 83, 80, 0.08);
    color: #ef5350;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
    user-select: none;
    -webkit-user-select: none;
}

.trash-drop-zone.visible {
    display: flex;
    animation: trashSlideIn 0.25s ease-out;
}

.trash-drop-zone.drag-over {
    background: rgba(239, 83, 80, 0.2);
    border-color: #d32f2f;
    transform: scale(1.04);
}

.trash-drop-zone .trash-icon {
    font-size: 1.3rem;
    transition: transform 0.2s;
}

.trash-drop-zone.drag-over .trash-icon {
    transform: scale(1.2);
}

@keyframes trashSlideIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Checkbox item in drag state (Schnellauswahl) */
#sport-type-checkboxes label,
#supplements-checkboxes label,
#friends-checkboxes label {
    transition: opacity 0.2s, transform 0.15s;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#sport-type-checkboxes label.long-press-active,
#supplements-checkboxes label.long-press-active,
#friends-checkboxes label.long-press-active {
    transform: scale(1.08);
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    z-index: 10;
    opacity: 0.85;
}

#sport-type-checkboxes label.dragging-item,
#supplements-checkboxes label.dragging-item,
#friends-checkboxes label.dragging-item {
    opacity: 0.4;
}

/* Drag ghost element */
.drag-ghost {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    padding: 0.35rem 0.7rem;
    background: #fff;
    border: 2px solid #ef5350;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #333;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* Dark mode */
.dark-mode .trash-drop-zone {
    border-color: #ef5350;
    background: rgba(239, 83, 80, 0.12);
    color: #ef9a9a;
}

.dark-mode .trash-drop-zone.drag-over {
    background: rgba(239, 83, 80, 0.25);
    border-color: #f44336;
}

.dark-mode .drag-ghost {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    border-color: #ef5350;
}

/* Add Field Button */
.btn-add-field {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(76, 175, 80, 0.4);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: 4px;
    cursor: pointer;
}

.btn-add-field:hover {
    background: rgba(76, 175, 80, 0.65);
    color: white;
}

/* Container für dynamische Felder (Dankbarkeit, Gute Tat, Gute Dinge) */
#gratitude-inputs-container,
#good-deed-inputs-container,
#good-things-inputs-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

#gratitude-inputs-container input,
#good-deed-inputs-container input,
#good-things-inputs-container input {
    margin-bottom: 0;
    margin-top: 0;
}

/* Abstand zwischen den Feldern wird durch gap im Container und margin-top in den Wrappern geregelt */

/* Existing Entry Details (dynamisch generiert) */
.existing-entry-details {
    font-size: 0.9rem;
}

.existing-entry-details ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

/* Dark Mode für Log-Step Styles */
.dark-mode .existing-entries-details {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark-mode .supplements-suggestions-label {
    color: var(--dark-text-secondary);
}

/* Dark Mode für Schnellauswahl-Checkboxen (Sportart, Supplemente, Freunde, Familie, Nikotin) */
.dark-mode .supplements-checkboxes label {
    background: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

.dark-mode .btn-add-field {
    background: rgba(76, 175, 80, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dark-mode .btn-add-field:hover {
    background: rgba(69, 160, 73, 0.95);
}
input[type="hidden"] { display: none; }

/* --------------------------
   Responsive Anpassungen
--------------------------- */


/* --------------------------
   Dashboard Container (Mobile First)
--------------------------- */
main.dashboard-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 600px;
    margin: 0 auto;
    padding: 0.5rem;
    padding-top: calc(0.5rem + 60px); /* Platz für fixierte Navbar */
}

.welcome-section,
.actions-section,
.mood-calendar-section,
.summary-section {
    width: 100%;
    padding: 1rem;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.welcome-section h1 {
    color: #004d40;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.welcome-section p {
    color: #666;
    font-size: 0.95rem;
}

/* Gamification: EXP, Level, Streak */
.gamification-container {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem 1.25rem 1rem;
    background: linear-gradient(145deg, #e0f7fa 0%, #b2dfdb 50%, #e0f2f1 100%);
    border: none;
    border-radius: 16px;
    box-shadow: 0 4px 15px rgba(0, 121, 107, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: visible;
}

.gamification-container::before {
    content: '';
    position: absolute;
    top: -30px;
    right: -30px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, rgba(0, 121, 107, 0.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.gamification-container.gamification-nav-to-fortschritt {
    cursor: pointer;
}

.gamification-container.gamification-nav-to-fortschritt:focus-visible {
    outline: 2px solid #00796b;
    outline-offset: 3px;
}

.dark-mode .gamification-container.gamification-nav-to-fortschritt:focus-visible {
    outline-color: #4db6ac;
}

/* Gamification: Ladeanimation (Skeleton) */
.gamification-container.gamification-loading-state {
    min-height: 120px;
}

.gamification-skeleton {
    animation: gamification-shimmer 1.5s ease-in-out infinite;
    background: linear-gradient(
        90deg,
        rgba(0, 121, 107, 0.08) 0%,
        rgba(0, 121, 107, 0.18) 50%,
        rgba(0, 121, 107, 0.08) 100%
    );
    background-size: 200% 100%;
    border-radius: 8px;
}

.gamification-skeleton-level {
    width: 100px;
    height: 36px;
    margin: 0 auto 1rem;
}

.gamification-skeleton-bar {
    width: 100%;
    height: 12px;
    margin-bottom: 0.5rem;
}

.gamification-skeleton-text {
    width: 80px;
    height: 16px;
    margin: 0 auto 0.5rem;
}

.gamification-skeleton-streak {
    width: 140px;
    height: 18px;
    margin: 0 auto;
}

@keyframes gamification-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.gamification-level {
    margin-bottom: 0.75rem;
    text-align: center;
}

/* Level-Badge */
.level-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    position: relative;
}

.level-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #00695c;
    opacity: 0.7;
}

.level-number {
    font-size: 1.6rem;
    font-weight: 800;
    color: #004d40;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.level-number.counting {
    animation: levelCountPulse 0.15s ease-out;
}

@keyframes levelCountPulse {
    0% { transform: scale(1.25); opacity: 0.6; }
    100% { transform: scale(1); opacity: 1; }
}

.gamification-progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 77, 64, 0.12);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.4rem;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.gamification-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00897b, #26a69a, #4db6ac);
    border-radius: 6px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 137, 123, 0.4);
}

.gamification-exp-text {
    font-size: 0.82rem;
    color: #004d40;
    font-weight: 600;
    margin-bottom: 0.6rem;
    text-align: center;
}

.gamification-streak {
    font-size: 0.88rem;
    color: #37474f;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0, 121, 107, 0.15);
}

.gamification-streak.streak-hot {
    color: #e65100;
}

.gamification-streak.streak-fire {
    color: #bf360c;
    font-weight: 600;
}

.streak-bonus {
    font-size: 0.75rem;
    color: #00796b;
    font-weight: 700;
    background: rgba(0, 121, 107, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
}

/* Gamification: Level-Up Overlay */
.gamification-levelup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.gamification-levelup-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

.gamification-levelup-content {
    text-align: center;
    background: white;
    padding: 2rem 3rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gamification-levelup-overlay.visible .gamification-levelup-content {
    transform: scale(1);
}

.levelup-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.levelup-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #004d40;
    margin-bottom: 0.25rem;
}

.levelup-level {
    font-size: 1.8rem;
    font-weight: 800;
    background: linear-gradient(135deg, #00796b, #26a69a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gamification: EXP-Toast */
.gamification-exp-toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #00796b, #004d40);
    color: white;
    padding: 0.6rem 1.5rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    box-shadow: 0 6px 20px rgba(0, 77, 64, 0.3);
    z-index: 99999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.gamification-exp-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Gamification: Badge-Freischaltungs-Overlay */
.gamification-badge-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
.gamification-badge-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.gamification-badge-content {
    text-align: center;
    background: linear-gradient(145deg, #fff8e1 0%, #ffecb3 100%);
    padding: 2rem 2.5rem;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.8);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.gamification-badge-overlay.visible .gamification-badge-content {
    transform: scale(1);
}
.badge-unlock-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}
.badge-unlock-title {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #8d6e00;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.badge-unlock-name {
    font-size: 1.5rem;
    font-weight: 800;
    color: #5d4037;
    margin-bottom: 0.25rem;
}
.badge-unlock-desc {
    font-size: 0.95rem;
    color: #6d4c41;
    margin-bottom: 0.75rem;
}
.badge-unlock-exp {
    display: inline-block;
    background: linear-gradient(135deg, #00796b, #004d40);
    color: #fff;
    font-weight: 700;
    padding: 0.3rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* Gamification: Badge-Grid (Fortschritt-Seite) */
.badge-year-selector {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.badge-year-selector label {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary, #212121);
}
.badge-year-selector select {
    padding: 0.45rem 0.8rem;
    border: 1px solid var(--border-color, #ccc);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--card-bg, #fff);
    color: var(--text-primary, #212121);
    cursor: pointer;
}
.badge-category-group {
    margin-bottom: 1.5rem;
}
.badge-category-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin: 0 0 0.6rem;
    padding-bottom: 0.35rem;
    border-bottom: 2px solid rgba(0, 121, 107, 0.2);
}
.badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.75rem;
}
.badge-card {
    position: relative;
    padding: 0.9rem 0.75rem;
    border-radius: 12px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid var(--border-color, #e0e0e0);
    background: var(--card-bg, #fff);
}
.badge-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.badge-card.unlocked:hover {
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.32);
}
.badge-card.unlocked {
    background: linear-gradient(160deg, #f1f8e9 0%, #dcedc8 45%, #c5e1a5 100%);
    border-color: #66bb6a;
    box-shadow: 0 2px 14px rgba(46, 125, 50, 0.22);
    animation: badgeCardEarnedIn 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.badge-card.unlocked .badge-card-title {
    color: #1b5e20;
    border-bottom: 2px solid rgba(46, 125, 50, 0.45);
    padding-bottom: 0.35rem;
    margin-bottom: 0.35rem;
}
.badge-card.locked {
    opacity: 0.72;
}
.badge-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.45rem;
    line-height: 1;
}
.badge-card-icon-earned {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(145deg, #43a047, #2e7d32);
    box-shadow: 0 2px 8px rgba(46, 125, 50, 0.45);
    animation: badgeIconPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
}
.badge-card-icon-pending {
    width: 2rem;
    height: 2rem;
    font-size: 1.25rem;
    color: #9e9e9e;
    font-weight: 300;
}
.badge-card-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary, #212121);
    margin-bottom: 0.15rem;
    line-height: 1.25;
}
@keyframes badgeCardEarnedIn {
    0% {
        opacity: 0.88;
        transform: translateY(6px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
@keyframes badgeIconPop {
    0% {
        transform: scale(0.5);
        opacity: 0.6;
    }
    70% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.badge-card-desc {
    font-size: 0.72rem;
    color: var(--text-secondary, #5f6368);
    margin-bottom: 0.5rem;
    line-height: 1.3;
}
.badge-card-progress {
    width: 100%;
    height: 6px;
    background: rgba(0, 0, 0, 0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.25rem;
}
.badge-card-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00897b, #26a69a);
    border-radius: 3px;
    transition: width 0.4s ease;
}
.badge-card.unlocked .badge-card-progress-fill {
    background: linear-gradient(90deg, #43a047, #66bb6a);
}
.badge-card-progress-text {
    font-size: 0.68rem;
    color: var(--text-secondary, #5f6368);
    font-weight: 600;
}
.badge-card-exp {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    color: #00796b;
    background: rgba(0, 121, 107, 0.1);
    padding: 0.1rem 0.45rem;
    border-radius: 8px;
    margin-top: 0.25rem;
}
.badge-card.unlocked .badge-card-exp {
    color: #2e7d32;
    background: rgba(46, 125, 50, 0.12);
}
.badge-unlocked-date {
    font-size: 0.62rem;
    color: #2e7d32;
    margin-top: 0.2rem;
    font-weight: 500;
}
.badge-summary {
    text-align: center;
    margin-bottom: 1.25rem;
    font-size: 0.9rem;
    color: var(--text-secondary, #5f6368);
}
.badge-summary strong {
    color: var(--text-primary, #212121);
}

@media (max-width: 400px) {
    .badge-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    .badge-card {
        padding: 0.7rem 0.5rem;
    }
}

/* Zufälliger Dankbarkeits-Eintrag */
.random-gratitude {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border-left: 4px solid #fbc02d;
    border-radius: 10px;
    box-shadow: 0 3px 8px rgba(251, 192, 45, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.random-gratitude:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 12px rgba(251, 192, 45, 0.3);
}

.gratitude-header {
    font-size: 1rem;
    font-weight: 600;
    color: #f57f17;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gratitude-content {
    font-size: 0.9rem;
    color: #5d4037;
    line-height: 1.4;
    margin-bottom: 0.35rem;
    font-style: italic;
    text-align: center;
}

.gratitude-date {
    font-size: 0.8rem;
    color: #8d6e63;
    font-weight: 500;
    text-align: right;
    opacity: 0.8;
}


/* --------------------------
   Stats-Seite (analog index.html)
--------------------------- */
.stats-page {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Der eigentliche „Karten“-Hintergrund für die Stats-Seite - überschreibt weißen Hintergrund */
.welcome-section.stats-page {
    background: #b2dfdb;
}

/* Dashboard-Container auf Stats-Seite grün machen */
main.dashboard-container .welcome-section.stats-page {
    background: #b2dfdb;
}

.stats-page #year-summary-table,
.stats-page #stats-container,
.stats-page #total-stats-section,
.stats-page #detailed-yearly-stats-section,
.stats-page #yearly-overview-section,
.stats-page #monthly-comparison-section,
.stats-page #weekday-stats-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
}

/* Einheitliches Karten-Design – modern, anspruchsvoll */
.stats-page .stat-card,
.stats-page .stat-card[style],
main.dashboard-container .stats-page .stat-card,
main.dashboard-container .stats-page .stat-card[style],
.stats-page #total-stats-section .stat-card,
.stats-page #total-stats-section .stat-card[style],
.stats-page #detailed-yearly-stats-section .stat-card,
.stats-page #detailed-yearly-stats-section .stat-card[style] {
    background: linear-gradient(145deg, #9dd5d0 0%, #8dc7c2 100%);
    border-radius: 16px;
    border: 1px solid rgba(0, 121, 107, 0.15);
    border-left: 4px solid #00796b;
    box-shadow: 0 2px 4px rgba(0, 77, 64, 0.08),
                0 8px 24px rgba(0, 121, 107, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
    text-align: center;
    padding: 20px;
    display: block;
    margin: 0 auto;
    width: 100%;
    max-width: 740px;
    box-sizing: border-box;
    backdrop-filter: blur(1px);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s ease;
}

/* Stat-Card Inhalte zentrieren (linke Spalte), Zahlen bleiben rechts */
.stats-page .stat-card > div:first-child {
    text-align: center;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stats-page .stat-card > div:first-child h3,
.stats-page .stat-card > div:first-child p {
    text-align: center;
    margin: 0.1rem 0;
}

/* Zahlenwerte rechtsbündig ausrichten */
.stats-page .stat-card p[id^="total-"],
.stats-page .stat-card p[id^="avg-"],
.stats-page .stat-card p[id^="yearly-"] {
    text-align: right !important;
    margin-left: auto;
    margin-right: 0;
    min-width: 60px;
    width: auto;
    display: block;
}

/* Gesamtstatistiken & Durchschnittswerte: Layout wieder als Flex,
   damit Zahl direkt rechts neben dem Text steht */
.stats-page #total-stats-section .stat-card,
.stats-page #total-stats-section .stat-card[style] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
    padding: 16px 20px;
    border-radius: 14px;
}

.stats-page #total-stats-section .stat-card > div:first-child {
    align-items: flex-start;
    text-align: left;
}

.stats-page #total-stats-section .stat-card > div:first-child h3,
.stats-page #total-stats-section .stat-card > div:first-child p {
    text-align: left;
}

.stats-page #total-stats-section .stat-card p[id^="total-"],
.stats-page #total-stats-section .stat-card p[id^="avg-"] {
    margin: 0;
    display: block;
    text-align: right !important;
    min-width: 70px;
}

/* Linke Textspalte (Titel/Beschreibung) zentriert halten */
.stats-page .stat-card > div:first-child {
    text-align: center;
    margin: 0 auto;
}
.stats-page .stat-card > div:first-child h3,
.stats-page .stat-card > div:first-child p {
    text-align: center;
}

/* Zahlenwerte rechtsbündig ausrichten */
.stats-page .stat-card p[id^="total-"],
.stats-page .stat-card p[id^="avg-"],
.stats-page .stat-card p[id^="yearly-"] {
    text-align: right !important;
    margin-left: auto;
    margin-right: 0;
    min-width: 60px;
    width: auto;
    display: block;
}

.stats-page .stat-card h3 {
    margin: 0;
    color: #004d40;
}

.stats-page .stat-card p {
    color: #004d40;
}

.stats-page h1,
.stats-page h2,
.stats-page h3 {
    color: #004d40;
}

.stats-page p {
    color: #004d40;
}

.stats-page #year-summary-table h2 {
    color: #004d40;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* (alte Tabellen-Styles entfernt – jetzt Card-basiert) */

/* --------------------------
   Stats-Seite: Alle Inline-Styles durch CSS ersetzen
--------------------------- */

/* Year Selector */
.stats-page .year-selector {
    margin: 20px 0;
    text-align: center;
}

.stats-page .year-selector label {
    display: block;
    margin-bottom: 8px;
    margin-right: 0;
}

/* Custom Dropdown für Jahr-Auswahl - Mobile First */
.stats-page .year-select-label {
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.stats-page .custom-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
    max-width: 200px;
}

.stats-page .dropdown-button {
    width: 100%;
    padding: 12px 16px;
    background: white;
    border: 2px solid #00796b;
    border-radius: 8px;
    font-size: 16px;
    color: #004d40;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s, border-color 0.2s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px; /* Mobile-First: Mindesthöhe für Touch-Ziele */
}

.stats-page .dropdown-button:hover,
.stats-page .dropdown-button:active {
    background-color: #f0f0f0;
    border-color: #004d40;
}

.stats-page .dropdown-display {
    flex: 1;
    text-align: center;
    font-weight: 500;
}

.stats-page .dropdown-arrow {
    position: absolute;
    right: 16px;
    font-size: 14px;
    color: #00796b;
    pointer-events: none;
}

.stats-page .dropdown-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #00796b;
    border-radius: 8px;
    margin-top: 4px;
    max-height: 250px;
    overflow-y: auto;
    z-index: 10000; /* Sehr hoch für mobile Geräte */
    list-style: none;
    padding: 4px 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    -webkit-overflow-scrolling: touch; /* Smooth scrolling auf iOS */
    transform: translateZ(0); /* Hardware-Beschleunigung für bessere Performance */
    will-change: transform; /* Optimierung für mobile Geräte */
    display: none !important; /* Standardmäßig versteckt - !important um alle anderen Regeln zu überschreiben */
}

/* Dropdown-Liste wenn geöffnet (wird per JavaScript gesetzt) */
.stats-page .dropdown-list[style*="display: block"] {
    display: block !important;
}

/* Mobile: Dropdown als fixed positionieren wenn nötig */

.stats-page .dropdown-item {
    padding: 14px 16px;
    cursor: pointer;
    color: #004d40;
    transition: background-color 0.2s;
    font-size: 16px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 44px; /* Mobile-First: Mindesthöhe für Touch-Ziele */
    display: flex;
    align-items: center;
    justify-content: center;
}

.stats-page .dropdown-item:hover,
.stats-page .dropdown-item:active {
    background-color: #b2dfdb;
}

.stats-page .dropdown-item:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.stats-page .dropdown-item:last-child {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

/* Desktop: Größere Breite */
@media (min-width: 768px) {
    .stats-page .custom-dropdown {
        max-width: 250px;
    }
    
    .stats-page .dropdown-button {
        padding: 10px 14px;
        min-height: 40px;
    }
    
    .stats-page .dropdown-item {
        padding: 12px 16px;
        min-height: 40px;
    }
}

/* Werte in Stat-Karten zentrieren (Totals, Ø, jährlich) */
.stats-page .stat-card p[id^="total-"],
.stats-page .stat-card p[id^="avg-"],
.stats-page .stat-card p[id^="yearly-"] {
    text-align: right !important;
    margin-left: auto;
    margin-right: 0;
    min-width: 60px;
    width: auto;
    display: block;
}

/* Textblöcke (flex:1) in den Karten mittig ausrichten */
.stats-page .total-stats-list .stat-card > div[style*="flex: 1"],
.stats-page #total-stats-section .stat-card > div[style*="flex: 1"],
.stats-page #detailed-yearly-stats-section .stat-card > div[style*="flex: 1"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.stats-page #year-select {
    padding: 8px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #00796b;
}

/* Year Summary Table */
.stats-page .year-summary-table {
    margin: 20px 0;
    text-align: center;
    width: 100%;
}

.stats-page .year-summary-table h2 {
    margin-bottom: 1rem;
    font-size: 1.3em;
    font-weight: 600;
    color: #004d40;
}

/* Year-Summary Card-Grid */
.year-summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
}

/* Auf Mobile: minmax(0,1fr) verhindert Overflow - Columns können schrumpfen */
@media screen and (max-width: 768px) {
    .year-summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
    /* Productivity-Cards (2 sichtbar): je 50% Breite, analog Desktop */
    .stats-page .productivity-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Activity-Cards (7 Stück): 4 Spalten = 4+3 Layout, verhindert Overflow */
    .stats-page .activity-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .mood-ratings-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.mood-ratings-cards,
.year-summary-cards {
    overflow: hidden;
    overflow-x: clip;
    max-width: 100%;
    width: 100%;
    min-width: 0;
}

.year-summary-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem 0.75rem;
    min-width: 0;
    overflow: hidden;
    border-radius: 14px;
    background: linear-gradient(145deg, rgba(230, 242, 239, 0.95) 0%, rgba(218, 235, 230, 0.92) 100%);
    border: 1px solid rgba(0, 121, 107, 0.15);
    box-shadow: 0 2px 8px rgba(0, 77, 64, 0.06),
                0 4px 16px rgba(0, 121, 107, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s ease,
                border-color 0.2s ease;
    min-height: 110px;
}

.year-summary-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 6px 20px rgba(0, 77, 64, 0.08),
                0 12px 32px rgba(0, 121, 107, 0.1);
    border-color: rgba(0, 121, 107, 0.25);
}

.year-summary-card-emoji {
    font-size: 1.75rem;
    margin-bottom: 0.3rem;
    line-height: 1;
    overflow: hidden;
    display: inline-block;
    overscroll-behavior: none;
    touch-action: pan-x; /* verhindert vertikales Scrollen beim Touch auf Emoji */
}

.year-summary-card-label {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #00796b;
    margin-bottom: 0.35rem;
    opacity: 0.9;
}

.year-summary-card-value {
    font-size: 1.2rem;
    font-weight: 700;
    color: #004d40;
    letter-spacing: 0.02em;
}

/* Klickbare Cards (Sport/Alkohol/Intimität) */
.stats-page .year-summary-clickable {
    cursor: pointer;
}

.stats-page .year-summary-clickable:hover {
    background: linear-gradient(135deg, rgba(0, 121, 107, 0.14) 0%, rgba(0, 77, 64, 0.08) 100%);
}

.stats-page .year-summary-clickable::after {
    content: '▾';
    font-size: 0.65rem;
    color: rgba(0, 121, 107, 0.5);
    margin-top: 0.25rem;
    font-weight: bold;
    letter-spacing: 0.02em;
}

/* Expandable Detail unterhalb der Cards – Style wie collapsible-header (Zeitverteilung) */
.stats-page .year-summary-expandable-row {
    margin-top: 0;
}

.stats-page .year-summary-expandable-row.year-summary-expandable-expanded {
    margin-top: 1rem;
}

/* Header ausblenden wenn eingeklappt */
.stats-page .year-summary-expandable-row.year-summary-expandable-collapsed .year-summary-expandable-header {
    display: none;
}

.stats-page .year-summary-expandable-row.year-summary-expandable-expanded .year-summary-expandable-header {
    display: flex;
    justify-content: center;
    margin-bottom: 0;
}

.stats-page .year-summary-expandable-header h2,
main.dashboard-container .stats-page .year-summary-expandable-header h2 {
    text-align: center !important;
    max-width: 100%;
    flex: none;
}

.stats-page .year-summary-expandable-wrapper {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.3s ease-out;
}

.stats-page .year-summary-expandable-row.year-summary-expandable-expanded .year-summary-expandable-wrapper,
.stats-page .year-summary-expandable-wrapper.collapsible-content.expanded {
    max-height: 3000px;
    transition: max-height 0.35s ease-in;
}

.stats-page .year-summary-expandable-content {
    padding: 1rem 1.25rem;
    margin-top: 0.75rem;
    background: rgba(0, 121, 107, 0.05);
    border-left: 3px solid #00796b;
    border-radius: 0 8px 8px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #004d40;
    text-align: left;
}

.stats-page .year-summary-expandable-content p {
    margin: 4px 0;
}

.stats-page .year-summary-expandable-content strong {
    color: #004d40;
}

/* Card-Gruppen für Produktivität & Activity */
.stats-page #productivity-summary-table {
    overflow-x: clip;
    max-width: 100%;
}

.stats-page .productivity-cards {
    margin-bottom: 0.5rem;
}

.stats-page .activity-cards {
    margin-top: 1rem;
}

/* Abstand zwischen den Haupt-Tabellen-Containern */
.stats-page #year-summary-table {
    margin-bottom: 20px !important;
}

/* Bewertungen (Stimmung) – modernes Card-Grid */
.stats-page .mood-ratings-table {
    margin-bottom: 24px;
    overflow-x: clip;
    max-width: 100%;
}
.stats-page #year-summary-table,
.stats-page #productivity-summary-table {
    overflow-x: clip;
    max-width: 100%;
}
.stats-page .summary-section {
    overflow-x: clip;
    max-width: 100%;
}
.stats-page .mood-ratings-table h2 {
    color: #004d40;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.stats-page .mood-ratings-caption {
    font-size: 0.8rem;
    color: #666;
    margin-top: 0.6rem;
    margin-bottom: 0;
    text-align: center;
}

/* Mood-Ratings Card-Grid */
.mood-ratings-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    max-width: 100%;
    overflow: visible; /* Karten nicht abschneiden (Hover-Effekt, Inhalt) */
}
.mood-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    min-width: 0; /* erlaubt Grid-Items zu schrumpfen, verhindert Overflow */
    overflow: visible; /* Karten nicht abschneiden */
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1),
                0 4px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s ease;
    min-height: 145px; /* Höher, damit Karten nicht abgeschnitten wirken */
}
.mood-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15),
                0 2px 8px rgba(0, 0, 0, 0.08);
}
.mood-card-emoji {
    font-size: 1.75rem;
    margin-bottom: 0.35rem;
    line-height: 1;
    overflow: hidden;
    display: inline-block;
    overscroll-behavior: none;
    touch-action: pan-x; /* verhindert vertikales Scrollen beim Touch auf Emoji */
}
.mood-card-label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.95;
    margin-bottom: 0.25rem;
}
.mood-card-value {
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Stimmungs-Bereiche: Farben – verfeinerte Gradienten mit Tiefe */
.stats-page .mood-card.mood-range-1-3 {
    background: linear-gradient(145deg, #ff7b7b 0%, #e85a5a 50%, #d94545 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(220, 53, 69, 0.2),
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
}
.stats-page .mood-card.mood-range-4-6 {
    background: linear-gradient(145deg, #ffc76e 0%, #ffb84d 50%, #f5a623 100%);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 8px rgba(255, 167, 38, 0.15),
                0 4px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #333;
}
.stats-page .mood-card.mood-range-7-9 {
    background: linear-gradient(145deg, #7acc7e 0%, #5cbb61 50%, #4aad50 100%);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.2),
                0 4px 16px rgba(0, 0, 0, 0.06),
                inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #fff;
}
.stats-page .mood-card.mood-range-10 {
    background: linear-gradient(145deg, #3d8b40 0%, #2e7d32 50%, #1b5e20 100%);
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 8px rgba(27, 94, 32, 0.25),
                0 4px 16px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: #fff;
}

@media screen and (max-width: 600px) {
    /* minmax(0,1fr) verhindert Overflow - Spalten können schrumpfen */
    .year-summary-cards {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
    /* Productivity-Cards: je 50% Breite auf Mobile */
    .stats-page .productivity-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    /* Mood-Table: auf kleinen Geräten kompakter (weniger Platz) */
    .stats-page .mood-ratings-table {
        min-height: unset;
        padding-bottom: 0.25rem;
        margin-bottom: 12px;
    }
    .stats-page .mood-ratings-table h2 {
        margin-bottom: 0.5rem;
        font-size: 1.05rem;
    }
    .mood-ratings-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0.5rem;
        min-height: 130px; /* Höhere Karten-Zeile auf Mobile */
    }
    .mood-card {
        padding: 0.9rem 0.4rem;
        min-height: 120px; /* Höhere Karten auf Mobile */
        min-width: 0;
    }
    .mood-card-emoji {
        font-size: 1.2rem;
    }
    .mood-card-label {
        font-size: 0.65rem;
    }
    .mood-card-value {
        font-size: 0.8rem;
    }
}

.stats-page #productivity-summary-table {
    margin-top: 0 !important;
}

/* Sehr kleine Screens */
@media screen and (max-width: 360px) {
    .year-summary-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.35rem;
    }
    /* Productivity-Cards: weiterhin 2 Spalten (50% je Karte) */
    .stats-page .productivity-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .year-summary-card {
        padding: 0.5rem 0.25rem;
        min-height: 60px;
    }
    .year-summary-card-emoji {
        font-size: 1rem;
        margin-bottom: 0.1rem;
    }
    .year-summary-card-label {
        font-size: 0.55rem;
    }
    .year-summary-card-value {
        font-size: 0.75rem;
    }
    .mood-ratings-cards {
        gap: 0.35rem;
        min-height: 100px;
    }
    .mood-card {
        padding: 0.7rem 0.25rem;
        min-height: 90px;
    }
    .mood-card-emoji {
        font-size: 1rem;
    }
    .mood-card-label {
        font-size: 0.55rem;
    }
    .mood-card-value {
        font-size: 0.7rem;
    }
}

/* Stats Container */
.stats-page .stats-container {
    display: grid;
    gap: 20px;
    margin-top: 30px;
}

.stats-page .total-stats-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    align-items: center;
    margin-bottom: 20px;
}

/* (alte Tabellen-Schriftgrößen entfernt – jetzt Card-basiert) */

/* Mobile-spezifische Anpassungen für Stats-Jahresübersicht - identisch mit Desktop */

/* Year Selector zentrieren */
.stats-page .year-selector {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.stats-page .year-selector label {
    text-align: center;
    display: block;
    margin-bottom: 8px;
}

/* Alle Inhalte in der Stats-Seite zentrieren - überschreibt ALLES */
main.dashboard-container .stats-page #stats-container,
main.dashboard-container .stats-page #stats-container *,
main.dashboard-container .stats-page #stats-container .stat-card,
main.dashboard-container .stats-page #stats-container .stat-card *,
main.dashboard-container .stats-page #stats-container .stat-card h2,
main.dashboard-container .stats-page #stats-container .stat-card p,
main.dashboard-container .stats-page #stats-container .stat-card div,
main.dashboard-container .stats-page #stats-container .stat-card span {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Auch alle Unter-Container in den Haupt-Statistik-Karten (Alkohol/Sport/Durchschnittswerte/Kater) zentrieren */
.stats-page #stats-container .stat-card,
.stats-page #stats-container .stat-card *,
.stats-page #stats-container .stat-card[style] *,
.stats-page #stats-container .stat-card h2,
.stats-page #stats-container .stat-card h2[style],
.stats-page #stats-container .stat-card p,
.stats-page #stats-container .stat-card p[style],
.stats-page #stats-container .stat-card div,
.stats-page #stats-container .stat-card div[style] {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* Innerhalb der Stats-Seite alles zentrieren - H2 in .collapsible-header ausgenommen (werden linksbündig) */
.stats-page *,
.stats-page h1,
.stats-page h3,
.stats-page p,
.stats-page label,
.stats-page span,
.stats-page div,
main.dashboard-container .stats-page *,
main.dashboard-container .stats-page h1,
main.dashboard-container .stats-page h3,
main.dashboard-container .stats-page p,
main.dashboard-container .stats-page label,
main.dashboard-container .stats-page .stat-card *,
main.dashboard-container .stats-page .stat-card h2,
main.dashboard-container .stats-page .stat-card h3,
main.dashboard-container .stats-page .stat-card p,
main.dashboard-container .stats-page .stat-card div,
main.dashboard-container .stats-page .stat-card span,
main.dashboard-container .stats-page #stats-container *,
main.dashboard-container .stats-page #detailed-yearly-stats-section * {
    text-align: center;
}

/* H2 außer in Collapsible-Headern zentrieren */
.stats-page h2,
main.dashboard-container .stats-page h2 {
    text-align: center;
}

/* H2 in Collapsible-Headern linksbündig (höhere Spezifität als Zentrier-Regel) */
.stats-page .collapsible-header h2,
main.dashboard-container .stats-page .collapsible-header h2 {
    text-align: left !important;
}

.quick-entry-section {
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (min-width: 769px) {
    .quick-entry-section {
        padding: 1.5rem;
    }
}

.quick-entry-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.quick-entry-section h2 {
    margin: 0;
    color: #004d40;
    font-size: 1.5rem;
    text-align: center;
}

.quick-entry-toggle {
    border: none;
    background: transparent;
    color: #004d40;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.quick-entry-toggle:hover {
    background: rgba(0, 77, 64, 0.06);
}

.missing-dates-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.missing-dates-toggle {
    border: none;
    background: transparent;
    color: #856404;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.missing-dates-toggle:hover {
    background: rgba(133, 100, 4, 0.08);
}

.quick-entry-content,
.missing-dates-content {
    transition: max-height 0.25s ease, opacity 0.2s ease;
    overflow: hidden;
}

.quick-entry-content.collapsed,
.missing-dates-content.collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.quick-entry-content:not(.collapsed),
.missing-dates-content:not(.collapsed) {
    max-height: 1000px; /* ausreichend groß für Inhalt */
    opacity: 1;
}

.quick-entry-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quick-entry-form .form-group {
    margin-bottom: 0;
}

.quick-entry-form .button-group {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.quick-entry-form .button-group .btn {
    flex: 1;
    min-width: 150px;
}


.actions-section {
    /* Optik analog zur quick-entry-section */
    background: white;
    border-radius: 12px;
    padding: 1rem;
    margin: 1rem 0;
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.actions-section .btn {
    display: inline-block;
    margin-top: 1rem;
}

/* --------------------------
   Monats-Summary
--------------------------- */
.summary-section {
    display: none; /* Wird per JavaScript angezeigt, wenn Daten geladen sind */
}

.summary-section h2 {
    color: #004d40;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-align: center;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    max-width: 600px;
    margin: 0 auto;
    overflow-x: clip;
    max-width: min(600px, 100%);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.7rem;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(230, 242, 239, 0.98) 0%, rgba(218, 235, 230, 0.96) 100%);
    border-radius: 14px;
    border: 1px solid rgba(0, 121, 107, 0.15);
    box-shadow: 0 2px 8px rgba(0, 77, 64, 0.06),
                0 4px 16px rgba(0, 121, 107, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    text-align: center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.25s ease,
                border-color 0.2s ease;
    overflow-y: hidden;
}

#summary-good-deed-item {
    display: none;
}

#summary-good-deed-item.show {
    display: flex;
}

.summary-item:hover {
    background: linear-gradient(145deg, rgba(238, 248, 246, 1) 0%, rgba(228, 242, 239, 0.98) 100%);
    box-shadow: 0 6px 20px rgba(0, 77, 64, 0.08),
                0 2px 8px rgba(0, 121, 107, 0.06);
    transform: translateY(-2px);
    border-color: rgba(0, 121, 107, 0.2);
}

.summary-label {
    color: #666;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Summary-Value: Einheitliche Schriftgröße für alle Zahlen */
.summary-value {
    font-size: 2rem;
    font-weight: bold;
    color: #00796b;
    display: inline-block;
    border: none !important;
    border-left: none !important;
    border-right: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.summary-value::before,
.summary-value::after {
    content: none !important;
    display: none !important;
}

.summary-icon {
    font-size: 1.8rem;
    margin-bottom: 0.25rem;
    overflow: hidden;
    display: inline-block;
    overscroll-behavior: none;
    touch-action: pan-x; /* verhindert vertikales Scrollen beim Touch auf Emoji */
}

.summary-caption {
    font-size: 0.75rem;
    color: #555;
    margin-top: 0.2rem;
}

/* Inline Styles aus index.html verschoben */
#random-gratitude {
    display: block;
}

#mood-calendar-section {
    display: none;
}

#mood-calendar-section.show {
    display: block;
}

#quick-value-select {
    display: none;
}

#quick-value-select.show {
    display: block;
}

#modal-edit-btn {
    display: none;
}

#modal-edit-btn.show {
    display: inline-block;
}

.modal-body-empty {
    text-align: center;
    padding: 20px;
    color: #666;
}

.modal-body-error {
    color: red;
}

.detail-section-buttons {
    text-align: right;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}


@media (max-width: 480px) {
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .summary-item {
        padding: 0.45rem;
    }
    
    .summary-icon {
        font-size: 1.5rem;
    }
    
    .summary-value {
        font-size: 1.6rem;
    }
    
    .summary-caption {
        font-size: 0.68rem;
    }
}

/* --------------------------
   Stimmungs-Kalender
--------------------------- */
.mood-calendar-section {
    padding: 1rem;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.calendar-header h3 {
    color: #004d40;
    font-size: 1.1rem;
    margin: 0;
}

.calendar-nav-btn {
    background: rgba(0, 121, 107, 0.45);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #004d40;
    border: 1px solid rgba(0, 121, 107, 0.2);
    padding: 0.3rem 0.7rem;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s;
    position: relative;
    min-width: 2rem;
    min-height: 2rem;
}

/* CSS-Pfeile für einheitliche Darstellung (auch auf iPhone ohne Emoji) */
.calendar-nav-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
}

#prev-month::before {
    border-width: 6px 8px 6px 0;
    border-color: transparent currentColor transparent transparent;
    transform: translate(-60%, -50%);
}

#next-month::before {
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent currentColor;
    transform: translate(-40%, -50%);
}

.calendar-nav-btn:hover {
    background: rgba(0, 121, 107, 0.65);
    color: white;
}

.mood-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 1rem;
    width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

.calendar-day {
    aspect-ratio: unset;
    min-height: 79px;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
    padding: 0.35rem;
    overflow: visible;
}

.calendar-day:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

.calendar-day-number {
    font-weight: bold;
    font-size: 0.85rem;
    margin-bottom: 0.1rem;
}

/* Roter Rahmen um das Datum bei Menstruation */
.calendar-day-number-menstruation {
    border: 2px solid #e53935;
    border-radius: 999px;
    padding: 0.05rem 0.3rem;
    background-color: rgba(229, 57, 53, 0.08);
}

.calendar-day-mood {
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    overflow: visible;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif;
    line-height: 1;
}

.calendar-additional-emojis {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    line-height: 1;
    text-align: center;
    width: 100%;
    overflow: visible;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif;
}

.calendar-additional-emojis span {
    display: inline;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    line-height: 1 !important;
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif !important;
    height: auto;
    overflow: visible;
}

.calendar-mood-emoji {
    font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif !important;
    line-height: 1 !important;
    display: inline-block;
    overflow: visible;
}


/* Wochentags-Header */
.calendar-weekday {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #004d40;
    font-size: 0.7rem;
}

/* Leere Tage (vor dem 1. des Monats) */
.calendar-empty {
    aspect-ratio: 1;
}

/* Stimmungs-Farben mit fließender Gradient-Animation */
@keyframes moodGradientFlow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Sanftes Pulsieren (Option 3) */
@keyframes moodPulse {
    0%, 100% { opacity: 1; filter: brightness(1); }
    50% { opacity: 0.94; filter: brightness(1.06); }
}

.calendar-day.excellent {
    background: linear-gradient(135deg, #4CAF50, #66BB6A, #4CAF50, #81C784);
    background-size: 200% 200%;
    animation: moodGradientFlow 6s ease infinite, moodPulse 4s ease-in-out infinite;
    color: white;
}

.calendar-day.good {
    background: linear-gradient(135deg, #689F38, #8BC34A, #9CCC65, #C5E1A5);
    background-size: 200% 200%;
    animation: moodGradientFlow 6s ease infinite, moodPulse 4s ease-in-out infinite;
    color: white;
}

.calendar-day.okay {
    background: linear-gradient(135deg, #FFC107, #FFD54F, #FFC107, #FFE082);
    background-size: 200% 200%;
    animation: moodGradientFlow 6s ease infinite, moodPulse 4s ease-in-out infinite;
    color: #333;
}

.calendar-day.poor {
    background: linear-gradient(135deg, #FF9800, #FFB74D, #FF9800, #FFCC80);
    background-size: 200% 200%;
    animation: moodGradientFlow 6s ease infinite, moodPulse 4s ease-in-out infinite;
    color: white;
}

.calendar-day.bad {
    background: linear-gradient(135deg, #F44336, #E57373, #F44336, #EF9A9A);
    background-size: 200% 200%;
    animation: moodGradientFlow 6s ease infinite, moodPulse 4s ease-in-out infinite;
    color: white;
}

.calendar-day.no-entry {
    background: #f5f5f5;
    color: #999;
    border: 2px dashed #ddd;
}

/* Legende */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    padding-top: 0.75rem;
    border-top: 1px solid #ddd;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.7rem;
}

.legend-color {
    width: 14px;
    height: 14px;
    border-radius: 3px;
}

.legend-color.excellent { background: linear-gradient(135deg, #4CAF50, #66BB6A); }
.legend-color.good { background: linear-gradient(135deg, #8BC34A, #9CCC65); }
.legend-color.okay { background: linear-gradient(135deg, #FFC107, #FFD54F); }
.legend-color.poor { background: linear-gradient(135deg, #FF9800, #FFB74D); }
.legend-color.bad { background: linear-gradient(135deg, #F44336, #E57373); }
.legend-color.no-entry { background: #f5f5f5; border: 2px dashed #ddd; }

/* Tooltip für Details */
.calendar-day-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 0.5rem;
    border-radius: 5px;
    font-size: 0.75rem;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    margin-bottom: 5px;
    z-index: 10;
}

.calendar-day:hover .calendar-day-tooltip {
    opacity: 1;
}

/* Desktop Anpassungen */
@media (min-width: 769px) {
    main.dashboard-container {
        padding: 2rem;
        padding-top: calc(2rem + 60px); /* Platz für fixierte Navbar */
        gap: 1.5rem;
        max-width: 800px;
    }

    .welcome-section h1 {
        font-size: 2rem;
    }

    .welcome-section p {
        font-size: 1.05rem;
    }

    .calendar-header h3 {
        font-size: 1.3rem;
    }

    .calendar-nav-btn {
        padding: 0.5rem 1rem;
        font-size: 1.1rem;
    }

    .mood-calendar {
        gap: 4px;
    }

    .calendar-day-number {
        font-size: 1rem;
    }

    .calendar-day-mood {
        font-size: 1.3rem;
    }

    .calendar-weekday {
        font-size: 0.85rem;
    }

    .legend-item {
        font-size: 0.85rem;
    }

    .legend-color {
        width: 16px;
        height: 16px;
    }
}

/* Mobile Optimierung (Standard) */

/* Modal für Tagesdetails */
.day-details-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    padding: 20px;
    animation: fadeIn 0.3s;
    overflow: hidden;
}

.day-details-modal.show {
    display: flex;
}

/* @keyframes fadeIn ist bereits definiert (Zeile 1664) */

.modal-content {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: slideIn 0.3s;
    position: relative;
}

@keyframes slideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid #ddd;
    background: linear-gradient(135deg, #00796b 0%, #004d40 100%);
    color: white;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.modal-close:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.modal-body {
    padding: 1.5rem;
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background-color: #f9f9f9;
    border-radius: 0 0 10px 10px;
    flex-shrink: 0;
}

.day-details-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.detail-section {
    padding: 1rem;
    background-color: #f9f9f9;
    border-radius: 8px;
    border-left: 4px solid #00796b;
}

.detail-section h3 {
    margin: 0 0 2.5rem 0;
    color: #00796b;
    font-size: 1.1rem;
}

.detail-section p {
    margin: 0.9rem 0;
    color: #333;
    line-height: 1.6;
}

/* Abstand zwischen Label und Eingabefeld, damit Fokus-Ring nicht mit Beschriftung überlappt */
.detail-section label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.detail-section strong {
    color: #004d40;
}

/* Modal-spezifische Button-Styles (überschreibt nicht die globalen Button-Styles) */
.modal-footer .btn-secondary {
    background-color: #6c757d;
    color: white;
}

.modal-footer .btn-secondary:hover {
    background-color: #5a6268;
}


/* ============================================
   KRITISCH: Summary-Value auf Mobile - HÖCHSTE PRIORITÄT
   Diese Regel muss am Ende stehen und überschreibt ALLES
   ============================================ */
/* ENTFERNT: Alle Regeln, die summary-value oder die IDs betreffen */

/* --------------------------
   Erweiterte Zeit-Balken-Statistik
--------------------------- */
#advanced-time-bar-section {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#time-bar-container {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

#time-bar-visualization {
    width: 100%;
    min-height: 60px;
    position: relative;
}


/* --------------------------
   Dark Mode Styles
--------------------------- */
:root.dark-mode {
    --dark-bg-primary: #1a1a1a;
    --dark-bg-secondary: #2d2d2d;
    --dark-bg-tertiary: #3a3a3a;
    --dark-text-primary: #e0e0e0;
    --dark-text-secondary: #b0b0b0;
    --dark-border: #404040;
    --dark-accent: #4CAF50;
    --dark-accent-hover: #45a049;
}

.dark-mode body {
    background: var(--dark-bg-primary);
    color: var(--dark-text-primary);
}

.dark-mode body.login-page {
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.dark-mode header {
    background: #252525;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--dark-text-primary);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.dark-mode .navbar {
    background: transparent;
}

.dark-mode .logo {
    color: var(--dark-text-primary);
}

.dark-mode .nav-toggle-label span,
.dark-mode .nav-toggle-label span::before,
.dark-mode .nav-toggle-label span::after {
    background-color: var(--dark-text-primary);
}

.dark-mode .nav-links {
    background: #252525;
}

.dark-mode .nav-links li a {
    color: var(--dark-text-primary);
    background: transparent;
}

.dark-mode .nav-links li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-primary);
}

.dark-mode .nav-links li a.active {
    background: transparent;
}

.dark-mode .nav-links li a.active:hover {
    background-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .nav-links li a.nav-friends-has-pending {
    background-color: rgba(255, 82, 82, 0.14) !important;
    border-color: rgba(255, 82, 82, 0.45);
}

.dark-mode .nav-friends-badge {
    background: #ff5252;
    color: #fff;
    box-shadow: 0 0 0 2px #252525;
}

.dark-mode .nav-links li a.logout-link {
    color: #ff6b6b;
}

.dark-mode .nav-links li a.logout-link:hover {
    background-color: rgba(255, 107, 107, 0.15);
    color: #ff5252;
}

.dark-mode .nav-dropdown-menu {
    background: #252525;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.dark-mode .nav-dropdown-menu li a {
    color: var(--dark-text-primary);
    background: transparent;
}

.dark-mode .nav-dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--dark-text-primary);
}

.dark-mode .nav-dropdown-toggle {
    color: var(--dark-text-primary);
}

.dark-mode .welcome,
.dark-mode .overview,
.dark-mode .log-section,
.dark-mode .stats,
.dark-mode .settings,
.dark-mode .log-container {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    box-shadow: 0 6px 20px rgba(0,0,0,0.3);
}

.dark-mode .welcome h1,
.dark-mode .overview h1,
.dark-mode .log-container h1 {
    color: var(--dark-text-primary);
}

.dark-mode .welcome p,
.dark-mode .overview p,
.dark-mode .log-container p {
    color: var(--dark-text-secondary);
}

/* --------------------------
   Wissen-Seite (wissen.html) - Redesign
--------------------------- */
.wissen-page h1 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}
.wissen-section {
    margin-top: 1.75rem;
}
.wissen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}
.wissen-card {
    position: relative;
    background: linear-gradient(135deg, #e8f5e9 0%, #e3f2fd 100%);
    border: 1px solid rgba(76, 175, 80, 0.25);
    border-radius: 12px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.wissen-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(76, 175, 80, 0.2);
}
.wissen-icon {
    display: block;
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}
.wissen-date-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #2e7d32;
    background: rgba(255,255,255,0.9);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wissen-text {
    font-size: 0.95rem;
    color: #1b5e20;
    line-height: 1.5;
    margin: 0;
}

/* --------------------------
   Dankbarkeit-Seite (dankbarkeit.html) - Redesign
--------------------------- */
.dankbarkeit-section {
    margin-top: 1.75rem;
}
.gratitude-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
    padding: 0;
}
.gratitude-card {
    position: relative;
    background: linear-gradient(135deg, #fff9c4 0%, #fff59d 100%);
    border: 1px solid rgba(251, 192, 45, 0.4);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: 0 4px 12px rgba(251, 192, 45, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gratitude-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(251, 192, 45, 0.25);
}
.gratitude-card-tilt-right {
    transform: rotate(0.5deg);
}
.gratitude-card-tilt-right:hover {
    transform: translateY(-2px) rotate(0.5deg);
}
.gratitude-card-tilt-left {
    transform: rotate(-0.5deg);
}
.gratitude-card-tilt-left:hover {
    transform: translateY(-2px) rotate(-0.5deg);
}
.gratitude-icon {
    display: block;
    font-size: 1.5rem;
    color: #f57f17;
    margin-bottom: 0.5rem;
}
.gratitude-date-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #f57f17;
    background: rgba(255,255,255,0.9);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.gratitude-text {
    font-size: 0.95rem;
    color: #5d4037;
    line-height: 1.5;
    margin: 0;
}

/* --- Mir geht es schlecht – dezente Animationen --- */
@keyframes pickMeUpFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pickMeUpHeroGlow {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.06);
    }
    50% {
        box-shadow: 0 6px 28px rgba(76, 175, 80, 0.14);
    }
}

@keyframes pickMeUpHeroBreath {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.014);
    }
}

@keyframes pickMeUpHeroOrbPulse {
    0%,
    100% {
        opacity: 0.24;
        transform: scale(1);
    }
    50% {
        opacity: 0.55;
        transform: scale(1.2);
    }
}

@keyframes pickMeUpHeroGlowDark {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(102, 187, 106, 0.08);
    }
    50% {
        box-shadow: 0 6px 32px rgba(102, 187, 106, 0.2);
    }
}

@keyframes pickMeUpHeartSoft {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.06);
    }
}

@keyframes pickMeUpLoadPulse {
    0%,
    100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

.pick-me-up-page {
    --pick-me-up-reveal-dur: 0.58s;
}

.pick-me-up-page h1 {
    animation: pickMeUpFadeUp var(--pick-me-up-reveal-dur) ease-out 0.04s both;
}

.pick-me-up-page .pick-me-up-hero {
    position: relative;
    overflow: hidden;
    will-change: transform, box-shadow;
    animation:
        pickMeUpFadeUp 0.68s ease-out 0.18s both,
        pickMeUpHeroBreath 3.6s ease-in-out 1s infinite,
        pickMeUpHeroGlow 9s ease-in-out 0.9s infinite alternate;
}

.pick-me-up-page .pick-me-up-hero::after {
    content: '';
    position: absolute;
    right: -52px;
    top: -48px;
    width: 130px;
    height: 130px;
    border-radius: 999px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(102, 187, 106, 0.45) 0%, rgba(102, 187, 106, 0.08) 45%, rgba(102, 187, 106, 0) 75%);
    animation: pickMeUpHeroOrbPulse 3.2s ease-in-out infinite;
}

.pick-me-up-page .wellbeing-tips-section {
    animation: pickMeUpFadeUp 0.65s ease-out 0.22s both;
}

.pick-me-up-page .dankbarkeit-section {
    animation: pickMeUpFadeUp 0.65s ease-out 0.3s both;
}

.pick-me-up-page .pick-me-up-bestdays {
    animation: pickMeUpFadeUp 0.65s ease-out 0.38s both;
}

.pick-me-up-page .pick-me-up-disclaimer {
    animation: pickMeUpFadeUp 0.65s ease-out 0.44s both;
}

.pick-me-up-page .pick-me-up-footer {
    animation: pickMeUpFadeUp 0.65s ease-out 0.5s both;
}

.pick-me-up-page .learned-loading {
    animation: pickMeUpLoadPulse 1.4s ease-in-out infinite;
}

.pick-me-up-reveal {
    animation: pickMeUpFadeUp 0.52s ease-out both;
}

.pick-me-up-page .gratitude-card.pick-me-up-reveal .gratitude-icon {
    display: inline-block;
    animation: pickMeUpHeartSoft 2.4s ease-in-out infinite;
}

.pick-me-up-page .pick-me-up-footer a {
    transition: color 0.2s ease, transform 0.2s ease;
}

.pick-me-up-page .pick-me-up-footer a:hover {
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .pick-me-up-page h1,
    .pick-me-up-page .pick-me-up-lead,
    .pick-me-up-page .pick-me-up-hero,
    .pick-me-up-page .wellbeing-tips-section,
    .pick-me-up-page .dankbarkeit-section,
    .pick-me-up-page .pick-me-up-bestdays,
    .pick-me-up-page .pick-me-up-disclaimer,
    .pick-me-up-page .pick-me-up-footer,
    .pick-me-up-page .learned-loading,
    .pick-me-up-reveal,
    .pick-me-up-page .gratitude-card.pick-me-up-reveal .gratitude-icon,
    .pick-me-up-page .pick-me-up-hero::after {
        animation: none !important;
    }

    .pick-me-up-page .pick-me-up-footer a:hover {
        transform: none;
    }
}

.pick-me-up-page .pick-me-up-lead {
    max-width: 40rem;
    margin: 0 auto 1.25rem;
    text-align: center;
    line-height: 1.65;
    color: var(--text-secondary, #5f6368);
    animation: pickMeUpFadeUp var(--pick-me-up-reveal-dur) ease-out 0.1s both;
}

.pick-me-up-hero {
    max-width: 40rem;
    margin: 0 auto 2rem;
    padding: 1.25rem 1.5rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(129, 199, 132, 0.18), rgba(100, 181, 246, 0.15));
    border: 1px solid rgba(0, 77, 64, 0.12);
    line-height: 1.65;
    color: #37474f;
}

.pick-me-up-hero p {
    margin: 0;
}

.wellbeing-tips-section h2 {
    margin-top: 0;
}

.wellbeing-tips {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.wellbeing-tip-item {
    padding: 0.9rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.75);
    border-left: 4px solid #66bb6a;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #37474f;
}

.pick-me-up-bestdays-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.pick-me-up-bestday-row {
    padding: 0.85rem 1rem;
    border-radius: 0.75rem;
    background: rgba(255, 243, 224, 0.65);
    border: 1px solid rgba(245, 127, 23, 0.2);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pick-me-up-bestday-row.is-collapsible {
    cursor: pointer;
}

.pick-me-up-bestday-row.is-collapsible:hover {
    background: rgba(255, 243, 224, 0.82);
}

.pick-me-up-bestday-row.is-collapsible:focus-visible {
    outline: 2px solid rgba(245, 127, 23, 0.6);
    outline-offset: 2px;
}

.pick-me-up-bestday-toggle {
    margin-top: 0.55rem;
    padding: 0;
    background: none;
    border: none;
    color: #e65100;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
}

.pick-me-up-bestday-toggle:hover {
    text-decoration: underline;
}

.pick-me-up-badges-intro {
    margin: 0 0 0.8rem 0;
    color: #455a64;
    font-weight: 600;
}

.pick-me-up-badges-list {
    display: grid;
    gap: 0.65rem;
}

.pick-me-up-badge-item {
    border-radius: 0.7rem;
    padding: 0.7rem 0.85rem;
    background: rgba(102, 187, 106, 0.12);
    border: 1px solid rgba(102, 187, 106, 0.26);
}

.pick-me-up-badge-title {
    font-size: 0.93rem;
    font-weight: 700;
    color: #1b5e20;
    margin-bottom: 0.2rem;
}

.pick-me-up-badge-desc {
    font-size: 0.88rem;
    line-height: 1.45;
    color: #37474f;
}

.pick-me-up-bestday-date {
    font-weight: 600;
    font-size: 0.9rem;
    color: #e65100;
    margin-bottom: 0.35rem;
}

.pick-me-up-bestday-desc {
    font-size: 0.92rem;
    line-height: 1.5;
    color: #4e342e;
}

.pick-me-up-disclaimer {
    max-width: 40rem;
    margin: 2rem auto 0;
    padding: 1rem 1.15rem;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #546e7a;
    background: rgba(96, 125, 139, 0.08);
    border-radius: 0.75rem;
    border: 1px solid rgba(96, 125, 139, 0.2);
}

.pick-me-up-disclaimer p {
    margin: 0;
}

.pick-me-up-footer {
    text-align: center;
    margin-top: 2rem;
}

.pick-me-up-footer a {
    font-weight: 600;
}

.dark-mode .pick-me-up-lead {
    color: var(--dark-text-secondary, #b0bec5);
}

.dark-mode .pick-me-up-hero {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15), rgba(66, 165, 245, 0.12));
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .pick-me-up-page .pick-me-up-hero {
    animation:
        pickMeUpFadeUp 0.68s ease-out 0.18s both,
        pickMeUpHeroBreath 3.6s ease-in-out 1s infinite,
        pickMeUpHeroGlowDark 9s ease-in-out 0.9s infinite alternate;
}

.dark-mode .pick-me-up-page .pick-me-up-hero::after {
    background: radial-gradient(circle, rgba(129, 199, 132, 0.42) 0%, rgba(129, 199, 132, 0.09) 44%, rgba(129, 199, 132, 0) 76%);
}

.dark-mode .wellbeing-tip-item {
    background: var(--dark-bg-tertiary);
    border-left-color: var(--dark-accent, #66bb6a);
    color: var(--dark-text-primary);
}

.dark-mode .pick-me-up-bestday-row {
    background: rgba(255, 152, 0, 0.12);
    border-color: rgba(255, 152, 0, 0.25);
}

.dark-mode .pick-me-up-bestday-row.is-collapsible:hover {
    background: rgba(255, 152, 0, 0.18);
}

.dark-mode .pick-me-up-bestday-date {
    color: #ffb74d;
}

.dark-mode .pick-me-up-bestday-desc {
    color: var(--dark-text-primary);
}

.dark-mode .pick-me-up-bestday-toggle {
    color: #ffb74d;
}

.dark-mode .pick-me-up-badges-intro {
    color: var(--dark-text-secondary, #b0bec5);
}

.dark-mode .pick-me-up-badge-item {
    background: rgba(102, 187, 106, 0.14);
    border-color: rgba(102, 187, 106, 0.32);
}

.dark-mode .pick-me-up-badge-title {
    color: #9ccc65;
}

.dark-mode .pick-me-up-badge-desc {
    color: var(--dark-text-primary);
}

.dark-mode .pick-me-up-disclaimer {
    color: var(--dark-text-secondary, #b0bec5);
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
}

.knowledge-section {
    margin-top: 1.5rem;
    text-align: left;
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 8px 20px rgba(0, 77, 64, 0.12);
    border: 1px solid rgba(0, 77, 64, 0.06);
}

.knowledge-section h2 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
    color: #004d40;
}

.learned-loading {
    font-size: 0.95rem;
    color: #00695c;
    padding: 0.4rem 0;
}

.learned-error {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #b71c1c;
    background: #ffebee;
    border-left: 4px solid #e53935;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
}

.learned-empty {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #455a64;
}

.learned-list {
    list-style: none;
    margin: 0.75rem 0 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.learned-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 0.55rem 0.75rem;
    background: #f1f8e9;
    border-radius: 0.6rem;
    border: 1px solid rgba(139, 195, 74, 0.4);
    box-shadow: 0 2px 6px rgba(139, 195, 74, 0.25);
}

.learned-date {
    font-size: 0.8rem;
    font-weight: 600;
    color: #689f38;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.learned-text {
    font-size: 0.95rem;
    color: #33691e;
    line-height: 1.4;
}


/* Dark Mode für Dankbarkeit/Knowledge-Sektion */
.dark-mode .knowledge-section {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

.dark-mode .knowledge-section h2 {
    color: var(--dark-text-primary);
}

.dark-mode .learned-loading {
    color: var(--dark-accent);
}

.dark-mode .learned-error {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.15);
    border-left-color: #ff6b6b;
}

.dark-mode .learned-empty {
    color: var(--dark-text-secondary);
}

.dark-mode .learned-item {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .learned-date {
    color: var(--dark-accent);
}

.dark-mode .learned-text {
    color: var(--dark-text-primary);
}

.dark-mode .wissen-card {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(33, 150, 243, 0.1) 100%);
    border-color: var(--dark-border);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark-mode .wissen-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.dark-mode .wissen-date-badge {
    color: var(--dark-accent);
    background: var(--dark-bg-tertiary);
}
.dark-mode .wissen-text {
    color: var(--dark-text-primary);
}

.dark-mode .gratitude-card {
    background: linear-gradient(135deg, rgba(255, 249, 196, 0.2) 0%, rgba(255, 245, 157, 0.2) 100%);
    border-color: rgba(251, 192, 45, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.dark-mode .gratitude-card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.dark-mode .gratitude-icon {
    color: #ffb74d;
}
.dark-mode .gratitude-date-badge {
    color: #ffb74d;
    background: var(--dark-bg-tertiary);
}
.dark-mode .gratitude-text {
    color: var(--dark-text-primary);
}

.dark-mode .btn,
.dark-mode .btn-primary,
.dark-mode .btn-secondary {
    background: rgba(76, 175, 80, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: rgba(76, 175, 80, 0.4);
    color: #fff;
}

.dark-mode .btn:hover,
.dark-mode .btn-primary:hover {
    background: rgba(69, 160, 73, 0.95);
}

.dark-mode .btn-secondary {
    background: rgba(58, 58, 58, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .btn-secondary:hover {
    background: rgba(58, 58, 58, 0.95);
    color: var(--dark-text-primary);
}

.dark-mode .form-group label {
    color: var(--dark-text-primary);
}

.dark-mode input[type="date"],
.dark-mode input[type="text"],
.dark-mode select,
.dark-mode input[type="number"],
.dark-mode textarea {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode input:focus,
.dark-mode select:focus,
.dark-mode textarea:focus {
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.3);
    border-color: var(--dark-accent);
}

.dark-mode .table-container {
    background: var(--dark-bg-secondary);
}

.dark-mode .table-container th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

.dark-mode .table-container td {
    color: var(--dark-text-primary);
    border-bottom-color: var(--dark-border);
}

.dark-mode .table-container tr:nth-child(even) {
    background-color: rgba(255,255,255,0.05);
}

.dark-mode .table-container tr:hover td:not(.mood-cell) {
    background-color: rgba(76, 175, 80, 0.15);
}

.dark-mode .settings-group {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
}

.dark-mode .settings-group h3 {
    color: var(--dark-text-primary);
}

.dark-mode .settings-group h4 {
    border-bottom-color: rgba(76, 175, 80, 0.15);
}

.dark-mode .checkbox-label {
    color: var(--dark-text-primary);
}

.dark-mode .checkbox-label:hover {
    background-color: rgba(76, 175, 80, 0.08);
}

.dark-mode .checkbox-label span {
    color: var(--dark-text-primary);
}

.dark-mode .checkbox-label input[type="checkbox"] {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

.dark-mode .checkbox-label input[type="checkbox"]:hover {
    border-color: var(--dark-accent);
}

.dark-mode .checkbox-label input[type="checkbox"]:checked {
    background: var(--dark-accent);
    border-color: var(--dark-accent);
}

/* Dark Mode Toggle Switch */
.dark-mode .toggle-slider {
    background: var(--dark-bg-tertiary);
}

.dark-mode .toggle-switch input:checked + .toggle-slider {
    background: var(--dark-accent);
}

.dark-mode .toggle-switch-label .toggle-text {
    color: var(--dark-text-primary);
}

.dark-mode .toggle-description {
    color: var(--dark-text-secondary);
}

/* Dark Mode Settings Category */
.dark-mode .settings-category {
    border-color: var(--dark-border);
    background: rgba(255, 255, 255, 0.03);
}

.dark-mode .success-message {
    background: rgba(76,175,80,0.2);
    color: #81c784;
    border-color: rgba(76,175,80,0.4);
}

.dark-mode .error-message {
    background: rgba(255,82,82,0.2);
    color: #e57373;
    border-color: rgba(255,82,82,0.4);
}

/* Dark Mode für Overlay-Meldungen */
.dark-mode #response-message.error-message {
    background: rgba(244, 67, 54, 0.95);
    color: white;
}

.dark-mode #response-message.success-message {
    background: rgba(76, 175, 80, 0.95);
    color: white;
}

.dark-mode .fab {
    background: rgba(76, 175, 80, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-color: rgba(76, 175, 80, 0.5);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.dark-mode .fab:hover {
    background: rgba(69, 160, 73, 0.95);
    box-shadow: 0 6px 16px rgba(76, 175, 80, 0.5);
}

.dark-mode .fab-social {
    background: rgba(0, 150, 136, 0.92);
    border-color: rgba(0, 150, 136, 0.72);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(0, 150, 136, 0.42);
}

.dark-mode .fab-social-badge {
    border-color: #263238;
}

.dark-mode .social-action-panel {
    background: rgba(36, 45, 50, 0.98);
    border-color: rgba(118, 174, 164, 0.35);
}

.dark-mode .social-action-form textarea,
.dark-mode .social-action-form input,
.dark-mode .social-action-form select {
    background: #2f3a40;
    border-color: #455a64;
    color: #eceff1;
}

.dark-mode .social-inbox-item {
    background: #2a343a;
    border-color: #3f5159;
}

.dark-mode .social-inbox-item-meta {
    color: #b0bec5;
}

.dark-mode .social-response-summary {
    color: #b0bec5;
}

.dark-mode .social-respond-btn.active {
    border-color: rgba(0, 150, 136, 0.6);
    background: rgba(0, 150, 136, 0.22);
    color: #d6fff7;
}

.dark-mode .social-respond-ignore {
    border-color: rgba(144, 164, 174, 0.5);
    color: #c8d3d8;
}

.dark-mode .social-respond-ignore:hover {
    background: rgba(144, 164, 174, 0.18);
}

.dark-mode .social-response-participants {
    background: #253138;
    border-color: #3d515a;
}

.dark-mode .social-response-participants-title {
    color: #b6c9d1;
}

.dark-mode .social-response-participants-empty {
    color: #9ab0ba;
}

.dark-mode .social-response-participant-name {
    color: #e5f3f8;
}

.dark-mode .social-response-participant-type {
    color: #aac0c9;
}

.dark-mode .social-inbox-kind-pill {
    background: rgba(0, 150, 136, 0.2);
    border-color: rgba(0, 150, 136, 0.42);
    color: #b2dfdb;
}

.dark-mode .social-inbox-item.kind-plan {
    background: linear-gradient(180deg, rgba(0, 137, 123, 0.14) 0%, #2a343a 100%);
}

.dark-mode .social-inbox-item.kind-help .social-inbox-kind-pill {
    background: rgba(239, 83, 80, 0.2);
    border-color: rgba(239, 83, 80, 0.45);
    color: #ffb3b2;
}

.dark-mode .social-inbox-item.kind-free .social-inbox-kind-pill {
    background: rgba(92, 107, 192, 0.22);
    border-color: rgba(92, 107, 192, 0.45);
    color: #c5cae9;
}

.dark-mode .social-action-feedback {
    background: rgba(76, 175, 80, 0.2);
    color: #b9f6ca;
}

.dark-mode .social-action-feedback.error {
    background: rgba(244, 67, 54, 0.2);
    color: #ffcdd2;
}

.dark-mode .friends-card {
    background: rgba(38, 50, 56, 0.9);
    border-color: rgba(118, 174, 164, 0.25);
}

.dark-mode .friends-page-intro,
.dark-mode .friends-empty,
.dark-mode .friends-muted {
    color: #b0bec5;
}

.dark-mode .friends-item {
    background: #2b3940;
    border-color: #3b4d55;
}

.dark-mode .friend-level-badge {
    background: rgba(0, 150, 136, 0.2);
    border-color: rgba(0, 150, 136, 0.45);
    color: #b2dfdb;
}

.dark-mode .friends-search-form input {
    background: #2f3a40;
    border-color: #455a64;
    color: #eceff1;
}

.dark-mode .fab.fab-stale {
    background: rgba(255, 193, 7, 0.92);
    border-color: rgba(255, 224, 130, 0.95);
    color: #2e1f10;
}

.dark-mode .btn-yes-no {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .btn-yes-no:hover {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--dark-accent);
}

.dark-mode .btn-yes-no.active {
    background: var(--dark-accent);
    color: white;
    border-color: var(--dark-accent);
}

.dark-mode .btn-edit {
    background: rgba(255, 152, 0, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.dark-mode .btn-edit:hover {
    background: rgba(245, 124, 0, 0.95);
}

.dark-mode .edit-mode {
    background-color: rgba(255, 152, 0, 0.1);
    border-color: #ff9800;
}

.dark-mode .edit-input,
.dark-mode .edit-textarea,
.dark-mode select.edit-input {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .edit-input:focus,
.dark-mode .edit-textarea:focus {
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

.dark-mode .btn-save {
    background: rgba(76, 175, 80, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.dark-mode .btn-save:hover {
    background: rgba(69, 160, 73, 0.95);
}

.dark-mode .btn-cancel {
    background: rgba(244, 67, 54, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
}

.dark-mode .btn-cancel:hover {
    background: rgba(218, 25, 11, 0.95);
}

.dark-mode .month-row {
    background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
}

.dark-mode .month-row:hover {
    background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%);
}

.dark-mode .year-row {
    background: linear-gradient(135deg, var(--dark-bg-tertiary) 0%, var(--dark-bg-secondary) 100%);
}

.dark-mode .year-row:hover {
    background: linear-gradient(135deg, var(--dark-bg-secondary) 0%, var(--dark-bg-tertiary) 100%);
}

.dark-mode .year-month-row {
    background-color: var(--dark-bg-tertiary);
}

.dark-mode .month-details {
    background-color: var(--dark-bg-secondary);
}

.dark-mode .month-details-container.show {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--dark-border);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dark-mode .month-stats {
    background: rgba(255, 255, 255, 0.03);
    border-left: 4px solid var(--dark-accent);
}

.dark-mode .stat-item {
    background: var(--dark-bg-tertiary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.dark-mode .stat-label {
    color: var(--dark-text-secondary);
}

.dark-mode .stat-value {
    color: var(--dark-accent);
}

.dark-mode .days-table table {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border: 1px solid var(--dark-border);
}

.dark-mode .days-table th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-bottom: 1px solid var(--dark-border);
}

.dark-mode .days-table td {
    color: var(--dark-text-primary);
    border-bottom: 1px solid var(--dark-border);
}

.dark-mode .day-row:hover {
    background-color: rgba(255, 255, 255, 0.04);
}

.dark-mode .day-details {
    background-color: var(--dark-bg-tertiary);
}

/* Inline-Bearbeitung (day-edit-container) im Dark Mode */
.dark-mode .day-edit-container {
    background-color: var(--dark-bg-tertiary);
    border-color: #ff9800;
}

.dark-mode .day-edit-container .edit-field label,
.dark-mode .day-edit-container .edit-field-full label {
    color: var(--dark-text-primary);
}

.dark-mode .day-edit-container .edit-input-small,
.dark-mode .day-edit-container .edit-textarea-small,
.dark-mode .day-edit-container select.edit-input-small {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .day-edit-container .edit-input-small:focus,
.dark-mode .day-edit-container .edit-textarea-small:focus {
    border-color: #ff9800;
    box-shadow: 0 0 0 2px rgba(255, 152, 0, 0.2);
}

.dark-mode .day-edit-container small {
    color: var(--dark-text-secondary);
}

.dark-mode .entry-details td {
    background-color: var(--dark-bg-tertiary);
    border-top-color: var(--dark-border);
}

.dark-mode .detail-item {
    background: var(--dark-bg-tertiary) !important;
    border-left-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

.dark-mode .detail-item.full-width {
    background: var(--dark-bg-tertiary) !important;
    border-left-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

.dark-mode .settings-category .category-header {
    background: rgba(255, 255, 255, 0.04);
    color: var(--dark-text-primary);
    border-left-color: var(--dark-accent);
}

.dark-mode .settings-category .category-header:hover {
    background: rgba(255, 255, 255, 0.07);
}

.dark-mode .settings-category .category-header.premium {
    border-left-color: #ff9800;
}

.dark-mode .settings-category .category-header.premium:hover {
    background: rgba(255, 152, 0, 0.08);
}

.dark-mode .settings-category .category-header.userdata {
    border-left-color: #64b5f6;
}

.dark-mode .settings-category .category-header.userdata:hover {
    background: rgba(33, 150, 243, 0.08);
}

.dark-mode .form-input {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .form-input:focus {
    border-color: var(--dark-accent);
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.2);
}

.dark-mode .premium-features-grid .checkbox-label {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
}

.dark-mode .premium-features-grid .checkbox-label:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(76, 175, 80, 0.3);
}

.dark-mode .premium-features-grid .checkbox-label span {
    color: var(--dark-text-primary);
}

.dark-mode .premium-features-grid .checkbox-label small {
    color: var(--dark-text-secondary);
}

.dark-mode .merge-tab {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .merge-tab:hover {
    background: rgba(76, 175, 80, 0.1);
    border-color: rgba(76, 175, 80, 0.2);
}

.dark-mode .merge-tab.active {
    background: var(--dark-accent);
    border-color: var(--dark-accent);
    color: white;
}

.dark-mode .info-box {
    background: rgba(33, 150, 243, 0.2);
    border-left-color: #2196F3;
    color: #90caf9;
}

.dark-mode .quick-entry-section {
    background: #1e1e1e;
    color: #e0e0e0;
}

.dark-mode .quick-entry-section h2 {
    color: #e0e0e0;
}

.dark-mode .quick-entry-form input,
.dark-mode .quick-entry-form select,
.dark-mode .quick-entry-form textarea {
    background: #2d2d2d;
    color: #e0e0e0;
    border-color: #00796b;
}

.dark-mode .quick-entry-form input:focus,
.dark-mode .quick-entry-form select:focus,
.dark-mode .quick-entry-form textarea:focus {
    border-color: #009688;
    box-shadow: 0 0 0 2px rgba(0, 150, 136, 0.2);
}

.dark-mode .welcome-section,
.dark-mode .actions-section,
.dark-mode .mood-calendar-section,
.dark-mode .summary-section {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

/* Stats-Seite: Überschreibe grüne Hintergründe im Dark Mode */
.dark-mode .welcome-section.stats-page,
.dark-mode main.dashboard-container .welcome-section.stats-page {
    background: var(--dark-bg-secondary) !important;
}

.dark-mode main.dashboard-container {
    background: var(--dark-bg-primary);
}

/* Überschreibe alle grünen Hintergründe (#b2dfdb) im Dark Mode */
.dark-mode .stats-page .stat-card,
.dark-mode .stats-page .stat-card[style],
.dark-mode main.dashboard-container .stats-page .stat-card,
.dark-mode main.dashboard-container .stats-page .stat-card[style],
.dark-mode .stats-page #total-stats-section .stat-card,
.dark-mode .stats-page #total-stats-section .stat-card[style],
.dark-mode .stats-page #detailed-yearly-stats-section .stat-card,
.dark-mode .stats-page #detailed-yearly-stats-section .stat-card[style] {
    background: var(--dark-bg-secondary) !important;
    border-left-color: var(--dark-accent) !important;
}

.dark-mode .stat-card[style*="#17a2b8"] {
    background: rgba(23, 162, 184, 0.12) !important;
    border-left-color: #17a2b8 !important;
}

.dark-mode .stat-card[style*="#ffc107"] {
    background: rgba(255, 193, 7, 0.12) !important;
    border-left-color: #ffc107 !important;
}

.dark-mode .stat-card[style*="#dc3545"] {
    background: rgba(220, 53, 69, 0.12) !important;
    border-left-color: #dc3545 !important;
}

.dark-mode .stat-card[style*="#28a745"] {
    background: rgba(40, 167, 69, 0.12) !important;
    border-left-color: #28a745 !important;
}

.dark-mode .stat-card h3 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stat-card p {
    color: var(--dark-text-secondary) !important;
}

/* Dark Mode: Year-Summary Cards */
.dark-mode .year-summary-card {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, rgba(0, 77, 64, 0.06) 100%);
    border-color: rgba(76, 175, 80, 0.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
.dark-mode .year-summary-card:hover {
    border-color: rgba(76, 175, 80, 0.4);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.dark-mode .year-summary-card-label {
    color: var(--dark-accent);
}
.dark-mode .year-summary-card-value {
    color: var(--dark-text-primary);
}
.dark-mode .stats-page .year-summary-clickable:hover {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.15) 0%, rgba(0, 77, 64, 0.1) 100%);
}
.dark-mode .stats-page .year-summary-clickable::after {
    color: rgba(76, 175, 80, 0.4);
}

/* Überschreibe alle anderen grünen Hintergründe */
.dark-mode [style*="background: #b2dfdb"],
.dark-mode [style*="background:#b2dfdb"],
.dark-mode [style*="background-color: #b2dfdb"],
.dark-mode [style*="background-color:#b2dfdb"] {
    background: var(--dark-bg-secondary) !important;
    background-color: var(--dark-bg-secondary) !important;
}

.dark-mode .welcome-section h1 {
    color: var(--dark-text-primary);
}

.dark-mode .welcome-section p {
    color: var(--dark-text-secondary);
}

.dark-mode .gamification-container {
    background: linear-gradient(145deg, rgba(0, 121, 107, 0.12) 0%, rgba(0, 77, 64, 0.18) 50%, rgba(0, 105, 92, 0.1) 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.dark-mode .gamification-container::before {
    background: radial-gradient(circle, rgba(38, 166, 154, 0.08) 0%, transparent 70%);
}

.dark-mode .gamification-skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.04) 0%,
        rgba(255, 255, 255, 0.12) 50%,
        rgba(255, 255, 255, 0.04) 100%
    );
}

.dark-mode .level-label {
    color: rgba(255, 255, 255, 0.5);
}

.dark-mode .level-number {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .gamification-progress-bar {
    background: rgba(255, 255, 255, 0.1);
}

.dark-mode .gamification-progress-fill {
    background: linear-gradient(90deg, #26a69a, #4db6ac);
}

.dark-mode .gamification-exp-text {
    color: var(--dark-text-secondary, #aaa);
}

.dark-mode .gamification-streak {
    color: var(--dark-text-secondary, #aaa);
    border-top-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .gamification-streak.streak-hot {
    color: #ffb74d;
}

.dark-mode .gamification-streak.streak-fire {
    color: #ff8a65;
}

.dark-mode .streak-bonus {
    color: #4db6ac;
    background: rgba(77, 182, 172, 0.12);
}

.dark-mode .gamification-levelup-content {
    background: var(--dark-bg-secondary, #1e1e1e);
}

.dark-mode .levelup-title {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .levelup-level {
    background: linear-gradient(135deg, #26a69a, #4db6ac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Dark Mode: Badge-Overlay */
.dark-mode .gamification-badge-content {
    background: linear-gradient(145deg, #3e2723 0%, #4e342e 100%);
}
.dark-mode .badge-unlock-title {
    color: #ffcc80;
}
.dark-mode .badge-unlock-name {
    color: #ffe0b2;
}
.dark-mode .badge-unlock-desc {
    color: #bcaaa4;
}

/* Dark Mode: Badge-Grid */
.dark-mode .badge-year-selector label {
    color: var(--dark-text-primary, #e0e0e0);
}
.dark-mode .badge-year-selector select {
    background: var(--dark-bg-tertiary, #333);
    border-color: var(--dark-border, #444);
    color: var(--dark-text-primary, #e0e0e0);
}
.dark-mode .badge-category-title {
    color: var(--dark-text-primary, #e0e0e0);
    border-bottom-color: rgba(77, 182, 172, 0.3);
}
.dark-mode .badge-card {
    background: var(--dark-bg-secondary, #2a2a2a);
    border-color: var(--dark-border, #444);
}
.dark-mode .badge-card.unlocked {
    background: linear-gradient(160deg, rgba(56, 142, 60, 0.28) 0%, rgba(27, 94, 32, 0.18) 100%);
    border-color: #66bb6a;
    box-shadow: 0 2px 16px rgba(76, 175, 80, 0.25);
}
.dark-mode .badge-card.unlocked .badge-card-title {
    color: #c8e6c9;
    border-bottom-color: rgba(129, 199, 132, 0.55);
}
.dark-mode .badge-card-title {
    color: var(--dark-text-primary, #e0e0e0);
}
.dark-mode .badge-card-icon-pending {
    color: #757575;
}
.dark-mode .badge-card-desc {
    color: var(--dark-text-secondary, #aaa);
}
.dark-mode .badge-card-progress {
    background: rgba(255, 255, 255, 0.08);
}
.dark-mode .badge-card-progress-text {
    color: var(--dark-text-secondary, #aaa);
}
.dark-mode .badge-card-exp {
    color: #4db6ac;
    background: rgba(77, 182, 172, 0.12);
}
.dark-mode .badge-card.unlocked .badge-card-exp {
    color: #81c784;
    background: rgba(129, 199, 132, 0.12);
}
.dark-mode .badge-unlocked-date {
    color: #81c784;
}
.dark-mode .badge-summary {
    color: var(--dark-text-secondary, #aaa);
}
.dark-mode .badge-summary strong {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .random-gratitude {
    background: linear-gradient(135deg, rgba(255, 249, 196, 0.15) 0%, rgba(255, 245, 157, 0.15) 100%);
    border-left-color: #fbc02d;
}

.dark-mode .gratitude-header {
    color: #ffb74d;
}

.dark-mode .gratitude-content {
    color: var(--dark-text-primary);
}

.dark-mode .gratitude-date {
    color: var(--dark-text-secondary);
}

.dark-mode .stat-card {
    background: var(--dark-bg-secondary);
    border-left-color: var(--dark-accent);
}

.dark-mode .stat-card h3 {
    color: var(--dark-text-primary);
}

.dark-mode .stat-card p {
    color: var(--dark-text-primary);
}

.dark-mode .summary-item {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
}

.dark-mode .summary-label {
    color: var(--dark-text-secondary);
}

.dark-mode .summary-value {
    color: var(--dark-accent);
}

.dark-mode .calendar-nav-btn {
    background: rgba(76, 175, 80, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: white;
}

.dark-mode .calendar-nav-btn:hover {
    background: rgba(69, 160, 73, 0.95);
}

.dark-mode .calendar-day.no-entry {
    background: var(--dark-bg-tertiary);
    color: var(--dark-text-secondary);
    border-color: var(--dark-border);
}

.dark-mode .calendar-legend {
    border-top-color: var(--dark-border);
}

.dark-mode .modal-content {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

.dark-mode .modal-header {
    background: linear-gradient(135deg, var(--dark-accent) 0%, var(--dark-accent-hover) 100%);
    color: white;
}

.dark-mode .modal-body {
    color: var(--dark-text-primary);
}

.dark-mode .modal-footer {
    background-color: var(--dark-bg-tertiary);
    border-top-color: var(--dark-border);
}

.dark-mode .detail-section {
    background-color: var(--dark-bg-tertiary);
    border-left-color: var(--dark-accent);
}

.dark-mode .detail-section h3 {
    color: var(--dark-accent);
}

.dark-mode .detail-section p {
    color: var(--dark-text-primary);
}

.dark-mode .detail-section strong {
    color: var(--dark-text-primary);
}

.dark-mode .login-container {
    background: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

.dark-mode .login-logo {
    color: var(--dark-accent, #26a69a);
}

.dark-mode .login-header h1 {
    color: var(--dark-text-primary);
}

.dark-mode .login-header p {
    color: var(--dark-text-secondary);
}

.dark-mode .form-group label {
    color: var(--dark-text-primary);
}

.dark-mode .form-group input {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
    border-color: var(--dark-border);
}

.dark-mode .form-group input:focus {
    border-color: var(--dark-accent);
}

.dark-mode .btn-login {
    background: var(--dark-accent);
    color: white;
}

.dark-mode .btn-login:hover {
    background: var(--dark-accent-hover);
}

.dark-mode .register-link {
    color: var(--dark-text-secondary);
}

.dark-mode .register-link a {
    color: var(--dark-accent);
}

.dark-mode .forgot-password-link a {
    color: var(--dark-text-secondary);
}

.dark-mode .forgot-password-link a:hover {
    color: var(--dark-accent);
}

.dark-mode .temp-password-box {
    background: rgba(255, 193, 7, 0.2);
    border-color: #ffc107;
}

.dark-mode .temp-password-box strong {
    color: #ffc107;
}

.dark-mode .temp-password {
    background: var(--dark-bg-tertiary);
    color: #ffc107;
}

/* (alte Tabellen-Styles entfernt – jetzt Card-basiert) */

/* Dark Mode: Mood-Ratings Cards */
.dark-mode .stats-page .mood-card.mood-range-1-3 {
    background: linear-gradient(135deg, rgba(255, 77, 77, 0.6) 0%, rgba(238, 90, 90, 0.6) 100%);
    border: 1px solid rgba(255, 77, 77, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.dark-mode .stats-page .mood-card.mood-range-4-6 {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.5) 0%, rgba(255, 167, 38, 0.5) 100%);
    border: 1px solid rgba(255, 183, 77, 0.5);
    color: var(--dark-text-primary);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.dark-mode .stats-page .mood-card.mood-range-7-9 {
    background: linear-gradient(135deg, rgba(102, 187, 106, 0.5) 0%, rgba(76, 175, 80, 0.5) 100%);
    border: 1px solid rgba(102, 187, 106, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.dark-mode .stats-page .mood-card.mood-range-10 {
    background: linear-gradient(135deg, rgba(46, 125, 50, 0.6) 0%, rgba(27, 94, 32, 0.6) 100%);
    border: 1px solid rgba(46, 125, 50, 0.5);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.dark-mode .stats-page .mood-ratings-caption {
    color: var(--dark-text-secondary);
}
.dark-mode .stats-page .mood-ratings-table h2 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stats-page .year-summary-expandable-content {
    background: rgba(255, 255, 255, 0.05);
    border-left-color: var(--dark-accent);
    color: var(--dark-text-primary);
}

.dark-mode .stats-page .year-summary-expandable-content strong {
    color: var(--dark-text-primary);
}

.dark-mode .dropdown-button {
    background: var(--dark-bg-tertiary);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .dropdown-button:hover {
    background: var(--dark-bg-secondary);
}

.dark-mode .dropdown-list {
    background: var(--dark-bg-secondary);
    border-color: var(--dark-border);
}

.dark-mode .dropdown-item {
    color: var(--dark-text-primary);
}

.dark-mode .dropdown-item:hover {
    background-color: var(--dark-bg-tertiary);
}

.dark-mode .dropdown-arrow {
    color: var(--dark-text-primary);
}

/* Missing Dates Notification - Dark Mode */
.dark-mode .info-box {
    background: #2d2d2d;
    border-color: #555;
    color: #e0e0e0;
}

.dark-mode .missing-dates-notification {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0.15) 100%);
    border: 2px solid rgba(255, 152, 0, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .missing-dates-notification h3 {
    color: #ffb74d;
}

.dark-mode .missing-dates-notification p {
    color: var(--dark-text-secondary);
}

.dark-mode .missing-dates-notification .missing-dates-list li {
    background: rgba(255, 152, 0, 0.15);
    color: #ffb74d;
    border-left-color: rgba(255, 152, 0, 0.6);
}

/* Existing Entries Notification - Dark Mode */
.dark-mode .existing-entries-notification {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0.15) 100%);
    border: 2px solid rgba(33, 150, 243, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.dark-mode .existing-entries-notification h3 {
    color: #64b5f6;
}

.dark-mode .existing-entries-notification p {
    color: var(--dark-text-secondary);
}

.dark-mode .existing-entries-notification #existing-entries-details {
    background: rgba(33, 150, 243, 0.15);
    color: #64b5f6;
    border-left-color: rgba(33, 150, 243, 0.6);
}

.dark-mode .existing-entries-notification #existing-entries-details li {
    color: #64b5f6;
}

/* Überschreibe alle #004d40 Textfarben im Dark Mode */
.dark-mode body {
    color: var(--dark-text-primary) !important;
}

.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .welcome h1,
.dark-mode .overview h1,
.dark-mode .log-container h1 {
    color: var(--dark-text-primary) !important;
}

.dark-mode label {
    color: var(--dark-text-primary) !important;
}

.dark-mode .checkbox-label span {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stat-item-inline {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stat-item-inline .stat-label {
    color: var(--dark-text-primary) !important;
}

.dark-mode .welcome-section h1 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stats-page h1,
.dark-mode .stats-page h2,
.dark-mode .stats-page h3 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .stats-page p {
    color: var(--dark-text-secondary) !important;
}

.dark-mode .calendar-header h3 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .calendar-weekday {
    color: var(--dark-text-primary) !important;
}

.dark-mode .modal-header h2 {
    color: white !important;
}

.dark-mode .detail-section strong {
    color: var(--dark-text-primary) !important;
}

.dark-mode .summary-section h2 {
    color: var(--dark-text-primary) !important;
}

/* Spezielle Overrides für alle Elemente mit #004d40 */
/* Entfernt leere Fallback-Regeln; explizite Overrides stehen weiter oben */

/* Spezifische Overrides für Stats-Seite */
.dark-mode .stats-page #year-summary-table h2,
.dark-mode .stats-page #productivity-summary-table h2 {
    color: var(--dark-text-primary) !important;
}

/* Überschreibe inline styles mit #004d40 im Dark Mode - sehr spezifisch */
.dark-mode strong[style*="#004d40"],
.dark-mode strong[style*="rgb(0, 77, 64)"],
.dark-mode *[style*="#004d40"],
.dark-mode *[style*="rgb(0, 77, 64)"] {
    color: var(--dark-text-primary) !important;
}

/* Spezifische Overrides für Stats-Seite inline styles */
.dark-mode .stats-page strong[style*="#004d40"],
.dark-mode .stats-page *[style*="#004d40"] {
    color: var(--dark-text-primary) !important;
}

/* Settings-Seite - überschreibe #004d40 in inline styles */
.dark-mode .settings-category *[style*="#004d40"],
.dark-mode .premium-features-grid *[style*="#004d40"] {
    color: var(--dark-text-primary) !important;
}

/* Spezifische Overrides für alle Komponenten */
.dark-mode .settings-group h4 {
    color: var(--dark-accent) !important;
}

.dark-mode .premium-features-grid .checkbox-label > span {
    color: var(--dark-text-primary) !important;
}

/* Time Bar Container - Dark Mode */
.dark-mode #time-bar-container {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.dark-mode #time-bar-visualization {
    border-color: var(--dark-border) !important;
}

.dark-mode #time-bar-legend > div {
    background: rgba(255, 255, 255, 0.05) !important;
}

.dark-mode #time-bar-legend strong {
    color: var(--dark-text-primary) !important;
}

.dark-mode #time-bar-legend p {
    color: var(--dark-text-secondary) !important;
}

/* ============================================
   Aktuell.html - Moderne Statistik-Karten
   ============================================ */

/* Stats Container Grid Layout */
#stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    padding: 0;
}

/* Statistik-Karten */
.aktuell-stat-card {
    background: var(--stat-bg, #f5f5f5);
    border-left: 5px solid var(--stat-border, #9e9e9e);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
    overflow-y: hidden;
    overflow-x: visible;
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 100px;
}

.aktuell-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--stat-border, #9e9e9e), transparent);
    opacity: 0.5;
}

.aktuell-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Icon */
.aktuell-stat-icon {
    font-size: 2.5em;
    line-height: 1;
    flex-shrink: 0;
    filter: none !important;
    text-shadow: none !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Content */
.aktuell-stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.aktuell-stat-label {
    font-size: 0.95em;
    color: #333;
    line-height: 1.4;
    font-weight: 500;
}

.aktuell-stat-value {
    font-size: 1.8em;
    font-weight: bold;
    color: var(--stat-border, #9e9e9e);
    line-height: 1;
    overflow-x: visible !important;
    overflow-y: visible !important;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aktuell-stat-days {
    font-size: 0.85em;
    color: #666;
    font-weight: 500;
    margin-top: 4px;
    opacity: 0.8;
}

/* Detail-Ansicht unter den Karten (expandable) */
.aktuell-stat-details {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(0,0,0,0.15);
    font-size: 0.95em;
    color: #444;
    max-height: 220px;
    overflow-y: auto;
}

.aktuell-stat-details-header {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 8px;
    color: #004d40;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.aktuell-stat-details-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aktuell-stat-details-date {
    font-size: 0.95em;
    font-weight: 600;
    margin-right: 8px;
    color: #004d40;
}

.aktuell-stat-details-text {
    font-size: 0.95em;
    color: #333;
}

.aktuell-stat-details-loading,
.aktuell-stat-details-empty,
.aktuell-stat-details-error {
    font-size: 0.95em;
    color: #666;
}

.aktuell-stat-card.expanded {
    box-shadow: 0 8px 14px rgba(0, 0, 0, 0.18), 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Year Header */
#year-header {
    font-size: 1.5em;
    color: #004d40;
    margin-bottom: 10px;
    font-weight: 600;
}

/* No Stats Message */
.no-stats-message {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 1.1em;
    background: #f9f9f9;
    border-radius: 8px;
    border: 2px dashed #ddd;
}

/* Loading & Error States */
#loading {
    text-align: center;
    padding: 40px 20px;
    color: #004d40;
    font-size: 1.1em;
}

#error {
    background: #ffebee;
    border-left: 4px solid #f44336;
    border-radius: 8px;
    padding: 20px;
    color: #c62828;
    margin: 20px 0;
}

/* Responsive Design */

/* Dark Mode Support */
.dark-mode .aktuell-stat-card {
    background: var(--dark-bg-secondary, #2d2d2d);
    border-left-color: var(--stat-border, #9e9e9e);
}

.dark-mode .aktuell-stat-label {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .aktuell-stat-value {
    color: var(--stat-border, #9e9e9e);
}

.dark-mode .aktuell-stat-days {
    color: var(--dark-text-secondary, #b0b0b0);
}

.dark-mode .aktuell-stat-details {
    color: var(--dark-text-secondary, #b0b0b0);
    border-top-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .aktuell-stat-details-header {
    color: var(--dark-text-primary, #e0e0e0);
    border-bottom-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .aktuell-stat-details-date {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .aktuell-stat-details-text {
    color: var(--dark-text-secondary, #b0b0b0);
}

.dark-mode .aktuell-stat-details-loading,
.dark-mode .aktuell-stat-details-empty,
.dark-mode .aktuell-stat-details-error {
    color: var(--dark-text-secondary, #b0b0b0);
}

.dark-mode #year-header {
    color: var(--dark-text-primary, #e0e0e0);
}

.dark-mode .no-stats-message {
    background: var(--dark-bg-secondary, #2d2d2d);
    color: var(--dark-text-secondary, #b0b0b0);
    border-color: #555;
}

.dark-mode #error {
    background: rgba(244, 67, 54, 0.15);
    border-left-color: #f44336;
    color: #ffcdd2;
}

/* Weekday Stats Container - Dark Mode */
.dark-mode #weekday-stats-container {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

.dark-mode #weekday-stats-container h3 {
    color: var(--dark-text-primary) !important;
}

.dark-mode #weekday-stats-container span {
    color: var(--dark-text-primary) !important;
}

/* Überschreibe inline styles in weekday-stats-container */

/* Chart Container - Dark Mode */
.dark-mode .chart-container {
    background: var(--dark-bg-secondary) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}

.dark-mode .chart-container h3 {
    color: var(--dark-accent) !important;
}

/* Ernährung-Karten – moderne Shiny-Effekte */
.nutrition-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.nutrition-card {
    position: relative;
    border-radius: 16px;
    padding: 20px;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease;
}

.nutrition-card:hover {
    transform: translateY(-4px);
}

/* Glänzender Overlay-Effekt (dezent) */
.nutrition-card-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.15) 45%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.15) 55%,
        transparent 60%,
        transparent 100%
    );
    animation: nutrition-shine 5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes nutrition-shine {
    0% { left: -100%; }
    30% { left: -100%; }
    50% { left: 140%; }
    70% { left: 140%; }
    100% { left: -100%; }
}

.nutrition-card-title {
    margin: 0 0 14px 0 !important;
    font-size: 0.95em !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    position: relative;
    z-index: 1;
}

.nutrition-chart-wrapper {
    height: 220px;
    position: relative;
    width: 100%;
    z-index: 1;
}

/* Karte: Gesund vs. Ungesund */
.nutrition-card-eating {
    background: linear-gradient(145deg, #e8f5e9 0%, #c8e6c9 40%, #a5d6a7 100%);
    box-shadow: 0 4px 20px rgba(76, 175, 80, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(76, 175, 80, 0.35);
}

.nutrition-card-eating:hover {
    box-shadow: 0 12px 32px rgba(76, 175, 80, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nutrition-card-eating .nutrition-card-title {
    color: #1b5e20 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Karte: Supplemente */
.nutrition-card-supplements {
    background: linear-gradient(145deg, #e3f2fd 0%, #bbdefb 40%, #90caf9 100%);
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.25),
                0 1px 3px rgba(0, 0, 0, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(33, 150, 243, 0.35);
}

.nutrition-card-supplements:hover {
    box-shadow: 0 12px 32px rgba(33, 150, 243, 0.35),
                0 4px 12px rgba(0, 0, 0, 0.1),
                inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nutrition-card-supplements .nutrition-card-title {
    color: #0d47a1 !important;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

/* Dark Mode – Ernährung-Karten */
.dark-mode .nutrition-card-eating {
    background: linear-gradient(145deg, #1b3d1f 0%, #2e5c33 50%, #3d7a42 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(76, 175, 80, 0.4);
}

.dark-mode .nutrition-card-eating:hover {
    box-shadow: 0 12px 32px rgba(76, 175, 80, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-mode .nutrition-card-eating .nutrition-card-title {
    color: #81c784 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .nutrition-card-supplements {
    background: linear-gradient(145deg, #0d2137 0%, #1a3a5c 50%, #264a73 100%);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
    border-color: rgba(33, 150, 243, 0.4);
}

.dark-mode .nutrition-card-supplements:hover {
    box-shadow: 0 12px 32px rgba(33, 150, 243, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.dark-mode .nutrition-card-supplements .nutrition-card-title {
    color: #64b5f6 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.dark-mode .nutrition-card-shine {
    background: linear-gradient(
        105deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.04) 45%,
        rgba(255, 255, 255, 0.08) 50%,
        rgba(255, 255, 255, 0.04) 55%,
        transparent 60%,
        transparent 100%
    );
}

.nutrition-card .nutrition-no-data {
    color: rgba(0, 0, 0, 0.5) !important;
    padding: 40px 20px !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}

.dark-mode .nutrition-card .nutrition-no-data {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Date-Finder - Dark Mode */
.dark-mode .date-finder {
    background: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .date-finder h3 {
    color: var(--dark-text-primary) !important;
}

.dark-mode .date-finder input[type="date"] {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

.dark-mode .date-finder .helper {
    color: var(--dark-text-secondary) !important;
}

.dark-mode .date-finder p {
    color: var(--dark-text-secondary) !important;
}

/* Collapsible Zeitverteilung-Sektion - modern, einheitlich */
.collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 16px 22px;
    text-align: left;
    background: linear-gradient(145deg, #e5eeeb 0%, #dce6e3 100%);
    border-radius: 14px;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(0, 77, 64, 0.06),
                0 4px 16px rgba(0, 121, 107, 0.08),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.28s ease,
                background 0.25s ease;
    border: 1px solid rgba(0, 121, 107, 0.1);
    user-select: none;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.collapsible-header:hover {
    background: linear-gradient(145deg, #d8e6e3 0%, #d0dfdb 100%);
    box-shadow: 0 6px 20px rgba(0, 77, 64, 0.08),
                0 2px 8px rgba(0, 121, 107, 0.08);
    transform: translateY(-1px);
    border-color: rgba(0, 121, 107, 0.18);
}

.collapsible-header:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 77, 64, 0.06);
}

.collapsible-header h2 {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    color: #004d40;
    transition: color 0.2s ease;
    flex: 1;
    min-width: 0;
    max-width: 85%;
    text-align: left;
}

/* H2 in Collapsible-Headern linksbündig (überschreibt .stats-page Zentrier-Regel) */
.stats-page .collapsible-header h2,
main.dashboard-container .stats-page .collapsible-header h2 {
    text-align: left !important;
}

.collapsible-header:hover h2 {
    color: #00796b;
}

/* Collapsible-spezifische Toggle-Icon Styles (unterscheidet sich von Category .toggle-icon) */
.collapsible-header .toggle-icon {
    font-size: 1.2em;
    color: #00796b;
    flex-shrink: 0;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    display: inline-block;
    user-select: none;
    font-weight: bold;
}

/* Collapsible-Header in stat-cards (z.B. Sport): wie Top 5 Freunde – Text links, Pfeil rechts, 1 Zeile */
#stats-container .stat-card .collapsible-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    text-align: left !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#stats-container .stat-card .collapsible-header h2 {
    margin: 0 !important;
    flex: 1;
    min-width: 0;
    text-align: left !important;
}
#stats-container .stat-card .collapsible-header .toggle-icon {
    margin: 0 !important;
    margin-left: auto !important;
    flex-shrink: 0;
}

.collapsible-header .toggle-icon.rotated {
    transform: rotate(90deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s ease,
                padding 0.3s ease;
    padding: 0 20px;
}

.collapsible-content.expanded {
    max-height: 10000px; /* Sehr groß, damit sich Höhe nach Inhalt richtet */
    opacity: 1;
    padding: 20px;
    margin-top: 10px;
}

.collapsible-content.collapsing {
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease,
                padding 0.3s ease;
}

.time-bar-description {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.9em;
    line-height: 1.5;
    animation: fadeIn 0.4s ease;
}

.time-bar-container {
    background: white;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    animation: slideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.time-bar-visualization {
    width: 100%;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    margin-bottom: 15px;
    border: 2px solid #e0e0e0;
    transition: border-color 0.2s ease;
}

.time-bar-visualization:hover {
    border-color: #00796b;
}

.time-bar-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: fadeIn 0.5s ease 0.1s both;
}

/* Dark Mode Support */
.dark-mode .collapsible-header {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--dark-text-primary);
}

.dark-mode .collapsible-header:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
}

.dark-mode .collapsible-header h2 {
    color: var(--dark-text-primary);
}

.dark-mode .collapsible-header:hover h2 {
    color: #4db6ac;
}

.dark-mode .toggle-icon {
    color: #4db6ac;
}

.dark-mode .time-bar-description {
    color: var(--dark-text-secondary);
}

.dark-mode .time-bar-container {
    background: #2a2a2a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dark-mode .time-bar-visualization {
    border-color: #404040;
}

.dark-mode .time-bar-visualization:hover {
    border-color: #4db6ac;
}

/* --------------------------
   Notification Modal
--------------------------- */
.notification-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
}

.notification-modal.show {
    display: flex;
}

.notification-modal-content {
    background: white;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
    position: relative;
    margin: 1rem;
}

.notification-header {
    background: linear-gradient(135deg, #00796b 0%, #004d40 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 15px 15px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.notification-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: white;
}

.notification-close {
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.notification-body {
    padding: 1.5rem;
    text-align: center;
}

.notification-body p {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.6;
    white-space: pre-wrap;
    color: #333;
}

.notification-image-container {
    display: none;
    margin-bottom: 1rem;
}

.notification-image-container.show {
    display: block;
}

.notification-image {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.notification-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    background: #f5f5f5;
    border-radius: 0 0 15px 15px;
}

.notification-footer .btn {
    background: #00796b;
    color: white;
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.notification-footer .btn:hover {
    background: #004d40;
}


.dark-mode .notification-modal-content {
    background: #1e1e1e;
    color: #e0e0e0;
}

.dark-mode .notification-body p {
    color: #e0e0e0;
}

.dark-mode .notification-footer {
    background: #2d2d2d;
    border-top-color: #404040;
}

/* --------------------------
   Day Details Modal
--------------------------- */
.day-details-modal {
    display: none;
}

.day-details-modal.show {
    display: flex;
}

/* @keyframes fadeIn ist bereits definiert (Zeile 1664) */

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Kleine Collapsible-Header (für Unterabschnitte) */
.collapsible-header-small {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 10px 15px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 8px;
    margin-bottom: 0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.04);
    user-select: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapsible-header-small:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.collapsible-header-small:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.collapsible-header-small h3 {
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    transition: color 0.2s ease;
}

.collapsible-header-small:hover h3 {
    color: #00796b;
}

.toggle-icon-small {
    font-size: 1em;
    color: #00796b;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.2s ease;
    display: inline-block;
    user-select: none;
    font-weight: bold;
}

.toggle-icon-small.rotated {
    transform: rotate(90deg);
}

.collapsible-content-small {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.25s ease;
    padding: 0 15px;
}

.collapsible-content-small.expanded {
    max-height: 10000px; /* Sehr groß, damit sich Höhe nach Inhalt richtet */
    opacity: 1;
    padding: 15px;
    margin-top: 8px;
}

.collapsible-content-small.collapsing {
    transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.15s ease,
                padding 0.15s ease;
}

/* Dark Mode für kleine Header */
.dark-mode .collapsible-header-small {
    background: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    border-color: rgba(255, 255, 255, 0.08);
}

.dark-mode .collapsible-header-small:hover {
    background: linear-gradient(135deg, #3a3a3a 0%, #2a2a2a 100%);
}

.dark-mode .collapsible-header-small h3 {
    color: var(--dark-text-primary);
}

.dark-mode .collapsible-header-small:hover h3 {
    color: #4db6ac;
}

.dark-mode .toggle-icon-small {
    color: #4db6ac;
}

/* --------------------------
   Onboarding Styles
--------------------------- */
.onboarding-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.dark-mode .onboarding-container {
    background: #2d2d2d;
    color: #e0e0e0;
}

.onboarding-step {
    display: none;
}

.onboarding-step.active {
    display: block;
}

.step-header {
    text-align: center;
    margin-bottom: 30px;
}

.step-header h2 {
    font-size: 24px;
    margin-bottom: 10px;
}

.step-header p {
    color: #666;
    font-size: 14px;
}

.dark-mode .step-header p {
    color: #aaa;
}

.onboarding-container .form-group {
    margin-bottom: 20px;
}

.onboarding-container .form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
}

.onboarding-container .form-group input,
.onboarding-container .form-group select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    box-sizing: border-box;
}

.dark-mode .onboarding-container .form-group input,
.dark-mode .onboarding-container .form-group select {
    background: #404040;
    border-color: #555;
    color: #e0e0e0;
}

.checkbox-group {
    margin-bottom: 15px;
}

/* Onboarding-spezifische Checkbox-Styles (unterscheidet sich von Settings-Checkboxes) */
.onboarding-container .checkbox-label {
    display: flex;
    align-items: center;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: background 0.2s;
}

.onboarding-container .checkbox-label:hover {
    background: #f5f5f5;
}

.dark-mode .onboarding-container .checkbox-label {
    border-color: #555;
}

.dark-mode .onboarding-container .checkbox-label:hover {
    background: #404040;
}

.onboarding-container .checkbox-label input[type="checkbox"] {
    margin-right: 10px;
    margin-top: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
}

.onboarding-container .checkbox-label span {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.checkbox-content {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.checkbox-icon {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 8px;
    text-align: center;
}

.checkbox-text {
    line-height: 1.4;
    text-align: center;
}

.onboarding-buttons {
    display: flex;
    gap: 10px;
    margin-top: 30px;
}

.onboarding-container .btn-primary {
    flex: 1;
    padding: 12px;
    background: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.onboarding-container .btn-primary:hover {
    background: #45a049;
}

.onboarding-container .btn-secondary {
    padding: 12px 20px;
    background: #f5f5f5;
    color: #666;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.onboarding-container .btn-secondary:hover {
    background: #e0e0e0;
}

.dark-mode .onboarding-container .btn-secondary {
    background: #404040;
    color: #e0e0e0;
    border-color: #555;
}

.dark-mode .onboarding-container .btn-secondary:hover {
    background: #505050;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    margin-bottom: 30px;
    overflow: hidden;
}

.dark-mode .progress-bar {
    background: #404040;
}

.progress-fill {
    height: 100%;
    background: #4CAF50;
    transition: width 0.3s;
}

.step-indicator {
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-bottom: 20px;
}

.dark-mode .step-indicator {
    color: #aaa;
}

.info-text {
    background: #e3f2fd;
    border-left: 4px solid #2196F3;
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 4px;
    font-size: 13px;
    color: #1565C0;
}

.dark-mode .info-text {
    background: #1e3a5f;
    border-left-color: #64b5f6;
    color: #90caf9;
}

.conditional-field {
    margin-left: 30px;
    margin-top: 10px;
    padding-left: 15px;
    border-left: 2px solid #4CAF50;
}

.dark-mode .conditional-field {
    border-left-color: #66bb6a;
}

/* Onboarding Modus-Auswahl */
.onboarding-mode-selection {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.mode-card {
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.mode-card:hover {
    border-color: #4CAF50;
    background: #f8fdf8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.15);
}

.mode-card .mode-icon {
    font-size: 36px;
    margin-bottom: 12px;
}

.mode-card h3 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: #333;
}

.mode-card p {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.mode-card .mode-duration {
    display: inline-block;
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    padding: 4px 12px;
    border-radius: 12px;
}

.dark-mode .mode-card {
    border-color: #555;
    background: #353535;
}

.dark-mode .mode-card:hover {
    border-color: #66bb6a;
    background: #3a4a3a;
}

.dark-mode .mode-card h3 {
    color: #e0e0e0;
}

.dark-mode .mode-card p {
    color: #aaa;
}

.dark-mode .mode-card .mode-duration {
    background: #404040;
    color: #aaa;
}

.quick-hint-content .guide-item {
    text-align: left;
}

/* Welcome Guide Modal */
.welcome-guide-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    overflow: auto;
    align-items: center;
    justify-content: center;
}

.welcome-guide-content {
    background: white;
    margin: 20px auto;
    padding: 30px;
    border-radius: 15px;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

.dark-mode .welcome-guide-content {
    background: #2d2d2d;
    color: #e0e0e0;
}

.welcome-guide-header {
    text-align: center;
    margin-bottom: 30px;
}

.welcome-guide-header h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #00796b;
}

.dark-mode .welcome-guide-header h2 {
    color: #4db6ac;
}

.welcome-guide-header p {
    color: #666;
    font-size: 14px;
}

.dark-mode .welcome-guide-header p {
    color: #aaa;
}

.welcome-guide-body {
    margin-bottom: 30px;
}

.guide-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
    padding: 15px;
    background: #f5f5f5;
    border-radius: 10px;
    border-left: 4px solid #4CAF50;
}

.dark-mode .guide-item {
    background: #404040;
    border-left-color: #66bb6a;
}

.guide-icon {
    font-size: 2.5em;
    margin-right: 15px;
    flex-shrink: 0;
    line-height: 1;
}

.guide-text {
    flex: 1;
}

.guide-text h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #004d40;
}

.dark-mode .guide-text h3 {
    color: #4db6ac;
}

.guide-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

.dark-mode .guide-text p {
    color: #ccc;
}

.guide-text strong {
    color: #00796b;
    font-weight: 600;
}

.dark-mode .guide-text strong {
    color: #4db6ac;
}

.welcome-guide-footer {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.dark-mode .welcome-guide-footer {
    border-top-color: #555;
}

.welcome-guide-footer .btn-primary {
    padding: 12px 30px;
    font-size: 16px;
}

/* Mobile Optimierungen für Welcome Guide */

/* ============================
   Log-Step Styles
   ============================ */

/* Selected Date Display */
.selected-date-display {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-secondary, #666);
    font-size: 1rem;
    text-align: center;
}

.dark-mode .selected-date-display {
    color: var(--dark-text-secondary);
}

/* Supplements Tags Container */
#supplements-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    min-height: 2rem;
}

/* Supplements Input Hint */
.supplements-input-hint {
    display: block;
    margin-top: 0.25rem;
    color: #666;
    font-size: 0.85rem;
}

.dark-mode .supplements-input-hint {
    color: var(--dark-text-secondary);
}

/* Centered Toast Message */
.centered-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(244, 67, 54, 0.95);
    color: white;
    padding: 1.5rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
    z-index: 10001;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.2s ease-in;
    max-width: 90%;
    max-width: calc(100% - 2rem);
    word-wrap: break-word;
}

.centered-toast.show {
    opacity: 1;
    transition: opacity 0.2s ease-in;
}

.centered-toast.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* ============================================
   KONSOLIDIERTE MOBILE STYLES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    /* Horizontales Scrollen strikt verhindern - 100vw vermeiden (inkl. Scrollbar = Overflow) */
    html, body {
        overflow-x: hidden !important;
        overflow-x: clip;
        width: 100%;
        max-width: 100%;
    }
    main.dashboard-container,
    .welcome-section {
        overflow-x: clip !important;
        max-width: 100%;
    }

    /* === FAB === */
    .fab {
        width: 56px;
        height: 56px;
        bottom: 16px;
        right: 16px;
        font-size: 32px;
    }

    /* Social-FAB auf Mobile ueber dem Plus-FAB platzieren (kein Overlap) */
    .fab-social-global {
        right: 16px;
        bottom: 84px;
    }

    /* === Navbar === */
    .navbar {
        max-width: 100%;
        margin: 0;
        padding: 0.5rem 1rem;
        width: 100%;
    }

    /* === Edit Grid === */
    .edit-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    /* === Log Date === (Smartphone: Datum nach Auswahl zentral, nicht linksbündig) */
    #log-date {
        position: relative;
        text-align: center !important;
        text-align-last: center !important;
        /* Symmetrisches Padding: Beidseitig gleich, damit Inhaltsbereich zentriert ist.
           Kalender-Icon überlagert rechts per position:absolute und nimmt keinen Platz weg. */
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    
    /* Kalender-Icon ausgeblendet – gesamtes Feld bleibt klickbar */
    #log-date::-webkit-calendar-picker-indicator {
        position: absolute !important;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }
    
    /* iOS: Anzeige des gewählten Datums zentrieren */
    #log-date::-webkit-date-and-time-value {
        text-align: center !important;
        display: block !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    /* Android/Chrome: Container und Felder zentrieren */
    #log-date::-webkit-datetime-edit {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }
    
    #log-date::-webkit-datetime-edit-fields-wrapper {
        display: flex !important;
        justify-content: center !important;
        flex: 1 !important;
        min-width: 0 !important;
        margin: 0 auto !important;
    }
    
    #log-date::-webkit-datetime-edit-text,
    #log-date::-webkit-datetime-edit-month-field,
    #log-date::-webkit-datetime-edit-day-field,
    #log-date::-webkit-datetime-edit-year-field {
        text-align: center !important;
    }

    /* Touch-Geräte: Zentrierung verstärken (manche Smartphones ignorieren o. g. Regeln) */
    @media (pointer: coarse) {
        #log-date {
            text-align: center !important;
        }
        #log-date::-webkit-date-and-time-value {
            text-align: center !important;
            width: 100% !important;
        }
    }

    /* === Premium Features === */
    .premium-features-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    /* === Toast Messages === */
    .toast-success-message {
        top: 80px;
        right: 1rem;
        left: 1rem;
        text-align: center;
        padding: 1rem;
    }

    /* === Response Messages === */
    .settings-page #response-message.error-message,
    .settings-page #response-message.success-message {
        top: 70px !important;
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
        max-width: calc(100% - 1rem);
        min-width: 250px;
    }
    
    #response-message.error-message,
    #response-message.success-message {
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
        max-width: calc(100% - 1rem);
        min-width: 250px;
    }
    
    .settings-page #response-message.error-message.fade-out,
    .settings-page #response-message.success-message.fade-out,
    #response-message.error-message.fade-out,
    #response-message.success-message.fade-out {
        transform: translate(-50%, -30px) !important;
    }

    /* === Table Container === */
    .table-container th,
    .table-container td {
        padding: 0.4rem 0.5rem;
    }

    main { 
        padding: 1rem; 
        padding-top: calc(1rem + 60px);
        max-width: 100%;
        overflow-x: hidden;
    }

    .page-message {
        top: 56px;
        padding: 0.5rem 0.75rem;
        margin-top: calc(56px + 0.5rem);
    }

    /* === Edit Grid Compact === */
    .edit-grid-compact {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    /* === Random Gratitude === */
    .random-gratitude {
        padding: 0.6rem 0.85rem;
        margin-top: 0.75rem;
    }
    
    .gratitude-header {
        font-size: 0.95rem;
    }
    
    .gratitude-content {
        font-size: 0.85rem;
    }
    
    .gratitude-date {
        font-size: 0.75rem;
    }

    /* === Stats Dropdown === */
    .stats-page .custom-dropdown {
        z-index: 10000;
        position: relative;
    }
    
    .stats-page .year-selector {
        position: relative;
        z-index: 10000;
    }
    
    .stats-page .dropdown-list {
        position: fixed;
        top: auto;
        left: 50%;
        right: auto;
        transform: translateX(-50%) translateZ(0);
        width: 90vw;
        max-width: 300px;
        margin-top: 8px;
        z-index: 10001;
        display: none;
    }
    
    .stats-page .dropdown-list[style*="display: block"] {
        display: block !important;
    }
    
    .stats-page .welcome-section,
    main.dashboard-container {
        overflow-y: visible !important;
    }

    /* === Year Summary Cards (Mobile) === */
    .year-summary-cards {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }

    /* Productivity-Cards: nur 2 sichtbar → je 50% Breite */
    .stats-page .productivity-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .year-summary-card {
        padding: 0.6rem 0.3rem;
        min-height: 70px;
    }

    .year-summary-card-emoji {
        font-size: 1.15rem;
        margin-bottom: 0.15rem;
    }

    .year-summary-card-label {
        font-size: 0.6rem;
        margin-bottom: 0.15rem;
    }

    .year-summary-card-value {
        font-size: 0.8rem;
    }

    .stats-page .year-summary-clickable::after {
        font-size: 0.5rem;
    }

    /* Mood-Ratings Cards (Mobile) */
    .mood-ratings-cards {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.5rem;
    }

    .mood-card {
        padding: 0.6rem 0.3rem;
        min-height: 70px;
    }

    .mood-card-emoji {
        font-size: 1.15rem;
        margin-bottom: 0.15rem;
    }

    .mood-card-label {
        font-size: 0.6rem;
    }

    .mood-card-value {
        font-size: 0.8rem;
    }

    /* === Quick Entry Section === */
    .quick-entry-section {
        padding: 1rem;
        margin: 1.5rem 1rem;
    }
    
    .quick-entry-form .button-group {
        flex-direction: column;
    }
    
    .quick-entry-form .button-group .btn {
        width: 100%;
    }

    /* === Summary Grid === */
    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        max-width: 100%;
    }
    
    .summary-item {
        padding: 0.5rem;
    }
    
    .summary-icon {
        font-size: 1.6rem;
    }
    
    .summary-value {
        font-size: 1.8rem;
    }
    
    .summary-caption {
        font-size: 0.7rem;
    }

    /* === Calendar Emojis (Mobile: kompakter) === */
    .calendar-additional-emojis {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.05rem;
        line-height: 1;
        text-align: center;
        width: 100%;
        overflow: visible;
        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif;
    }
    
    .calendar-additional-emojis span {
        display: block;
        line-height: 1;
    }
    
    .calendar-day {
        min-height: 58px;
        padding: 0.12rem 0.2rem;
        overflow: visible;
    }
    
    .calendar-day-number {
        margin-bottom: 0.02rem;
        font-size: 1rem;
    }
    
    .calendar-day-mood {
        gap: 0.08rem;
        font-size: 0.9rem;
        overflow: visible;
        font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji', 'Android Emoji', emoji, sans-serif;
        line-height: 1;
    }

    /* === Dashboard Container === */
    main.dashboard-container {
        padding: 0.5rem;
        padding-top: calc(0.5rem + 60px);
        gap: 0.75rem;
    }

    .welcome-section,
    .actions-section,
    .mood-calendar-section {
        padding: 0.75rem;
    }

    /* Gamification: Mehr Abstand oben/unten auf Mobile */
    .gamification-container {
        margin-top: 2.5rem !important;
        margin-bottom: 2rem !important;
    }

    .calendar-nav-btn {
        padding: 0.25rem 0.5rem;
    }

    .mood-calendar {
        gap: 3px;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    .calendar-day {
        padding: 0.05rem 0.1rem;
        height: 99px;
        width: 100%;
        max-width: 100%;
        aspect-ratio: auto;
        box-sizing: border-box;
        overflow: visible;
    }

    .calendar-legend {
        gap: 0.3rem;
    }

    .quick-entry-header,
    .missing-dates-header {
        flex-direction: column;
        align-items: center;
    }

    .quick-entry-section h2,
    .missing-dates-header h3 {
        text-align: center;
    }

    .quick-entry-toggle,
    .missing-dates-toggle {
        align-self: center;
    }

    /* === Modal === */
    .calendar-mood-emoji {
        display: none;
    }
    
    .day-details-modal {
        padding: 0;
        align-items: stretch;
    }

    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: 100vh;
        max-height: 100dvh;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
        margin: 0;
    }

    .modal-header {
        padding: 1rem;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .modal-header h2 {
        font-size: 1.2rem;
    }

    .modal-body {
        padding: 1rem;
        padding-bottom: 1.5rem;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
        flex-shrink: 0;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    .modal-footer button {
        width: 100%;
    }

    .detail-section {
        padding: 0.75rem;
    }

    .detail-section h3 {
        font-size: 1rem;
    }

    .legend-color {
        width: 12px;
        height: 12px;
    }

    /* === Time Bar === */
    #time-bar-visualization {
        min-height: 50px;
        height: 50px;
    }
    
    #time-bar-visualization div {
        font-size: 0.75em !important;
    }
    
    #time-bar-legend {
        gap: 6px !important;
    }
    
    #time-bar-legend > div {
        padding: 6px !important;
        font-size: 0.85em;
    }
    
    #time-bar-legend strong {
        font-size: 0.9em;
    }
    
    #time-bar-legend p {
        font-size: 0.8em !important;
    }

    /* === Knowledge Section === */
    .knowledge-section {
        padding: 1rem 1rem;
        border-radius: 0.9rem;
    }

    .knowledge-section h2 {
        font-size: 1.1rem;
    }

    .learned-item {
        padding: 0.5rem 0.6rem;
    }

    /* === Stats Grid === */
    #stats-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .aktuell-stat-card {
        padding: 16px;
        min-height: 90px;
    }
    
    .aktuell-stat-icon {
        font-size: 2em;
        filter: none !important;
        text-shadow: none !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
    }
    
    .aktuell-stat-value {
        font-size: 1.5em;
    }
    
    .aktuell-stat-label {
        font-size: 0.9em;
    }

    /* === Notification Modal === */
    .notification-modal-content {
        width: 95%;
        max-height: 85vh;
        margin: 0.5rem;
    }

    .notification-header h2 {
        font-size: 1.2rem;
    }

    .notification-body {
        padding: 1rem;
    }

    .notification-body p {
        font-size: 1rem;
    }

    /* === Onboarding === */
    .onboarding-container {
        margin: 20px auto;
        padding: 20px;
        max-width: calc(100% - 40px);
    }

    .step-header h2 {
        font-size: 20px;
    }

    .step-header p {
        font-size: 13px;
    }

    .checkbox-label {
        padding: 10px;
        margin-bottom: 8px;
    }

    .checkbox-icon {
        font-size: 1em;
        margin-bottom: 6px;
    }

    .checkbox-text {
        font-size: 13px;
        line-height: 1.3;
    }

    .checkbox-label input[type="checkbox"] {
        margin-right: 8px;
        margin-top: 0;
    }

    .onboarding-container .form-group {
        margin-bottom: 15px;
    }

    .onboarding-container .form-group label {
        font-size: 14px;
        margin-bottom: 6px;
    }

    .onboarding-container .form-group input,
    .onboarding-container .form-group select {
        padding: 10px;
        font-size: 14px;
    }

    .info-text {
        padding: 10px;
        font-size: 12px;
        margin-bottom: 15px;
    }

    .conditional-field {
        margin-left: 20px;
        margin-top: 8px;
        padding-left: 12px;
    }

    .onboarding-buttons {
        margin-top: 20px;
    }

    .onboarding-container .btn-primary,
    .onboarding-container .btn-secondary {
        padding: 10px;
        font-size: 14px;
    }

    .step-indicator {
        font-size: 11px;
        margin-bottom: 15px;
    }

    /* === Welcome Guide === */
    .welcome-guide-content {
        padding: 20px;
        margin: 10px;
        width: calc(100% - 20px);
    }

    .welcome-guide-header h2 {
        font-size: 20px;
    }

    .guide-item {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .guide-icon {
        margin-right: 0;
        margin-bottom: 10px;
        font-size: 2em;
    }

    .guide-text h3 {
        font-size: 16px;
    }

    .guide-text p {
        font-size: 13px;
    }

    /* === Log Container === (Kleine Smartphones: Datum zentral) */
    .log-container input[type="date"],
    #log-date {
        text-align: center !important;
        text-align-last: center !important;
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }
    #log-date::-webkit-date-and-time-value,
    #log-date::-webkit-datetime-edit,
    #log-date::-webkit-datetime-edit-fields-wrapper {
        text-align: center !important;
        justify-content: center !important;
    }
    
    .centered-toast {
        padding: 1.2rem 1.5rem;
        font-size: 1rem;
        max-width: calc(100% - 1rem);
    }

    /* === Stats Page - Basis === */
    html, body {
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
    }
    
    main.dashboard-container {
        padding: 0.5rem;
        padding-top: calc(0.5rem + 60px);
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    main section.welcome-section {
        padding: 0.75rem 0.5rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        overflow-y: visible;
        position: relative;
    }
    
    main section.welcome {
        padding: 0.75rem 0.5rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    main section.welcome-section h1,
    main section.welcome h1 {
        margin-bottom: 0.5rem;
    }
    
    main section.welcome-section h2,
    main section.welcome h2 {
        margin-bottom: 8px;
    }
    
    main section.welcome-section h3,
    main section.welcome h3 {
        margin-bottom: 6px;
    }
    
    .table-container table {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }
    
    .year-selector {
        margin: 10px 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    
    #year-select {
        padding: 6px 8px;
        margin-left: 8px;
        max-width: calc(100% - 100px);
    }
    
    #year-summary-table {
        margin: 10px 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    #year-summary-table h2 {
        margin-bottom: 6px;
        padding: 0;
    }
    
    #stats-container {
        padding: 0;
        margin-top: 15px;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        display: grid;
    }
    
    main section.welcome-section > section,
    main section.welcome-section > div,
    main section.welcome > section,
    main section.welcome > div {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Stats Premium-Hinweis: Abstand trotz Mobile-Reset erhalten */
    main section.welcome-section > #stats-premium-upgrade-hint {
        margin-top: 0.75rem;
        padding-top: 0.5rem;
    }
    
    main section.welcome > .missing-dates-notification {
        padding: 1rem 1rem !important;
        margin: 0.75rem 0 !important;
    }
    
    main section.welcome > .log-action {
        margin-top: 1.25rem;
    }
    
    main section.welcome-section p[style*="min-width"],
    main section.welcome p[style*="min-width"],
    .stat-card p[style*="min-width"] {
        min-width: 0;
        width: auto;
        max-width: 100%;
    }
    
    .stat-card[style],
    .stat-card {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 6px 8px;
        margin: 0;
    }
    
    .stat-card h3[style],
    .stat-card h3 {
        margin: 0;
    }
    
    .stat-card p[style],
    .stat-card p {
        margin: 2px 0;
    }
    
    main section.welcome > section[style],
    main section.welcome > div[style] {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    #stats-container[style] {
        padding: 0;
        margin-top: 15px;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        display: grid;
    }
    
    #year-summary-table[style] {
        margin: 10px 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* (alte Tabellen-Styles entfernt – jetzt Card-basiert) */
    
    .chart-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 4px;
    }
    
    main section.welcome-section *[style],
    main section.welcome *[style] {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    /* Settings: Inline-Style-Elemente nicht hart abschneiden */
    main section.welcome.settings-page *[style] {
        overflow-x: visible;
    }

    main.dashboard-container {
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        margin-left: 0;
        margin-right: 0;
    }

    main > section.overview {
        padding: 0.75rem 0.5rem;
        margin: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }

    main > section.overview .table-container {
        padding: 0.5rem;
        margin: 0.75rem 0 0 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: auto;
    }

    main > section.overview .table-container table {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        table-layout: fixed;
    }

    main > section.overview .table-container th,
    main > section.overview .table-container td {
        padding: 0.4rem 0.35rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    
    main > section.overview .days-table {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    main > section.overview .days-table table {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        box-sizing: border-box;
        margin: 0;
    }
    
    main > section.overview .days-table th,
    main > section.overview .days-table td {
        word-wrap: break-word;
        overflow-wrap: break-word;
        box-sizing: border-box;
    }
    
    canvas {
        max-width: 100%;
        height: auto;
        box-sizing: border-box;
    }
    
    header {
        padding: 0;
        margin: 0;
        width: 100%;
        max-width: 100%;
        left: 0;
        right: 0;
        position: fixed;
        top: 0;
        z-index: 10002;
        box-sizing: border-box;
    }
    
    header #header-placeholder {
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
}

/* ============================================
   MODERNE ANIMATIONEN & EFFEKTE
   ============================================ */

/* Stagger-Animation für Stat-Cards beim Erscheinen */
@keyframes fadeSlideIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.collapsible-content.expanded .stat-card,
.collapsible-content-small.expanded .stat-card {
    animation: fadeSlideIn 0.4s ease both;
}

.collapsible-content.expanded .stat-card:nth-child(1) { animation-delay: 0.03s; }
.collapsible-content.expanded .stat-card:nth-child(2) { animation-delay: 0.06s; }
.collapsible-content.expanded .stat-card:nth-child(3) { animation-delay: 0.09s; }
.collapsible-content.expanded .stat-card:nth-child(4) { animation-delay: 0.12s; }
.collapsible-content.expanded .stat-card:nth-child(5) { animation-delay: 0.15s; }
.collapsible-content.expanded .stat-card:nth-child(6) { animation-delay: 0.18s; }
.collapsible-content.expanded .stat-card:nth-child(7) { animation-delay: 0.21s; }
.collapsible-content.expanded .stat-card:nth-child(8) { animation-delay: 0.24s; }
.collapsible-content.expanded .stat-card:nth-child(9) { animation-delay: 0.27s; }
.collapsible-content.expanded .stat-card:nth-child(10) { animation-delay: 0.30s; }

.collapsible-content-small.expanded .stat-card:nth-child(1) { animation-delay: 0.02s; }
.collapsible-content-small.expanded .stat-card:nth-child(2) { animation-delay: 0.04s; }
.collapsible-content-small.expanded .stat-card:nth-child(3) { animation-delay: 0.06s; }
.collapsible-content-small.expanded .stat-card:nth-child(4) { animation-delay: 0.08s; }
.collapsible-content-small.expanded .stat-card:nth-child(5) { animation-delay: 0.10s; }
.collapsible-content-small.expanded .stat-card:nth-child(6) { animation-delay: 0.12s; }
.collapsible-content-small.expanded .stat-card:nth-child(7) { animation-delay: 0.14s; }
.collapsible-content-small.expanded .stat-card:nth-child(8) { animation-delay: 0.16s; }
.collapsible-content-small.expanded .stat-card:nth-child(9) { animation-delay: 0.18s; }
.collapsible-content-small.expanded .stat-card:nth-child(10) { animation-delay: 0.20s; }

/* Hover-Effekte für Stat-Cards - sanftes Abheben */
.stats-page .stat-card {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: default;
}

.stats-page .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 77, 64, 0.08),
                0 12px 32px rgba(0, 121, 107, 0.15),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.stats-page .stat-card:active {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 77, 64, 0.12);
}

/* Dark Mode Hover für Stat-Cards */
.dark-mode .stats-page .stat-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* Moderne Scrollbar */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00796b 0%, #004d40 100%);
    border-radius: 5px;
    border: 2px solid #f1f1f1;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #009688 0%, #00796b 100%);
}

::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

/* Dark Mode Scrollbar */
.dark-mode ::-webkit-scrollbar-track {
    background: #1e1e1e;
}

.dark-mode ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #4db6ac 0%, #00796b 100%);
    border-color: #1e1e1e;
}

.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #80cbc4 0%, #4db6ac 100%);
}

.dark-mode ::-webkit-scrollbar-corner {
    background: #1e1e1e;
}

/* Firefox Scrollbar */
html {
    scrollbar-width: thin;
    scrollbar-color: #00796b #f1f1f1;
}

html.dark-mode {
    scrollbar-color: #4db6ac #1e1e1e;
}

/* Subtile Animation für Summary-Items */
.summary-item {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.summary-item:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 77, 64, 0.15);
}

.dark-mode .summary-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Puls-Animation für hervorgehobene Werte (optional nutzbar) */
@keyframes subtlePulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 1;
    }
    50% { 
        transform: scale(1.03);
        opacity: 0.9;
    }
}

.value-pulse {
    animation: subtlePulse 2s ease-in-out infinite;
}

/* Sanfte Einblend-Animation für Sektionen */
@keyframes sectionReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.stats-page section {
    animation: sectionReveal 0.5s ease both;
}

.stats-page section:nth-child(1) { animation-delay: 0s; }
.stats-page section:nth-child(2) { animation-delay: 0.05s; }
.stats-page section:nth-child(3) { animation-delay: 0.1s; }
.stats-page section:nth-child(4) { animation-delay: 0.15s; }
.stats-page section:nth-child(5) { animation-delay: 0.2s; }

/* Verbesserter Focus-State für Barrierefreiheit */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid #00796b;
    outline-offset: 2px;
    border-radius: 4px;
}

.dark-mode button:focus-visible,
.dark-mode a:focus-visible,
.dark-mode input:focus-visible,
.dark-mode select:focus-visible {
    outline-color: #4db6ac;
}

/* ============================================
   KONSOLIDIERTE MOBILE STYLES (max-width: 480px)
   ============================================ */
@media (max-width: 480px) {
    .edit-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .edit-grid-compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }
    
    .month-stats {
        flex-direction: column;
    }

    .summary-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .summary-item {
        padding: 0.45rem;
    }
    
    .summary-icon {
        font-size: 1.5rem;
    }

    main section.welcome {
        padding: 0.5rem 0.4rem;
    }
    
}

/* ===================================
   Mobile Touch Fix
   Verhindert das Doppeltippen-Problem auf mobilen Geräten.
   Auf Touch-Geräten wird der erste Tipp als :hover interpretiert
   und erst der zweite Tipp löst den Klick aus. Dieses Problem
   tritt vor allem bei Buttons mit transform-Effekten auf.
   =================================== */
@media (hover: none) and (pointer: coarse) {
    /* Hover-Transforms auf Touch-Geräten deaktivieren */
    .btn:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-edit:hover,
    .btn-save:hover,
    .btn-cancel:hover,
    .btn-edit-small:hover,
    .btn-save-small:hover,
    .btn-cancel-small:hover,
    .btn-yes-no:hover,
    .btn-yes-no.active:hover,
    .btn-add-field:hover,
    .btn-login:hover,
    .notification-footer .btn:hover,
    .onboarding-container .btn-primary:hover,
    .onboarding-container .btn-secondary:hover,
    .modal-footer .btn-secondary:hover {
        transform: none !important;
    }

    /* Dark-Mode Hover-Transforms ebenfalls deaktivieren */
    .dark-mode .btn:hover,
    .dark-mode .btn-primary:hover,
    .dark-mode .btn-secondary:hover,
    .dark-mode .btn-edit:hover,
    .dark-mode .btn-save:hover,
    .dark-mode .btn-cancel:hover,
    .dark-mode .btn-yes-no:hover,
    .dark-mode .btn-login:hover,
    .dark-mode .btn-add-field:hover,
    .dark-mode .onboarding-container .btn-secondary:hover,
    .dark-mode .dropdown-button:hover {
        transform: none !important;
    }

    /* Alle Formulare und Buttons: sofortige Reaktion auf Touch */
    button,
    [type="submit"],
    [type="button"],
    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-save,
    .btn-cancel,
    .btn-edit,
    .btn-save-small,
    .btn-cancel-small,
    .btn-edit-small,
    .btn-yes-no,
    .btn-add-field {
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
}

/* Muskelgruppen Balkendiagramm */
.muscle-bar {
    transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.muscle-row {
    opacity: 0;
    transform: translateX(-12px);
}

.muscle-row.animate-in {
    animation: muscleRowIn 0.4s ease forwards;
}

@keyframes muscleRowIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.muscle-row:hover .muscle-bar {
    filter: brightness(1.1);
    box-shadow: 0 3px 12px rgba(23, 162, 184, 0.45);
}

/* ==============================================
   Premium Upgrade Components
   ============================================== */

/* --- Welcome Section: Small Upgrade Hint --- */
.premium-upgrade-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: rgba(255, 152, 0, 0.06);
    border: 1px solid rgba(255, 152, 0, 0.12);
}

.premium-upgrade-hint-text {
    font-size: 0.82rem;
    color: #8d6e00;
    letter-spacing: 0.01em;
}

/* --- Small Upgrade Button (used in hints and gates) --- */
.btn-premium-upgrade-small {
    display: inline-block;
    padding: 0.3rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border: none;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
    line-height: 1.4;
}

.btn-premium-upgrade-small:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

/* --- Large Upgrade Button (used in settings membership card) --- */
.btn-premium-upgrade {
    display: block;
    width: 100%;
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    border: none;
    border-radius: 10px;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    margin-top: 1.25rem;
}

.btn-premium-upgrade:hover {
    opacity: 0.92;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 152, 0, 0.25);
    color: #fff;
    text-decoration: none;
}

/* --- Settings: Premium Membership Card --- */
.premium-membership-card {
    padding: 0.25rem 0;
}

.premium-membership-intro {
    font-size: 0.9rem;
    color: #607d8b;
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.premium-benefits-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}

.premium-benefits-list li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    font-size: 0.9rem;
    color: #37474f;
    border-bottom: 1px solid rgba(0, 121, 107, 0.06);
}

.premium-benefits-list li:last-child {
    border-bottom: none;
}

.premium-benefit-icon {
    font-size: 1.05rem;
    flex-shrink: 0;
}

/* --- Pricing --- */
.premium-pricing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem;
    background: rgba(255, 152, 0, 0.04);
    border: 1px solid rgba(255, 152, 0, 0.1);
    border-radius: 10px;
}

.premium-price-option {
    text-align: center;
    flex: 1;
}

.premium-price {
    display: block;
    font-size: 1.35rem;
    font-weight: 700;
    color: #e65100;
    line-height: 1.2;
}

.premium-price-period {
    display: block;
    font-size: 0.78rem;
    color: #8d6e63;
    margin-top: 0.15rem;
}

.premium-price-save {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 600;
    color: #2e7d32;
    background: rgba(76, 175, 80, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    margin-top: 0.35rem;
}

.premium-price-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 152, 0, 0.15);
    flex-shrink: 0;
}

.premium-price-best {
    position: relative;
}

/* --- Premium Gate Notice (inline, for hidden sections) --- */
.premium-gate-notice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding: 0.9rem 1.1rem;
    background: rgba(255, 152, 0, 0.05);
    border: 1px solid rgba(255, 152, 0, 0.14);
    border-radius: 10px;
    margin-bottom: 1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.premium-gate-notice-stats {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.premium-gate-notice-text {
    font-size: 0.85rem;
    color: #795548;
    line-height: 1.45;
}

.premium-gate-notice-text strong {
    color: #e65100;
}

/* --- Premium Gate Overlay (for blur overlays like prognosis) --- */
.premium-gate-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

.premium-gate-overlay-content {
    text-align: center;
}

/* ==============================================
   Premium Upgrade: Dark Mode
   ============================================== */
.dark-mode .premium-upgrade-hint {
    background: rgba(255, 152, 0, 0.08);
    border-color: rgba(255, 152, 0, 0.15);
}

.dark-mode .premium-upgrade-hint-text {
    color: #ffb74d;
}

.dark-mode .premium-membership-intro {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-benefits-list li {
    color: var(--dark-text-primary);
    border-bottom-color: rgba(255, 255, 255, 0.06);
}

.dark-mode .premium-pricing {
    background: rgba(255, 152, 0, 0.06);
    border-color: rgba(255, 152, 0, 0.12);
}

.dark-mode .premium-price {
    color: #ffb74d;
}

.dark-mode .premium-price-period {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-price-save {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.dark-mode .premium-price-divider {
    background: rgba(255, 152, 0, 0.12);
}

.dark-mode .premium-gate-notice {
    background: rgba(255, 152, 0, 0.06);
    border-color: rgba(255, 152, 0, 0.12);
}

.dark-mode .premium-gate-notice-text {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-gate-notice-text strong {
    color: #ffb74d;
}

.dark-mode .premium-gate-overlay {
    background: rgba(30, 30, 30, 0.92);
}

.dark-mode .premium-gate-overlay .premium-gate-notice-text {
    color: var(--dark-text-secondary);
}

/* ==============================================
   Premium Upgrade: Responsive
   ============================================== */
@media (max-width: 600px) {
    .premium-upgrade-hint {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .premium-pricing {
        flex-direction: column;
        gap: 0.75rem;
    }

    .premium-price-divider {
        width: 60%;
        height: 1px;
    }

    .premium-gate-notice {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
        max-width: 100%;
    }

    .premium-gate-notice-stats {
        margin-top: 2rem;
        padding-top: 1.1rem;
    }
}

/* ==============================================
   Premium Page
   ============================================== */
.premium-page {
    text-align: center;
}

.premium-page h1 {
    font-size: 1.6rem;
    margin-bottom: 0.4rem;
}

.premium-page-subtitle {
    font-size: 0.95rem;
    color: #607d8b;
    max-width: 500px;
    margin: 0 auto 2rem;
    line-height: 1.5;
}

/* --- Status Badge --- */
.premium-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.premium-status-active {
    background: rgba(76, 175, 80, 0.1);
    color: #2e7d32;
    border: 1px solid rgba(76, 175, 80, 0.2);
}

.premium-status-free {
    background: rgba(255, 152, 0, 0.08);
    color: #e65100;
    border: 1px solid rgba(255, 152, 0, 0.15);
}

.premium-status-icon {
    font-size: 0.9rem;
}

/* --- Active Premium Info --- */
.premium-active-info {
    max-width: 360px;
    margin: 1.5rem auto;
    background: rgba(76, 175, 80, 0.05);
    border: 1px solid rgba(76, 175, 80, 0.12);
    border-radius: 10px;
    padding: 1rem 1.25rem;
}

.premium-active-row {
    display: flex;
    justify-content: space-between;
    padding: 0.45rem 0;
    font-size: 0.9rem;
}

.premium-active-row:not(:last-child) {
    border-bottom: 1px solid rgba(76, 175, 80, 0.08);
}

.premium-active-label {
    color: #607d8b;
}

.premium-active-value {
    font-weight: 600;
    color: #2e7d32;
}

.premium-features-included {
    max-width: 360px;
    margin: 1.5rem auto 0;
    text-align: left;
}

.premium-features-included h3 {
    font-size: 0.95rem;
    color: #37474f;
    margin-bottom: 0.75rem;
}

/* --- Feature Cards --- */
.premium-feature-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2.5rem;
    text-align: center;
}

.premium-feature-card {
    padding: 1.25rem;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 121, 107, 0.08);
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-feature-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.premium-feature-card-icon {
    font-size: 1.6rem;
    margin-bottom: 0.6rem;
}

.premium-feature-card h3 {
    font-size: 0.92rem;
    color: #004d40;
    margin-bottom: 0.35rem;
}

.premium-feature-card p {
    font-size: 0.8rem;
    color: #78909c;
    line-height: 1.45;
    margin: 0;
}

/* --- Promo-Code Section --- */
.premium-promo-section {
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.premium-promo-section label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: #004d40;
    margin-bottom: 0.5rem;
}

.premium-promo-row {
    display: flex;
    gap: 0.5rem;
}

.premium-promo-input {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border: 2px solid rgba(0, 121, 107, 0.2);
    border-radius: 10px;
    font-size: 0.95rem;
    text-transform: uppercase;
}

.premium-promo-input:focus {
    outline: none;
    border-color: #00796b;
}

.btn-premium-promo {
    padding: 0.6rem 1rem;
    background: linear-gradient(135deg, #00796b 0%, #004d40 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.btn-premium-promo:hover {
    opacity: 0.9;
}

.premium-promo-message {
    margin-top: 0.5rem;
    font-size: 0.85rem;
}

.premium-promo-success {
    color: #2e7d32;
}

.premium-promo-error {
    color: #c62828;
}

.premium-pricing-discount {
    font-size: 0.8rem;
    color: #2e7d32;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

/* --- Pricing Section --- */
.premium-pricing-section {
    margin-bottom: 2rem;
}

.premium-pricing-section h2 {
    font-size: 1.2rem;
    color: #004d40;
    margin-bottom: 1.25rem;
}

.premium-pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    max-width: 560px;
    margin: 0 auto;
}

.premium-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(0, 121, 107, 0.1);
    border-radius: 14px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.premium-pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
}

.premium-pricing-card-best {
    border-color: rgba(255, 152, 0, 0.3);
    background: rgba(255, 248, 240, 0.7);
}

.premium-pricing-card-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.75rem;
    border-radius: 10px;
    white-space: nowrap;
}

.premium-pricing-card-header {
    font-size: 0.85rem;
    font-weight: 600;
    color: #607d8b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.6rem;
}

.premium-pricing-card-price {
    margin-bottom: 0.4rem;
}

.premium-pricing-amount {
    font-size: 2rem;
    font-weight: 700;
    color: #e65100;
}

.premium-pricing-period {
    font-size: 0.85rem;
    color: #8d6e63;
}

.premium-pricing-card-save {
    font-size: 0.72rem;
    font-weight: 600;
    color: #2e7d32;
    background: rgba(76, 175, 80, 0.1);
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
}

.premium-pricing-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem 0;
    text-align: left;
}

.premium-pricing-card-features li {
    font-size: 0.82rem;
    color: #546e7a;
    padding: 0.3rem 0;
    padding-left: 1.2rem;
    position: relative;
}

.premium-pricing-card-features li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4caf50;
    font-weight: 700;
}

.premium-pricing-card .btn-premium-upgrade {
    margin-top: auto;
}

/* --- Placeholder Notice --- */
.premium-placeholder-notice {
    max-width: 480px;
    margin: 1.5rem auto 0;
    padding: 0.9rem 1.25rem;
    background: rgba(33, 150, 243, 0.06);
    border: 1px solid rgba(33, 150, 243, 0.12);
    border-radius: 10px;
}

.premium-placeholder-notice p {
    font-size: 0.82rem;
    color: #546e7a;
    margin: 0;
    line-height: 1.5;
}

/* --- Premium Page: Dark Mode --- */
.dark-mode .premium-page-subtitle {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-status-active {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.2);
}

.dark-mode .premium-status-free {
    background: rgba(255, 152, 0, 0.1);
    border-color: rgba(255, 152, 0, 0.18);
}

.dark-mode .premium-active-info {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.15);
}

.dark-mode .premium-active-label {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-active-value {
    color: #81c784;
}

.dark-mode .premium-features-included h3 {
    color: var(--dark-text-primary);
}

.dark-mode .premium-feature-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
}

.dark-mode .premium-feature-card:hover {
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.dark-mode .premium-feature-card h3 {
    color: var(--dark-text-primary);
}

.dark-mode .premium-feature-card p {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-promo-section label {
    color: var(--dark-text-primary);
}

.dark-mode .premium-promo-input {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--dark-border);
    color: var(--dark-text-primary);
}

.dark-mode .premium-promo-success {
    color: #81c784;
}

.dark-mode .premium-promo-error {
    color: #e57373;
}

.dark-mode .premium-pricing-discount {
    color: #81c784;
}

.dark-mode .premium-pricing-section h2 {
    color: var(--dark-text-primary);
}

.dark-mode .premium-pricing-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--dark-border);
}

.dark-mode .premium-pricing-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dark-mode .premium-pricing-card-best {
    background: rgba(255, 152, 0, 0.06);
    border-color: rgba(255, 152, 0, 0.2);
}

.dark-mode .premium-pricing-card-header {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-pricing-amount {
    color: #ffb74d;
}

.dark-mode .premium-pricing-period {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-pricing-card-save {
    background: rgba(76, 175, 80, 0.15);
    color: #81c784;
}

.dark-mode .premium-pricing-card-features li {
    color: var(--dark-text-secondary);
}

.dark-mode .premium-placeholder-notice {
    background: rgba(33, 150, 243, 0.08);
    border-color: rgba(33, 150, 243, 0.15);
}

.dark-mode .premium-placeholder-notice p {
    color: var(--dark-text-secondary);
}

/* --- Premium Page: Responsive --- */
@media (max-width: 768px) {
    .premium-feature-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .premium-feature-cards {
        grid-template-columns: 1fr;
    }

    .premium-pricing-cards {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .premium-page h1 {
        font-size: 1.35rem;
    }
}