/* Mental Health Participant System - Styles */
/* Mindvise Design System */

/* iOS Auto-Zoom Prevention - all inputs must be at least 16px on mobile */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }
}

:root {
    /* Mindvise Brand Farben */
    --mhp-primary: #3D4E60;       /* Mindvise Blau */
    --mhp-primary-dark: #2b3a46;
    --mhp-primary-light: #5a6f82;
    --mhp-accent: #A58C84;        /* Mindvise Beige/Rose */
    --mhp-accent-light: #C4AEA6;
    --mhp-accent-lighter: #E3DED1;
    --mhp-success: #507176;       /* Mindvise Grün/Türkis */
    --mhp-success-light: #7A9A9E;
    --mhp-success-lighter: #B8CDD0;
    --mhp-warning: #BA918A;       /* Mindvise Warnung (aus Akzent) */
    --mhp-warning-light: #C9A9A3;
    --mhp-danger: #8B6B68;        /* Mindvise Rot (gedämpft) */
    --mhp-danger-light: #A58C84;
    --mhp-text: #3D4E60;
    --mhp-text-light: #6c757d;
    --mhp-text-lighter: #9ca3af;
    --mhp-bg: #FFFCF3;            /* Mindvise Creme */
    --mhp-bg-card: #ffffff;
    --mhp-bg-highlight: #FFF8E4;
    --mhp-bg-soft: #F5F0E8;       /* Soft UI Background */
    --mhp-border: #E3DED1;
    --mhp-border-light: #F0EBE3;
    --mhp-radius: 16px;           /* Soft UI: größerer Radius */
    --mhp-shadow: 0 4px 20px rgba(61,78,96,0.06);     /* Soft UI: sanftere Schatten */
    --mhp-shadow-hover: 0 8px 30px rgba(61,78,96,0.10);
    --mhp-shadow-inset: inset 0 2px 4px rgba(61,78,96,0.06);
}

/* Dark Mode Variables (Desktop only) */
@media (min-width: 769px) {
    [data-theme="dark"] {
        --mhp-primary: #5a6f82;
        --mhp-primary-dark: #3D4E60;
        --mhp-accent: #BA918A;
        --mhp-accent-light: #C4AEA6;
        --mhp-success: #5a6f82;
        --mhp-success-light: #6e8396;
        --mhp-text: #e5e7eb;
        --mhp-text-light: #9ca3af;
        --mhp-bg: #1a1a1a;
        --mhp-bg-card: #2d2d2d;
        --mhp-bg-highlight: #3a3a3a;
        --mhp-border: #404040;
        --mhp-shadow: 0 4px 12px rgba(0,0,0,0.3);
        --mhp-shadow-hover: 0 8px 24px rgba(0,0,0,0.5);
    }
}

/* Logo Header (oben links, außerhalb Container wie im Mental Health HR) */
.mhp-logo-header {
    position: fixed !important;
    top: 10px !important;
    left: 10px !important;
    z-index: 10000 !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mhp-logo-header a {
    display: block !important;
    line-height: 0 !important;
    text-decoration: none !important;
}

.mhp-logo-img {
    height: 24px !important;
    width: auto !important;
    display: block !important;
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
    max-width: none !important;
}

.mhp-logo-img:hover {
    opacity: 1 !important;
}

/* Mobile: Fade out on scroll */
@media (max-width: 768px) {
    .mhp-logo-header {
        top: 12px;
        left: 12px;
    }

    .mhp-logo-img {
        height: 22px;
        opacity: 0.95 !important;
    }

    /* Fade out when scrolled */
    .mhp-logo-header.scrolled {
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    /* Container: Mehr Top-Padding für Logo */
    .mhp-container {
        padding-top: 50px;
    }
}

/* Container */
.mhp-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    font-family: 'Roboto Slab', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--mhp-text);
    background-color: var(--mhp-bg);
    min-height: 100vh;
}

/* Cards - Neumorphism Soft UI Design */
.mhp-card {
    background: var(--mhp-bg-soft);
    border-radius: 20px;
    box-shadow:
        12px 12px 24px rgba(163, 140, 132, 0.15),
        -12px -12px 24px rgba(255, 255, 255, 0.7);
    padding: 28px;
    margin-bottom: 20px;
    border: none;
    transition: all 0.4s ease;
}

.mhp-card:hover {
    box-shadow:
        16px 16px 32px rgba(163, 140, 132, 0.2),
        -16px -16px 32px rgba(255, 255, 255, 0.8);
    transform: translateY(-3px);
}

.mhp-card h2, .mhp-card h3 {
    margin: 0 0 16px 0;
    color: var(--mhp-text);
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
}

.mhp-card-success {
    background: var(--mhp-bg-card);
}

.mhp-card-danger {
    background: var(--mhp-bg-card);
}

/* Intro Text */
.mhp-intro {
    color: var(--mhp-text-light);
    margin-bottom: 24px;
}

/* Tabs */
.mhp-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--mhp-border);
    padding-bottom: 8px;
}

.mhp-tab {
    background: #e5e7eb !important;
    border: none !important;
    padding: 10px 20px !important;
    font-size: 15px !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    border-radius: 8px 8px 0 0 !important;
    transition: all 0.2s !important;
    font-weight: 500 !important;
}

.mhp-tab:hover {
    background: #d1d5db !important;
    color: #6b7280 !important;
}

.mhp-tab.active {
    color: var(--mhp-primary) !important;
    background: var(--mhp-bg) !important;
    font-weight: 600 !important;
}

.mhp-tab-content {
    animation: fadeIn 0.3s ease;
}

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

/* Mobile line break - versteckt auf Desktop */
.mhp-mobile-break {
    display: none;
}

/* Form Elements */
.mhp-form-group {
    margin-bottom: 20px;
}

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

.mhp-form-group small {
    display: block;
    margin-top: 6px;
    color: var(--mhp-text-light);
    font-size: 13px;
}

/* Passwort-Felder */
.mhp-password-group,
.mhp-password-section {
    margin-bottom: 16px;
}

.mhp-password-section input[type="password"] {
    text-transform: none;
    letter-spacing: normal;
    font-family: inherit;
}

.mhp-input {
    width: 100%;
    max-width: 300px;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid var(--mhp-border);
    border-radius: 8px;
    transition: border-color 0.2s;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Courier New', monospace;
}

.mhp-input:focus {
    outline: none;
    border-color: var(--mhp-primary);
}

/* Buttons - Neumorphism mit Elementor-Overrides */
.mhp-btn,
#mhp-dashboard .mhp-btn,
.mhp-container .mhp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 28px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow:
        6px 6px 12px rgba(163, 140, 132, 0.2),
        -3px -3px 8px rgba(255, 255, 255, 0.5) !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
}

.mhp-btn:disabled,
#mhp-dashboard .mhp-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.mhp-btn-primary,
#mhp-dashboard .mhp-btn-primary,
.mhp-container .mhp-btn-primary {
    background: var(--mhp-primary) !important;
    background-color: var(--mhp-primary) !important;
    color: white !important;
}

.mhp-btn-primary:hover:not(:disabled),
#mhp-dashboard .mhp-btn-primary:hover:not(:disabled) {
    background: var(--mhp-primary-dark) !important;
    background-color: var(--mhp-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow:
        8px 8px 16px rgba(163, 140, 132, 0.3),
        -4px -4px 10px rgba(255, 255, 255, 0.3) !important;
}

.mhp-btn-secondary,
#mhp-dashboard .mhp-btn-secondary,
.mhp-container .mhp-btn-secondary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mhp-primary) !important;
    border: 2px solid var(--mhp-primary) !important;
    box-shadow: none !important;
}

.mhp-btn-secondary:hover:not(:disabled),
#mhp-dashboard .mhp-btn-secondary:hover:not(:disabled) {
    background: var(--mhp-primary) !important;
    background-color: var(--mhp-primary) !important;
    color: white !important;
    border-color: var(--mhp-primary) !important;
    transform: translateY(-2px) !important;
}

.mhp-btn-danger,
#mhp-dashboard .mhp-btn-danger {
    background: var(--mhp-danger) !important;
    background-color: var(--mhp-danger) !important;
    color: white !important;
}

.mhp-btn-danger:hover:not(:disabled),
#mhp-dashboard .mhp-btn-danger:hover:not(:disabled) {
    background: #c0392b !important;
    background-color: #c0392b !important;
}

/* Passkey Button - Hervorgehoben */
.mhp-btn-passkey,
#mhp-dashboard .mhp-btn-passkey {
    background: linear-gradient(135deg, #3D4E60 0%, #5a6f82 100%) !important;
    color: white !important;
    border: none !important;
    padding: 14px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    box-shadow: 0 4px 15px rgba(61, 78, 96, 0.3) !important;
    transition: all 0.3s ease !important;
}

.mhp-btn-passkey:hover:not(:disabled),
#mhp-dashboard .mhp-btn-passkey:hover:not(:disabled) {
    background: linear-gradient(135deg, #2b3a46 0%, #3D4E60 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(61, 78, 96, 0.4) !important;
}

.mhp-btn-passkey:disabled {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.mhp-btn-passkey svg {
    flex-shrink: 0;
}

/* Passkey Section */
.mhp-passkey-section {
    margin-bottom: 20px;
}

.mhp-passkey-hint {
    text-align: center;
    font-size: 12px;
    color: #6c757d;
    margin: 10px 0 16px;
}

/* Divider mit Text */
.mhp-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.mhp-divider::before,
.mhp-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #e0e0e0;
}

.mhp-divider span {
    padding: 0 16px;
    color: #999;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Loading Spinner Animation */
@keyframes mhpSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.mhp-spin {
    animation: mhpSpin 1s linear infinite;
}

.mhp-btn-small,
#mhp-dashboard .mhp-btn-small {
    padding: 8px 16px !important;
    font-size: 13px !important;
    border-radius: 20px !important;
}

/* Info & Warning Boxes */
.mhp-info-box {
    background: #e8f4fd;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.mhp-info-box ul {
    margin: 10px 0 0 20px;
    padding: 0;
}

.mhp-info-box li {
    margin: 6px 0;
}

.mhp-warning-box {
    background: #fff3cd;
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
    color: #856404;
}

.mhp-success-box {
    background: #d4edda;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

/* Consent Box */
.mhp-consent-box {
    background: var(--mhp-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.mhp-checkbox-label {
    display: flex;
    gap: 12px;
    cursor: pointer;
    line-height: 1.5;
}

.mhp-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Locked/Disabled Select */
.mhp-select-locked {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    cursor: not-allowed;
    border-color: #cbd5e1 !important;
}

.mhp-select-locked:disabled {
    opacity: 0.8;
}

/* ID Display */
.mhp-id-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 20px 0;
}

.mhp-id-value, .mhp-new-id-value {
    font-size: 28px;
    font-weight: 700;
    font-family: 'Courier New', monospace;
    letter-spacing: 3px;
    color: var(--mhp-primary);
    background: var(--mhp-bg);
    padding: 16px 24px;
    border-radius: 8px;
}

/* Dashboard Header */
.mhp-dashboard-header {
    margin-bottom: 24px;
}

.mhp-header-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 12px;
}

.mhp-header-greeting h2 {
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
    margin: 0 0 4px 0;
    font-size: 24px;
    color: var(--mhp-text);
}

.mhp-greeting-subtitle {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
}

.mhp-header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Modern Logout Button - Override Elementor */
#mhp-dashboard .mhp-btn-logout,
.mhp-container .mhp-btn-logout,
.mhp-btn-logout {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 1px solid var(--mhp-border) !important;
    background: var(--mhp-bg-card) !important;
    background-color: var(--mhp-bg-card) !important;
    color: var(--mhp-text-light) !important;
    cursor: pointer;
    transition: all 0.2s ease;
}

#mhp-dashboard .mhp-btn-logout:hover,
.mhp-container .mhp-btn-logout:hover,
.mhp-btn-logout:hover {
    border-color: var(--mhp-danger) !important;
    color: var(--mhp-danger) !important;
    background: rgba(231, 76, 60, 0.05) !important;
    background-color: rgba(231, 76, 60, 0.05) !important;
}

.mhp-btn-logout svg {
    flex-shrink: 0;
}

/* Header Info Row */
.mhp-header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-info-id {
    opacity: 0.8;
}

.mhp-info-id strong {
    font-family: monospace;
    color: var(--mhp-text);
}

/* Legacy - keep for backwards compatibility */
.mhp-dashboard-header h2 {
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
}

.mhp-id-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
}

/* ========================================== */
/* HAUPT-NAVIGATION TABS (Persönlich / Unternehmen) */
/* ========================================== */
.mhp-main-nav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    padding: 6px;
    background: var(--mhp-bg-card);
    border-radius: 16px;
    box-shadow: var(--mhp-shadow);
}

/* Main Tabs - Override Elementor */
#mhp-dashboard .mhp-main-tab,
.mhp-container .mhp-main-tab,
.mhp-main-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border-radius: 12px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text-light) !important;
    transition: all 0.3s ease;
}

#mhp-dashboard .mhp-main-tab:hover,
.mhp-container .mhp-main-tab:hover,
.mhp-main-tab:hover {
    background: var(--mhp-bg-highlight) !important;
    background-color: var(--mhp-bg-highlight) !important;
    color: var(--mhp-text) !important;
}

#mhp-dashboard .mhp-main-tab.active,
.mhp-container .mhp-main-tab.active,
.mhp-main-tab.active {
    background: linear-gradient(135deg, var(--mhp-primary) 0%, var(--mhp-primary-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(61, 78, 96, 0.3);
}

.mhp-main-tab .mhp-tab-icon {
    font-size: 20px;
}

.mhp-main-tab .mhp-tab-text {
    white-space: nowrap;
}

/* Tab Panels Container */
.mhp-tab-panels {
    position: relative;
}

.mhp-tab-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.mhp-tab-panel.active {
    display: block;
}

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

/* Mobile: Tabs oben, kompakter */
@media (max-width: 600px) {
    .mhp-main-nav-tabs {
        position: sticky;
        top: 0;
        z-index: 100;
        margin: -20px -20px 20px -20px;
        padding: 10px;
        border-radius: 0;
        background: var(--mhp-bg-card);
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    .mhp-main-tab {
        padding: 12px 16px;
        font-size: 14px;
        gap: 8px;
    }

}

/* ========================================== */
/* PERSÖNLICHER BURNOUT CHECK CARD */
/* ========================================== */
.mhp-card-burnout-personal {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border: 1px solid var(--mhp-border);
}

.mhp-burnout-status {
    padding: 8px 0;
}

.mhp-burnout-intro {
    color: var(--mhp-text);
    margin-bottom: 16px;
    line-height: 1.6;
}

.mhp-privacy-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.mhp-privacy-notice.mhp-privacy-small {
    padding: 10px 14px;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 13px;
}

.mhp-privacy-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.mhp-privacy-notice p,
.mhp-privacy-notice span {
    color: #166534;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.mhp-burnout-result-summary {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-last-check,
.mhp-next-check-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #f8fafc;
    border-radius: 10px;
}

.mhp-check-icon {
    width: 32px;
    height: 32px;
    background: var(--mhp-success);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    flex-shrink: 0;
}

.mhp-calendar-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.mhp-last-check strong,
.mhp-next-check-info strong {
    display: block;
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-bottom: 2px;
}

/* Burnout Risk Alert */
.mhp-risk-alert {
    background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
    border: 2px solid var(--mhp-accent);
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
}

.mhp-risk-alert-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.mhp-alert-icon {
    font-size: 24px;
}

.mhp-risk-alert-header strong {
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-risk-alert p {
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.mhp-risk-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Burnout verstehen Button */
.mhp-btn-understand {
    background: var(--mhp-accent);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-btn-understand:hover {
    background: var(--mhp-primary);
}

/* ========================================== */
/* STEP SLIDER FOR BURNOUT/BOREOUT EDUCATION */
/* ========================================== */
.mhp-edu-slider-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mhp-edu-slider {
    background: white;
    border-radius: 20px;
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.mhp-edu-slider-header {
    background: linear-gradient(135deg, var(--mhp-primary) 0%, var(--mhp-primary-dark) 100%);
    color: white;
    padding: 24px;
    position: relative;
}

.mhp-edu-slider-header h3 {
    margin: 0;
    font-size: 20px;
    padding-right: 40px;
}

/* Close button for edu slider - white version for dark header */
.mhp-edu-slider-header .mhp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.mhp-edu-slider-header .mhp-modal-close:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: white;
}

.mhp-edu-slider-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.mhp-edu-slide {
    display: none;
}

.mhp-edu-slide.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

.mhp-edu-slide h4 {
    color: var(--mhp-primary);
    font-size: 18px;
    margin: 0 0 16px 0;
}

.mhp-edu-slide p {
    color: var(--mhp-text);
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 20px 0;
}

.mhp-edu-phase-card {
    background: var(--mhp-bg-highlight);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    border-left: 4px solid var(--mhp-accent);
}

.mhp-edu-phase-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: var(--mhp-primary);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    margin-right: 10px;
}

.mhp-edu-phase-title {
    font-weight: 600;
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-edu-phase-desc {
    margin-top: 8px;
    color: var(--mhp-text);
    font-size: 14px;
}

.mhp-edu-tip-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.mhp-edu-tip-card {
    background: var(--mhp-bg);
    border: 1px solid var(--mhp-border);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
}

.mhp-edu-tip-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.mhp-edu-tip-title {
    font-weight: 600;
    color: var(--mhp-primary);
    font-size: 14px;
    margin-bottom: 4px;
}

.mhp-edu-tip-desc {
    font-size: 12px;
    color: var(--mhp-text-light);
}

.mhp-edu-warning-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mhp-edu-warning-list li {
    padding: 10px 0;
    border-bottom: 1px solid var(--mhp-border);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--mhp-text);
}

.mhp-edu-warning-list li::before {
    content: '⚠️';
}

.mhp-edu-slider-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--mhp-border);
    background: var(--mhp-bg);
}

.mhp-edu-dots {
    display: flex;
    gap: 8px;
}

.mhp-edu-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mhp-border);
    transition: all 0.2s;
}

.mhp-edu-dot.active {
    background: var(--mhp-primary);
    transform: scale(1.2);
}

.mhp-edu-nav-btn {
    background: var(--mhp-primary);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.mhp-edu-nav-btn:hover {
    background: var(--mhp-primary-dark);
}

.mhp-edu-nav-btn:disabled {
    background: var(--mhp-border);
    cursor: not-allowed;
}

@media (max-width: 480px) {
    .mhp-edu-tip-grid {
        grid-template-columns: 1fr;
    }
}

/* Stats Mini (unten) */
.mhp-stats-mini {
    margin-top: 32px;
    padding: 16px 20px;
    background: #f8fafc;
    border-radius: 10px;
    border: 1px solid var(--mhp-border);
}

.mhp-stats-row {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 16px;
}

.mhp-stat-mini {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-stat-label-mini {
    font-weight: 500;
}

.mhp-stat-mini span:last-child {
    font-weight: 600;
    color: var(--mhp-text);
}

/* Mood Check Full Width */
.mhp-survey-slide {
    width: 100%;
}

.mhp-surveys-slider {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mhp-survey-card {
    width: 100%;
}

/* ========================================== */
/* LEADERSHIP DASHBOARD STYLES */
/* ========================================== */
.mhp-leadership-alert {
    padding: 0;
    overflow: hidden;
}

.mhp-alert-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
}

.mhp-alert-banner.mhp-alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
}

.mhp-alert-banner .mhp-alert-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.mhp-alert-content strong {
    display: block;
    color: #92400e;
    font-size: 16px;
    margin-bottom: 6px;
}

.mhp-alert-content p {
    color: #78350f;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.mhp-card-department-trend {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
}

.mhp-badge-anonymous {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.mhp-chart-hint {
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-top: 12px;
    text-align: center;
    font-style: italic;
}

/* Department Trend Bars */
.mhp-trend-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.mhp-trend-label {
    font-size: 12px;
    color: var(--mhp-text-light);
    min-width: 60px;
}

.mhp-trend-bar-container {
    flex: 1;
    height: 12px;
    background: #e5e7eb;
    border-radius: 6px;
    overflow: hidden;
}

.mhp-trend-bar-fill {
    height: 100%;
    border-radius: 6px;
    transition: width 0.6s ease;
}

.mhp-trend-bar-fill.low { background: linear-gradient(90deg, var(--mhp-success), var(--mhp-success-light)); }
.mhp-trend-bar-fill.medium { background: linear-gradient(90deg, var(--mhp-warning), var(--mhp-warning-light)); }
.mhp-trend-bar-fill.elevated { background: linear-gradient(90deg, var(--mhp-accent), var(--mhp-accent-light)); }
.mhp-trend-bar-fill.high { background: linear-gradient(90deg, var(--mhp-danger), var(--mhp-danger-light)); }

.mhp-trend-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--mhp-text);
    min-width: 30px;
    text-align: right;
}

.mhp-trend-count {
    font-size: 11px;
    color: var(--mhp-text-light);
    min-width: 40px;
}

/* ========================================== */
/* TAB NOTIFICATION BADGES */
/* ========================================== */
.mhp-tab-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    background: var(--mhp-danger);
    border-radius: 50%;
    animation: pulse-badge 2s infinite;
}

.mhp-main-tab {
    position: relative;
}

@keyframes pulse-badge {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* ========================================== */
/* SURVEYS LIST CARD */
/* ========================================== */
.mhp-card-surveys-list .mhp-survey-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #f8fafc;
    border: 1px solid var(--mhp-border);
    border-radius: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    color: var(--mhp-text);
    transition: all 0.2s ease;
}

.mhp-survey-link:hover {
    background: var(--mhp-bg-highlight);
    border-color: var(--mhp-primary);
}

.mhp-survey-link-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhp-survey-link-title {
    font-weight: 600;
    font-size: 14px;
}

.mhp-survey-link-type {
    font-size: 12px;
    color: var(--mhp-text-light);
}

.mhp-survey-link-arrow {
    font-size: 20px;
    color: var(--mhp-primary);
}

.mhp-badge-new {
    background: var(--mhp-danger);
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    font-weight: 600;
}

.mhp-badge-private {
    background: #e0f2fe;
    color: #0369a1;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.mhp-badge-absolute {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
}

@media (max-width: 768px) {
    .mhp-badge-absolute {
        top: 16px;
        right: 16px;
    }
}

.mhp-card-personal-mood,
.mhp-card-assessments {
    position: relative;
}

/* ========================================== */
/* DAILY ACTIONS ROW (2-Column Layout) */
/* ========================================== */
.mhp-daily-actions-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.mhp-daily-actions-row .mhp-card {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .mhp-daily-actions-row {
        grid-template-columns: 1fr;
    }
}

/* Daily Card (collapsible when done) */
.mhp-daily-card {
    transition: all 0.3s ease;
}

.mhp-daily-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mhp-daily-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.mhp-daily-header-left h3 {
    margin: 0;
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-daily-done-check {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mhp-success);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
    flex-shrink: 0;
}

.mhp-daily-content {
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
}

.mhp-daily-card.collapsed .mhp-daily-content {
    max-height: 0;
    opacity: 0;
    padding: 0;
}

.mhp-daily-card.collapsed {
    padding: 16px 24px;
}

/* History sections always visible even when collapsed */
.mhp-daily-card .mhp-breathing-history,
.mhp-daily-card .mhp-personal-mood-history {
    padding: 16px 0 0 0;
}

.mhp-daily-card.collapsed .mhp-breathing-history,
.mhp-daily-card.collapsed .mhp-personal-mood-history {
    margin-top: 0;
    border-top: none;
    padding-top: 12px;
}

/* ========================================== */
/* BREATHING EXERCISE CARD - Mindvise Design */
/* ========================================== */
.mhp-card-breathing {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    border-radius: 20px;
    box-shadow:
        8px 8px 16px rgba(200, 190, 170, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mhp-breathing-banner {
    text-align: center;
    padding: 10px 0;
}

.mhp-breathing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: pointer;
}

.mhp-breathing-header h3 {
    margin: 0;
    color: var(--mhp-primary);
    font-size: 18px;
}

.mhp-streak-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, var(--mhp-accent) 0%, var(--mhp-primary) 100%);
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
    font-size: 11px;
}

.mhp-streak-fire {
    font-size: 14px;
}

.mhp-breathing-subtitle {
    color: var(--mhp-accent);
    font-size: 14px;
    margin: 0 0 20px 0;
}

/* Breathing Header Layout */
.mhp-breathing-title-group h3 {
    margin: 0;
}

.mhp-breathing-subtitle-inline {
    color: var(--mhp-accent);
    font-size: 13px;
    margin: 4px 0 0 0;
}

.mhp-breathing-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Im collapsed State: Subtitle im Header anzeigen, Checkmark und Points zeigen, Streak verstecken */
.mhp-card-breathing.collapsed .mhp-breathing-subtitle-inline {
    display: block;
}

/* Im NICHT-collapsed State: Haken und Punkte im Header verstecken */
.mhp-card-breathing:not(.collapsed) .mhp-breathing-header-right #mhp-breathing-done-check,
.mhp-card-breathing:not(.collapsed) .mhp-breathing-header-right #mhp-breathing-points-today-header {
    display: none !important;
}

.mhp-card-breathing.collapsed .mhp-breathing-header-right #mhp-breathing-done-check,
.mhp-card-breathing.collapsed .mhp-breathing-header-right #mhp-breathing-points-today-header {
    display: inline-block !important;
}

.mhp-card-breathing.collapsed .mhp-breathing-header-right #mhp-breathing-points-today-header {
    font-size: 11px;
    color: var(--mhp-accent);
}

.mhp-card-breathing.collapsed .mhp-streak-badge {
    display: none;
}

/* Breathing Start State */
#mhp-breathing-start {
    text-align: center;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    min-height: 200px;
}

.mhp-breathing-intro-text {
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px 0;
}

.mhp-breathing-instructions {
    background: var(--mhp-bg-light);
    border-radius: 8px;
    padding: 16px;
    margin: 16px 0;
}

.mhp-breathing-instructions h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text-dark);
}

.mhp-instruction-list {
    margin: 0;
    padding-left: 20px;
    list-style-type: decimal;
}

.mhp-instruction-list li {
    font-size: 14px;
    line-height: 1.6;
    color: var(--mhp-text);
    margin-bottom: 8px;
}

.mhp-instruction-list li:last-child {
    margin-bottom: 0;
}

.mhp-instruction-list strong {
    color: var(--mhp-primary);
    font-weight: 600;
}

.mhp-btn-breathing {
    background: linear-gradient(135deg, var(--mhp-primary) 0%, var(--mhp-primary-dark) 100%);
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(61, 78, 96, 0.3);
}

.mhp-btn-breathing:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 78, 96, 0.4);
}

/* Breathing Animation Circle - 4-7-8 Technique */
.mhp-breathing-circle {
    width: 150px;
    height: 150px;
    margin: 20px auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mhp-accent-light) 0%, var(--mhp-primary) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 30px rgba(61, 78, 96, 0.3);
    transition: transform 0.5s ease-in-out;
}

.mhp-breathing-circle.inhale {
    animation: breathe-in 4s ease-in-out forwards;
}

.mhp-breathing-circle.hold {
    transform: scale(1.2);
}

.mhp-breathing-circle.hold:not(.holding) {
    opacity: 0.6;
    animation: pulse-waiting 1s ease-in-out infinite;
}

.mhp-breathing-circle.holding {
    opacity: 1;
    animation: none;
}

@keyframes pulse-waiting {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 0.8; }
}

.mhp-breathing-circle.exhale {
    animation: breathe-out 8s ease-in-out forwards;
}

@keyframes breathe-in {
    0% { transform: scale(1); }
    100% { transform: scale(1.2); }
}

@keyframes breathe-out {
    0% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.mhp-breath-text {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 4px;
}

.mhp-breath-count {
    font-size: 36px;
    font-weight: 700;
}

.mhp-breath-phase {
    color: var(--mhp-primary);
    font-size: 14px;
    margin: 15px 0;
}

.mhp-breathing-progress {
    width: 100%;
    max-width: 300px;
    height: 6px;
    background: var(--mhp-accent-light);
    border-radius: 3px;
    margin: 0 auto;
    overflow: hidden;
}

.mhp-breathing-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--mhp-accent), var(--mhp-primary));
    border-radius: 3px;
    width: 0%;
    transition: width 0.5s linear;
}

.mhp-breathing-success {
    color: var(--mhp-success);
}

.mhp-breathing-success .mhp-success-check {
    font-size: 48px;
    display: block;
    margin-bottom: 10px;
    color: var(--mhp-success);
}

.mhp-breathing-success p {
    font-size: 16px;
    margin: 0;
}

/* Breathing Timer */
.mhp-breathing-timer {
    text-align: center;
    margin-bottom: 12px;
    font-size: 16px;
    color: var(--mhp-primary);
}

.mhp-timer-label {
    font-weight: 500;
    margin-right: 8px;
}

.mhp-timer-value {
    font-weight: 700;
    font-size: 18px;
    color: var(--mhp-accent);
}

/* Hold Prompt */
.mhp-hold-prompt {
    text-align: center;
    color: var(--mhp-accent);
    font-weight: 600;
    margin-top: 8px;
    animation: pulse 1.5s ease-in-out infinite;
}

.mhp-hold-prompt p {
    margin: 0;
    font-size: 14px;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* Breathing Stats */
.mhp-breathing-stats {
    background: var(--mhp-bg-highlight);
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--mhp-accent-light);
}

.mhp-stat-item {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}

.mhp-stat-item:last-child {
    margin-bottom: 0;
}

.mhp-stat-label {
    font-weight: 500;
    color: var(--mhp-text-secondary);
}

.mhp-stat-value {
    font-weight: 700;
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-percentile-rank {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.1) 100%);
    padding: 12px;
    border-radius: 8px;
    margin-top: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-primary);
}

.mhp-rank-icon {
    font-size: 20px;
}

/* Breathing Circle - Touch Hold Detection */
.mhp-breathing-circle.holding {
    box-shadow: 0 0 0 4px rgba(61, 78, 96, 0.3);
    transform: scale(1.25) !important;
}

.mhp-breathing-circle.hold-required {
    cursor: pointer;
    user-select: none;
}

/* Breathing History */
.mhp-breathing-history {
    border-top: 1px solid var(--mhp-accent-light);
    padding-top: 16px;
    margin-top: 16px;
}

.mhp-history-title {
    font-size: 12px;
    color: var(--mhp-accent);
    font-weight: 600;
    margin-bottom: 10px;
}

/* Breathing History - Higher specificity to override Elementor */
#mhp-dashboard .mhp-history-days,
.mhp-container .mhp-history-days,
.mhp-history-days {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
}

#mhp-dashboard .mhp-history-day,
.mhp-container .mhp-history-day,
.mhp-history-day {
    flex: 1 !important;
    text-align: center !important;
    padding: 6px 4px !important;
    background: white !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 36px !important;
    gap: 2px !important;
}

.mhp-day-name {
    font-weight: 600;
}

.mhp-day-duration {
    font-size: 9px;
    opacity: 0.9;
    font-weight: 500;
}

#mhp-dashboard .mhp-history-day.completed,
.mhp-container .mhp-history-day.completed,
.mhp-history-day.completed {
    background: linear-gradient(135deg, var(--mhp-success) 0%, var(--mhp-primary) 100%) !important;
    color: white !important;
}

.mhp-history-day.completed .mhp-day-name::after {
    content: ' ✓';
    font-size: 10px;
}

.mhp-history-day.missed {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
}

/* History Navigation Buttons - nur auf Mobile */
.mhp-history-nav {
    display: none;
}

@media (max-width: 768px) {
    .mhp-history-nav {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 12px;
    }
}

.mhp-history-nav-btn {
    background: var(--mhp-bg);
    border: 1px solid var(--mhp-accent-light);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--mhp-accent);
}

.mhp-history-nav-btn:hover:not(:disabled) {
    background: var(--mhp-accent-light);
    border-color: var(--mhp-accent);
}

.mhp-history-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.mhp-history-nav-btn svg {
    width: 16px;
    height: 16px;
}

/* ========================================== */
/* PERSONAL MOOD CHECK CARD - Mindvise Design */
/* ========================================== */
.mhp-card-personal-mood {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    border-radius: 20px;
    box-shadow:
        8px 8px 16px rgba(200, 190, 170, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mhp-personal-mood-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.mhp-personal-mood-title-group h3 {
    margin: 0;
}

.mhp-personal-mood-subtitle {
    color: var(--mhp-accent);
    font-size: 13px;
    margin: 4px 0 0 0;
}

.mhp-personal-mood-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Im collapsed State: Subtitle im Header anzeigen, alles andere verstecken */
.mhp-card-personal-mood.collapsed .mhp-personal-mood-subtitle {
    display: block;
}

/* Im NICHT-collapsed State: Haken und Punkte im Header verstecken */
.mhp-card-personal-mood:not(.collapsed) .mhp-personal-mood-header-right #mhp-mood-done-check,
.mhp-card-personal-mood:not(.collapsed) .mhp-personal-mood-header-right #mhp-journal-points-today-header {
    display: none !important;
}

.mhp-card-personal-mood.collapsed .mhp-personal-mood-header-right #mhp-mood-done-check,
.mhp-card-personal-mood.collapsed .mhp-personal-mood-header-right #mhp-journal-points-today-header {
    display: inline-block !important;
}

.mhp-card-personal-mood.collapsed .mhp-personal-mood-header-right #mhp-journal-points-today-header {
    font-size: 11px;
    color: var(--mhp-accent);
}

.mhp-card-personal-mood.collapsed .mhp-streak-badge {
    display: none;
}

.mhp-personal-mood-info {
    color: var(--mhp-accent);
    font-size: 13px;
    margin: 0 0 16px 0;
}

.mhp-personal-smileys {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.mhp-personal-smiley-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    background: #F5F0E8 !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        8px 8px 16px rgba(163, 140, 132, 0.25),
        -8px -8px 16px rgba(255, 255, 255, 0.8) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.mhp-personal-smiley-btn:hover {
    transform: scale(1.08) !important;
    box-shadow:
        inset 4px 4px 8px rgba(163, 140, 132, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.7),
        0 0 0 3px var(--mhp-primary-light) !important;
    background: #F5F0E8 !important;
}

.mhp-personal-smiley-btn.selected {
    background: #E3DED1 !important;
    transform: scale(1.05) !important;
    box-shadow:
        inset 6px 6px 12px rgba(163, 140, 132, 0.3),
        inset -6px -6px 12px rgba(255, 255, 255, 0.5),
        0 0 0 3px var(--mhp-success) !important;
}

@media (max-width: 600px) {
    .mhp-personal-smileys {
        gap: 8px;
    }

    .mhp-personal-smiley-btn {
        width: 48px !important;
        height: 48px !important;
    }

    .mhp-personal-smiley-btn .mhp-smiley-img {
        width: 28px !important;
        height: 28px !important;
    }
}

.mhp-personal-note {
    width: 100%;
    padding: 12px;
    border: 2px solid var(--mhp-accent-light);
    border-radius: 10px;
    font-size: 14px;
    resize: none;
    min-height: 60px;
    font-family: inherit;
}

.mhp-personal-note:focus {
    outline: none;
    border-color: var(--mhp-primary);
}

@media (max-width: 600px) {
    .mhp-personal-note {
        font-size: 16px;
    }
}

.mhp-personal-mood-success {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--mhp-success);
    font-weight: 500;
    padding: 20px;
}

.mhp-personal-mood-success .mhp-success-check {
    font-size: 24px;
    color: var(--mhp-success);
}

#mhp-personal-mood-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}

#mhp-view-journal-entry {
    margin-top: 16px !important;
}

/* ========================================== */
/* TAGEBUCH / JOURNAL STYLES */
/* ========================================== */

.mhp-journal-step {
    animation: fadeIn 0.3s ease;
}

.mhp-journal-question {
    font-size: 15px;
    font-weight: 500;
    color: var(--mhp-text);
    margin: 0 0 12px 0;
    text-align: center;
}

.mhp-gratitude-textarea {
    min-height: 80px;
    margin-bottom: 12px;
}

.mhp-journal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 8px;
}

.mhp-btn-text {
    background: none;
    border: none;
    color: var(--mhp-text-light);
    padding: 8px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.2s;
}

.mhp-btn-text:hover {
    color: var(--mhp-primary);
}

.mhp-journal-streak {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px;
    margin-top: 12px;
    background: var(--mhp-bg-highlight);
    border-radius: var(--mhp-radius);
    font-size: 14px;
    color: var(--mhp-text);
}

.mhp-journal-streak .mhp-streak-count {
    font-weight: 700;
    color: var(--mhp-primary);
}

/* Journal Entry Popup */
.mhp-journal-entry-mood {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.mhp-journal-entry-emoji {
    font-size: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mhp-journal-entry-emoji .mhp-mood-svg {
    width: 48px !important;
    height: 48px !important;
}

.mhp-journal-entry-label {
    font-weight: 500;
    color: var(--mhp-primary);
}

.mhp-journal-entry-gratitude,
.mhp-journal-entry-note {
    background: var(--mhp-bg);
    padding: 12px 16px;
    border-radius: var(--mhp-radius);
    margin-bottom: 12px;
}

.mhp-journal-entry-gratitude strong,
.mhp-journal-entry-note strong {
    display: block;
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mhp-journal-entry-gratitude p,
.mhp-journal-entry-note p {
    margin: 0;
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.5;
}

/* Personal Mood History */
.mhp-personal-mood-history {
    border-top: 1px solid var(--mhp-accent-light);
    padding-top: 16px;
    margin-top: 16px;
}

.mhp-journal-overview-copy {
    margin-top: 12px;
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.5;
    text-align: center;
    margin-bottom: 16px;
}

.mhp-journal-overview-copy p {
    font-size: 14px;
    margin: 0;
    text-align: center;
    color: var(--mhp-text);
}

.mhp-personal-mood-history .mhp-history-title {
    color: var(--mhp-accent);
}

/* Clickable mood days for viewing entries */
.mhp-mood-day {
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-mood-day:hover {
    transform: scale(1.05);
    background: var(--mhp-bg-highlight);
}

.mhp-mood-day.has-entry {
    border: 2px solid var(--mhp-accent-light);
}

/* Mood Entry Detail Popup */
.mhp-mood-entry-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
}

.mhp-mood-entry-content {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.mhp-mood-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mhp-border);
}

.mhp-mood-entry-header h4 {
    margin: 0;
    color: var(--mhp-primary);
}

.mhp-mood-entry-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--mhp-bg);
    border: 2px solid var(--mhp-border);
    font-size: 18px;
    cursor: pointer;
    color: var(--mhp-text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.mhp-mood-entry-close:hover {
    background: var(--mhp-primary);
    border-color: var(--mhp-primary);
    color: white;
}

.mhp-mood-entry-emoji {
    font-size: 48px;
    text-align: center;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mhp-mood-entry-emoji .mhp-mood-svg {
    width: 48px !important;
    height: 48px !important;
}

.mhp-mood-entry-note {
    background: var(--mhp-bg);
    border-radius: 10px;
    padding: 16px;
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.6;
}

.mhp-mood-entry-no-note {
    color: var(--mhp-text-light);
    font-style: italic;
    text-align: center;
}

/* Mood Week - Higher specificity to override Elementor */
#mhp-dashboard .mhp-mood-week,
.mhp-container .mhp-mood-week,
.mhp-mood-week {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    gap: 6px !important;
    width: 100% !important;
}

#mhp-dashboard .mhp-personal-mood-history .mhp-mood-day,
.mhp-container .mhp-personal-mood-history .mhp-mood-day,
.mhp-mood-week .mhp-mood-day {
    flex: 1 !important;
    text-align: center !important;
    padding: 8px 4px !important;
    background: white !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    display: block !important;
    min-width: 30px !important;
}

.mhp-mood-day-emoji {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.mhp-mood-svg {
    width: 24px !important;
    height: 24px !important;
    display: block;
}

/* Stats Grid - jetzt versteckt da wir Stats Mini nutzen */
.mhp-stats-grid {
    display: none;
}

/* Stats Grid (Legacy - ausgeblendet) */
.mhp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.mhp-stat-card {
    background: var(--mhp-bg-card);
    border-radius: var(--mhp-radius);
    padding: 20px;
    text-align: center;
    box-shadow: var(--mhp-shadow);
}

.mhp-stat-label {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin-bottom: 8px;
}

.mhp-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--mhp-text);
}

.mhp-stat-trend .mhp-stat-value.improving {
    color: var(--mhp-success);
}

.mhp-stat-trend .mhp-stat-value.declining {
    color: var(--mhp-danger);
}

/* Chart */
.mhp-chart {
    min-height: 200px;
    padding: 20px 0;
}

.mhp-chart-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mhp-chart-label {
    width: 80px;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-chart-bar-container {
    flex: 1;
    height: 24px;
    background: var(--mhp-bg);
    border-radius: 12px;
    overflow: hidden;
}

.mhp-chart-bar-fill {
    height: 100%;
    border-radius: 12px;
    transition: width 0.5s ease;
}

.mhp-chart-bar-fill.low { background: var(--mhp-success); }
.mhp-chart-bar-fill.medium { background: var(--mhp-warning); }
.mhp-chart-bar-fill.high { background: #e67e22; }
.mhp-chart-bar-fill.critical { background: var(--mhp-danger); }

.mhp-chart-value {
    width: 40px;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

/* Burnout Line Chart */
.mhp-burnout-line-chart {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.mhp-chart-legend {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 16px;
    font-size: 12px;
    color: var(--mhp-text-light);
}

.mhp-chart-legend span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.mhp-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

#mhp-burnout-chart {
    padding: 16px 0;
}

/* Recommendations */
.mhp-recommendation {
    background: var(--mhp-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 4px solid var(--mhp-primary);
}

.mhp-recommendation.urgent {
    border-left-color: var(--mhp-danger);
    background: #fdf2f2;
}

.mhp-recommendation.warning {
    border-left-color: var(--mhp-warning);
    background: #fffbeb;
}

.mhp-recommendation h4 {
    margin: 0 0 8px 0;
    font-size: 15px;
}

.mhp-recommendation p {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
}

/* No Data */
.mhp-no-data {
    text-align: center;
    color: var(--mhp-text-light);
    padding: 40px 20px;
}

/* Actions */
.mhp-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

/* Error */
.mhp-error, .mhp-error-message {
    background: #fdf2f2;
    color: var(--mhp-danger);
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
}

/* Loading */
.mhp-loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    z-index: 9999;
}

.mhp-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid var(--mhp-border);
    border-top-color: var(--mhp-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Survey Participation Styles */
.mhp-survey-participation {
    max-width: 800px;
    margin: 0 auto;
}

.mhp-participation-choice h3 {
    text-align: center;
    margin-bottom: 24px;
}

.mhp-choice-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.mhp-choice-card {
    background: var(--mhp-bg-card);
    border: 2px solid var(--mhp-border);
    border-radius: var(--mhp-radius);
    padding: 24px;
    text-align: center;
    position: relative;
    transition: all 0.2s;
}

.mhp-choice-card:hover {
    border-color: var(--mhp-primary);
    box-shadow: var(--mhp-shadow);
}

.mhp-choice-recommended {
    border-color: var(--mhp-primary);
}

.mhp-choice-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: var(--mhp-primary);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.mhp-choice-icon {
    font-size: 40px;
    margin-bottom: 12px;
}

.mhp-choice-card h4 {
    margin: 0 0 8px 0;
}

.mhp-choice-card > p {
    color: var(--mhp-text-light);
    margin-bottom: 16px;
}

.mhp-choice-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    text-align: left;
}

.mhp-choice-features li {
    padding: 6px 0;
    font-size: 14px;
}

.mhp-id-options {
    text-align: left;
    margin-bottom: 16px;
}

.mhp-id-option {
    padding: 8px 0;
}

.mhp-id-option label {
    margin-left: 8px;
    cursor: pointer;
}

.mhp-id-input-group {
    margin-top: 8px;
    margin-left: 26px;
}

.mhp-mini-consent {
    text-align: left;
    margin-bottom: 16px;
    font-size: 13px;
}

.mhp-already-logged-in {
    background: var(--mhp-bg);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.mhp-privacy-note {
    background: var(--mhp-bg);
    padding: 16px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
}

.mhp-id-display-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 12px 0;
}

.mhp-copy-btn {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    padding: 4px;
}

/* Section Headers mit Icons */
.mhp-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.mhp-section-header h3 {
    margin: 0;
}

.mhp-section-icon {
    font-size: 24px;
    line-height: 1;
}

.mhp-section-intro {
    color: var(--mhp-text-light);
    margin-bottom: 20px;
    font-size: 15px;
}

/* Disclaimer Box */
.mhp-disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 193, 7, 0.1);  /* Transparent yellow background */
    border-left: 3px solid #ffc107;
    border-radius: 8px;
    margin-bottom: 20px;
}

.mhp-disclaimer-box .mhp-disclaimer-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
}

.mhp-disclaimer-box p {
    margin: 0;
    color: var(--mhp-text);
    font-size: 14px;
    line-height: 1.5;
}

.mhp-section-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--mhp-border);
    text-align: center;
}

/* Highlight Card (für Roundtables) */
.mhp-card-highlight {
    background: var(--mhp-bg-card);
}

/* Action Card (für Burnout-Check CTA) */
.mhp-card-action {
    background: var(--mhp-bg-card);
}

.mhp-card-action h3 {
    color: var(--mhp-text);
    margin: 0 0 8px 0;
}

.mhp-card-action p {
    color: var(--mhp-text-light);
    margin: 0 0 8px 0;
}

.mhp-card-action .mhp-action-note {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin: 12px 0 0 0;
    line-height: 1.5;
}

.mhp-action-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mhp-action-text {
    flex: 1;
}

.mhp-card-action .mhp-btn-primary {
    background: var(--mhp-primary);
    color: #fff;
    flex-shrink: 0;
}

.mhp-card-action .mhp-btn-primary:hover {
    background: var(--mhp-primary-dark);
}

/* Info Card (für inaktive Features) */
.mhp-card-info {
    background: var(--mhp-bg-card);
}

.mhp-card-info h3 {
    color: var(--mhp-text);
    margin: 0 0 8px 0;
}

.mhp-card-info p {
    color: var(--mhp-text-light);
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.mhp-info-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Settings Card (für Abteilungsauswahl) */
.mhp-card-settings {
    background: var(--mhp-bg-card);
    border: 1px solid var(--mhp-border);
}

.mhp-settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.mhp-settings-label strong {
    color: var(--mhp-text);
    font-size: 15px;
}

.mhp-settings-hint {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-select {
    padding: 10px 14px;
    border: 2px solid var(--mhp-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--mhp-text);
    background: white;
    min-width: 200px;
    cursor: pointer;
    transition: border-color 0.2s;
}

.mhp-select:focus {
    outline: none;
    border-color: var(--mhp-primary);
}

/* Mood Card (für Daily Mood Check) */
.mhp-card-mood {
    background: var(--mhp-bg-card);
    text-align: center;
}

.mhp-card-mood h3 {
    color: var(--mhp-text);
    margin: 0 0 8px 0;
    font-size: 24px;
    font-weight: 700;
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
}

.mhp-card-mood p {
    color: var(--mhp-text-light);
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.mhp-mood-header {
    text-align: center;
    margin-bottom: 24px;
}

/* Smiley Buttons (Survey-Style) */
.mhp-mood-smileys {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.mhp-smiley-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 90px !important;
    height: 90px !important;
    background: #F5F0E8 !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        8px 8px 16px rgba(163, 140, 132, 0.25),
        -8px -8px 16px rgba(255, 255, 255, 0.8) !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: 1 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.mhp-smiley-btn[data-mood="1"],
.mhp-smiley-btn[data-mood="2"],
.mhp-smiley-btn[data-mood="3"],
.mhp-smiley-btn[data-mood="4"],
.mhp-smiley-btn[data-mood="5"] {
    background: #F5F0E8 !important;
}

.mhp-smiley-btn:hover:not(:disabled) {
    transform: scale(1.08) !important;
    box-shadow:
        inset 4px 4px 8px rgba(163, 140, 132, 0.2),
        inset -4px -4px 8px rgba(255, 255, 255, 0.7),
        0 0 0 3px var(--mhp-primary-light) !important;
    background: #F5F0E8 !important;
}

.mhp-smiley-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.mhp-smiley-btn.selected {
    background: #E3DED1 !important;
    transform: scale(1.05) !important;
    box-shadow:
        inset 6px 6px 12px rgba(163, 140, 132, 0.3),
}

/* Daily Mood Check Inline (direkt unter Abteilungs-Container) */
.mhp-card-daily-mood-inline {
    margin-top: 1.5rem;
}

.mhp-mood-smileys-inline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 0;
    flex-wrap: wrap;
}

.mhp-smiley-btn-inline {
    background: none;
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mhp-smiley-btn-inline:hover:not(:disabled) {
    background: rgba(61, 78, 96, 0.05);
    border-color: var(--mhp-primary);
    transform: scale(1.1);
}

.mhp-smiley-btn-inline.selected {
    background: rgba(61, 78, 96, 0.1);
    border-color: var(--mhp-primary);
}

.mhp-smiley-btn-inline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mhp-mood-svg-inline {
    display: block;
}

.mhp-mood-success-inline,
.mhp-mood-already-inline {
    text-align: center;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 8px;
    color: var(--mhp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.mhp-mood-check {
    font-size: 1.5rem;
    color: #10b981;
}

.mhp-smiley {
    font-size: 36px;
    line-height: 1;
}

.mhp-smiley-img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    pointer-events: none;
}

/* Mobile: Allgemeine Smiley-Größe reduzieren */
@media (max-width: 768px) {
    .mhp-journal-mood-selector .mhp-smiley-img,
    #mhp-journal-tab-write .mhp-smiley-img {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
}

.mhp-personal-smiley-btn .mhp-smiley-img {
    width: 36px !important;
    height: 36px !important;
    pointer-events: none !important;
}

/* Mood Labels (Sehr belastend - Entspannt) */
.mhp-mood-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #9ca3af;
    margin-bottom: 20px;
    padding: 0 10px;
}

/* Mood Success & Already Messages */
.mhp-mood-success,
.mhp-mood-already {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    font-size: 15px;
    color: #166534;
}

.mhp-mood-already {
    color: #92400e;
}

.mhp-mood-check {
    font-size: 24px;
    color: var(--mhp-success);
}

/* Mood History Chart */
.mhp-mood-chart {
    padding: 10px 0;
}

.mhp-mood-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--mhp-border);
}

.mhp-mood-avg {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhp-mood-avg-label {
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-mood-avg-value {
    font-size: 28px;
    line-height: 1;
}

.mhp-mood-avg-text {
    font-size: 14px;
    color: var(--mhp-text);
    font-weight: 500;
}

.mhp-mood-count {
    font-size: 13px;
    color: var(--mhp-text-light);
    background: var(--mhp-bg);
    padding: 6px 12px;
    border-radius: 20px;
}

.mhp-mood-timeline {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 8px 0;
    -webkit-overflow-scrolling: touch;
}

.mhp-mood-entry {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 50px;
    padding: 8px;
    border-radius: 8px;
    background: var(--mhp-bg);
    transition: all 0.2s;
}

.mhp-mood-entry.current {
    background: var(--mhp-bg-highlight);
    border: 1px solid var(--mhp-accent);
}

.mhp-mood-date {
    font-size: 11px;
    color: var(--mhp-text-light);
}

.mhp-mood-icon {
    font-size: 24px;
    line-height: 1;
}

.mhp-mood-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.mhp-mood-text {
    flex: 1;
}

.mhp-btn-mood {
    background: #f59e0b;
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.mhp-btn-mood:hover {
    background: #d97706;
    transform: translateY(-1px);
}

/* Roundtables Grid */
.mhp-roundtables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.mhp-roundtable-card {
    background: var(--mhp-bg-card);
    border-radius: var(--mhp-radius);
    padding: 16px;
    box-shadow: var(--mhp-shadow);
    transition: all 0.2s;
}

.mhp-roundtable-card:hover {
    box-shadow: var(--mhp-shadow-hover);
    transform: translateY(-2px);
}

.mhp-roundtable-date {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--mhp-accent);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.mhp-roundtable-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--mhp-text);
    margin: 0 0 8px 0;
}

.mhp-roundtable-host {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin-bottom: 12px;
}

.mhp-roundtable-meta {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.mhp-roundtable-category {
    display: inline-block;
    background: var(--mhp-accent);
    color: #fff;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mhp-roundtable-duration {
    display: inline-block;
    background: var(--mhp-bg);
    color: var(--mhp-text-light);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
}

.mhp-roundtable-desc {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin: 8px 0 12px 0;
    line-height: 1.5;
}

.mhp-roundtable-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--mhp-border);
}

.mhp-roundtable-datetime {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhp-roundtable-datetime span {
    font-size: 13px;
    color: var(--mhp-text);
}

.mhp-roundtable-card.is-full {
    opacity: 0.7;
    cursor: default !important;
}

.mhp-roundtable-card.is-full:hover {
    transform: none;
}

.mhp-roundtable-spots {
    display: inline-block;
    background: var(--mhp-bg);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: var(--mhp-text-light);
    white-space: nowrap;
}

.mhp-roundtable-spots.limited {
    background: #fff3cd;
    color: #856404;
}

.mhp-roundtable-spots.full {
    background: #fdf2f2;
    color: var(--mhp-danger);
}

/* Consultants Section */
.mhp-card-consultants {
    background: var(--mhp-bg-card);
}

.mhp-consultants-slider {
    margin: 0 -24px -24px -24px;
    padding: 0 24px 24px 24px;
    overflow: hidden;
}

/* ========================================== */
/* Profile Slider Kompaktierung - weniger Freiraum */
/* ========================================== */

/* Container kompakter */
.mhp-consultants-slider .mv-profile-slide,
.mhp-consultants-slider .swiper-slide,
.mhp-consultants-slider .profile-slide,
.mhp-consultants-slider [class*="profile-slide"],
.mhp-consultants-slider [class*="slider-item"] {
    padding: 12px !important;
}

/* Profil-Karten kompakter */
.mhp-consultants-slider .mv-profile-card,
.mhp-consultants-slider .profile-card,
.mhp-consultants-slider [class*="profile-card"],
.mhp-consultants-slider [class*="consultant-card"] {
    padding: 16px !important;
    gap: 10px !important;
}

/* Themen-Bereich kompakter */
.mhp-consultants-slider .mv-profile-topics,
.mhp-consultants-slider .profile-topics,
.mhp-consultants-slider .topics-list,
.mhp-consultants-slider [class*="topics"],
.mhp-consultants-slider [class*="theme"] {
    margin-bottom: 10px !important;
    margin-top: 8px !important;
    gap: 5px !important;
}

/* Themen-Tags kleiner */
.mhp-consultants-slider .topic-tag,
.mhp-consultants-slider [class*="topic"],
.mhp-consultants-slider [class*="tag"] {
    padding: 4px 8px !important;
    font-size: 11px !important;
}

/* Weniger Abstand zwischen Themen und Buttons */
.mhp-consultants-slider .mv-profile-actions,
.mhp-consultants-slider .profile-actions,
.mhp-consultants-slider .btn-group,
.mhp-consultants-slider [class*="actions"],
.mhp-consultants-slider [class*="buttons"] {
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* Kompaktere Profil-Infos */
.mhp-consultants-slider .mv-profile-info,
.mhp-consultants-slider .profile-info,
.mhp-consultants-slider [class*="profile-info"] {
    margin-bottom: 10px !important;
}

/* Bio/Beschreibung kompakter */
.mhp-consultants-slider .mv-profile-bio,
.mhp-consultants-slider .profile-bio,
.mhp-consultants-slider .profile-description,
.mhp-consultants-slider [class*="bio"],
.mhp-consultants-slider [class*="description"] {
    margin-bottom: 10px !important;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

/* Name und Titel kompakter */
.mhp-consultants-slider [class*="profile-name"],
.mhp-consultants-slider [class*="consultant-name"] {
    margin-bottom: 4px !important;
}

.mhp-consultants-slider [class*="profile-title"],
.mhp-consultants-slider [class*="consultant-title"] {
    margin-bottom: 8px !important;
}

/* Profilbild etwas kleiner */
.mhp-consultants-slider [class*="profile-image"],
.mhp-consultants-slider [class*="profile-avatar"],
.mhp-consultants-slider [class*="consultant-image"] {
    margin-bottom: 10px !important;
}

/* Generelle Kompaktierung für alle Kinder */
.mhp-consultants-slider > * {
    --profile-gap: 10px;
    --profile-padding: 16px;
}

/* Accent Button */
.mhp-btn-accent {
    background: var(--mhp-accent);
    color: #fff;
}

.mhp-btn-accent:hover:not(:disabled) {
    background: var(--mhp-accent-light);
}

/* Empty State */
.mhp-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--mhp-text-light);
}

.mhp-empty-state-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.mhp-empty-state p {
    margin: 0;
}

.mhp-empty-state .mhp-hint {
    font-size: 13px;
    margin-top: 8px;
    opacity: 0.8;
}

/* Survey Hints */
.mhp-survey-hint {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin: 8px 0;
    padding: 8px 12px;
    background: var(--mhp-bg-highlight);
    border-radius: 8px;
    border-left: 3px solid var(--mhp-accent);
}

.mhp-survey-hint strong {
    color: var(--mhp-primary);
}

.mhp-next-check {
    margin-top: 12px;
    font-style: italic;
}

/* ========================================== */
/* LEADERSHIP DASHBOARD STYLES */
/* ========================================== */

.mhp-section-leadership {
    background: linear-gradient(135deg, var(--mhp-bg-highlight) 0%, #fff 100%);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 32px;
}

.mhp-section-leadership .mhp-section-title h2 {
    color: var(--mhp-primary);
}

/* Feedback Card */
.mhp-card-feedback {
    border: 2px solid var(--mhp-accent-light);
}

.mhp-card-feedback .mhp-section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 16px;
}

.mhp-card-feedback .mhp-section-header h3 {
    margin: 0;
}

.mhp-card-feedback .mhp-section-header p {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-secondary);
}

.mhp-feedback-content {
    min-height: 120px;
}

/* ========================================== */
/* GAMIFICATION - PUNKTE WIDGET */
/* ========================================== */
.mhp-card-points {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border: 2px solid var(--mhp-accent-light);
}

.mhp-points-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.mhp-points-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mhp-points-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mhp-points-week {
    border-top: 3px solid #4CAF50;
}

.mhp-points-month {
    border-top: 3px solid #2196F3;
}

.mhp-points-total {
    border-top: 3px solid #FF9800;
}

.mhp-points-label {
    font-size: 12px;
    color: var(--mhp-text-secondary);
    margin-bottom: 8px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mhp-points-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--mhp-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.mhp-points-unit {
    font-size: 13px;
    color: var(--mhp-text-secondary);
}

.mhp-points-breakdown {
    background: white;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.mhp-breakdown-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--mhp-text);
    margin-bottom: 12px;
}

.mhp-breakdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--mhp-accent-light);
}

.mhp-breakdown-item:last-child {
    border-bottom: none;
}

.mhp-breakdown-activity {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mhp-breakdown-name {
    font-size: 14px;
    color: var(--mhp-text);
    font-weight: 500;
}

.mhp-breakdown-count {
    font-size: 12px;
    color: var(--mhp-text-secondary);
}

.mhp-breakdown-points {
    font-size: 16px;
    font-weight: 600;
    color: var(--mhp-accent);
}

.mhp-points-info {
    background: var(--mhp-bg-highlight);
    border-radius: 8px;
    padding: 12px;
}

.mhp-points-info .mhp-info-text {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-secondary);
    line-height: 1.5;
}

/* Points Info Box - für Daily Actions */
.mhp-points-info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    margin-top: auto;
    font-size: 12px;
    border-top: 1px solid var(--mhp-accent-light);
    padding-top: 12px;
}

/* Breathing Points Box - innerhalb Content, mit Heute rechts */
.mhp-card-breathing .mhp-breathing-content .mhp-points-info-box {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid var(--mhp-accent-light);
    border-bottom: none;
    padding-top: 12px;
    padding-bottom: 0;
}

.mhp-points-info-box .mhp-points-label {
    color: var(--mhp-text-secondary);
    font-weight: 400;
}

.mhp-points-info-box .mhp-points-today {
    color: var(--mhp-text-secondary);
    font-weight: 500;
}

/* Mobile Anpassungen für Punkte */
@media (max-width: 768px) {
    .mhp-points-summary {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mhp-points-card {
        padding: 16px;
    }

    .mhp-points-value {
        font-size: 28px;
    }
}

/* ========================================== */
/* GAMIFICATION - LEADERBOARD */
/* ========================================== */
.mhp-card-leaderboard {
    background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
    border: 2px solid #ffd54f;
}

.mhp-leaderboard-period {
    font-size: 13px;
    color: var(--mhp-text-secondary);
    margin: 0;
}

.mhp-leaderboard-list {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.mhp-rank-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-bottom: 1px solid var(--mhp-accent-light);
    transition: background 0.2s ease;
}

.mhp-rank-item:last-child {
    border-bottom: none;
}

.mhp-rank-item:hover {
    background: var(--mhp-bg-highlight);
}

.mhp-rank-my-department {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 2px solid #ffd700;
    border-radius: 12px;
    margin-bottom: 16px;
    font-weight: 600;
}

.mhp-rank-my-department:hover {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%);
}

.mhp-rank-position {
    flex-shrink: 0;
}

.mhp-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--mhp-accent-light);
    color: var(--mhp-primary);
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
}

.mhp-rank-item:nth-child(1) .mhp-rank-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    font-size: 18px;
}

.mhp-rank-item:nth-child(2) .mhp-rank-badge {
    background: linear-gradient(135deg, #C0C0C0 0%, #A8A8A8 100%);
    color: white;
}

.mhp-rank-item:nth-child(3) .mhp-rank-badge {
    background: linear-gradient(135deg, #CD7F32 0%, #B87333 100%);
    color: white;
}

.mhp-rank-my-department .mhp-rank-badge {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: white;
    width: 44px;
    height: 44px;
    font-size: 18px;
}

.mhp-rank-info {
    flex: 1;
}

.mhp-rank-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text);
    margin-bottom: 4px;
}

.mhp-rank-stats {
    font-size: 12px;
    color: var(--mhp-text-secondary);
}

.mhp-rank-points {
    font-size: 20px;
    font-weight: 700;
    color: var(--mhp-accent);
}

.mhp-leaderboard-info {
    background: var(--mhp-bg-highlight);
    border-radius: 8px;
    padding: 12px;
}

.mhp-leaderboard-info .mhp-info-text {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-secondary);
    line-height: 1.5;
}

/* Mobile Anpassungen für Leaderboard */
@media (max-width: 768px) {
    .mhp-rank-item {
        gap: 12px;
        padding: 12px;
    }

    .mhp-rank-badge {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .mhp-rank-my-department .mhp-rank-badge {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .mhp-rank-name {
        font-size: 14px;
    }

    .mhp-rank-points {
        font-size: 18px;
    }
}

/* Feedback Results - Leader Dashboard */
.mhp-feedback-overview {
    margin-bottom: 24px;
}

.mhp-feedback-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--mhp-bg-highlight);
}

.mhp-feedback-score {
    text-align: center;
}

.mhp-score-value {
    display: block;
    font-size: 36px;
    font-weight: 700;
    color: var(--mhp-primary);
    line-height: 1;
}

.mhp-score-label {
    font-size: 12px;
    color: var(--mhp-text-light);
}

.mhp-feedback-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-feedback-dimensions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-feedback-dimension {
    margin-bottom: 8px;
}

.mhp-feedback-dimension-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.mhp-dimension-label {
    font-size: 14px;
    color: var(--mhp-text);
}

.mhp-dimension-score {
    font-weight: 600;
    font-size: 14px;
}

.mhp-feedback-bar {
    height: 8px;
    background: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

.mhp-feedback-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.5s ease;
}

/* Feedback Sections */
.mhp-feedback-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--mhp-border);
}

.mhp-feedback-section h4 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--mhp-primary);
}

.mhp-feedback-strengths h4 {
    color: #2e7d32;
}

.mhp-feedback-improvements h4 {
    color: #f57c00;
}

.mhp-feedback-recommendations h4 {
    color: #1565c0;
}

.mhp-feedback-item {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 10px;
}

.mhp-feedback-strength {
    background: #e8f5e9;
    border-left: 4px solid #2e7d32;
}

.mhp-feedback-improvement {
    background: #fff3e0;
    border-left: 4px solid #f57c00;
}

.mhp-feedback-item strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

.mhp-feedback-item p {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-light);
    line-height: 1.5;
}

.mhp-feedback-recommendation {
    background: #e3f2fd;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.mhp-feedback-recommendation strong {
    display: block;
    color: #1565c0;
    margin-bottom: 8px;
    font-size: 14px;
}

.mhp-feedback-recommendation ul {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--mhp-text);
}

.mhp-feedback-recommendation li {
    margin-bottom: 4px;
    line-height: 1.5;
}

/* Leadership Tips */
.mhp-card-leadership-tips {
    background: var(--mhp-bg-card);
}

#mhp-leadership-tips-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mhp-tip-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--mhp-bg-highlight);
    border-radius: 12px;
    align-items: flex-start;
}

.mhp-tip-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.mhp-tip-content h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    color: var(--mhp-primary);
}

.mhp-tip-content p {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
    line-height: 1.5;
}

/* Leadership Resources Grid */
.mhp-resources-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.mhp-resource-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background: var(--mhp-bg-highlight);
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.mhp-resource-card:hover {
    border-color: var(--mhp-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mhp-resource-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.mhp-resource-title {
    font-weight: 600;
    color: var(--mhp-primary);
    margin-bottom: 4px;
    text-align: center;
}

.mhp-resource-desc {
    font-size: 13px;
    color: var(--mhp-text-light);
    text-align: center;
}

/* Leadership Dashboard Type Indicator */
.mhp-dashboard-leadership .mhp-dashboard-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhp-dashboard-leadership .mhp-dashboard-header h2::before {
    content: "👔";
}

/* Mobile Responsive for Leadership */
@media (max-width: 768px) {
    .mhp-section-leadership {
        padding: 16px;
    }

    .mhp-tip-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .mhp-resources-grid {
        grid-template-columns: 1fr;
    }
}

/* Privacy & DSGVO Section */
.mhp-card-privacy {
    background: var(--mhp-bg-card);
    border: 1px solid var(--mhp-border);
}

.mhp-privacy-info {
    margin-bottom: 24px;
}

.mhp-privacy-info h4 {
    font-size: 15px;
    color: var(--mhp-text);
    margin: 20px 0 10px 0;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--mhp-border);
}

.mhp-privacy-info h4:first-child {
    margin-top: 0;
}

.mhp-privacy-info ul {
    margin: 0;
    padding-left: 20px;
}

.mhp-privacy-info li {
    margin: 6px 0;
    font-size: 14px;
    color: var(--mhp-text-light);
    line-height: 1.5;
}

.mhp-privacy-info li strong {
    color: var(--mhp-text);
}

/* Delete Section within Privacy Card */
.mhp-delete-section {
    background: #fdf2f2;
    border-radius: var(--mhp-radius);
    padding: 20px;
    margin-top: 24px;
    border-left: 4px solid var(--mhp-danger);
}

.mhp-delete-section h4 {
    color: var(--mhp-danger);
    margin: 0 0 12px 0;
    font-size: 16px;
}

.mhp-delete-warning {
    font-size: 14px;
    color: var(--mhp-text);
    margin: 0 0 12px 0;
}

.mhp-delete-list {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.mhp-delete-list li {
    font-size: 14px;
    color: var(--mhp-text-light);
    margin: 4px 0;
}

.mhp-delete-note {
    font-size: 13px;
    color: var(--mhp-text-light);
    background: rgba(255,255,255,0.7);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.mhp-delete-note strong {
    color: var(--mhp-danger);
}

/* Delete Button - Responsive & Enhanced Visibility */
.mhp-delete-section .mhp-btn-danger {
    width: 100%;
    max-width: 400px;
    white-space: normal;
    line-height: 1.4;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
    border: 2px solid #c0392b;
    transition: all 0.3s ease;
    cursor: pointer;
    text-transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.mhp-delete-section .mhp-btn-danger:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
    background: #a93226 !important;
}

.mhp-delete-section .mhp-btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.3);
}

@media (max-width: 480px) {
    .mhp-delete-section .mhp-btn-danger {
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* Privacy Contact */
.mhp-privacy-contact {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mhp-border);
    text-align: center;
}

.mhp-privacy-contact p {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-privacy-contact a {
    color: var(--mhp-primary);
    text-decoration: none;
}

.mhp-privacy-contact a:hover {
    text-decoration: underline;
}

/* ========================================== */
/* SECTION WRAPPER - Unternehmens/Persönlicher Bereich */
/* ========================================== */
.mhp-section-wrapper {
    margin-bottom: 40px;
    padding-bottom: 30px;
    border-bottom: 2px solid var(--mhp-border);
}

.mhp-section-wrapper:last-of-type {
    border-bottom: none;
    margin-bottom: 20px;
}

.mhp-section-title {
    margin-bottom: 24px;
}

.mhp-section-title h2 {
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--mhp-text);
    margin: 0 0 6px 0;
}

.mhp-section-title p {
    font-size: 14px;
    color: var(--mhp-text-light);
    margin: 0;
}

/* ========================================== */
/* SURVEYS SLIDER */
/* ========================================== */
.mhp-surveys-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 4px 0 16px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--mhp-accent) var(--mhp-bg);
}

.mhp-surveys-slider::-webkit-scrollbar {
    height: 8px;
}

.mhp-surveys-slider::-webkit-scrollbar-track {
    background: var(--mhp-bg);
    border-radius: 4px;
}

.mhp-surveys-slider::-webkit-scrollbar-thumb {
    background: var(--mhp-accent);
    border-radius: 4px;
}

.mhp-survey-slide {
    flex: 0 0 auto;
    width: 340px;
    scroll-snap-align: start;
}

/* Mood Slide soll volle Breite haben */
.mhp-survey-slide#mhp-mood-slide {
    width: 100%;
    flex: 1 1 100%;
}

.mhp-survey-card {
    background: var(--mhp-bg-card);
    border-radius: var(--mhp-radius);
    box-shadow: var(--mhp-shadow);
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.mhp-survey-header {
    margin-bottom: 20px;
}

.mhp-survey-header h3 {
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--mhp-text);
    margin: 0 0 8px 0;
}

.mhp-survey-header p {
    font-size: 14px;
    color: var(--mhp-text-light);
    margin: 0;
}

.mhp-survey-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 16px;
}

.mhp-survey-desc {
    font-size: 13px;
    color: var(--mhp-text-light);
    line-height: 1.5;
    margin: 0;
}

.mhp-survey-completed {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background: #d1fae5;
    border-radius: 8px;
    color: #065f46;
    font-weight: 500;
}

.mhp-survey-completed .mhp-mood-check {
    font-size: 32px;
    color: var(--mhp-success);
}

/* Survey Card im Slider - Mood Smileys anpassen */
.mhp-survey-card .mhp-mood-smileys {
    margin-bottom: 12px;
}

.mhp-survey-card .mhp-smiley-btn {
    width: 56px;
    height: 56px;
}

.mhp-survey-card .mhp-smiley {
    font-size: 28px;
}

.mhp-survey-card .mhp-mood-labels {
    margin-bottom: 16px;
}

.mhp-survey-card .mhp-mood-success,
.mhp-survey-card .mhp-mood-already {
    margin-top: auto;
    padding: 16px;
    background: #d1fae5;
    border-radius: 8px;
}

/* Responsive */
@media (max-width: 600px) {
    .mhp-container {
        padding: 12px;
    }

    .mhp-card {
        padding: 16px;
    }

    .mhp-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .mhp-id-value {
        font-size: 22px;
        padding: 12px 16px;
    }

    .mhp-section-wrapper {
        margin-bottom: 30px;
        padding-bottom: 20px;
    }

    .mhp-section-title h2 {
        font-size: 18px;
    }

    .mhp-survey-slide {
        width: 280px;
    }

    .mhp-survey-card {
        padding: 16px;
    }

    .mhp-survey-card .mhp-smiley-btn {
        width: 48px;
        height: 48px;
    }

    .mhp-survey-card .mhp-smiley {
        font-size: 24px;
    }

    .mhp-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .mhp-choice-options {
        grid-template-columns: 1fr;
    }

    .mhp-action-content {
        flex-direction: column;
        text-align: center;
    }

    .mhp-action-icon {
        font-size: 40px;
    }

    .mhp-mood-content {
        flex-direction: column;
        text-align: center;
    }

    .mhp-mood-smileys {
        gap: 10px;
    }

    .mhp-smiley-btn {
        width: 75px;
        height: 75px;
    }

    .mhp-smiley {
        font-size: 38px;
    }

    .mhp-mood-stats {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .mhp-mood-timeline {
        gap: 6px;
    }

    .mhp-mood-entry {
        min-width: 45px;
        padding: 6px;
    }

    .mhp-mood-icon {
        font-size: 20px;
    }

    .mhp-settings-row {
        flex-direction: column;
        align-items: stretch;
    }

    .mhp-select {
        width: 100%;
        min-width: auto;
    }

    .mhp-roundtables-grid {
        grid-template-columns: 1fr;
    }

    .mhp-consultants-slider {
        margin: 0 -16px -16px -16px;
        padding: 0 16px 16px 16px;
    }
}

/* ========================================== */
/* BERATUNGSKONTINGENT BOX */
/* ========================================== */

.mhp-quota-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--mhp-bg-highlight) 0%, #fff8e4 100%);
    border: 2px solid var(--mhp-accent-light);
    border-radius: 12px;
    margin-bottom: 16px;
}

.mhp-quota-icon {
    font-size: 28px;
    flex-shrink: 0;
}

.mhp-quota-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhp-quota-label {
    font-size: 13px;
    color: var(--mhp-text-light);
    font-weight: 500;
}

.mhp-quota-value {
    font-size: 16px;
    color: var(--mhp-primary);
    font-weight: 600;
}

@media (max-width: 480px) {
    .mhp-quota-box {
        flex-direction: column;
        text-align: center;
        gap: 8px;
    }

    .mhp-quota-content {
        align-items: center;
    }
}

/* ========================================== */
/* BLOG-EMPFEHLUNGEN */
/* ========================================== */

.mhp-card-blog {
    background: var(--mhp-bg-card);
}

.mhp-card-blog .mhp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mhp-blog-context {
    font-size: 12px;
    background: var(--mhp-bg-highlight);
    color: var(--mhp-accent);
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 500;
}

/* Burnout-Analyse basierter Kontext-Badge */
.mhp-blog-context.mhp-context-burnout-analysis {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border: 1px solid #f59e0b;
    padding: 6px 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mhp-blog-context.mhp-context-burnout-analysis::before {
    content: '🎯';
    font-size: 14px;
}

/* Blog-Slider Container */
.mhp-blog-grid {
    display: flex;
    gap: 16px;
    margin-top: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--mhp-accent) transparent;
    padding-bottom: 8px;
}

.mhp-blog-grid::-webkit-scrollbar {
    height: 6px;
}

.mhp-blog-grid::-webkit-scrollbar-track {
    background: transparent;
}

.mhp-blog-grid::-webkit-scrollbar-thumb {
    background-color: var(--mhp-accent);
    border-radius: 3px;
}

.mhp-blog-card {
    display: flex;
    flex-direction: column;
    background: var(--mhp-bg);
    border-radius: var(--mhp-radius);
    overflow: hidden;
    text-decoration: none;
    color: var(--mhp-text);
    transition: all 0.3s ease;
    border: 1px solid var(--mhp-border);
    /* Slider-Karten */
    flex: 0 0 280px;
    min-width: 280px;
    scroll-snap-align: start;
}

.mhp-blog-card:hover {
    box-shadow: var(--mhp-shadow-hover);
    transform: translateY(-4px);
    border-color: var(--mhp-accent-light);
}

.mhp-blog-thumb {
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: var(--mhp-bg-highlight);
}

.mhp-blog-thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    opacity: 0.5;
}

.mhp-blog-content {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mhp-blog-category {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mhp-accent);
    font-weight: 600;
    margin-bottom: 8px;
}

.mhp-blog-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mhp-text);
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
}

.mhp-blog-excerpt {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-light);
    line-height: 1.5;
    flex: 1;
}

.mhp-blog-date {
    margin-top: 12px;
    font-size: 12px;
    color: var(--mhp-text-light);
    opacity: 0.7;
}

.mhp-blog-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px;
    color: var(--mhp-text-light);
}

/* ========================================== */
/* BURNOUT-REMINDER STYLES */
/* ========================================== */

.mhp-burnout-reminder,
.mhp-burnout-hint {
    text-align: center;
}

.mhp-reminder-text,
.mhp-hint-text {
    margin-bottom: 16px;
    line-height: 1.6;
}

.mhp-hint-important {
    background: var(--mhp-bg-highlight);
    border-radius: var(--mhp-radius);
    padding: 20px;
    margin: -8px;
}

.mhp-hint-small {
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-top: 12px;
}

.mhp-survey-reminder {
    background: linear-gradient(135deg, var(--mhp-bg-highlight) 0%, var(--mhp-bg) 100%);
    border: 2px dashed var(--mhp-accent-light);
}

.mhp-reminder-info {
    line-height: 1.6;
    color: var(--mhp-text);
}

.mhp-burnout-reminder-slide .mhp-survey-header h3 {
    color: var(--mhp-accent);
}

/* Mobile Responsive für Blog-Slider */
@media (max-width: 600px) {
    .mhp-blog-card {
        flex: 0 0 240px;
        min-width: 240px;
    }

    .mhp-blog-thumb {
        height: 120px;
    }

    .mhp-blog-title {
        font-size: 15px;
    }
}

/* Swipe-Hinweis für Blog-Slider */
.mhp-card-blog .mhp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.mhp-blog-swipe-hint {
    font-size: 12px;
    color: var(--mhp-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.mhp-blog-swipe-hint::after {
    content: '→';
    animation: swipeHint 1.5s ease-in-out infinite;
}

@keyframes swipeHint {
    0%, 100% { transform: translateX(0); opacity: 0.5; }
    50% { transform: translateX(4px); opacity: 1; }
}

/* ========================================== */
/* BLOG AUDIO PLAYER (Inline über Titel) */
/* ========================================== */

/* Inline Audio Player - direkt über dem Titel */
.mhp-blog-audio-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--mhp-primary);
    border-radius: 20px;
    margin-bottom: 8px;
}

.mhp-blog-audio-inline audio {
    display: none;
}

.mhp-blog-audio-inline .mhp-audio-playpause {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    max-width: 32px;
    border: none;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    color: var(--mhp-primary);
    font-size: 12px;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.mhp-blog-audio-inline .mhp-audio-playpause:hover {
    background: var(--mhp-accent-light);
    color: white;
    transform: scale(1.1);
}

.mhp-blog-audio-inline .mhp-play-icon,
.mhp-blog-audio-inline .mhp-pause-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.mhp-blog-audio-inline .mhp-play-icon svg,
.mhp-blog-audio-inline .mhp-pause-icon svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: auto;
}

.mhp-blog-audio-inline .mhp-audio-progress {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    cursor: pointer;
    min-width: 40px;
}

.mhp-blog-audio-inline .mhp-audio-progress-bar {
    height: 100%;
    background: white;
    border-radius: 2px;
    width: 0%;
    transition: width 0.1s linear;
}

.mhp-blog-audio-inline .mhp-audio-time {
    font-size: 10px;
    color: rgba(255,255,255,0.9);
    font-family: monospace;
    min-width: 30px;
    text-align: right;
}

/* Blog Card Anpassung für Klick-Verhalten */
.mhp-blog-card {
    cursor: pointer;
}

/* Mobile Responsive für Audio-Player */
@media (max-width: 480px) {
    .mhp-blog-audio-inline {
        padding: 5px 8px;
        gap: 6px;
    }

    .mhp-blog-audio-inline .mhp-audio-playpause {
        width: 24px;
        height: 24px;
        min-width: 24px;
        max-width: 24px;
    }

    .mhp-blog-audio-inline .mhp-play-icon svg,
    .mhp-blog-audio-inline .mhp-pause-icon svg {
        width: 12px;
        height: 12px;
    }

    .mhp-blog-audio-inline .mhp-audio-time {
        font-size: 9px;
        min-width: 28px;
    }
}

/* ========================================== */
/* SPRACHUMSCHALTER */
/* ========================================== */

.mhp-header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.mhp-header-top h2 {
    margin: 0;
}

.mhp-language-switcher {
    display: flex;
    gap: 4px;
    background: var(--mhp-bg);
    padding: 4px;
    border-radius: 8px;
    border: 1px solid var(--mhp-border);
}

.mhp-lang-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--mhp-text-light);
    transition: all 0.2s ease;
}

.mhp-lang-btn:hover {
    background: var(--mhp-bg-card);
    color: var(--mhp-text);
}

.mhp-lang-btn.active {
    background: var(--mhp-primary);
    color: #fff;
    box-shadow: 0 2px 4px rgba(61,78,96,0.15);
}

.mhp-lang-flag {
    font-size: 16px;
    line-height: 1;
}

.mhp-lang-label {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Mobile: Nur Flags zeigen */
@media (max-width: 480px) {
    .mhp-lang-label {
        display: none;
    }

    .mhp-lang-btn {
        padding: 6px 8px;
    }

    .mhp-header-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .mhp-language-switcher {
        align-self: flex-end;
        margin-top: -40px;
    }
}

/* ========================================== */
/* 1:1 BERATUNGEN - KOMPAKT (20% Größe) */
/* ========================================== */

.mhp-card-consultants.mhp-compact {
    padding: 16px;
}

.mhp-card-consultants.mhp-compact .mhp-section-header h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.mhp-card-consultants.mhp-compact .mhp-section-intro {
    font-size: 13px;
    margin-bottom: 12px;
}

.mhp-card-consultants.mhp-compact .mhp-consultants-slider {
    margin: 0 -16px -16px -16px;
    padding: 0 16px 16px 16px;
    max-height: 200px;
    overflow: hidden;
}

.mhp-card-consultants.mhp-compact .mhp-quota-box {
    padding: 10px 12px;
    font-size: 13px;
}

/* Slider auf 20% Größe reduzieren */
#mhp-consultants-section.mhp-compact-consultants {
    transform-origin: top left;
}

#mhp-consultants-section.mhp-compact-consultants .mhp-consultants-slider {
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
}

#mhp-consultants-section.mhp-compact-consultants .mhp-consultants-slider > * {
    transform: scale(0.8);
    transform-origin: top left;
    width: 125%; /* Kompensiert die Skalierung */
}

/* Alternative: Nur einen kleinen Preview zeigen */
.mhp-consultants-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--mhp-bg-highlight);
    border-radius: var(--mhp-radius);
}

.mhp-consultants-preview-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.mhp-consultants-preview-text h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
}

.mhp-consultants-preview-text p {
    margin: 0;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-consultants-expand-btn {
    margin-top: 12px;
}

/* ========================================== */
/* MEINE PSYCHOLOGIN CONTAINER */
/* ========================================== */

.mhp-card-my-psychologist {
    background: linear-gradient(135deg, #f8fffe 0%, #fff8f5 100%);
    border: 1px solid var(--mhp-border);
}

.mhp-my-psychologist-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mhp-psychologist-profile {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mhp-psychologist-avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mhp-accent-light) 0%, var(--mhp-accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.mhp-psychologist-avatar .mhp-avatar-placeholder {
    font-size: 32px;
}

.mhp-psychologist-avatar .mhp-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mhp-psychologist-info {
    flex: 1;
    min-width: 0;
}

.mhp-psychologist-name {
    margin: 0 0 4px 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-psychologist-specialty {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
    line-height: 1.4;
}

.mhp-psychologist-next-appointment {
    background: var(--mhp-bg-highlight);
    border-radius: var(--mhp-radius);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mhp-next-apt-label {
    font-size: 12px;
    color: var(--mhp-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.mhp-next-apt-datetime {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.mhp-next-apt-datetime .mhp-apt-date {
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-next-apt-datetime .mhp-apt-time {
    color: var(--mhp-accent);
    font-weight: 500;
}

.mhp-psychologist-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.mhp-psychologist-actions .mhp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.mhp-psychologist-actions .mhp-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Mobile Anpassungen */
@media (max-width: 480px) {
    .mhp-psychologist-profile {
        flex-direction: column;
        text-align: center;
    }

    .mhp-psychologist-avatar {
        width: 80px;
        height: 80px;
    }

    .mhp-psychologist-actions {
        flex-direction: column;
    }

    .mhp-psychologist-actions .mhp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================== -->
/* COLLAPSIBLE / EINKLAPPBAR */
/* ========================================== */

.mhp-collapsible {
    overflow: hidden;
}

.mhp-collapsible-header {
    cursor: pointer;
    user-select: none;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    margin: -24px -24px 16px -24px;
    background: var(--mhp-bg-soft);
    border-radius: 20px 20px 0 0;
    box-shadow:
        6px 6px 12px rgba(163, 140, 132, 0.12),
        -3px -3px 8px rgba(255, 255, 255, 0.6);
    transition: all 0.3s ease;
}

/* Klapp-Container wenn zugeklappt deutlich kleiner */
.mhp-collapsible.collapsed .mhp-collapsible-header {
    padding: 8px 16px;
    margin: -24px -24px 8px -24px;
}

.mhp-collapsible-header:hover {
    background: #EBE6DE;
    box-shadow:
        inset 3px 3px 6px rgba(163, 140, 132, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

.mhp-collapsible-header h3 {
    margin: 0 !important;
    font-size: 17px;
    font-weight: 600;
    color: var(--mhp-primary);
}

.mhp-collapsible-header p {
    margin: 0;
    line-height: 1.3;
}

.mhp-collapse-icon {
    font-size: 18px;
    transition: transform 0.3s ease;
    color: var(--mhp-primary);
    font-weight: bold;
}

.mhp-collapsible.collapsed .mhp-collapse-icon {
    transform: rotate(-90deg);
}

.mhp-collapsible-content {
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    max-height: 2000px;
    opacity: 1;
}

.mhp-collapsible.collapsed .mhp-collapsible-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    overflow: hidden;
}

/* Anonymes Feedback standardmäßig eingeklappt */
#mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-section-intro,
#mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-feedback-form,
#mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-feedback-success {
    display: none;
}

/* ========================================== -->
/* SEKTIONSREIHENFOLGE - Persönlich oben, Unternehmen unten */
/* ========================================== */

.mhp-dashboard-content {
    display: flex;
    flex-direction: column;
}

/* Persönlicher Bereich zuerst (order: 1) */
.mhp-section-wrapper.mhp-section-personal {
    order: 1;
}

/* Unternehmensbereich danach (order: 2) */
.mhp-section-wrapper.mhp-section-company {
    order: 2;
}

/* Führungskräfte-Bereich (order: 3) */
.mhp-section-wrapper.mhp-section-leadership {
    order: 3;
}

/* Privacy-Sektion ganz unten (order: 99) */
#mhp-privacy-section {
    order: 99;
}

/* ========================================== */
/* BURNOUT ANALYSE - 4 DIMENSIONEN */
/* ========================================== */

.mhp-burnout-analysis-card {
    background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
}

.mhp-dimensions-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 600px) {
    .mhp-dimensions-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mhp-dimension-card {
        padding: 16px;
    }

    .mhp-dimension-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .mhp-dimension-icon {
        font-size: 24px;
        width: 38px;
        height: 38px;
    }

    .mhp-dimension-title {
        font-size: 14px;
    }

    .mhp-dimension-score {
        gap: 10px;
        margin-bottom: 10px;
    }

    .mhp-score-value {
        font-size: 16px;
        min-width: 40px;
    }

    .mhp-dimension-interpretation {
        font-size: 12px;
        padding-top: 10px;
    }

    .mhp-interpretation-section {
        padding: 16px;
    }

    .mhp-interpretation-header {
        gap: 10px;
        margin-bottom: 12px;
    }

    .mhp-interpretation-title {
        font-size: 16px;
    }

    .mhp-interpretation-text {
        font-size: 14px;
    }

    .mhp-recommendation-list {
        padding-left: 20px;
    }

    .mhp-recommendation-list li {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

.mhp-dimension-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    border: 2px solid #e5e7eb;
    transition: all 0.3s ease;
}

.mhp-dimension-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mhp-dimension-card.risk-low {
    border-color: var(--mhp-success-light);
    background: linear-gradient(135deg, var(--mhp-success-lighter) 0%, #fff 100%);
}

.mhp-dimension-card.risk-medium {
    border-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
}

.mhp-dimension-card.risk-high {
    border-color: var(--mhp-danger-light);
    background: linear-gradient(135deg, var(--mhp-accent-lighter) 0%, #fff 100%);
}

.mhp-dimension-card.risk-critical {
    border-color: #dc2626;
    background: linear-gradient(135deg, #fee2e2 0%, #fff 100%);
}

.mhp-dimension-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mhp-dimension-icon {
    font-size: 28px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

.mhp-dimension-title {
    font-weight: 600;
    color: #374151;
    font-size: 15px;
    line-height: 1.3;
}

.mhp-dimension-score {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.mhp-score-bar {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: 5px;
    overflow: hidden;
}

.mhp-score-fill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease;
}

.mhp-score-fill.low { background: linear-gradient(90deg, var(--mhp-success), var(--mhp-success-light)); }
.mhp-score-fill.medium { background: linear-gradient(90deg, var(--mhp-warning), var(--mhp-warning-light)); }
.mhp-score-fill.high { background: linear-gradient(90deg, var(--mhp-accent), var(--mhp-accent-light)); }
.mhp-score-fill.critical { background: linear-gradient(90deg, var(--mhp-danger), var(--mhp-danger-light)); }

.mhp-score-value {
    font-weight: 700;
    font-size: 18px;
    min-width: 45px;
    text-align: right;
}

.mhp-score-value.low { color: #059669; }
.mhp-score-value.medium { color: #d97706; }
.mhp-score-value.high { color: #ea580c; }
.mhp-score-value.critical { color: #dc2626; }

.mhp-dimension-interpretation {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.5;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

/* Interpretation Section */
.mhp-interpretation-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e5e7eb;
}

.mhp-interpretation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.mhp-interpretation-icon {
    font-size: 32px;
}

.mhp-interpretation-title {
    font-weight: 700;
    font-size: 18px;
    color: #374151;
}

.mhp-interpretation-summary {
    font-size: 15px;
    line-height: 1.7;
    color: #4b5563;
    margin-bottom: 20px;
}

.mhp-action-recommendations {
    background: #f8fafc;
    border-radius: 10px;
    padding: 20px;
}

.mhp-action-recommendations h5 {
    font-weight: 600;
    color: #374151;
    margin: 0 0 12px 0;
    font-size: 15px;
}

.mhp-action-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mhp-action-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
}

.mhp-action-list li:last-child {
    border-bottom: none;
}

.mhp-action-list li::before {
    content: "→";
    color: var(--mhp-primary);
    font-weight: bold;
}

.mhp-urgent-notice {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border: 2px solid #fca5a5;
    border-radius: 10px;
    padding: 16px;
    margin-top: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.mhp-urgent-notice-icon {
    font-size: 24px;
}

.mhp-urgent-notice-text {
    font-size: 14px;
    color: #991b1b;
    line-height: 1.5;
}

.mhp-urgent-notice-text strong {
    display: block;
    margin-bottom: 4px;
}

/* ========================================== */
/* PSYCHOEDUKATION STYLES */
/* ========================================== */

.mhp-psychoeducation-card {
    background: linear-gradient(135deg, var(--mhp-bg-highlight) 0%, var(--mhp-bg) 100%);
    border: 1px solid var(--mhp-accent-light);
}

.mhp-collapse-btn {
    background: var(--mhp-primary);
    border: none;
    cursor: pointer;
    padding: 10px 16px;
    border-radius: 20px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mhp-bg-highlight);
    font-size: 13px;
    font-weight: 500;
}

.mhp-collapse-btn::before {
    content: 'Details';
}

.mhp-collapse-btn[aria-expanded="true"]::before {
    content: 'Schließen';
}

.mhp-collapse-btn:hover {
    background: var(--mhp-primary-dark);
}

.mhp-collapse-icon {
    font-size: 12px;
    color: var(--mhp-bg-highlight);
    transition: transform 0.3s ease;
}

.mhp-psychoeducation-content.collapsed {
    display: none;
}

.mhp-collapse-btn[aria-expanded="false"] .mhp-collapse-icon {
    transform: rotate(-90deg);
}

.mhp-collapse-btn[aria-expanded="true"] .mhp-collapse-icon {
    transform: rotate(180deg);
}

.mhp-edu-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
}

.mhp-edu-section:last-child {
    margin-bottom: 0;
}

.mhp-edu-section h4 {
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 12px 0;
    font-size: 18px;
}

.mhp-edu-section h5 {
    font-weight: 600;
    color: #374151;
    margin: 20px 0 16px 0;
    font-size: 15px;
}

.mhp-edu-section p {
    color: #4b5563;
    line-height: 1.7;
    margin: 0;
}

/* Burnout Phasen Timeline */
.mhp-phase-timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-phase {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 16px;
    background: #f8fafc;
    border-radius: 10px;
    border-left: 4px solid var(--mhp-primary);
}

.mhp-phase-num {
    width: 32px;
    height: 32px;
    min-width: 32px;
    background: var(--mhp-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.mhp-phase strong {
    display: block;
    color: #374151;
    margin-bottom: 4px;
}

.mhp-phase p {
    font-size: 13px;
    color: #6b7280;
    margin: 0;
}

/* Warnsignale Liste */
.mhp-warning-signs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mhp-warning-signs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #e5e7eb;
    color: #4b5563;
    font-size: 14px;
}

.mhp-warning-signs li:last-child {
    border-bottom: none;
}

.mhp-warning-signs li::before {
    content: "⚠️";
    font-size: 14px;
}

/* Mobile optimierte Psychoedukation */
@media (max-width: 600px) {
    .mhp-psychoeducation-card {
        padding: 16px;
    }

    .mhp-edu-section {
        padding: 16px;
        margin-bottom: 16px;
    }

    .mhp-edu-section h4 {
        font-size: 16px;
    }

    .mhp-edu-section h5 {
        font-size: 14px;
        margin: 16px 0 12px 0;
    }

    .mhp-edu-section p {
        font-size: 14px;
        line-height: 1.5;
    }

    .mhp-phase {
        padding: 12px;
        gap: 12px;
    }

    .mhp-phase-num {
        width: 28px;
        height: 28px;
        min-width: 28px;
        font-size: 12px;
    }

    .mhp-phase strong {
        font-size: 14px;
    }

    .mhp-phase p {
        font-size: 12px;
    }

    .mhp-warning-signs li {
        font-size: 13px;
        padding: 8px 0;
    }
}

/* Selbsthilfe Tips Grid */
.mhp-tips-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

@media (max-width: 768px) {
    .mhp-tips-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .mhp-tips-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
}

@media (max-width: 360px) {
    .mhp-tips-grid {
        grid-template-columns: 1fr;
    }
}

.mhp-tip-card {
    background: #f8fafc;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
    min-width: 0; /* Ermöglicht Flexbox-Shrinking */
}

.mhp-tip-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.mhp-tip-icon {
    font-size: 28px;
    display: block;
    margin-bottom: 10px;
}

.mhp-tip-card strong {
    display: block;
    color: #374151;
    margin-bottom: 6px;
    font-size: 13px;
    word-wrap: break-word;
    hyphens: auto;
}

.mhp-tip-card p {
    font-size: 11px;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
    word-wrap: break-word;
    hyphens: auto;
}

/* Mobile optimierte Tip-Cards */
@media (max-width: 480px) {
    .mhp-tip-card {
        padding: 12px 10px;
    }

    .mhp-tip-icon {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .mhp-tip-card strong {
        font-size: 12px;
        margin-bottom: 4px;
    }

    .mhp-tip-card p {
        font-size: 10px;
        line-height: 1.3;
    }
}

/* Professional Help Section */
.mhp-professional-help {
    background: linear-gradient(135deg, #fef2f2 0%, #fff 100%) !important;
    border: 1px solid #fecaca;
}

.mhp-help-indicators ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.mhp-help-indicators li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: #4b5563;
    font-size: 14px;
}

.mhp-help-indicators li::before {
    content: "•";
    color: #dc2626;
    font-weight: bold;
    font-size: 18px;
}

.mhp-help-cta {
    background: #fee2e2;
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.mhp-help-cta p {
    color: #991b1b;
    font-weight: 500;
    margin: 0;
    text-align: center;
}

/* ========================================== */
/* BERATUNG BUCHEN SECTION */
/* ========================================== */

.mhp-card-booking {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border: 1px solid var(--mhp-border);
}

.mhp-booking-status {
    margin-bottom: 20px;
}

.mhp-info-banner {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    background: var(--mhp-bg-highlight);
    border-radius: 12px;
    border-left: 4px solid var(--mhp-accent);
}

.mhp-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.mhp-info-text strong {
    display: block;
    color: var(--mhp-primary);
    margin-bottom: 4px;
}

.mhp-info-text p {
    margin: 0;
    color: var(--mhp-text-light);
    font-size: 14px;
    line-height: 1.5;
}

/* Upcoming Consultations */
.mhp-upcoming-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mhp-border);
}

.mhp-upcoming-section h4 {
    margin: 0 0 16px 0;
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-consultations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-consultation-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--mhp-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.mhp-consultation-item:hover {
    box-shadow: var(--mhp-shadow);
}

.mhp-consultation-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
    padding: 12px;
    background: var(--mhp-primary);
    color: white;
    border-radius: 10px;
    text-align: center;
}

.mhp-consultation-day {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.mhp-consultation-month {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.9;
}

.mhp-consultation-details {
    flex: 1;
}

.mhp-consultation-time {
    font-weight: 600;
    color: var(--mhp-primary);
    margin-bottom: 4px;
}

.mhp-consultation-therapist {
    font-size: 14px;
    color: var(--mhp-text-light);
}

.mhp-consultation-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.mhp-status-confirmed {
    background: #d4edda;
    color: #155724;
}

.mhp-status-pending {
    background: #fff3cd;
    color: #856404;
}

/* Bookly Wrapper */
.mhp-bookly-wrapper {
    margin-top: 16px;
}

.mhp-bookly-wrapper h4 {
    margin: 0 0 16px 0;
    color: var(--mhp-primary);
    font-size: 16px;
}

/* Quota Info */
.mhp-quota-info {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--mhp-border);
}

.mhp-quota-remaining {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #e8f5e9;
    border-radius: 10px;
    color: #2e7d32;
}

.mhp-quota-icon-small {
    font-size: 18px;
}

.mhp-quota-remaining strong {
    font-weight: 700;
}

/* No consultations message */
.mhp-no-consultations {
    padding: 20px;
    text-align: center;
    color: var(--mhp-text-light);
    font-style: italic;
}

/* Consent Modal for Booking */
.mhp-consent-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.mhp-consent-modal {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.mhp-consent-modal-header {
    padding: 24px 24px 0;
    position: relative;
}

.mhp-consent-modal-header h3 {
    margin: 0 0 8px;
    color: var(--mhp-primary);
    padding-right: 40px;
}

/* Modal Base Styles */
.mhp-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
    overflow-y: auto;
}

.mhp-modal-content {
    background: white;
    border-radius: 16px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    position: relative;
    padding: 24px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

/* Modal Close Button (X in Circle) */
.mhp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--mhp-border);
    background: white;
    color: var(--mhp-text-light);
    font-size: 20px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    line-height: 1;
    padding: 0;
}

.mhp-modal-close:hover {
    background: var(--mhp-bg);
    border-color: var(--mhp-primary);
    color: var(--mhp-primary);
}

.mhp-modal-close:active {
    transform: scale(0.95);
}

.mhp-consent-modal-header p {
    margin: 0;
    color: var(--mhp-text-light);
    font-size: 14px;
}

.mhp-consent-modal-body {
    padding: 20px 24px;
}

.mhp-consent-checkbox-wrapper {
    display: flex;
    gap: 12px;
    padding: 16px;
    background: var(--mhp-bg);
    border-radius: 10px;
    margin-bottom: 16px;
}

.mhp-consent-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.mhp-consent-checkbox-wrapper label {
    font-size: 14px;
    line-height: 1.5;
    color: var(--mhp-text);
    cursor: pointer;
}

.mhp-consent-modal-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    justify-content: flex-end;
}

/* Request Form Styles */
.mhp-request-form {
    margin-top: 20px;
}

.mhp-request-form .mhp-form-row {
    margin-bottom: 20px;
}

.mhp-request-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-request-form .mhp-input,
.mhp-request-form .mhp-select,
.mhp-request-form .mhp-textarea {
    width: 100%;
    max-width: 100%;
}

.mhp-request-form small {
    display: block;
    margin-top: 6px;
    color: var(--mhp-text-light);
    font-size: 13px;
}

.mhp-info-approval {
    background: #e8f5e9;
    border-left-color: #4caf50;
}

.mhp-info-approval .mhp-info-text strong {
    color: #2e7d32;
}

/* Pending Requests Section */
.mhp-pending-section {
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--mhp-border);
}

.mhp-pending-section h4 {
    margin: 0 0 16px 0;
    color: var(--mhp-primary);
    font-size: 16px;
}

.mhp-requests-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-request-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--mhp-border);
    border-radius: 12px;
}

.mhp-request-info {
    flex: 1;
}

.mhp-request-type {
    font-weight: 600;
    color: var(--mhp-primary);
    margin-bottom: 4px;
}

.mhp-request-date {
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-request-status {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.mhp-status-open {
    background: #fff3cd;
    color: #856404;
}

.mhp-status-approved {
    background: #d4edda;
    color: #155724;
}

.mhp-status-rejected {
    background: #f8d7da;
    color: #721c24;
}

/* Success Message */
.mhp-success-message {
    text-align: center;
    padding: 30px;
    background: #e8f5e9;
    border-radius: 12px;
    margin-top: 20px;
}

.mhp-success-message .mhp-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #4caf50;
    color: white;
    border-radius: 50%;
    font-size: 24px;
    margin-bottom: 16px;
}

.mhp-success-message h4 {
    margin: 0 0 8px;
    color: #2e7d32;
}

.mhp-success-message p {
    margin: 0;
    color: #4b5563;
}

/* Mobile Adjustments for Booking */
@media (max-width: 600px) {
    .mhp-consultation-item {
        flex-direction: column;
        text-align: center;
    }

    .mhp-consultation-date {
        flex-direction: row;
        gap: 8px;
        min-width: auto;
        padding: 10px 16px;
    }

    .mhp-consultation-day {
        font-size: 18px;
    }

    .mhp-consultation-details {
        text-align: center;
    }

    .mhp-consent-modal-footer {
        flex-direction: column;
    }

    .mhp-consent-modal-footer .mhp-btn {
        width: 100%;
    }

    .mhp-request-item {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ========================================== */
/* PERSONAL ASSESSMENTS (Self-Tests) */
/* ========================================== */

/* Disclaimer Box */
.mhp-disclaimer-box {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.mhp-disclaimer-box .mhp-disclaimer-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.mhp-disclaimer-box p {
    margin: 0;
    font-size: 13px;
    color: #856404;
    line-height: 1.5;
}

/* Assessments Grid */
.mhp-assessments-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

/* Assessment Card */
.mhp-assessment-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mhp-bg);
    border: 1px solid var(--mhp-border);
    border-radius: 10px;
    padding: 16px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.mhp-assessment-card:hover {
    border-color: var(--mhp-accent);
    box-shadow: var(--mhp-shadow);
    transform: translateY(-2px);
}

.mhp-assessment-icon {
    font-size: 32px;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--mhp-bg-card);
    border-radius: 50%;
}

.mhp-assessment-info {
    flex: 1;
    min-width: 0;
}

.mhp-assessment-info h4 {
    margin: 0 0 4px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-assessment-info p {
    margin: 0;
    font-size: 12px;
    color: var(--mhp-text-light);
}

.mhp-assessment-status {
    flex-shrink: 0;
}

/* Assessment Done State */
.mhp-assessment-card.done {
    border-color: var(--mhp-success);
    background: rgba(39, 174, 96, 0.05);
}

.mhp-assessment-card.done .mhp-assessment-status {
    color: var(--mhp-success);
    font-size: 14px;
}

.mhp-done-check {
    display: inline-block;
    color: var(--mhp-success);
    font-size: 18px;
    font-weight: bold;
}

.mhp-assessment-card.done .mhp-assessment-status small {
    color: var(--mhp-text-light);
    font-size: 11px;
    display: block;
    margin-top: 2px;
}

/* Assessment Slider */
.mhp-assessments-slider-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0;
}

.mhp-assessments-slider {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.mhp-assessments-slider::-webkit-scrollbar {
    display: none;
}

.mhp-assessment-slide {
    flex: 0 0 200px;
    scroll-snap-align: start;
    background: linear-gradient(135deg, var(--mhp-bg-card) 0%, var(--mhp-bg) 100%);
    border: 1px solid var(--mhp-border);
    border-radius: 16px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.mhp-assessment-slide:hover {
    border-color: var(--mhp-primary);
    box-shadow: 0 8px 24px rgba(186, 145, 138, 0.15);
    transform: translateY(-4px);
}

.mhp-assessment-slide .mhp-assessment-icon {
    font-size: 40px;
    margin: 0 auto 12px;
    width: 64px;
    height: 64px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.mhp-assessment-slide h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-assessment-meta {
    font-size: 12px;
    color: var(--mhp-text-light);
    margin: 0 0 8px 0;
}

.mhp-assessment-desc {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin: 0 0 14px 0;
    line-height: 1.4;
}

.mhp-assessment-slide .mhp-assessment-status {
    margin-top: auto;
}

.mhp-assessment-points {
    font-size: 10px;
    color: var(--mhp-text-light);
    margin: 8px 0 0 0;
    font-weight: 500;
}

.mhp-assessment-slide.done {
    border-color: var(--mhp-success);
    background: linear-gradient(135deg, rgba(39, 174, 96, 0.08) 0%, rgba(39, 174, 96, 0.03) 100%);
}

/* Slider Arrows */
.mhp-slider-arrow {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--mhp-border);
    color: var(--mhp-text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.mhp-slider-arrow:hover {
    border-color: var(--mhp-primary);
    color: var(--mhp-primary);
    background: var(--mhp-bg);
}

.mhp-slider-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Slider Dots */
.mhp-slider-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.mhp-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mhp-border);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-slider-dot.active {
    background: var(--mhp-primary);
    transform: scale(1.2);
}

/* Disclaimer Small */
.mhp-disclaimer-small {
    padding: 12px 16px;
    margin-top: 16px;
    font-size: 12px;
}

.mhp-disclaimer-small p {
    margin: 0;
}

/* Assessment Results Section */
.mhp-assessments-results {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mhp-border);
}

.mhp-assessments-results h4 {
    margin: 0 0 16px 0;
    font-size: 16px;
    color: var(--mhp-text);
}

.mhp-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.mhp-result-mini {
    background: var(--mhp-bg);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.mhp-result-mini-label {
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-bottom: 4px;
}

.mhp-result-mini-value {
    font-size: 18px;
    font-weight: 600;
    color: var(--mhp-text);
    margin-bottom: 6px;
}

.mhp-result-mini-level {
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.mhp-result-mini-level.level-minimal {
    color: #10b981;
}

.mhp-result-mini-level.level-mild {
    color: #f59e0b;
}

.mhp-result-mini-level.level-moderate {
    color: #ef4444;
}

.mhp-result-mini-level.level-severe {
    color: #991b1b;
}

.mhp-result-mini-level .level-icon {
    font-size: 8px;
}

.mhp-result-mini-date {
    font-size: 10px;
    color: var(--mhp-text-light);
    margin-top: 4px;
}

.mhp-results-hint {
    font-size: 12px;
    color: var(--mhp-text-light);
    margin-top: 16px;
    text-align: center;
}

/* Trend-Auswertung */
.mhp-assessment-trends {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mhp-border);
}

.mhp-assessment-trends h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: var(--mhp-text);
}

.mhp-trends-intro {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.mhp-trend-item {
    background: var(--mhp-bg);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 12px;
    border-left: 3px solid var(--mhp-border);
}

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

.mhp-trend-label {
    font-weight: 600;
    font-size: 14px;
    color: var(--mhp-text);
}

.mhp-trend-indicator {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 4px;
}

.mhp-trend-indicator.improving {
    background: #d1fae5;
    color: #065f46;
}

.mhp-trend-indicator.declining {
    background: #fee2e2;
    color: #991b1b;
}

.mhp-trend-indicator.stable {
    background: #f3f4f6;
    color: #6b7280;
}

.mhp-trend-icon {
    font-size: 14px;
}

.mhp-trend-values {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 14px;
}

.mhp-trend-previous {
    color: var(--mhp-text-light);
    text-decoration: line-through;
}

.mhp-trend-arrow {
    color: var(--mhp-text-light);
}

.mhp-trend-current {
    font-weight: 700;
    font-size: 18px;
    color: var(--mhp-text);
}

.mhp-trend-max {
    color: var(--mhp-text-light);
    font-size: 13px;
}

.mhp-trend-time {
    color: var(--mhp-text-light);
    font-size: 12px;
    margin-left: auto;
}

.mhp-trend-insight {
    font-size: 13px;
    line-height: 1.6;
    color: var(--mhp-text);
    margin: 0;
    padding: 12px;
    background: rgba(99, 102, 241, 0.05);
    border-radius: 6px;
}

/* Assessment Modal */
.mhp-modal-assessment {
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
}

.mhp-assessment-header {
    margin-bottom: 24px;
    text-align: center;
}

.mhp-assessment-header h3 {
    margin: 0 0 8px 0;
    color: var(--mhp-text);
}

.mhp-assessment-subtitle {
    color: var(--mhp-text-light);
    font-size: 14px;
    margin: 0 0 16px 0;
}

/* Progress Bar */
.mhp-assessment-progress {
    margin-top: 16px;
}

.mhp-progress-bar {
    height: 6px;
    background: var(--mhp-border);
    border-radius: 3px;
    overflow: hidden;
}

.mhp-progress-fill {
    height: 100%;
    background: var(--mhp-accent);
    transition: width 0.3s ease;
}

.mhp-progress-text {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: var(--mhp-text-light);
}

/* Assessment Body (Questions) */
.mhp-assessment-body {
    padding: 20px 0;
}

.mhp-loading-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 20px;
    color: var(--mhp-text-light);
}

.mhp-error-message {
    text-align: center;
    padding: 30px 20px;
}

.mhp-error-message p {
    color: var(--mhp-danger);
    margin-bottom: 16px;
}

.mhp-assessment-question {
    margin-bottom: 24px;
}

.mhp-assessment-question-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--mhp-text);
    margin-bottom: 16px;
    line-height: 1.5;
}

.mhp-assessment-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mhp-assessment-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--mhp-bg);
    border: 2px solid var(--mhp-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-assessment-option:hover {
    border-color: var(--mhp-accent-light);
    background: var(--mhp-bg-highlight);
}

.mhp-assessment-option.selected {
    border-color: var(--mhp-accent);
    background: rgba(165, 140, 132, 0.1);
}

.mhp-assessment-option input[type="radio"] {
    display: none;
}

.mhp-assessment-option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--mhp-border);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    transition: all 0.2s ease;
}

.mhp-assessment-option.selected .mhp-assessment-option-radio {
    border-color: var(--mhp-accent);
}

.mhp-assessment-option.selected .mhp-assessment-option-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--mhp-accent);
    border-radius: 50%;
}

.mhp-assessment-option-text {
    font-size: 14px;
    color: var(--mhp-text);
}

/* Assessment Navigation */
.mhp-assessment-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--mhp-border);
}

/* Assessment Result */
.mhp-assessment-result {
    text-align: center;
    padding: 20px 0;
}

.mhp-result-score {
    margin-bottom: 24px;
}

.mhp-score-circle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 6px solid var(--mhp-accent);
    background: var(--mhp-bg);
}

.mhp-score-value {
    font-size: 36px;
    font-weight: 700;
    color: var(--mhp-text);
    line-height: 1;
}

.mhp-score-max {
    font-size: 14px;
    color: var(--mhp-text-light);
}

/* Severity Color Coding */
.mhp-score-circle.severity-minimal {
    border-color: var(--mhp-success);
}

.mhp-score-circle.severity-mild {
    border-color: #a8d08d;
}

.mhp-score-circle.severity-moderate {
    border-color: var(--mhp-warning);
}

.mhp-score-circle.severity-severe {
    border-color: #e67e22;
}

.mhp-score-circle.severity-very-severe {
    border-color: var(--mhp-danger);
}

/* Result Interpretation */
.mhp-result-interpretation {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--mhp-bg);
    border-radius: 8px;
}

.mhp-result-interpretation h4 {
    margin: 0 0 8px 0;
    font-size: 18px;
    color: var(--mhp-text);
}

.mhp-result-interpretation p {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
    line-height: 1.6;
}

/* Empfehlungen */
.mhp-result-recommendations {
    margin-top: 20px;
    padding: 16px;
    background: transparent;
    border-radius: 10px;
    text-align: left;
}

.mhp-result-recommendations h5 {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: var(--mhp-text);
    font-weight: 600;
}

.mhp-result-recommendations ul {
    margin: 0;
    padding-left: 20px;
}

.mhp-result-recommendations li {
    font-size: 13px;
    color: var(--mhp-text);
    line-height: 1.6;
    margin-bottom: 10px;
}

.mhp-result-recommendations li:last-child {
    margin-bottom: 0;
}

/* Result Disclaimer */
.mhp-result-disclaimer {
    margin-bottom: 20px;
    text-align: left;
}

.mhp-result-disclaimer .mhp-disclaimer-icon {
    font-size: 16px;
    flex-shrink: 0;
}

.mhp-result-disclaimer p {
    margin: 0;
    font-size: 12px;
    color: var(--mhp-text);
    line-height: 1.4;
}

/* Result Actions */
.mhp-result-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .mhp-assessments-grid {
        grid-template-columns: 1fr;
    }

    .mhp-assessment-card {
        padding: 14px;
    }

    .mhp-assessment-icon {
        font-size: 28px;
        width: 42px;
        height: 42px;
    }

    .mhp-modal-assessment {
        max-width: 95%;
        padding: 20px;
    }

    .mhp-assessment-option {
        padding: 12px 14px;
    }

    .mhp-score-circle {
        width: 100px;
        height: 100px;
    }

    .mhp-score-value {
        font-size: 30px;
    }

    .mhp-result-actions {
        flex-direction: column;
    }

    .mhp-result-actions .mhp-btn {
        width: 100%;
    }
}

/* ========================================== */
/* COMPANY HEADER WITH LOGO - Logo links, Name rechts */
/* ========================================== */

.mhp-company-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 16px !important;
    margin-bottom: 8px !important;
    padding: 16px 20px !important;
    background: linear-gradient(135deg, var(--mhp-bg-card) 0%, var(--mhp-bg) 100%) !important;
    border-radius: var(--mhp-radius) !important;
    box-shadow: var(--mhp-shadow) !important;
}

.mhp-company-logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mhp-company-logo img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    background: white !important;
    padding: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

.mhp-company-name {
    flex: 1 !important;
    min-width: 0 !important;
}

.mhp-company-name h2 {
    margin: 0 !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    font-family: 'Roboto Slab', serif !important;
    color: var(--mhp-text) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mhp-company-subtitle {
    margin: 0 0 20px 0 !important;
    font-size: 14px !important;
    color: var(--mhp-text-light) !important;
    padding-left: 4px !important;
}

/* Mobile: Etwas kompakter aber immer noch nebeneinander */
@media (max-width: 600px) {
    .mhp-company-header {
        padding: 12px 16px !important;
        gap: 12px !important;
    }

    .mhp-company-logo img {
        width: 64px !important;
        height: 64px !important;
    }

    .mhp-company-name h2 {
        font-size: 18px !important;
    }
}

/* ========================================== */
/* MOBILE RESPONSIVE HEADER */
/* ========================================== */

@media (max-width: 600px) {
    .mhp-header-main {
        flex-direction: row;
        align-items: center;
    }

    .mhp-header-greeting h2 {
        font-size: 20px;
    }

    .mhp-greeting-subtitle {
        font-size: 13px;
    }

    .mhp-header-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .mhp-btn-logout {
        width: 36px;
        height: 36px;
    }
}

/* ========================================== */
/* BLOG MODAL - FULLSCREEN */
/* ========================================== */

/* Mehr Blogbeiträge Link Button */
.mhp-btn-link {
    background: none;
    border: none;
    color: var(--mhp-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mhp-btn-link:hover {
    background: var(--mhp-primary-light);
    color: var(--mhp-primary-dark);
}

/* Fullscreen Modal Override */
.mhp-modal-fullscreen {
    padding: 0 !important;
}

.mhp-modal-fullscreen .mhp-modal-content {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

/* Blog Modal Specifics */
.mhp-modal-blog {
    background: var(--mhp-bg);
}

.mhp-blog-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: var(--mhp-bg-card);
    border-bottom: 1px solid var(--mhp-border);
    flex-shrink: 0;
}

.mhp-blog-modal-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-blog-modal-header .mhp-modal-close {
    position: relative;
    top: auto;
    right: auto;
    width: 44px;
    height: 44px;
    font-size: 28px;
    background: var(--mhp-bg);
    border-radius: 50%;
    border: 2px solid var(--mhp-border);
    cursor: pointer;
    z-index: 10;
    flex-shrink: 0;
}

.mhp-blog-modal-header .mhp-modal-close:hover {
    background: var(--mhp-danger);
    color: white;
}

/* Category Filter Bar */
.mhp-blog-categories {
    display: flex;
    gap: 10px;
    padding: 16px 24px;
    background: var(--mhp-bg-card);
    border-bottom: 1px solid var(--mhp-border);
    overflow-x: auto;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--mhp-accent) transparent;
}

.mhp-blog-categories::-webkit-scrollbar {
    height: 4px;
}

.mhp-blog-categories::-webkit-scrollbar-track {
    background: transparent;
}

.mhp-blog-categories::-webkit-scrollbar-thumb {
    background: var(--mhp-accent);
    border-radius: 2px;
}

.mhp-category-btn {
    flex-shrink: 0;
    padding: 10px 20px;
    border: 1px solid var(--mhp-border);
    background: var(--mhp-bg-card);
    color: var(--mhp-text);
    font-size: 14px;
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.mhp-category-btn:hover {
    border-color: var(--mhp-primary);
    color: var(--mhp-primary);
}

.mhp-category-btn.active {
    background: var(--mhp-primary);
    border-color: var(--mhp-primary);
    color: white;
}

/* Blog Modal Content Area */
.mhp-blog-modal-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
    -webkit-overflow-scrolling: touch;
}

/* Blog Grid in Modal */
.mhp-blog-modal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

/* Blog Card in Modal */
.mhp-blog-card-modal {
    background: var(--mhp-bg-card);
    border-radius: var(--mhp-radius);
    box-shadow: var(--mhp-shadow);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mhp-blog-card-modal:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.mhp-blog-card-modal .mhp-blog-card-image {
    height: 180px;
    overflow: hidden;
}

.mhp-blog-card-modal .mhp-blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.mhp-blog-card-modal:hover .mhp-blog-card-image img {
    transform: scale(1.05);
}

.mhp-blog-card-modal .mhp-blog-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mhp-blog-card-modal .mhp-blog-card-category {
    font-size: 12px;
    font-weight: 600;
    color: var(--mhp-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.mhp-blog-card-modal .mhp-blog-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--mhp-text);
    margin: 0 0 10px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mhp-blog-card-modal .mhp-blog-card-excerpt {
    font-size: 14px;
    color: var(--mhp-text-light);
    line-height: 1.5;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 16px;
}

.mhp-blog-card-modal .mhp-blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mhp-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.mhp-blog-card-modal .mhp-blog-card-link:hover {
    gap: 10px;
}

.mhp-blog-card-modal .mhp-blog-card-link::after {
    content: '→';
}

/* Blog Modal Footer */
.mhp-blog-modal-footer {
    padding: 20px 24px;
    background: var(--mhp-bg-card);
    border-top: 1px solid var(--mhp-border);
    text-align: center;
    flex-shrink: 0;
}

.mhp-blog-modal-footer .mhp-btn {
    min-width: 200px;
}

/* Loading & Empty States */
.mhp-blog-modal-loading,
.mhp-blog-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    color: var(--mhp-text-light);
}

.mhp-blog-modal-loading::before {
    content: '';
    width: 40px;
    height: 40px;
    border: 3px solid var(--mhp-border);
    border-top-color: var(--mhp-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 16px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.mhp-blog-modal-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mhp-blog-modal-header {
        padding: 16px 20px;
    }

    .mhp-blog-modal-header h2 {
        font-size: 18px;
    }

    .mhp-blog-modal-header .mhp-modal-close {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    .mhp-blog-categories {
        padding: 12px 16px;
        gap: 8px;
    }

    .mhp-category-btn {
        padding: 8px 16px;
        font-size: 13px;
    }

    .mhp-blog-modal-content {
        padding: 16px;
    }

    .mhp-blog-modal-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mhp-blog-card-modal .mhp-blog-card-image {
        height: 160px;
    }

    .mhp-blog-card-modal .mhp-blog-card-body {
        padding: 16px;
    }

    .mhp-blog-card-modal .mhp-blog-card-title {
        font-size: 16px;
    }

    .mhp-blog-modal-footer {
        padding: 16px 20px;
    }

    .mhp-blog-modal-footer .mhp-btn {
        width: 100%;
        min-width: auto;
    }
}

/* Tablet: 2 Spalten */
@media (min-width: 769px) and (max-width: 1024px) {
    .mhp-blog-modal-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ========================================== */
/* BLOG ARTIKEL MODAL */
/* ========================================== */

.mhp-modal-article,
#mhp-blog-article-modal .mhp-modal-article {
    background: #FFFCF3 !important;
    display: flex !important;
    flex-direction: column !important;
}

.mhp-article-modal-header,
#mhp-blog-article-modal .mhp-article-modal-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 16px 24px !important;
    background: transparent !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    z-index: 10 !important;
}

/* Close Button für Artikel - mit !important für Elementor Override */
.mhp-article-close,
#mhp-blog-article-modal .mhp-article-close,
.mhp-modal-article .mhp-article-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
    z-index: 100 !important;
}

.mhp-article-close:hover,
#mhp-blog-article-modal .mhp-article-close:hover,
.mhp-modal-article .mhp-article-close:hover {
    background: var(--mhp-primary) !important;
    transform: scale(1.05) !important;
}

.mhp-article-close svg,
#mhp-blog-article-modal .mhp-article-close svg,
.mhp-modal-article .mhp-article-close svg {
    width: 24px !important;
    height: 24px !important;
    color: var(--mhp-text) !important;
    transition: color 0.2s ease !important;
}

.mhp-article-close:hover svg,
#mhp-blog-article-modal .mhp-article-close:hover svg,
.mhp-modal-article .mhp-article-close:hover svg {
    color: white !important;
}

.mhp-article-modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Artikel Hero - mit !important für Elementor Override */
.mhp-article-hero {
    display: flex !important;
    justify-content: center !important;
    padding: 32px 24px 24px !important;
}

.mhp-article-hero img,
#mhp-blog-article-modal .mhp-article-hero img,
.mhp-modal-article .mhp-article-hero img {
    width: 100% !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: 350px !important;
    object-fit: cover !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Artikel Body */
.mhp-article-body {
    max-width: 800px;
    margin: 0 auto;
    padding: 32px 24px 60px;
    overflow-x: hidden;
}

.mhp-article-header {
    margin-bottom: 32px;
}

.mhp-article-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.mhp-article-category {
    font-size: 12px;
    font-weight: 600;
    color: var(--mhp-primary);
    background: var(--mhp-primary-light);
    padding: 4px 12px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mhp-article-title {
    font-size: 38px;
    font-weight: 700;
    color: var(--mhp-text);
    line-height: 1.25;
    margin: 0 0 20px 0;
}

.mhp-article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--mhp-text-light);
    margin-bottom: 20px;
}

.mhp-article-author {
    font-weight: 500;
}

/* Audio Player im Artikel */
.mhp-article-audio {
    margin-top: 24px;
    margin-bottom: 8px;
}

.mhp-article-audio-player {
    width: 100%;
    max-width: 100%;
    height: 48px;
    border-radius: 24px;
    background: transparent;
}

/* Chrome/Safari Audio Player Styling */
.mhp-article-audio-player::-webkit-media-controls-panel {
    background: rgba(61, 78, 96, 0.05);
    border-radius: 24px;
}

.mhp-article-audio-player::-webkit-media-controls-play-button {
    background-color: var(--mhp-primary);
    border-radius: 50%;
}

/* Artikel Content */
.mhp-article-content-text {
    font-size: 17px;
    line-height: 1.8;
    color: var(--mhp-text);
}

.mhp-article-content-text p {
    margin: 0 0 1.5em 0;
}

.mhp-article-content-text h2,
.mhp-article-content-text h3,
.mhp-article-content-text h4 {
    margin: 2em 0 1em 0;
    color: var(--mhp-text);
    line-height: 1.3;
}

.mhp-article-content-text h2 {
    font-size: 26px;
}

.mhp-article-content-text h3 {
    font-size: 22px;
}

.mhp-article-content-text h4 {
    font-size: 18px;
}

.mhp-article-content-text ul,
.mhp-article-content-text ol {
    margin: 1em 0;
    padding-left: 1.5em;
}

.mhp-article-content-text li {
    margin: 0.5em 0;
}

.mhp-article-content-text blockquote {
    border-left: 4px solid var(--mhp-primary);
    padding: 16px 24px;
    margin: 1.5em 0;
    background: var(--mhp-bg);
    border-radius: 0 8px 8px 0;
    font-style: italic;
}

.mhp-article-content-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1.5em 0;
}

.mhp-article-content-text a {
    color: var(--mhp-primary);
    text-decoration: underline;
    word-break: break-word;
    overflow-wrap: break-word;
}

.mhp-article-content-text a:hover {
    text-decoration: none;
}

/* Loading & Error States */
.mhp-article-loading,
.mhp-article-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    text-align: center;
    color: var(--mhp-text-light);
    min-height: 300px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mhp-article-modal-header {
        padding: 12px 16px;
    }

    .mhp-article-close {
        width: 44px;
        height: 44px;
    }

    .mhp-article-hero {
        padding: 20px 16px 16px;
    }

    .mhp-article-hero img {
        max-height: 250px;
        border-radius: 12px;
    }

    .mhp-article-body {
        padding: 24px 16px 40px;
    }

    .mhp-article-title {
        font-size: 28px;
    }

    .mhp-article-content-text {
        font-size: 16px;
    }

    .mhp-article-content-text h2 {
        font-size: 22px;
    }

    .mhp-article-content-text h3 {
        font-size: 19px;
    }

    .mhp-article-audio-player {
        height: 44px;
        justify-content: center;
    }
}

/* ========================================== */
/* SWIPE HINT - KLICKBAR */
/* ========================================== */

.mhp-swipe-hint {
    font-size: 13px;
    color: var(--mhp-text-light);
    cursor: pointer;
    transition: color 0.2s ease;
}

.mhp-swipe-hint:hover {
    color: var(--mhp-primary);
}

/* Quota Box ohne Icon */
.mhp-quota-box {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--mhp-bg);
    padding: 12px 16px;
    border-radius: var(--mhp-radius);
    margin-bottom: 16px;
}

.mhp-quota-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mhp-quota-label {
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-quota-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--mhp-text);
}

/* Quota Status Indicators */
.mhp-quota-box[data-quota-status="quota-ok"] {
    border-left: 4px solid #10b981;
}

.mhp-quota-box[data-quota-status="quota-warning"] {
    border-left: 4px solid #f59e0b;
    background: #fffbeb;
}

.mhp-quota-box[data-quota-status="quota-warning"] .mhp-quota-value {
    color: #d97706;
}

.mhp-quota-box[data-quota-status="quota-depleted"] {
    border-left: 4px solid #ef4444;
    background: #fef2f2;
}

.mhp-quota-box[data-quota-status="quota-depleted"] .mhp-quota-value {
    color: #dc2626;
}

/* ========================================== */
/* LOGIN PAGE - Eigene Anmeldemaske */
/* ========================================== */
.mhp-login-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.mhp-login-card {
    max-width: 420px;
    width: 100%;
    padding: 32px;
}

.mhp-login-title {
    text-align: center;
    margin-bottom: 8px !important;
    font-size: 24px;
}

.mhp-login-subtitle {
    text-align: center;
    color: var(--mhp-text-light);
    margin-bottom: 24px;
    font-size: 14px;
}

/* Login Tabs - with !important to override WordPress/Elementor */
.mhp-login-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 24px !important;
    background: var(--mhp-bg) !important;
    padding: 4px !important;
    border-radius: 8px !important;
}

.mhp-login-tab {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    border: none !important;
    background: transparent !important;
    color: var(--mhp-text-light) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.mhp-login-tab:hover {
    color: var(--mhp-text) !important;
    background: rgba(255,255,255,0.5) !important;
    text-decoration: none !important;
}

.mhp-login-tab:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(61,78,96,0.15) !important;
}

.mhp-login-tab.active {
    background: white !important;
    color: var(--mhp-primary) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}

/* Inactive tab - clear distinct styling */
.mhp-login-tab:not(.active) {
    background: transparent !important;
    color: var(--mhp-text-light) !important;
    opacity: 0.85 !important;
}

.mhp-login-tab:not(.active):hover {
    opacity: 1 !important;
    background: rgba(255,255,255,0.5) !important;
}

.mhp-login-tab svg {
    flex-shrink: 0 !important;
}

/* Login Form */
.mhp-login-form .mhp-form-group {
    margin-bottom: 16px;
}

.mhp-login-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mhp-text);
}

.mhp-login-form .mhp-input {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    border: 1px solid var(--mhp-border);
    border-radius: 8px;
    background: white;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mhp-login-form .mhp-input:focus {
    outline: none;
    border-color: var(--mhp-primary);
    box-shadow: 0 0 0 3px rgba(61,78,96,0.1);
}

.mhp-btn-full {
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    margin-top: 8px;
}

/* ID vergessen Link */
.mhp-forgot-id {
    text-align: left;
    margin-top: 12px;
}

.mhp-forgot-id-link {
    color: var(--mhp-text-light, #6c757d);
    font-size: 13px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.mhp-forgot-id-link:hover {
    color: var(--mhp-primary);
}

.mhp-link-btn {
    background: none;
    border: none;
    color: var(--mhp-primary);
    font-size: 14px;
    cursor: pointer;
    padding: 8px 16px;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.mhp-link-btn:hover {
    color: var(--mhp-primary-dark, #2b3a46);
    opacity: 0.8;
}

/* ID Wiederherstellung Sektion */
.mhp-recover-section {
    margin-top: 20px;
    padding: 20px;
    background: var(--mhp-bg-light, #f8f9fa);
    border-radius: 12px;
    border: 1px solid var(--mhp-border);
}

.mhp-recover-section h4 {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--mhp-text);
}

.mhp-recover-section .mhp-form-hint {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin-bottom: 16px;
}

.mhp-login-contact {
    text-align: center;
    color: var(--mhp-text-light);
    font-size: 13px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--mhp-border);
}

/* QR Scanner */
.mhp-qr-section {
    text-align: center;
}

.mhp-qr-info {
    color: var(--mhp-text-light);
    font-size: 14px;
    margin-bottom: 20px;
}

.mhp-qr-container {
    position: relative;
    width: 100%;
    max-width: 300px;
    margin: 0 auto 20px auto;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
}

.mhp-qr-video {
    width: 100%;
    height: auto;
    display: block;
}

.mhp-qr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.mhp-qr-frame {
    width: 200px;
    height: 200px;
    border: 3px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
}

#mhp-start-qr-scanner {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

#mhp-start-qr-scanner svg {
    flex-shrink: 0;
}

.mhp-success {
    padding: 12px 16px;
    background: #d4edda;
    color: #155724;
    border-radius: 8px;
    margin-top: 16px;
    font-size: 14px;
}

/* Responsive */
@media (max-width: 480px) {
    .mhp-login-card {
        padding: 24px 20px;
    }

    .mhp-login-tab {
        font-size: 13px;
        padding: 10px 12px;
    }

    .mhp-login-tab svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   ELEMENTOR OVERRIDES - Slider & Blog Fixes
   ============================================ */

/* Slider Arrows - Elementor Override für kleinere Pfeile */
.mhp-slider-arrow,
#mhp-dashboard .mhp-slider-arrow,
.mhp-container .mhp-slider-arrow,
.mhp-assessments-slider-wrapper .mhp-slider-arrow {
    flex-shrink: 0 !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    border-radius: 50% !important;
    background: white !important;
    border: 1px solid var(--mhp-border) !important;
    color: var(--mhp-text-light) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important;
}

.mhp-slider-arrow:hover,
#mhp-dashboard .mhp-slider-arrow:hover,
.mhp-container .mhp-slider-arrow:hover {
    border-color: var(--mhp-primary) !important;
    color: var(--mhp-primary) !important;
    background: var(--mhp-bg) !important;
    transform: scale(1.05) !important;
}

.mhp-slider-arrow:disabled,
#mhp-dashboard .mhp-slider-arrow:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

.mhp-slider-arrow svg,
#mhp-dashboard .mhp-slider-arrow svg {
    width: 14px !important;
    height: 14px !important;
}

/* Blog Grid - Elementor Override für mehrere Posts */
.mhp-blog-grid,
#mhp-dashboard .mhp-blog-grid,
#mhp-blog-posts.mhp-blog-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    margin-top: 16px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: var(--mhp-accent) transparent !important;
    padding-bottom: 12px !important;
    width: 100% !important;
}

/* Blog Cards - Elementor Override für richtige Größe */
.mhp-blog-card,
#mhp-dashboard .mhp-blog-card,
.mhp-blog-grid .mhp-blog-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 0 0 260px !important;
    min-width: 260px !important;
    max-width: 260px !important;
    scroll-snap-align: start !important;
    background: var(--mhp-bg-card) !important;
    border-radius: var(--mhp-radius) !important;
    overflow: hidden !important;
    text-decoration: none !important;
    color: var(--mhp-text) !important;
    transition: all 0.3s ease !important;
    border: 1px solid var(--mhp-border) !important;
}

.mhp-blog-card:hover,
#mhp-dashboard .mhp-blog-card:hover {
    box-shadow: var(--mhp-shadow-hover) !important;
    transform: translateY(-4px) !important;
    border-color: var(--mhp-accent-light) !important;
}

/* Blog Loading State - darf nicht das ganze Grid blockieren */
.mhp-blog-loading,
#mhp-dashboard .mhp-blog-loading {
    flex: 0 0 100% !important;
    min-width: 100% !important;
}

@media (max-width: 768px) {
    .mhp-blog-card,
    #mhp-dashboard .mhp-blog-card,
    .mhp-blog-grid .mhp-blog-card {
        flex: 0 0 240px !important;
        min-width: 240px !important;
        max-width: 240px !important;
    }

    .mhp-slider-arrow,
    #mhp-dashboard .mhp-slider-arrow {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
        min-height: 28px !important;
        max-width: 28px !important;
        max-height: 28px !important;
        font-size: 12px !important;
    }

    .mhp-slider-arrow svg,
    #mhp-dashboard .mhp-slider-arrow svg {
        width: 12px !important;
        height: 12px !important;
    }
}

/* ============================================
   KI-MOTIVATIONS-TICKER - Laufschrift
   ============================================ */

.mhp-motivation-ticker {
    overflow: hidden;
    width: 100%;
    margin: 8px 0 4px 0;
    position: relative;
}

.mhp-ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: tickerScroll 25s linear infinite;
    padding-left: 100%;
}

.mhp-ticker-track:hover {
    animation-play-state: paused;
}

@keyframes tickerScroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

.mhp-ticker-text {
    font-size: 15px;
    color: var(--mhp-text-light);
    line-height: 1.4;
    display: inline-block;
    padding-right: 50px;
}

/* Sanfter Fade-Übergang beim Textwechsel */
.mhp-ticker-text.mhp-ticker-fade {
    animation: tickerFade 0.5s ease;
}

@keyframes tickerFade {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@media (max-width: 480px) {
    .mhp-ticker-text {
        font-size: 14px;
    }

    .mhp-ticker-track {
        animation-duration: 20s;
    }
}

/* ============================================
   AKTIVE UMFRAGEN - Karten-Design
   ============================================ */

.mhp-card-surveys {
    background: var(--mhp-bg-card);
    border-radius: var(--mhp-radius);
    box-shadow: var(--mhp-shadow);
    padding: 20px;
    margin-bottom: 20px;
}

.mhp-card-surveys .mhp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mhp-card-surveys .mhp-section-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--mhp-text);
}

.mhp-badge-count {
    background: var(--mhp-primary);
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 12px;
    font-weight: 600;
}

.mhp-surveys-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-survey-link-card {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--mhp-bg);
    border-radius: 10px;
    text-decoration: none;
    color: var(--mhp-text);
    transition: all 0.2s ease;
    border: 1px solid var(--mhp-border);
}

.mhp-survey-link-card:hover {
    background: var(--mhp-bg-highlight);
    border-color: var(--mhp-accent-light);
    transform: translateX(4px);
    box-shadow: var(--mhp-shadow);
}

.mhp-survey-link-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    flex-shrink: 0;
}

.mhp-survey-link-info {
    flex: 1;
    min-width: 0;
}

.mhp-survey-link-title {
    display: block;
    font-weight: 600;
    font-size: 15px;
    color: var(--mhp-text);
    margin-bottom: 2px;
}

.mhp-survey-link-title .mhp-badge-new {
    margin-left: 8px;
    vertical-align: middle;
}

.mhp-survey-link-type {
    display: block;
    font-size: 13px;
    color: var(--mhp-text-light);
}

.mhp-survey-link-arrow {
    font-size: 18px;
    color: var(--mhp-accent);
    transition: transform 0.2s ease;
}

.mhp-survey-link-card:hover .mhp-survey-link-arrow {
    transform: translateX(4px);
}

@media (max-width: 480px) {
    .mhp-survey-link-card {
        padding: 12px;
        gap: 10px;
    }

    .mhp-survey-link-icon {
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .mhp-survey-link-title {
        font-size: 14px;
    }
}

/* ========================================== */
/* EINSCHLAFHILFE / SLEEP AID */
/* ========================================== */

.mhp-card-sleep-aid {
    background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0c1929 100%);
    border: none;
    border-radius: 20px;
    padding: 0;
    overflow: hidden;
    position: relative;
    margin-bottom: 20px;
}

.mhp-sleep-aid-container {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

/* 3D Moon Effect */
.mhp-moon-3d {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
    flex-shrink: 0;
}

.mhp-moon-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, rgba(255,223,128,0.4) 0%, rgba(255,223,128,0) 70%);
    border-radius: 50%;
    animation: moonPulse 3s ease-in-out infinite;
}

.mhp-moon-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 70px;
    filter: drop-shadow(0 0 20px rgba(255,223,128,0.6));
    animation: moonFloat 4s ease-in-out infinite;
    z-index: 2;
}

@keyframes moonPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

@keyframes moonFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

/* Twinkling Stars */
.mhp-moon-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.mhp-star {
    position: absolute;
    left: var(--x);
    top: var(--y);
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    animation: starTwinkle 2s ease-in-out infinite;
    animation-delay: var(--delay);
}

@keyframes starTwinkle {
    0%, 100% { opacity: 0.3; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Sleep Aid Content */
.mhp-sleep-aid-content {
    flex: 1;
}

.mhp-sleep-aid-content h3 {
    color: #f8fafc;
    font-size: 22px;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.mhp-sleep-aid-content p {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    margin: 0 0 16px 0;
}

.mhp-btn-sleep {
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(99,102,241,0.4);
}

.mhp-btn-sleep:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(99,102,241,0.5);
}

/* ========================================== */
/* SLEEP OVERLAY - Vollbild Dunkelmodus */
/* ========================================== */

.mhp-sleep-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #0a0a1a 0%, #0f1629 50%, #000510 100%);
    z-index: 99999;
    overflow-y: auto;
    animation: fadeInOverlay 0.5s ease-out;
}

@keyframes fadeInOverlay {
    from { opacity: 0; }
    to { opacity: 1; }
}

.mhp-sleep-header {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
    z-index: 10;
}

.mhp-sleep-moon-icon {
    font-size: 48px;
    animation: sleepMoonGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 30px rgba(255,223,128,0.8));
}

@keyframes sleepMoonGlow {
    0%, 100% {
        filter: drop-shadow(0 0 30px rgba(255,223,128,0.8));
        transform: rotate(-10deg);
    }
    50% {
        filter: drop-shadow(0 0 50px rgba(255,223,128,1));
        transform: rotate(10deg);
    }
}

.mhp-sleep-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2);
    color: white;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mhp-sleep-close:hover {
    background: rgba(255,255,255,0.2);
    transform: scale(1.1);
}

/* Sleep Main Content */
.mhp-sleep-main {
    max-width: 600px;
    margin: 0 auto;
    padding: 0 20px 40px;
}

/* Timer Display */
.mhp-sleep-timer-display {
    text-align: center;
    margin-bottom: 40px;
    display: none; /* Nur anzeigen wenn Timer aktiv */
}

.mhp-sleep-timer-display.active {
    display: block;
}

#mhp-sleep-time-remaining {
    font-size: 64px;
    font-weight: 200;
    color: #e2e8f0;
    font-family: 'SF Pro Display', -apple-system, sans-serif;
    letter-spacing: 4px;
}

.mhp-sleep-timer-display p {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    margin: 8px 0 0;
}

/* Sound Selection */
.mhp-sleep-sounds {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.mhp-sleep-sounds h4,
.mhp-sleep-audio-stories h4,
.mhp-sleep-timer-settings h4 {
    color: #e2e8f0;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 16px 0;
}

.mhp-sound-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.mhp-sound-btn {
    background: rgba(255,255,255,0.08);
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.mhp-sound-btn:hover {
    background: rgba(255,255,255,0.12);
    transform: translateY(-2px);
}

.mhp-sound-btn.active {
    background: rgba(99,102,241,0.3);
    border-color: #6366f1;
    box-shadow: 0 0 20px rgba(99,102,241,0.4);
}

.mhp-sound-btn.playing {
    animation: soundPlaying 1.5s ease-in-out infinite;
}

@keyframes soundPlaying {
    0%, 100% { box-shadow: 0 0 20px rgba(99,102,241,0.4); }
    50% { box-shadow: 0 0 30px rgba(99,102,241,0.7); }
}

.mhp-sound-icon {
    font-size: 32px;
}

.mhp-sound-label {
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 500;
}

/* Volume Control */
.mhp-volume-control {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.mhp-volume-icon {
    font-size: 18px;
    opacity: 0.7;
}

.mhp-volume-slider {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    outline: none;
}

.mhp-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    background: #6366f1;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(99,102,241,0.5);
}

.mhp-volume-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: #6366f1;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* Audio Stories */
.mhp-sleep-audio-stories {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 24px;
    margin-bottom: 24px;
    backdrop-filter: blur(10px);
}

.mhp-audio-stories-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-audio-story-item {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.06);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.mhp-audio-story-item:hover {
    background: rgba(255,255,255,0.1);
}

.mhp-audio-story-item.playing {
    background: rgba(99,102,241,0.2);
    border: 1px solid rgba(99,102,241,0.4);
}

.mhp-audio-story-play {
    width: 44px;
    height: 44px;
    background: rgba(99,102,241,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.mhp-audio-story-info {
    flex: 1;
    min-width: 0;
}

.mhp-audio-story-title {
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mhp-audio-story-duration {
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

.mhp-loading-audio {
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    text-align: center;
    padding: 20px;
}

/* Timer Settings */
.mhp-sleep-timer-settings {
    background: rgba(255,255,255,0.05);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(10px);
}

.mhp-timer-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mhp-timer-btn {
    background: rgba(255,255,255,0.08);
    border: 2px solid transparent;
    border-radius: 12px;
    padding: 12px 20px;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 80px;
}

.mhp-timer-btn:hover {
    background: rgba(255,255,255,0.12);
}

.mhp-timer-btn.active {
    background: rgba(99,102,241,0.3);
    border-color: #6366f1;
    color: white;
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .mhp-sleep-aid-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .mhp-moon-3d {
        width: 80px;
        height: 80px;
    }

    .mhp-moon-surface {
        font-size: 56px;
    }

    .mhp-sound-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    #mhp-sleep-time-remaining {
        font-size: 48px;
    }

    .mhp-timer-buttons {
        flex-wrap: wrap;
    }

    .mhp-timer-btn {
        flex: 1 1 calc(50% - 5px);
    }
}

/* ================================================
   SCHLAFMODUS - ELEMENTOR OVERRIDES (wichtig!)
   ================================================ */

/* Schließen-Button - rund, nicht rot */
.mhp-sleep-close,
#mhp-sleep-overlay .mhp-sleep-close,
.mhp-sleep-overlay .mhp-sleep-close,
#mhp-close-sleep-mode {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: white !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 50% !important;
    font-size: 20px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
}

.mhp-sleep-close:hover,
#mhp-sleep-overlay .mhp-sleep-close:hover,
#mhp-close-sleep-mode:hover {
    background: rgba(255,255,255,0.25) !important;
    background-color: rgba(255,255,255,0.25) !important;
    transform: scale(1.1) !important;
}

/* Sound-Buttons - rund, sanfte Farben */
.mhp-sound-btn,
#mhp-sleep-overlay .mhp-sound-btn,
.mhp-sleep-overlay .mhp-sound-btn {
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 50% !important;
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    min-height: 80px !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: white !important;
    box-shadow: none !important;
}

.mhp-sound-btn:hover,
#mhp-sleep-overlay .mhp-sound-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    transform: translateY(-3px) scale(1.05) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

.mhp-sound-btn.active,
#mhp-sleep-overlay .mhp-sound-btn.active {
    background: rgba(147,197,253,0.25) !important;
    background-color: rgba(147,197,253,0.25) !important;
    border-color: rgba(147,197,253,0.6) !important;
    box-shadow: 0 0 20px rgba(147,197,253,0.3) !important;
}

.mhp-sound-btn.playing,
#mhp-sleep-overlay .mhp-sound-btn.playing {
    animation: soundPlayingSoft 2s ease-in-out infinite !important;
}

@keyframes soundPlayingSoft {
    0%, 100% { box-shadow: 0 0 15px rgba(147,197,253,0.3); }
    50% { box-shadow: 0 0 25px rgba(147,197,253,0.5); }
}

.mhp-sound-icon,
#mhp-sleep-overlay .mhp-sound-icon {
    font-size: 28px !important;
    line-height: 1 !important;
}

.mhp-sound-label,
#mhp-sleep-overlay .mhp-sound-label {
    color: rgba(255,255,255,0.7) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Sound-Grid für runde Buttons anpassen */
.mhp-sound-grid,
#mhp-sleep-overlay .mhp-sound-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 16px !important;
    margin: 20px 0 !important;
}

/* Timer-Buttons - pillenförmig, sanfte Farben */
.mhp-timer-btn,
#mhp-sleep-overlay .mhp-timer-btn,
.mhp-sleep-overlay .mhp-timer-btn {
    background: rgba(255,255,255,0.08) !important;
    background-color: rgba(255,255,255,0.08) !important;
    border: 2px solid rgba(255,255,255,0.15) !important;
    border-radius: 25px !important;
    padding: 10px 18px !important;
    color: rgba(255,255,255,0.8) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    min-width: 70px !important;
    box-shadow: none !important;
}

.mhp-timer-btn:hover,
#mhp-sleep-overlay .mhp-timer-btn:hover {
    background: rgba(255,255,255,0.15) !important;
    background-color: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.25) !important;
}

.mhp-timer-btn.active,
#mhp-sleep-overlay .mhp-timer-btn.active {
    background: rgba(147,197,253,0.25) !important;
    background-color: rgba(147,197,253,0.25) !important;
    border-color: rgba(147,197,253,0.6) !important;
    color: white !important;
}

/* Timer-Buttons Container */
.mhp-timer-buttons,
#mhp-sleep-overlay .mhp-timer-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
}

/* Sleep Button im Haupt-Card */
.mhp-btn-sleep,
#mhp-sleep-aid .mhp-btn-sleep,
#mhp-start-sleep-mode {
    background: linear-gradient(135deg, #1e3a5f 0%, #0f172a 100%) !important;
    background-color: #1e3a5f !important;
    color: white !important;
    border: none !important;
    border-radius: 25px !important;
    padding: 12px 24px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(30,58,95,0.3) !important;
}

.mhp-btn-sleep:hover,
#mhp-sleep-aid .mhp-btn-sleep:hover,
#mhp-start-sleep-mode:hover {
    background: linear-gradient(135deg, #2d4a6f 0%, #1e293b 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(30,58,95,0.4) !important;
}

/* Mobile Anpassungen für runde Buttons */
@media (max-width: 600px) {
    .mhp-sound-btn,
    #mhp-sleep-overlay .mhp-sound-btn {
        width: 70px !important;
        height: 70px !important;
        min-width: 70px !important;
        min-height: 70px !important;
    }

    .mhp-sound-icon,
    #mhp-sleep-overlay .mhp-sound-icon {
        font-size: 24px !important;
    }

    .mhp-sound-label,
    #mhp-sleep-overlay .mhp-sound-label {
        font-size: 9px !important;
    }

    .mhp-timer-btn,
    #mhp-sleep-overlay .mhp-timer-btn {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-width: 60px !important;
    }
}

/* Timer-Sektion direkt oben sichtbar */
.mhp-sleep-timer-section,
#mhp-sleep-overlay .mhp-sleep-timer-section {
    text-align: center !important;
    margin-bottom: 30px !important;
    padding: 20px !important;
    background: rgba(255,255,255,0.05) !important;
    border-radius: 16px !important;
}

.mhp-sleep-timer-section .mhp-sleep-timer-display,
#mhp-sleep-overlay .mhp-sleep-timer-section .mhp-sleep-timer-display {
    margin-bottom: 16px !important;
}

.mhp-sleep-timer-section #mhp-sleep-time-remaining,
#mhp-sleep-overlay #mhp-sleep-time-remaining {
    font-size: 48px !important;
    font-weight: 300 !important;
    color: rgba(255,255,255,0.9) !important;
    font-family: 'SF Pro Display', -apple-system, sans-serif !important;
    letter-spacing: 2px !important;
}

/* SVG Icons in Sound-Buttons */
.mhp-sound-icon svg,
#mhp-sleep-overlay .mhp-sound-icon svg {
    width: 24px !important;
    height: 24px !important;
    stroke: currentColor !important;
    color: rgba(255,255,255,0.8) !important;
}

.mhp-sound-btn.active .mhp-sound-icon svg,
.mhp-sound-btn.playing .mhp-sound-icon svg {
    color: white !important;
}

/* Volume Icons */
.mhp-volume-icon svg,
#mhp-sleep-overlay .mhp-volume-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: rgba(255,255,255,0.6) !important;
}

/* Moon Icon im Header */
.mhp-sleep-moon-icon svg,
#mhp-sleep-overlay .mhp-sleep-moon-icon svg {
    fill: rgba(255,255,200,0.9) !important;
    filter: drop-shadow(0 0 10px rgba(255,255,200,0.4)) !important;
}

/* Audio-Expand-Button */
.mhp-audio-expand-btn,
#mhp-sleep-overlay .mhp-audio-expand-btn,
#mhp-audio-expand-btn {
    display: block !important;
    width: 100% !important;
    margin-top: 12px !important;
    padding: 10px !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px dashed rgba(255,255,255,0.2) !important;
    border-radius: 8px !important;
    color: rgba(255,255,255,0.6) !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-audio-expand-btn:hover,
#mhp-audio-expand-btn:hover {
    background: rgba(255,255,255,0.05) !important;
    color: rgba(255,255,255,0.8) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* Audio Story Items - SVG Play/Pause Icons */
.mhp-audio-story-play svg,
#mhp-sleep-overlay .mhp-audio-story-play svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

/* Volume Slider - bessere Sichtbarkeit */
.mhp-volume-slider,
#mhp-sleep-volume,
#mhp-sleep-overlay .mhp-volume-slider {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 6px !important;
    background: rgba(255,255,255,0.2) !important;
    border-radius: 3px !important;
    outline: none !important;
    cursor: pointer !important;
}

.mhp-volume-slider::-webkit-slider-thumb,
#mhp-sleep-volume::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    background: white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

.mhp-volume-slider::-moz-range-thumb,
#mhp-sleep-volume::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    background: white !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    border: none !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}

/* Keine Audio-Inhalte Meldung */
.mhp-no-audio,
#mhp-sleep-overlay .mhp-no-audio {
    color: rgba(255,255,255,0.5) !important;
    font-size: 14px !important;
    text-align: center !important;
    padding: 20px !important;
}

/* ========================================
   "Ich kann nicht schlafen" Beruhigungs-Tool
   ======================================== */

/* Trigger Button */
.mhp-cant-sleep-trigger,
#mhp-sleep-overlay .mhp-cant-sleep-trigger {
    margin-top: 24px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(255,255,255,0.1) !important;
    text-align: center !important;
}

.mhp-cant-sleep-btn,
#mhp-sleep-overlay .mhp-cant-sleep-btn,
#mhp-cant-sleep-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: rgba(147,197,253,0.15) !important;
    border: 1px solid rgba(147,197,253,0.3) !important;
    border-radius: 30px !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-cant-sleep-btn:hover,
#mhp-cant-sleep-btn:hover {
    background: rgba(147,197,253,0.25) !important;
    border-color: rgba(147,197,253,0.5) !important;
    transform: translateY(-2px) !important;
}

.mhp-cant-sleep-btn svg,
#mhp-cant-sleep-btn svg {
    opacity: 0.8 !important;
}

/* Calm Tool Container */
.mhp-calm-tool,
#mhp-sleep-overlay .mhp-calm-tool,
#mhp-calm-tool {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1d30 100%) !important;
    z-index: 100 !important;
    overflow-y: auto !important;
}

.mhp-calm-container,
#mhp-sleep-overlay .mhp-calm-container {
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Back Button */
.mhp-calm-back,
#mhp-sleep-overlay .mhp-calm-back,
#mhp-calm-back {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-calm-back:hover,
#mhp-calm-back:hover {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
}

/* Progress Bar */
.mhp-calm-progress,
#mhp-sleep-overlay .mhp-calm-progress {
    width: 100% !important;
    height: 4px !important;
    background: rgba(255,255,255,0.1) !important;
    border-radius: 2px !important;
    margin-top: 60px !important;
    margin-bottom: 40px !important;
    overflow: hidden !important;
}

.mhp-calm-progress-bar,
#mhp-calm-progress-bar {
    height: 100% !important;
    background: linear-gradient(90deg, rgba(147,197,253,0.8), rgba(196,181,253,0.8)) !important;
    border-radius: 2px !important;
    transition: width 0.5s ease !important;
    width: 10% !important;
}

/* Dialogue Area */
.mhp-calm-dialogue,
#mhp-sleep-overlay .mhp-calm-dialogue,
#mhp-calm-dialogue {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    padding: 20px 0 !important;
}

.mhp-calm-message,
#mhp-sleep-overlay .mhp-calm-message {
    color: rgba(255,255,255,0.95) !important;
    font-size: 20px !important;
    line-height: 1.6 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    animation: calmFadeIn 0.6s ease !important;
}

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

/* Options */
.mhp-calm-options,
#mhp-sleep-overlay .mhp-calm-options,
#mhp-calm-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    padding: 20px 0 !important;
}

.mhp-calm-option,
#mhp-sleep-overlay .mhp-calm-option {
    display: block !important;
    width: 100% !important;
    padding: 16px 20px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 16px !important;
    text-align: left !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    animation: calmFadeIn 0.6s ease !important;
}

.mhp-calm-option:nth-child(2) { animation-delay: 0.1s !important; }
.mhp-calm-option:nth-child(3) { animation-delay: 0.2s !important; }
.mhp-calm-option:nth-child(4) { animation-delay: 0.3s !important; }

.mhp-calm-option:hover {
    background: rgba(147,197,253,0.2) !important;
    border-color: rgba(147,197,253,0.4) !important;
    transform: translateX(5px) !important;
}

/* Breathing Exercise - initial versteckt, nur per JS sichtbar */
.mhp-calm-breathing,
#mhp-sleep-overlay .mhp-calm-breathing,
#mhp-calm-breathing {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

/* Wenn via jQuery .fadeIn() eingeblendet */
.mhp-calm-breathing.mhp-visible,
#mhp-calm-breathing.mhp-visible {
    display: flex !important;
}

.mhp-calm-breath-circle,
#mhp-calm-breath-circle {
    width: 180px !important;
    height: 180px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, rgba(147,197,253,0.3), rgba(196,181,253,0.3)) !important;
    border: 3px solid rgba(147,197,253,0.5) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 30px !important;
    transition: transform 4s ease-in-out, background 0.3s ease !important;
}

.mhp-calm-breath-circle.inhale {
    transform: scale(1.3) !important;
    background: linear-gradient(135deg, rgba(147,197,253,0.5), rgba(196,181,253,0.5)) !important;
}

.mhp-calm-breath-circle.hold {
    transform: scale(1.3) !important;
    background: linear-gradient(135deg, rgba(167,243,208,0.4), rgba(147,197,253,0.4)) !important;
}

.mhp-calm-breath-circle.exhale {
    transform: scale(1) !important;
    background: linear-gradient(135deg, rgba(147,197,253,0.2), rgba(196,181,253,0.2)) !important;
}

.mhp-calm-breath-text,
#mhp-calm-breath-text {
    color: white !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
}

.mhp-calm-breath-count,
#mhp-calm-breath-count {
    color: rgba(255,255,255,0.8) !important;
    font-size: 36px !important;
    font-weight: 300 !important;
}

.mhp-calm-breath-instruction,
#mhp-calm-breath-instruction {
    color: rgba(255,255,255,0.7) !important;
    font-size: 16px !important;
    max-width: 300px !important;
    line-height: 1.5 !important;
}

/* Responsive */
@media (max-width: 480px) {
    .mhp-calm-message {
        font-size: 18px !important;
    }

    .mhp-calm-option {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }

    .mhp-calm-breath-circle {
        width: 150px !important;
        height: 150px !important;
    }
}

/* ========================================
   "Gedanken loslassen" Tool
   ======================================== */

/* Trigger Button */
.mhp-release-thoughts-trigger,
#mhp-sleep-overlay .mhp-release-thoughts-trigger {
    margin-top: 12px !important;
    text-align: center !important;
}

.mhp-release-thoughts-btn,
#mhp-sleep-overlay .mhp-release-thoughts-btn,
#mhp-release-thoughts-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 14px 24px !important;
    background: rgba(196,181,253,0.15) !important;
    border: 1px solid rgba(196,181,253,0.3) !important;
    border-radius: 30px !important;
    color: rgba(255,255,255,0.9) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-release-thoughts-btn:hover,
#mhp-release-thoughts-btn:hover {
    background: rgba(196,181,253,0.25) !important;
    border-color: rgba(196,181,253,0.5) !important;
    transform: translateY(-2px) !important;
}

/* Tool Container */
.mhp-release-tool,
#mhp-sleep-overlay .mhp-release-tool,
#mhp-release-tool {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(135deg, #1e3a5f 0%, #0f1d30 100%) !important;
    z-index: 100 !important;
    overflow-y: auto !important;
}

.mhp-release-container {
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 30px 20px !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Back Button */
.mhp-release-back,
#mhp-release-back {
    position: absolute !important;
    top: 20px !important;
    left: 20px !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-release-back:hover {
    background: rgba(255,255,255,0.15) !important;
}

/* Schritte */
.mhp-release-step {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 60px 0 20px !important;
    text-align: center !important;
}

.mhp-release-intro {
    margin-bottom: 30px !important;
}

.mhp-release-intro h3 {
    color: white !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.mhp-release-intro p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    max-width: 350px !important;
}

/* Papier / Textarea */
.mhp-release-paper {
    width: 100% !important;
    max-width: 400px !important;
    perspective: 1000px !important;
    margin-bottom: 24px !important;
    transition: transform 0.6s ease !important;
}

.mhp-release-paper.folding {
    transform: rotateX(90deg) scale(0.5) !important;
    opacity: 0 !important;
}

.mhp-release-textarea {
    width: 100% !important;
    min-height: 180px !important;
    padding: 20px !important;
    background: rgba(255,255,255,0.95) !important;
    border: none !important;
    border-radius: 12px !important;
    color: #1e3a5f !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    resize: none !important;
    font-family: 'Georgia', serif !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
}

.mhp-release-textarea::placeholder {
    color: rgba(30,58,95,0.5) !important;
    font-style: italic !important;
}

.mhp-release-textarea:focus {
    outline: none !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 0 0 3px rgba(196,181,253,0.5) !important;
}

/* Action Buttons */
.mhp-release-action-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 32px !important;
    background: linear-gradient(135deg, rgba(147,197,253,0.3), rgba(196,181,253,0.3)) !important;
    border: 2px solid rgba(196,181,253,0.5) !important;
    border-radius: 30px !important;
    color: white !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.mhp-release-action-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(147,197,253,0.5), rgba(196,181,253,0.5)) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(196,181,253,0.3) !important;
}

.mhp-release-action-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

.mhp-release-explode-btn {
    background: linear-gradient(135deg, rgba(252,165,165,0.3), rgba(251,191,36,0.3)) !important;
    border-color: rgba(251,191,36,0.5) !important;
}

.mhp-release-explode-btn:hover {
    background: linear-gradient(135deg, rgba(252,165,165,0.5), rgba(251,191,36,0.5)) !important;
    box-shadow: 0 8px 25px rgba(251,191,36,0.3) !important;
}

/* Box Container */
.mhp-release-box-container {
    width: 200px !important;
    height: 200px !important;
    margin: 40px auto !important;
    position: relative !important;
}

.mhp-release-box {
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(135deg, rgba(147,197,253,0.2), rgba(196,181,253,0.2)) !important;
    border: 3px solid rgba(196,181,253,0.6) !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    transform-origin: center center !important;
}

.mhp-release-box.appearing {
    animation: boxAppear 0.6s ease forwards !important;
}

@keyframes boxAppear {
    0% {
        opacity: 0;
        transform: scale(0.3) rotateY(180deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotateY(0deg);
    }
}

.mhp-release-box.shaking {
    animation: boxShake 0.5s ease !important;
}

@keyframes boxShake {
    0%, 100% { transform: translateX(0) rotate(0); }
    20% { transform: translateX(-10px) rotate(-3deg); }
    40% { transform: translateX(10px) rotate(3deg); }
    60% { transform: translateX(-8px) rotate(-2deg); }
    80% { transform: translateX(8px) rotate(2deg); }
}

.mhp-release-box.exploding {
    animation: boxExplode 0.8s ease forwards !important;
}

@keyframes boxExplode {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    30% {
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

.mhp-release-box-lock {
    color: rgba(255,255,255,0.8) !important;
    margin-bottom: 10px !important;
}

.mhp-release-box-text {
    color: rgba(255,255,255,0.7) !important;
    font-size: 14px !important;
}

/* Partikel */
.mhp-release-particles {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

.mhp-release-particle {
    position: absolute !important;
    border-radius: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: particleExplode 1.2s ease-out forwards !important;
}

@keyframes particleExplode {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0) rotate(var(--rotation));
    }
}

/* Erfolgs-Anzeige */
.mhp-release-success {
    text-align: center !important;
    animation: successFadeIn 0.6s ease forwards !important;
}

@keyframes successFadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.mhp-release-success-icon {
    color: #a7f3d0 !important;
    margin-bottom: 20px !important;
}

.mhp-release-success h3 {
    color: white !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
}

.mhp-release-success p {
    color: rgba(255,255,255,0.7) !important;
    font-size: 16px !important;
    margin-bottom: 30px !important;
    max-width: 300px !important;
}

.mhp-release-again-btn {
    margin-bottom: 16px !important;
}

.mhp-release-close-btn {
    display: block !important;
    margin: 15px auto 0 auto !important;
    background: transparent !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    padding: 12px 24px !important;
    border-radius: 20px !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.mhp-release-close-btn:hover {
    background: rgba(255,255,255,0.1) !important;
    color: white !important;
}

/* Responsive */
@media (max-width: 480px) {
    .mhp-release-intro h3 {
        font-size: 20px !important;
    }

    .mhp-release-textarea {
        min-height: 150px !important;
        font-size: 15px !important;
    }

    .mhp-release-box-container {
        width: 160px !important;
        height: 160px !important;
    }
}

/* ========================================== */
/* ONBOARDING OVERLAY */
/* ========================================== */
/*
 * IMPORTANT: These styles only apply to the participant dashboard onboarding.
 * They must be scoped to #mhp-dashboard to prevent conflicts with HR dashboard.
 */

/* Base reset - ensure backdrop doesn't leak outside its container */
.mhp-onboarding-overlay,
.mhp-onboarding-backdrop {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Only enable onboarding overlay within mhp-dashboard AND when visible */
#mhp-dashboard #mhp-onboarding.mhp-onboarding-overlay:not([style*="display: none"]):not([style*="display:none"]),
#mhp-dashboard #mhp-leadership-onboarding.mhp-onboarding-overlay:not([style*="display: none"]):not([style*="display:none"]) {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    z-index: 999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

/* Backdrop only within active onboarding overlay */
#mhp-dashboard #mhp-onboarding:not([style*="display: none"]):not([style*="display:none"]) .mhp-onboarding-backdrop,
#mhp-dashboard #mhp-leadership-onboarding:not([style*="display: none"]):not([style*="display:none"]) .mhp-onboarding-backdrop {
    display: block !important;
    visibility: visible !important;
    pointer-events: auto !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 1 !important;
    background: rgba(61, 78, 96, 0.9);
    backdrop-filter: blur(8px);
}

/* Container only within active onboarding */
#mhp-dashboard #mhp-onboarding:not([style*="display: none"]):not([style*="display:none"]) .mhp-onboarding-container,
#mhp-dashboard #mhp-leadership-onboarding:not([style*="display: none"]):not([style*="display:none"]) .mhp-onboarding-container {
    display: block !important;
    visibility: visible !important;
    position: relative;
    background: var(--mhp-bg-card);
    border-radius: 20px;
    padding: 40px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: mhp-onboarding-appear 0.4s ease-out;
}

/* Hide container when overlay is hidden */
.mhp-onboarding-container {
    display: none !important;
    visibility: hidden !important;
}

@keyframes mhp-onboarding-appear {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Onboarding inner elements - scoped to #mhp-dashboard */
#mhp-dashboard .mhp-onboarding-step {
    text-align: center;
    animation: mhp-step-fade 0.3s ease-out;
}

@keyframes mhp-step-fade {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

#mhp-dashboard .mhp-onboarding-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--mhp-primary), var(--mhp-accent));
    border-radius: 50%;
    color: white;
}

#mhp-dashboard .mhp-onboarding-icon svg {
    stroke: white;
}

#mhp-dashboard .mhp-onboarding-step h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--mhp-text);
    margin-bottom: 16px;
}

#mhp-dashboard .mhp-onboarding-step > p {
    font-size: 16px;
    color: var(--mhp-text-light);
    line-height: 1.6;
    margin-bottom: 24px;
}

#mhp-dashboard .mhp-onboarding-features {
    display: flex;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 24px;
}

#mhp-dashboard .mhp-onboarding-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--mhp-text);
}

#mhp-dashboard .mhp-feature-icon {
    font-size: 28px;
}

#mhp-dashboard .mhp-onboarding-list {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

#mhp-dashboard .mhp-onboarding-list li {
    padding: 12px 0;
    border-bottom: 1px solid var(--mhp-border);
    font-size: 15px;
    color: var(--mhp-text);
    line-height: 1.5;
}

#mhp-dashboard .mhp-onboarding-list li:last-child {
    border-bottom: none;
}

#mhp-dashboard .mhp-onboarding-list li strong {
    color: var(--mhp-primary);
}

#mhp-dashboard .mhp-onboarding-nav {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

#mhp-dashboard .mhp-onboarding-dots {
    display: flex;
    gap: 10px;
}

#mhp-dashboard .mhp-onboarding-overlay .mhp-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mhp-border);
    cursor: pointer;
    transition: all 0.3s ease;
}

#mhp-dashboard .mhp-onboarding-overlay .mhp-dot.active {
    background: var(--mhp-primary);
    transform: scale(1.2);
}

#mhp-dashboard .mhp-onboarding-overlay .mhp-dot:hover {
    background: var(--mhp-accent);
}

#mhp-dashboard .mhp-onboarding-buttons {
    display: flex;
    gap: 12px;
    width: 100%;
    justify-content: center;
}

#mhp-dashboard .mhp-onboarding-buttons .mhp-btn {
    min-width: 120px;
}

/* Mobile Onboarding - scoped to #mhp-dashboard */
@media (max-width: 480px) {
    #mhp-dashboard .mhp-onboarding-container {
        padding: 24px;
        border-radius: 16px;
    }

    #mhp-dashboard .mhp-onboarding-step h2 {
        font-size: 20px;
    }

    #mhp-dashboard .mhp-onboarding-features {
        gap: 16px;
    }

    #mhp-dashboard .mhp-onboarding-list li {
        font-size: 14px;
        padding: 10px 0;
    }
}

/* ========================================== */
/* 360-GRAD FEEDBACK */
/* ========================================== */
.mhp-card-360-feedback {
    border-left: 4px solid var(--mhp-primary);
}

.mhp-360-content {
    margin-top: 20px;
}

.mhp-360-info p {
    margin-bottom: 16px;
    color: var(--mhp-text);
}

.mhp-360-benefits {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.mhp-360-benefits li {
    padding: 8px 0 8px 28px;
    position: relative;
    color: var(--mhp-text);
}

.mhp-360-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    width: 18px;
    height: 18px;
    background: var(--mhp-success);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}

.mhp-360-pending,
.mhp-360-active,
.mhp-360-results {
    text-align: center;
    padding: 24px;
}

.mhp-360-pending-icon {
    color: var(--mhp-accent);
    margin-bottom: 16px;
}

.mhp-360-pending h4 {
    margin-bottom: 8px;
    color: var(--mhp-primary);
}

.mhp-360-date {
    font-size: 13px;
    color: var(--mhp-text-light);
    margin-top: 16px;
}

.mhp-360-progress {
    margin-bottom: 16px;
}

.mhp-360-progress-bar {
    height: 8px;
    background: var(--mhp-border);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

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

.mhp-360-progress-text {
    font-size: 14px;
    color: var(--mhp-text-light);
}

.mhp-360-results-summary {
    margin-bottom: 24px;
}

.mhp-360-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.mhp-360-score-value {
    font-size: 48px;
    font-weight: 700;
    color: var(--mhp-primary);
}

.mhp-360-score-label {
    font-size: 14px;
    color: var(--mhp-text-light);
}

.mhp-badge-info {
    background: var(--mhp-accent-light);
    color: var(--mhp-primary);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

/* ========================================== */
/* SPRACHUMSCHALTER */
/* ========================================== */
.mhp-lang-switcher {
    display: flex;
    gap: 2px;
    background: var(--mhp-border);
    border-radius: 6px;
    padding: 2px;
    margin-right: 12px;
}

.mhp-lang-btn {
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--mhp-text-light);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.mhp-lang-btn:hover {
    color: var(--mhp-primary);
}

.mhp-lang-btn.active {
    background: var(--mhp-bg-card);
    color: var(--mhp-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.mhp-header-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ========================================
   Password & Passkey Registration Styles
   ======================================== */

/* Password Input Group mit Generate Button */
.mhp-password-input-group {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.mhp-password-input-group .mhp-input {
    flex: 1;
    min-width: 0;
}

.mhp-password-input-group .mhp-btn-small {
    white-space: nowrap;
    padding: 10px 12px;
    font-size: 12px;
}

.mhp-btn-icon {
    padding: 10px;
    background: var(--mhp-bg);
    border: 1px solid var(--mhp-border);
    border-radius: var(--mhp-radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-btn-icon:hover {
    background: var(--mhp-bg-card);
    border-color: var(--mhp-primary);
}

.mhp-eye-icon {
    font-size: 16px;
    line-height: 1;
}

/* Password Strength Indicator */
.mhp-password-strength {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.mhp-strength-bar {
    flex: 1;
    height: 4px;
    background: var(--mhp-border);
    border-radius: 2px;
    overflow: hidden;
}

.mhp-strength-fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s ease, background 0.3s ease;
    border-radius: 2px;
}

.mhp-strength-fill.weak { width: 25%; background: var(--mhp-danger); }
.mhp-strength-fill.fair { width: 50%; background: var(--mhp-warning); }
.mhp-strength-fill.good { width: 75%; background: var(--mhp-success-light); }
.mhp-strength-fill.strong { width: 100%; background: var(--mhp-success); }

.mhp-strength-text {
    font-size: 12px;
    color: var(--mhp-text-light);
    white-space: nowrap;
}

.mhp-strength-text.weak { color: var(--mhp-danger); }
.mhp-strength-text.fair { color: var(--mhp-warning); }
.mhp-strength-text.good { color: var(--mhp-success-light); }
.mhp-strength-text.strong { color: var(--mhp-success); }

/* Private Email Hint */
.mhp-private-email-hint {
    color: var(--mhp-primary);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mhp-private-email-hint::before {
    content: "💡";
}

/* Passkey Section */
.mhp-passkey-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed var(--mhp-border);
}

.mhp-passkey-info {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    padding: 16px;
    border-radius: var(--mhp-radius);
    margin-bottom: 12px;
    border: 1px solid #86efac;
}

.mhp-passkey-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.mhp-passkey-content strong {
    display: block;
    margin-bottom: 4px;
    color: #166534;
}

.mhp-passkey-content .mhp-form-hint {
    margin: 0;
    color: #15803d;
}

.mhp-btn-full {
    width: 100%;
}

/* Passkey Section after Registration */
.mhp-passkey-section-post {
    margin-top: 20px;
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
    border-radius: var(--mhp-radius);
    border: 1px solid #86efac;
}

.mhp-passkey-section-post .mhp-passkey-info {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 16px;
}

#mhp-continue-to-dashboard {
    margin-top: 20px;
}

/* Responsive Adjustments */
@media (max-width: 480px) {
    .mhp-password-input-group {
        flex-wrap: wrap;
    }

    .mhp-password-input-group .mhp-input {
        width: 100%;
        flex: 1 1 100%;
    }

    .mhp-password-input-group .mhp-btn-small,
    .mhp-password-input-group .mhp-btn-icon {
        flex: 1;
    }
}

/* ================================================
   FOKUS-MODUS / FOCUS MODE - MINDVISE DESIGN
   Farben: #3D4E60 (Primär), #FFFCF3 (Creme), #507176 (Mindvise Grün)
   Soft UI Design mit runden Buttons
   ================================================ */

/* Fokus-Modus Card - Neumorphism / Soft UI mit Mindvise Grün */
.mhp-card-work-mode {
    background: linear-gradient(135deg, #5a8389 0%, #507176 50%, #466268 100%);
    border: none;
    border-radius: 24px;
    padding: 0;
    overflow: visible;
    position: relative;
    margin-bottom: 20px;
    box-shadow:
        12px 12px 24px rgba(60, 85, 90, 0.4),
        -12px -12px 24px rgba(100, 140, 145, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Banner Close Button - Neumorphism Style für grünen Hintergrund */
.mhp-banner-close {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-banner-close svg {
    stroke: #507176 !important;
    transition: all 0.3s ease !important;
    width: 16px !important;
    height: 16px !important;
    fill: none !important;
}

.mhp-banner-close:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: none !important;
}

.mhp-banner-close:hover svg {
    stroke: #3D4E60 !important;
}

.mhp-banner-close:active {
    box-shadow:
        inset 2px 2px 4px rgba(80, 113, 118, 0.15),
        inset -2px -2px 4px rgba(255, 255, 255, 0.5) !important;
}

.mhp-work-mode-container {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
}

/* 3D Icon - Neumorphism Style */
.mhp-work-icon-3d {
    position: relative;
    width: 100px;
    height: 100px;
    cursor: pointer;
    flex-shrink: 0;
}

.mhp-work-glow {
    position: absolute;
    inset: -15px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 70%);
    border-radius: 50%;
    animation: workGlow 3s ease-in-out infinite;
}

.mhp-work-surface {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border-radius: 50%;
    box-shadow:
        6px 6px 12px rgba(40, 60, 65, 0.4),
        -6px -6px 12px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: workFloat 4s ease-in-out infinite;
    transition: all 0.3s ease;
}

.mhp-work-icon-3d:hover .mhp-work-surface {
    box-shadow:
        8px 8px 16px rgba(40, 60, 65, 0.5),
        -8px -8px 16px rgba(100, 145, 150, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mhp-work-pulse {
    position: absolute;
    inset: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    animation: workPulse 2s ease-out infinite;
}

@keyframes workGlow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.1); }
}

@keyframes workFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-8px) rotate(5deg); }
}

@keyframes workPulse {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.mhp-work-mode-content h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
}

.mhp-work-mode-content p {
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
}

/* Work Mode Button - Neumorphism Style mit Mindvise Farben (Override Elementor) */
.mhp-work-mode-container .mhp-btn.mhp-btn-work,
.mhp-card-work-mode .mhp-btn-work,
button.mhp-btn-work {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    background-color: #FFFCF3 !important;
    background-image: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #507176 !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        6px 6px 12px rgba(80, 113, 118, 0.12),
        -6px -6px 12px rgba(255, 255, 255, 0.9) !important;
    text-decoration: none !important;
    display: inline-block !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.mhp-work-mode-container .mhp-btn.mhp-btn-work:hover,
.mhp-card-work-mode .mhp-btn-work:hover,
button.mhp-btn-work:hover {
    color: #3D4E60 !important;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    background-color: #FFFCF3 !important;
    background-image: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    box-shadow:
        8px 8px 16px rgba(80, 113, 118, 0.18),
        -8px -8px 16px rgba(255, 255, 255, 1) !important;
    transform: none !important;
    border: none !important;
}

.mhp-work-mode-container .mhp-btn.mhp-btn-work:active,
.mhp-card-work-mode .mhp-btn-work:active,
button.mhp-btn-work:active {
    box-shadow:
        inset 4px 4px 8px rgba(80, 113, 118, 0.12),
        inset -4px -4px 8px rgba(255, 255, 255, 0.5) !important;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    background-color: #FFFCF3 !important;
    background-image: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
}

/* Fokus-Modus Fullscreen Overlay - Mindvise Grün mit Soft UI */
.mhp-work-mode-overlay,
.mhp-work-overlay,
#mhp-work-mode-overlay,
#mhp-work-overlay {
    position: fixed;
    inset: 0;
    background: linear-gradient(180deg, #5a8389 0%, #507176 50%, #466268 100%);
    z-index: 99999;
    overflow-y: auto;
    animation: fadeInOverlay 0.5s ease;
}

.mhp-work-mode-fullscreen {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Work Header */
.mhp-work-header {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px; /* Abstand zwischen Uhr-Symbol und Text */
    padding: 16px 20px;
    z-index: 10;
    background: linear-gradient(to bottom, rgba(70, 98, 104, 0.95), transparent);
}

.mhp-work-logo {
    color: #FFFCF3;
    animation: workLogoPulse 3s ease-in-out infinite;
}

@keyframes workLogoPulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.1); }
}

.mhp-work-close {
    position: absolute;
    right: 20px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-work-close svg {
    stroke: #507176 !important;
}

.mhp-work-close:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05) !important;
}

.mhp-work-close:hover svg {
    stroke: #3D4E60 !important;
}

.mhp-work-close:active {
    box-shadow:
        inset 3px 3px 6px rgba(80, 113, 118, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5) !important;
}

/* Work Main Content - Kompakt ohne Scrollen */
.mhp-work-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 20px 20px;
    gap: 14px;
    max-width: 500px;
    margin: 0 auto;
    width: 100%;
}

/* Session Info */
.mhp-work-session-info {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Timer Display (groß wie Schlafmodus) */
.mhp-work-timer,
.mhp-work-timer-display {
    text-align: center;
    margin-bottom: 0;
}

.mhp-work-time {
    font-size: 64px;
    font-weight: 400;
    color: #FFFCF3;
    font-family: 'Roboto Slab', Georgia, serif;
    line-height: 1;
    margin-bottom: 4px;
    text-shadow: 2px 2px 4px rgba(40, 60, 65, 0.3);
}

.mhp-work-minutes,
.mhp-work-seconds {
    font-size: 80px;
    font-weight: 300;
    color: #f8fafc;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    line-height: 1;
}

.mhp-work-colon {
    font-size: 72px;
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    animation: colonBlink 1s ease-in-out infinite;
}

/* Progress Ring - Versteckt für kompakteres Layout */
.mhp-work-progress-ring {
    display: none;
}

.mhp-work-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.mhp-work-ring-bg {
    stroke: rgba(255, 255, 255, 0.2);
}

.mhp-work-ring-progress {
    stroke: #FFFCF3;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.5s ease;
}

@keyframes colonBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Zeit-Auswahl - Soft UI Neumorphism - Kompakt */
.mhp-work-time-select,
.mhp-work-time-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.mhp-work-time-btn {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 8px 16px !important;
    color: #507176 !important;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-work-time-btn:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px);
    color: #3D4E60 !important;
}

.mhp-work-time-btn.active {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #3D4E60 !important;
    box-shadow:
        inset 3px 3px 6px rgba(80, 113, 118, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(255, 255, 255, 0.3) !important;
}

/* Controls - Soft UI Neumorphism */
.mhp-work-controls {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.mhp-work-control-btn {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    color: #507176;
    transition: all 0.3s ease;
    box-shadow:
        6px 6px 12px rgba(40, 60, 65, 0.4),
        -6px -6px 12px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

/* Reset-Button SVG lesbar machen */
.mhp-work-control-btn svg,
#mhp-work-reset svg {
    stroke: #507176 !important;
    fill: none !important;
}

.mhp-work-control-btn:hover {
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) scale(1.02);
}

.mhp-work-control-btn:active {
    box-shadow:
        inset 4px 4px 8px rgba(80, 113, 118, 0.15),
        inset -4px -4px 8px rgba(255, 255, 255, 0.5) !important;
    transform: scale(0.98);
}

#mhp-work-play,
#mhp-work-pause {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    width: 70px !important;
    height: 70px !important;
    box-shadow:
        8px 8px 16px rgba(40, 60, 65, 0.4),
        -8px -8px 16px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.2) !important;
}

#mhp-work-play:hover,
#mhp-work-pause:hover {
    box-shadow:
        6px 6px 12px rgba(40, 60, 65, 0.4),
        -6px -6px 12px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8),
        0 0 25px rgba(255, 255, 255, 0.3) !important;
}

#mhp-work-play:active,
#mhp-work-pause:active {
    box-shadow:
        inset 5px 5px 10px rgba(80, 113, 118, 0.15),
        inset -5px -5px 10px rgba(255, 255, 255, 0.5) !important;
}

#mhp-work-play svg,
#mhp-work-pause svg {
    stroke: #507176 !important;
    fill: #507176 !important;
}

.mhp-work-control-small {
    width: 50px !important;
    height: 50px !important;
}

/* Settings - Soft UI - Kompakt */
.mhp-work-settings {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mhp-work-setting {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.1) 0%, rgba(255, 249, 232, 0.1) 100%);
    border-radius: 14px;
    border: none;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.1);
}

.mhp-work-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.mhp-work-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.mhp-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.3) 0%, rgba(255, 249, 232, 0.3) 100%);
    border-radius: 28px;
    transition: 0.3s;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.1);
}

.mhp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.3),
        -2px -2px 4px rgba(100, 145, 150, 0.2);
}

.mhp-work-toggle input:checked + .mhp-toggle-slider {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
}

.mhp-work-toggle input:checked + .mhp-toggle-slider:before {
    transform: translateX(22px);
    background: #507176;
}

.mhp-work-setting-label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

/* Settings Headers - Kompakt */
.mhp-work-settings h4 {
    margin: 0 0 6px 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Work Icon Animated (Header) - Soft UI */
.mhp-work-icon-animated {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border-radius: 50%;
    color: #507176;
    animation: workIconPulse 2s ease-in-out infinite;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

@keyframes workIconPulse {
    0%, 100% { box-shadow: 4px 4px 8px rgba(40, 60, 65, 0.4), -4px -4px 8px rgba(100, 145, 150, 0.3), 0 0 10px rgba(255,255,255,0.2); }
    50% { box-shadow: 4px 4px 8px rgba(40, 60, 65, 0.4), -4px -4px 8px rgba(100, 145, 150, 0.3), 0 0 20px rgba(255,255,255,0.4); }
}

/* Work Status Text */
.mhp-work-status {
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Reminder Toggles (alternative Klassennamen) - Kompakt */
.mhp-work-reminders {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}

.mhp-work-reminder-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.1) 0%, rgba(255, 249, 232, 0.1) 100%);
    border-radius: 12px;
    border: none;
    flex: 1;
    min-width: 200px;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.1);
}

.mhp-work-reminder-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.mhp-work-reminder-title {
    color: rgba(255,255,255,0.9);
    font-size: 12px;
    font-weight: 500;
}

.mhp-work-reminder-desc {
    color: rgba(255,255,255,0.5);
    font-size: 10px;
}

/* Toggle Switch (alternative Klasse) */
.mhp-toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

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

.mhp-toggle-switch .mhp-toggle-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.3) 0%, rgba(255, 249, 232, 0.3) 100%);
    border-radius: 28px;
    transition: 0.3s;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.1);
}

.mhp-toggle-switch .mhp-toggle-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    bottom: 3px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border-radius: 50%;
    transition: 0.3s;
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.3),
        -2px -2px 4px rgba(100, 145, 150, 0.2);
}

.mhp-toggle-switch input:checked + .mhp-toggle-slider {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
}

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

/* Sound Buttons - Soft UI Neumorphism - Kompakt */
.mhp-work-sounds {
    width: 100%;
    text-align: center;
}

.mhp-work-sounds h4 {
    margin: 0 0 8px 0;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mhp-work-sound-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.mhp-work-sound-btn {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 60px !important;
    height: 60px !important;
    padding: 0 !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        6px 6px 12px rgba(40, 60, 65, 0.4),
        -6px -6px 12px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    color: #507176;
}

.mhp-work-sound-btn:hover {
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-2px) scale(1.02);
}

.mhp-work-sound-btn.active {
    box-shadow:
        inset 4px 4px 8px rgba(80, 113, 118, 0.15),
        inset -4px -4px 8px rgba(255, 255, 255, 0.5),
        0 0 15px rgba(255, 255, 255, 0.3) !important;
}

.mhp-work-sound-btn.playing {
    animation: soundPlayingWork 2s ease-in-out infinite;
}

@keyframes soundPlayingWork {
    0%, 100% { box-shadow: inset 4px 4px 8px rgba(80, 113, 118, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255,255,255,0.2); }
    50% { box-shadow: inset 4px 4px 8px rgba(80, 113, 118, 0.15), inset -4px -4px 8px rgba(255, 255, 255, 0.5), 0 0 25px rgba(255,255,255,0.4); }
}

.mhp-work-sound-btn span {
    font-size: 20px;
    line-height: 1;
}

.mhp-work-sound-btn small {
    font-size: 8px;
    color: #507176;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats - Soft UI - Kompakt */
.mhp-work-stats {
    display: flex;
    gap: 24px;
    padding: 12px 24px;
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.1) 0%, rgba(255, 249, 232, 0.1) 100%);
    border-radius: 12px;
    border: none;
    box-shadow:
        inset 3px 3px 6px rgba(40, 60, 65, 0.2),
        inset -3px -3px 6px rgba(100, 145, 150, 0.1);
}

.mhp-work-stat {
    text-align: center;
}

.mhp-work-stat-value {
    display: block;
    font-size: 24px;
    font-weight: 600;
    color: #FFFCF3;
}

.mhp-work-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Mikropause & Aufstehen Overlays */
.mhp-micro-pause-overlay,
.mhp-standup-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,37,46,0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.mhp-micro-pause-content,
.mhp-standup-content {
    text-align: center;
    padding: 40px;
    max-width: 400px;
}

.mhp-pause-icon,
.mhp-micro-pause-icon,
.mhp-standup-icon {
    font-size: 72px;
    display: block;
    margin-bottom: 24px;
    animation: bounceIn 0.5s ease;
}

.mhp-micro-pause-timer {
    font-size: 64px;
    font-weight: 300;
    color: var(--mhp-success);
    margin-bottom: 24px;
    font-family: 'SF Mono', 'Monaco', monospace;
}

@keyframes bounceIn {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.mhp-micro-pause-content h3,
.mhp-standup-content h3 {
    font-size: 28px;
    color: #f8fafc;
    margin: 0 0 12px 0;
    font-weight: 600;
}

.mhp-micro-pause-content p,
.mhp-standup-content p {
    color: rgba(255,255,255,0.7);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.mhp-pause-countdown {
    font-size: 64px;
    font-weight: 300;
    color: var(--mhp-success);
    margin-bottom: 24px;
    font-family: 'SF Mono', 'Monaco', monospace;
}

.mhp-standup-exercises {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.mhp-standup-exercises span {
    font-size: 18px;
    color: rgba(255,255,255,0.8);
    padding: 10px 20px;
    background: rgba(255,255,255,0.05);
    border-radius: 10px;
}

/* ==========================================
   ARBEITSTAG ABSCHLIESSEN - Reflexion
   ========================================== */

/* End Day Button */
.mhp-work-end-day {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.mhp-btn-end-day {
    background: linear-gradient(135deg, var(--mhp-danger) 0%, var(--mhp-danger-light) 100%) !important;
    color: white !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3) !important;
}

.mhp-btn-end-day:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
}

/* Reflection Modal - Mindvise Grün mit Soft UI */
.mhp-workday-reflection-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(80, 113, 118, 0.98) 0%, rgba(60, 90, 95, 0.98) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
    padding: 20px;
    overflow-y: auto;
}

.mhp-reflection-content {
    background: linear-gradient(135deg, #5a8389 0%, #507176 50%, #466268 100%);
    border-radius: 24px;
    padding: 32px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border: none;
    box-shadow:
        12px 12px 24px rgba(40, 60, 65, 0.5),
        -12px -12px 24px rgba(100, 140, 145, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.mhp-reflection-header {
    text-align: center;
    margin-bottom: 28px;
}

.mhp-reflection-header h3 {
    color: #f8fafc;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 8px 0;
}

.mhp-reflection-header p {
    color: rgba(255,255,255,0.6);
    font-size: 14px;
    margin: 0;
}

.mhp-reflection-section {
    margin-bottom: 24px;
}

.mhp-reflection-section h4 {
    color: #f8fafc;
    font-size: 16px;
    font-weight: 500;
    margin: 0 0 16px 0;
}

.mhp-reflection-hint {
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    margin: 0 0 12px 0;
    font-style: italic;
}

/* Reflection Smileys - Soft UI Neumorphism */
.mhp-reflection-smileys {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.mhp-reflection-smileys .mhp-smiley-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mhp-reflection-smileys .mhp-smiley-btn:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    transform: scale(1.05);
}

.mhp-reflection-smileys .mhp-smiley-btn.selected {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    transform: scale(1.15);
    box-shadow:
        inset 3px 3px 6px rgba(80, 113, 118, 0.2),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5),
        0 0 20px rgba(255, 255, 255, 0.3);
}

.mhp-reflection-smileys .mhp-smiley-img {
    width: 36px;
    height: 36px;
}

.mhp-reflection-smileys .mhp-smiley {
    font-size: 28px;
}

.mhp-reflection-mood-labels {
    display: flex;
    justify-content: space-between;
    color: rgba(255,255,255,0.7);
    font-size: 12px;
    padding: 0 8px;
}

/* Reflection Textareas - Soft UI Neumorphism */
.mhp-reflection-textarea {
    width: 100%;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    border-radius: 16px;
    padding: 14px 16px;
    color: #3D4E60;
    font-size: 16px; /* Min 16px to prevent iOS auto-zoom */
    font-family: inherit;
    resize: vertical;
    transition: all 0.3s ease;
    box-shadow:
        inset 3px 3px 6px rgba(80, 113, 118, 0.1),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

.mhp-reflection-textarea::placeholder {
    color: rgba(80, 113, 118, 0.5);
}

.mhp-reflection-textarea:focus {
    outline: none;
    box-shadow:
        inset 4px 4px 8px rgba(80, 113, 118, 0.15),
        inset -4px -4px 8px rgba(255, 255, 255, 0.6),
        0 0 0 3px rgba(255, 255, 255, 0.2);
}

/* Optional Tag - Soft UI */
.mhp-optional-tag {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255,255,255,0.7);
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.2) 0%, rgba(255, 249, 232, 0.2) 100%);
    padding: 2px 8px;
    border-radius: 6px;
    margin-left: 8px;
    box-shadow:
        inset 1px 1px 2px rgba(40, 60, 65, 0.15),
        inset -1px -1px 2px rgba(100, 145, 150, 0.1);
}

.mhp-reflection-optional {
    opacity: 0.8;
}

/* Privacy Notes */
.mhp-reflection-privacy-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-top: 12px;
}

.mhp-privacy-anonymous {
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.15) 0%, rgba(255, 249, 232, 0.15) 100%);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.15);
}

.mhp-privacy-anonymous svg {
    color: rgba(255, 255, 255, 0.8);
}

.mhp-privacy-private {
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.15) 0%, rgba(255, 249, 232, 0.15) 100%);
    color: rgba(255, 255, 255, 0.9);
    border: none;
    margin-bottom: 20px;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.15);
}

.mhp-privacy-private svg {
    color: rgba(255, 255, 255, 0.8);
}

.mhp-reflection-private-section {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

/* Reflection Actions - Soft UI Neumorphism */
.mhp-reflection-actions {
    display: flex;
    gap: 12px;
    margin-top: 28px;
}

.mhp-reflection-actions .mhp-btn-outline {
    flex: 1;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    color: #507176 !important;
    padding: 14px 20px !important;
    border-radius: 16px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-reflection-actions .mhp-btn-outline:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #3D4E60 !important;
}

.mhp-reflection-actions .mhp-btn-outline:active {
    box-shadow:
        inset 3px 3px 6px rgba(80, 113, 118, 0.15),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5) !important;
}

.mhp-reflection-actions .mhp-btn-primary {
    flex: 2;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #507176 !important;
    padding: 14px 24px !important;
    border-radius: 16px !important;
    border: none !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow:
        6px 6px 12px rgba(40, 60, 65, 0.4),
        -6px -6px 12px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-reflection-actions .mhp-btn-primary:hover {
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    color: #3D4E60 !important;
    transform: none !important;
}

.mhp-reflection-actions .mhp-btn-primary:active {
    box-shadow:
        inset 4px 4px 8px rgba(80, 113, 118, 0.15),
        inset -4px -4px 8px rgba(255, 255, 255, 0.5) !important;
}

/* Success Animation */
.mhp-reflection-success {
    text-align: center;
    padding: 40px 20px;
}

.mhp-reflection-success-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--mhp-success) 0%, var(--mhp-primary) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: white;
    margin: 0 auto 20px;
    animation: mhp-success-pop 0.5s ease;
}

@keyframes mhp-success-pop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.mhp-reflection-success h4 {
    color: var(--mhp-success);
    font-size: 22px;
    margin: 0 0 8px 0;
}

.mhp-reflection-success p {
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    margin: 0;
}

/* Mobile Responsive for Reflection */
@media (max-width: 600px) {
    .mhp-reflection-content {
        padding: 24px 20px;
    }

    .mhp-reflection-smileys .mhp-smiley-btn {
        width: 50px;
        height: 50px;
    }

    .mhp-reflection-smileys .mhp-smiley-img {
        width: 32px;
        height: 32px;
    }

    .mhp-reflection-smileys .mhp-smiley {
        font-size: 36px;
    }

    .mhp-reflection-actions {
        flex-direction: column;
    }

    .mhp-reflection-actions .mhp-btn-outline,
    .mhp-reflection-actions .mhp-btn-primary {
        flex: auto;
    }
}

/* Mobile Responsive */
@media (max-width: 600px) {
    .mhp-work-mode-container {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .mhp-work-icon-3d {
        width: 80px;
        height: 80px;
    }

    .mhp-work-surface {
        font-size: 40px;
    }

    .mhp-work-minutes,
    .mhp-work-seconds {
        font-size: 60px;
    }

    .mhp-work-colon {
        font-size: 52px;
    }

    .mhp-work-time-select {
        gap: 8px;
    }

    .mhp-work-time-btn {
        padding: 10px 18px !important;
        font-size: 13px;
    }

    .mhp-work-sound-btn {
        width: 70px !important;
        height: 70px !important;
    }

    .mhp-work-stats {
        flex-direction: column;
        gap: 16px;
    }
}

/* ==========================================
   ANSTEHENDE BERATUNGSTERMINE - Erinnerungskarte
   ========================================== */

.mhp-card-appointment-reminder {
    background: linear-gradient(135deg, #E8F5E9 0%, #C8E6C9 100%);
    border: 2px solid #81C784;
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 20px;
    animation: mhp-appointment-pulse 2s ease-in-out infinite;
}

@keyframes mhp-appointment-pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(129, 199, 132, 0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(129, 199, 132, 0.5);
    }
}

.mhp-appointment-reminder-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 16px;
}

.mhp-appointment-icon {
    font-size: 40px;
    line-height: 1;
    flex-shrink: 0;
}

.mhp-appointment-info {
    flex: 1;
}

.mhp-appointment-info h4 {
    margin: 0 0 8px 0;
    color: #2E7D32;
    font-size: 18px;
    font-weight: 600;
}

.mhp-appointment-datetime {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
}

.mhp-appointment-date,
.mhp-appointment-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.7);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 500;
    color: #1B5E20;
}

.mhp-appointment-date svg,
.mhp-appointment-time svg {
    width: 16px;
    height: 16px;
    stroke: #2E7D32;
}

.mhp-appointment-therapist {
    font-size: 14px;
    color: #388E3C;
    margin-top: 6px;
}

.mhp-appointment-tips {
    background: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 16px;
}

.mhp-tips-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #2E7D32;
}

.mhp-tips-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #33691E;
    line-height: 1.6;
}

.mhp-tips-list li {
    margin-bottom: 6px;
}

.mhp-tips-list li:last-child {
    margin-bottom: 0;
}

.mhp-tips-list strong {
    color: #1B5E20;
}

/* Responsive für mobile */
@media (max-width: 480px) {
    .mhp-card-appointment-reminder {
        padding: 16px;
    }

    .mhp-appointment-reminder-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .mhp-appointment-datetime {
        justify-content: center;
    }

    .mhp-appointment-tips {
        padding: 12px;
    }

    .mhp-tips-list {
        padding-left: 16px;
        font-size: 12px;
    }
}

/* ========================================== */
/* MOBILE FIXES - Container & Mood Rating */
/* ========================================== */

@media (max-width: 768px) {
    /* Container: Größerer Abstand zum Logo */
    .mhp-container {
        padding-top: 70px !important;
    }

    /* Daily Actions: Alle Container gleich breit, gleicher Abstand */
    .mhp-daily-actions-row .mhp-card:not(.mhp-card-feedback) {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Personal Mood & andere große Cards: Auch korrekten Abstand */
    .mhp-card-personal-mood,
    .mhp-card-breathing,
    .mhp-card-work-mode {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }


    /* Mood Smileys: Kleiner machen für Mobile damit alle nebeneinander passen */
    .mhp-mood-smileys {
        display: flex !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 12px !important;
    }

    .mhp-mood-smileys .mhp-smiley-btn {
        width: 60px !important;
        height: 60px !important;
        flex-shrink: 0 !important;
    }

    .mhp-mood-smileys .mhp-smiley-img {
        width: 40px !important;
        height: 40px !important;
    }

    /* Mood Labels: Kleinere Schrift für Mobile */
    .mhp-mood-labels {
        font-size: 10px !important;
        margin-bottom: 12px !important;
    }

    /* Nach dem Voting: Labels ausblenden */
    .mhp-mood-success ~ .mhp-mood-labels,
    .mhp-mood-already ~ .mhp-mood-labels {
        display: none !important;
    }

    /* Nach dem Voting: Weniger Abstand */
    .mhp-mood-success,
    .mhp-mood-already {
        margin-top: 8px !important;
        margin-bottom: 0 !important;
    }

    /* Kalenderblätter kleiner machen für Mobile damit Container rechts Platz haben */

    /* History Container selbst auch padding reduzieren */
    .mhp-breathing-history,
    .mhp-personal-mood-history {
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #mhp-dashboard .mhp-history-days,
    .mhp-container .mhp-history-days,
    .mhp-history-days {
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #mhp-dashboard .mhp-history-day,
    .mhp-container .mhp-history-day,
    .mhp-history-day {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        padding: 4px 0 !important;
        font-size: 9px !important;
    }

    .mhp-day-duration {
        font-size: 7px !important;
    }

    /* Anonymes Feedback auf Mobile */
    #mhp-anonymous-feedback-section .mhp-collapsible-header p {
        line-height: 1.2 !important;
        font-size: 12px !important;
        margin-top: 4px !important;
    }

    /* Klapp-Container wenn zugeklappt deutlich kleiner auf Mobile */
    #mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-collapsible-header {
        padding: 6px 12px !important;
        margin: -20px -20px 6px -20px !important;
    }

    #mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-collapsible-header h3 {
        font-size: 14px !important;
    }

    #mhp-anonymous-feedback-section.mhp-collapsible.collapsed .mhp-collapsible-header p {
        font-size: 11px !important;
        line-height: 1.1 !important;
    }

    /* Mood Week Kalender auch kleiner */
    #mhp-dashboard .mhp-mood-week,
    .mhp-container .mhp-mood-week,
    .mhp-mood-week {
        gap: 2px !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    #mhp-dashboard .mhp-personal-mood-history .mhp-mood-day,
    .mhp-container .mhp-personal-mood-history .mhp-mood-day,
    .mhp-mood-week .mhp-mood-day {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        padding: 5px 0 !important;
        font-size: 9px !important;
    }

    .mhp-mood-day-emoji {
        font-size: 14px !important;
    }

    /* Mobile line break */
    .mhp-mobile-break {
        display: inline;
    }
}

@media (max-width: 480px) {
    /* Noch kleinere Smileys auf sehr kleinen Handys */
    .mhp-mood-smileys .mhp-smiley-btn {
        width: 55px !important;
        height: 55px !important;
    }

    .mhp-mood-smileys .mhp-smiley-img {
        width: 36px !important;
        height: 36px !important;
    }

    .mhp-mood-labels {
        font-size: 9px !important;
    }
}

/* ========================================== */
/* INTERESSENGEBIETE (Kompakt mit Modal) */
/* ========================================== */
.mhp-card-interests-compact {
    margin-bottom: 20px;
}

.mhp-interests-summary {
    font-size: 13px;
    color: var(--mhp-text-light);
}

/* Interest Tags (im Modal und Onboarding) */
.mhp-interests-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
}

.mhp-interest-tag {
    padding: 8px 16px !important;
    background: var(--mhp-bg-soft) !important;
    border: 2px solid transparent !important;
    border-radius: 20px !important;
    color: var(--mhp-text) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
}

.mhp-interest-tag:hover {
    background: var(--mhp-accent-lighter) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1) !important;
}

.mhp-interest-tag.active {
    background: var(--mhp-primary) !important;
    color: white !important;
    border-color: var(--mhp-primary) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
}

.mhp-onboarding-interests {
    justify-content: center;
    max-width: 600px;
    margin: 20px auto;
}

.mhp-interests-hint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--mhp-text-light);
    padding: 12px;
    background: var(--mhp-bg-highlight);
    border-radius: 8px;
}

.mhp-interests-hint svg {
    flex-shrink: 0;
    stroke: var(--mhp-text-light);
}

/* Modal für Interessengebiete */
.mhp-modal-interests {
    max-width: 600px;
}

@media (max-width: 768px) {
    .mhp-interest-tag {
        font-size: 13px;
        padding: 6px 12px;
    }

    .mhp-interests-tags {
        gap: 8px;
    }
}

/* ========================================== */
/* MEINE ZIELE - MODAL & KOMPONENTEN */
/* ========================================== */

/* Goals Card - Beige Soft UI Neumorphism */
.mhp-card-goals-compact {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    border-radius: 16px;
    padding: 16px 20px;
    box-shadow:
        8px 8px 16px rgba(200, 190, 170, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.mhp-card-goals-compact h3 {
    color: #3D4E60;
}

.mhp-card-goals-compact .mhp-goals-summary {
    color: #507176 !important;
}

.mhp-card-goals-compact .mhp-btn-secondary {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #507176 !important;
    border: none !important;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-card-goals-compact .mhp-btn-secondary:hover {
    box-shadow:
        2px 2px 4px rgba(200, 190, 170, 0.3),
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: translateY(-1px);
}

/* Goals Modal - Dunkles Overlay für Kontrast */
#mhp-goals-modal.mhp-modal {
    background: rgba(61, 78, 96, 0.85) !important;
}

#mhp-goals-modal .mhp-modal-content {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border-radius: 24px !important;
    padding: 32px !important;
    max-width: 550px !important;
    width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    border: none !important;
    position: relative !important;
    box-shadow:
        12px 12px 24px rgba(200, 190, 170, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.mhp-modal-goals .mhp-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border: none !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-modal-goals .mhp-modal-close:hover {
    box-shadow:
        2px 2px 4px rgba(200, 190, 170, 0.3),
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05);
}

.mhp-modal-goals .mhp-modal-close:active {
    box-shadow:
        inset 3px 3px 6px rgba(200, 190, 170, 0.25),
        inset -3px -3px 6px rgba(255, 255, 255, 0.5) !important;
}

.mhp-modal-goals .mhp-modal-close svg {
    stroke: #507176 !important;
    width: 20px;
    height: 20px;
}

/* Goals Steps */
.mhp-goals-step {
    text-align: center;
    display: none;
}

.mhp-goals-step.active {
    display: block;
}

.mhp-goals-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, #507176 0%, #3D4E60 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFCF3;
    font-size: 32px;
    font-weight: 600;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mhp-goals-step h2,
.mhp-goals-step h3 {
    color: #3D4E60;
    margin: 0 0 12px 0;
}

.mhp-goals-step h2 {
    font-size: 24px;
    font-weight: 600;
}

.mhp-goals-step h3 {
    font-size: 20px;
    font-weight: 500;
}

.mhp-goals-intro,
.mhp-goals-question-hint {
    color: #507176;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.mhp-goals-question-hint {
    font-size: 14px;
    color: #7A9095;
}

/* Progress Bar */
.mhp-goals-progress {
    width: 100%;
    height: 4px;
    background: rgba(80, 113, 118, 0.2);
    border-radius: 2px;
    margin-bottom: 24px;
    overflow: hidden;
}

.mhp-goals-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #507176 0%, #3D4E60 100%);
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Goal Options */
.mhp-goals-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0;
}

.mhp-goal-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.mhp-goal-option:hover {
    box-shadow:
        2px 2px 4px rgba(200, 190, 170, 0.3),
        -2px -2px 4px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-1px);
}

.mhp-goal-option.selected {
    background: linear-gradient(135deg, #507176 0%, #3D4E60 100%);
    box-shadow:
        inset 3px 3px 6px rgba(30, 40, 50, 0.3),
        inset -3px -3px 6px rgba(100, 145, 150, 0.2);
}

.mhp-goal-option.selected .mhp-goal-text,
.mhp-goal-option.selected .mhp-goal-label {
    color: #FFFCF3;
}

.mhp-goal-option.selected .mhp-goal-desc {
    color: rgba(255, 252, 243, 0.8);
}

.mhp-goal-option.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.mhp-goal-emoji {
    font-size: 24px;
    flex-shrink: 0;
}

.mhp-goal-text {
    color: #3D4E60;
    font-size: 14px;
    font-weight: 500;
}

.mhp-goal-label {
    color: #3D4E60;
    font-size: 15px;
    font-weight: 600;
    display: block;
}

.mhp-goal-desc {
    color: #507176;
    font-size: 12px;
    display: block;
    margin-top: 2px;
}

/* Final Goals Selection */
.mhp-goals-final .mhp-goal-option {
    flex-wrap: wrap;
}

.mhp-goals-final .mhp-goal-emoji {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(80, 113, 118, 0.1);
    border-radius: 10px;
}

.mhp-goals-final .mhp-goal-option > div {
    flex: 1;
}

/* Goals Counter */
.mhp-goals-counter {
    text-align: center;
    color: #507176;
    font-size: 14px;
    margin: 16px 0;
}

.mhp-goals-counter span {
    font-weight: 600;
    color: #3D4E60;
}

/* Goals Navigation */
.mhp-goals-nav {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}

.mhp-goals-nav .mhp-btn {
    min-width: 120px;
}

.mhp-goals-nav .mhp-btn-secondary {
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.2) 0%, rgba(255, 249, 232, 0.2) 100%) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    border: none !important;
    box-shadow:
        inset 2px 2px 4px rgba(40, 60, 65, 0.2),
        inset -2px -2px 4px rgba(100, 145, 150, 0.1) !important;
}

.mhp-goals-nav .mhp-btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 252, 243, 0.3) 0%, rgba(255, 249, 232, 0.3) 100%) !important;
}

.mhp-goals-nav .mhp-btn-primary {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #507176 !important;
    border: none !important;
    box-shadow:
        4px 4px 8px rgba(40, 60, 65, 0.4),
        -4px -4px 8px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-goals-nav .mhp-btn-primary:hover {
    box-shadow:
        2px 2px 4px rgba(40, 60, 65, 0.4),
        -2px -2px 4px rgba(100, 145, 150, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.mhp-goals-nav .mhp-btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Start Button */
.mhp-goals-start-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    padding: 14px 32px !important;
    font-size: 16px !important;
}

/* Success Step */
.mhp-goals-success-icon {
    font-size: 72px;
    margin-bottom: 16px;
}

.mhp-goals-success-text {
    color: rgba(255, 255, 255, 0.85);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.mhp-goals-summary-final {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 24px 0;
}

.mhp-goals-summary-final .mhp-goal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%);
    border-radius: 12px;
    color: #3D4E60;
    font-size: 14px;
    font-weight: 500;
    box-shadow:
        3px 3px 6px rgba(40, 60, 65, 0.3),
        -3px -3px 6px rgba(100, 145, 150, 0.2);
}

.mhp-goals-summary-final .mhp-goal-tag .mhp-goal-emoji {
    font-size: 18px;
}

/* Onboarding Goals */
.mhp-onboarding-goals {
    max-width: 500px;
    margin: 20px auto;
}

.mhp-onboarding-goals .mhp-goal-option {
    background: var(--mhp-bg-soft);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.mhp-onboarding-goals .mhp-goal-option:hover {
    background: var(--mhp-accent-lighter);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.mhp-onboarding-goals .mhp-goal-option.active {
    background: var(--mhp-primary);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
}

.mhp-onboarding-goals .mhp-goal-option.active .mhp-goal-label {
    color: white;
}

.mhp-onboarding-goals .mhp-goal-option.active .mhp-goal-emoji {
    background: rgba(255, 255, 255, 0.2);
}

.mhp-onboarding-goals .mhp-goal-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Shake Animation für Max-Limit-Hinweis */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.mhp-goals-counter.shake,
.mhp-onboarding-goals-counter.shake {
    animation: shake 0.5s ease-in-out;
    color: #e74c3c !important;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .mhp-modal-goals {
        padding: 20px 16px !important;
        margin: 10px;
        max-height: 95vh;
        overflow-y: auto;
    }

    #mhp-goals-modal .mhp-modal-content {
        padding: 24px 16px !important;
        max-width: 100% !important;
    }

    .mhp-goals-icon {
        font-size: 40px;
        width: 60px;
        height: 60px;
    }

    .mhp-goals-step h2 {
        font-size: 20px !important;
        margin-bottom: 12px;
    }

    .mhp-goals-step h3 {
        font-size: 17px !important;
        margin-bottom: 10px;
    }

    .mhp-goals-intro,
    .mhp-goals-question-hint {
        font-size: 14px !important;
    }

    .mhp-goal-option {
        padding: 12px 14px !important;
        font-size: 14px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .mhp-goal-option .mhp-goal-text {
        font-size: 13px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
        white-space: normal !important;
    }

    .mhp-goal-option .mhp-goal-label {
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
    }

    .mhp-goal-option .mhp-goal-desc {
        font-size: 12px !important;
        margin-top: 4px !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }

    .mhp-goals-options {
        width: 100% !important;
        max-width: 100% !important;
    }

    .mhp-goal-emoji {
        font-size: 20px;
    }

    .mhp-goals-nav {
        flex-direction: column;
        gap: 10px !important;
    }

    .mhp-goals-nav .mhp-btn {
        width: 100%;
        font-size: 15px !important;
        padding: 14px 20px !important;
    }

    .mhp-goals-counter {
        font-size: 14px !important;
        margin-top: 16px !important;
    }

    .mhp-goals-progress {
        height: 6px !important;
        margin-bottom: 20px !important;
    }
}

/* ========================================== */
/* HEADER PUNKTZAHL & RANG */
/* ========================================== */
.mhp-header-info {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-height: 32px;
}

.mhp-header-info-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mhp-info-id {
    font-size: 13px;
    color: var(--mhp-text-light);
    line-height: 1.4;
}

.mhp-info-points {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--mhp-text);
    padding: 4px 10px;
    background: var(--mhp-bg-highlight);
    border-radius: 8px;
    position: absolute;
    right: 0;
    top: 0;
}

.mhp-info-points svg {
    stroke: var(--mhp-success);
    fill: var(--mhp-success);
    width: 14px;
    height: 14px;
}

.mhp-info-points strong {
    font-size: 13px;
}

.mhp-rank-badge {
    display: inline-block;
    padding: 2px 6px;
    background: linear-gradient(135deg, var(--mhp-success) 0%, var(--mhp-primary) 100%);
    color: white;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    margin-left: 2px;
}

/* ========================================== */
/* TELEFONNUMMER HEADER */
/* ========================================== */

/* Desktop: Rechts außen auf Logo-Höhe - fixed positioning */
.mhp-logo-phone-desktop {
    display: none; /* Wird per JavaScript gesteuert (nur Mo-Fr 9-17 Uhr MEZ) */
    position: fixed;
    top: 10px;
    right: 10px;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: white;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10000;
}

.mhp-logo-phone-desktop svg {
    flex-shrink: 0;
    stroke: var(--mhp-primary);
    width: 14px;
    height: 14px;
}

.mhp-logo-phone-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mhp-logo-phone-info a {
    color: var(--mhp-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
}

.mhp-logo-phone-info a:hover {
    text-decoration: underline;
}

.mhp-logo-phone-hours {
    font-size: 10px;
    color: var(--mhp-text-light);
}

/* Mobile: Exakt auf Logo-Höhe - NICHT fixed (kein floating) */
.mhp-phone-header-mobile {
    display: none; /* Wird per JavaScript gesteuert (nur Mo-Fr 9-17 Uhr MEZ) */
    position: absolute;
    top: 0;
    right: 0;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: white;
    border-radius: 8px;
    box-shadow: var(--mhp-shadow);
    font-size: 11px;
    z-index: 10;
}

.mhp-phone-header-mobile svg {
    flex-shrink: 0;
    stroke: var(--mhp-primary);
    width: 14px;
    height: 14px;
}

.mhp-phone-mobile-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mhp-phone-mobile-info a {
    color: var(--mhp-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

.mhp-phone-mobile-hours {
    font-size: 9px;
    color: var(--mhp-text-light);
}

@media (min-width: 769px) {
    .mhp-logo-phone-desktop {
        display: flex;
    }

    .mhp-phone-header-mobile {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .mhp-phone-header-mobile {
        display: flex;
    }

    .mhp-logo-phone-desktop {
        display: none !important;
    }

    .mhp-header-info-left {
        gap: 12px;
    }

    .mhp-info-id {
        font-size: 12px;
    }

    .mhp-info-points {
        font-size: 10px;
        padding: 3px 8px;
    }

    .mhp-info-points strong {
        font-size: 12px;
    }

    .mhp-rank-badge {
        font-size: 9px;
        padding: 1px 5px;
    }
}

/* ========================================== */
/* COLLAPSIBLE CARDS (Entspannung & Tagebuch) */
/* ========================================== */
.mhp-card.collapsed {
    padding: 16px 20px;
}

.mhp-card.collapsed .mhp-card-content {
    display: none;
}

/* Verstecke spezifische Inhalte für Breathing & Mood Cards wenn collapsed */
.mhp-card-breathing.collapsed .mhp-breathing-subtitle,
.mhp-card-breathing.collapsed .mhp-breathing-content,
.mhp-card-breathing.collapsed .mhp-breathing-history,
.mhp-card-breathing.collapsed .mhp-points-info-box,
.mhp-card-breathing.collapsed #mhp-restart-breathing {
    display: none;
}

/* Verstecke Erfolgsmeldung und "Erneut durchführen" Button im eingeklappten Modus */
.mhp-card-breathing.collapsed #mhp-breathing-done,
.mhp-card-breathing.collapsed #mhp-restart-breathing,
.mhp-card-breathing.collapsed .mhp-breathing-success {
    display: none !important;
}

.mhp-card-personal-mood.collapsed .mhp-section-intro,
.mhp-card-personal-mood.collapsed .mhp-personal-mood-content,
.mhp-card-personal-mood.collapsed .mhp-personal-mood-history,
.mhp-card-personal-mood.collapsed .mhp-journal-streak,
.mhp-card-personal-mood.collapsed .mhp-points-info-box {
    display: none !important;
}

.mhp-card-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
}

.mhp-card-toggle-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--mhp-bg-soft);
    transition: transform 0.3s ease;
}

.mhp-card-toggle-icon svg {
    stroke: var(--mhp-primary);
}

.mhp-card.collapsed .mhp-card-toggle-icon {
    transform: rotate(180deg);
}

.mhp-card-completed-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--mhp-success-lighter);
    color: var(--mhp-success);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.mhp-card-completed-badge svg {
    stroke: var(--mhp-success);
}

/* ========================================== */
/* COMPANY PRIVACY NOTICE */
/* ========================================== */
.mhp-company-privacy-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--mhp-bg-highlight);
    border-left: 3px solid var(--mhp-success);
    border-radius: 8px;
    margin: 16px 0 24px 0;
    font-size: 13px;
    color: var(--mhp-text);
}

.mhp-company-privacy-notice svg {
    flex-shrink: 0;
    stroke: var(--mhp-success);
}

@media (max-width: 768px) {
    .mhp-company-privacy-notice {
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* ========================================== */
/* GOALS MODAL - COMPLETE OVERRIDE */
/* ========================================== */

/* Modal Overlay - Dunkler Hintergrund */
#mhp-goals-modal.mhp-modal.mhp-goals-modal {
    background: rgba(61, 78, 96, 0.9) !important;
}

/* Modal Content Box - Beige Soft UI */
#mhp-goals-modal .mhp-modal-content.mhp-modal-goals {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    max-width: 600px !important;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Close Button */
#mhp-goals-modal .mhp-modal-close {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#mhp-goals-modal .mhp-modal-close svg {
    stroke: #507176 !important;
}

/* Steps - nur aktiver Step sichtbar */
#mhp-goals-modal .mhp-goals-step {
    display: none !important;
}

#mhp-goals-modal .mhp-goals-step.active {
    display: block !important;
}

/* Text Colors */
#mhp-goals-modal h2,
#mhp-goals-modal h3 {
    color: #3D4E60 !important;
}

#mhp-goals-modal p,
#mhp-goals-modal .mhp-goals-intro,
#mhp-goals-modal .mhp-goals-question-hint {
    color: #507176 !important;
}

/* Icon */
#mhp-goals-modal .mhp-goals-icon {
    background: linear-gradient(135deg, #507176 0%, #3D4E60 100%) !important;
    color: #FFFCF3 !important;
}

/* Progress Bar */
#mhp-goals-modal .mhp-goals-progress {
    background: rgba(80, 113, 118, 0.2) !important;
}

#mhp-goals-modal .mhp-goals-progress-bar {
    background: linear-gradient(90deg, #507176 0%, #3D4E60 100%) !important;
}

/* Goal Options */
#mhp-goals-modal .mhp-goal-option {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #3D4E60 !important;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8),
        inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

#mhp-goals-modal .mhp-goal-option .mhp-goal-text,
#mhp-goals-modal .mhp-goal-option .mhp-goal-label {
    color: #3D4E60 !important;
}

#mhp-goals-modal .mhp-goal-option .mhp-goal-desc {
    color: #507176 !important;
}

#mhp-goals-modal .mhp-goal-option.selected {
    background: linear-gradient(135deg, #507176 0%, #3D4E60 100%) !important;
    box-shadow:
        inset 3px 3px 6px rgba(30, 40, 50, 0.3),
        inset -3px -3px 6px rgba(100, 145, 150, 0.2) !important;
}

#mhp-goals-modal .mhp-goal-option.selected .mhp-goal-text,
#mhp-goals-modal .mhp-goal-option.selected .mhp-goal-label {
    color: #FFFCF3 !important;
}

#mhp-goals-modal .mhp-goal-option.selected .mhp-goal-desc {
    color: rgba(255, 252, 243, 0.8) !important;
}

/* Counter */
#mhp-goals-modal .mhp-goals-counter {
    color: #507176 !important;
}

#mhp-goals-modal .mhp-goals-counter span {
    color: #3D4E60 !important;
    font-weight: 600 !important;
}

/* Buttons */
#mhp-goals-modal .mhp-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
}

#mhp-goals-modal .mhp-btn-primary {
    background: linear-gradient(135deg, #507176 0%, #3D4E60 100%) !important;
    color: #FFFCF3 !important;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
}

#mhp-goals-modal .mhp-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow:
        6px 6px 12px rgba(200, 190, 170, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.9) !important;
}

#mhp-goals-modal .mhp-btn-secondary {
    background: linear-gradient(135deg, #FFFCF3 0%, #FFF9E8 100%) !important;
    color: #507176 !important;
    box-shadow:
        4px 4px 8px rgba(200, 190, 170, 0.3),
        -4px -4px 8px rgba(255, 255, 255, 0.8) !important;
}

#mhp-goals-modal .mhp-btn svg {
    width: 16px !important;
    height: 16px !important;
}

/* Navigation */
#mhp-goals-modal .mhp-goals-nav {
    display: flex !important;
    gap: 12px !important;
    justify-content: center !important;
    margin-top: 24px !important;
}

/* Ensure all text is visible */
#mhp-goals-modal * {
    visibility: visible !important;
    opacity: 1 !important;
}

#mhp-goals-modal .mhp-goals-step:not(.active) {
    display: none !important;
}

/* Strong tags */
#mhp-goals-modal strong {
    color: #3D4E60 !important;
    font-weight: 600 !important;
}

/* ====================================
/* ====================================
   SMART THERAPIST RECOMMENDATIONS - NEOMORPHISM
   ==================================== */

/* Therapeuten-Such-Formular (Collapsible Card) */
.mhp-card-search-form {
    margin-bottom: 1.5rem;
    background: #f8f9fa; /* Hellerer Hintergrund */
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    overflow: hidden;
}

.mhp-card-search-form .mhp-collapsible-header {
    padding: 1.25rem 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.2s;
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    gap: 1rem;
}

.mhp-card-search-form .mhp-collapsible-header:hover {
    background: #f5f5f5;
}

.mhp-card-search-form .mhp-search-form-header-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.mhp-card-search-form .mhp-collapsible-header h4 {
    margin: 0;
    color: var(--mhp-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.mhp-card-search-form .mhp-collapsible-header .mhp-form-hint {
    margin: 0;
    color: #6b7280;
    font-size: 0.85rem;
    font-weight: normal;
}

.mhp-card-search-form .mhp-collapse-arrow {
    font-size: 1.2rem;
    color: var(--mhp-primary);
    transition: transform 0.3s;
    margin-left: 1rem;
}

.mhp-card-search-form.collapsed .mhp-collapse-arrow {
    transform: rotate(0deg);
}

.mhp-card-search-form:not(.collapsed) .mhp-collapse-arrow {
    transform: rotate(90deg);
}

.mhp-card-search-form .mhp-collapsible-content {
    padding: 1.5rem;
    background: #f8f9fa; /* Hellerer Hintergrund für Content */
}

.mhp-card-search-form.collapsed .mhp-collapsible-content {
    display: none !important;
}

.mhp-card-search-form:not(.collapsed) .mhp-collapsible-content {
    display: block !important;
}

.mhp-therapist-search-form-header h4 {
    margin: 0 0 0.5rem 0;
    color: var(--mhp-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.mhp-therapist-search-form-header .mhp-form-hint {
    margin: 0 0 1rem 0;
    color: #6b7280;
    font-size: 0.9rem;
}

.mhp-therapist-search-form .mhp-form-row {
    margin-bottom: 1.5rem;
}

.mhp-therapist-search-form .mhp-form-row label {
    display: block;
    margin-bottom: 0.75rem;
    font-weight: 600;
    color: var(--mhp-primary);
    font-size: 0.95rem;
}

.mhp-therapist-search-form .mhp-optional {
    font-weight: normal;
    color: #6b7280;
    font-size: 0.85rem;
}

.mhp-checkbox-group {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.mhp-checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: var(--neo-bg);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 2px 2px 4px var(--neo-shadow-dark), -2px -2px 4px var(--neo-shadow-light);
}

.mhp-checkbox-label:hover {
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light);
}

.mhp-checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--mhp-primary);
}

.mhp-checkbox-label input[type="checkbox"]:checked + span {
    font-weight: 600;
    color: var(--mhp-primary);
}

.mhp-therapist-search-form .mhp-select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid transparent;
    border-radius: 8px;
    background: var(--neo-bg);
    color: var(--mhp-primary);
    font-size: 1rem;
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light);
    cursor: pointer;
}

.mhp-therapist-search-form .mhp-select:focus {
    outline: none;
    border-color: var(--mhp-primary);
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light), 0 0 0 3px rgba(61, 78, 96, 0.1);
}

.mhp-therapist-search-form .mhp-form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.mhp-therapist-search-form .mhp-form-actions .mhp-btn {
    flex: 1;
}

@media (max-width: 768px) {
    .mhp-checkbox-group {
        grid-template-columns: 1fr;
    }
    
    .mhp-therapist-search-form .mhp-form-actions {
        flex-direction: column;
    }
}

.mhp-card-smart-recommendations {
    margin-bottom: 24px;
}

.mhp-recommendations-intro {
    color: #6b7280;
    font-size: 14px;
    margin-bottom: 16px;
    line-height: 1.6;
}

.mhp-recommendations-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #9ca3af;
}

.mhp-recommendations-loading p {
    margin-top: 12px;
    font-size: 14px;
}

/* Slider Track - Soft Scrollbar */
.mhp-smart-slider-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px 8px 20px 8px;
    scroll-behavior: smooth;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #A58C84 transparent;
}

.mhp-smart-slider-track:active {
    cursor: grabbing;
}

.mhp-smart-slider-track::-webkit-scrollbar {
    height: 6px;
}

.mhp-smart-slider-track::-webkit-scrollbar-track {
    background: transparent;
}

.mhp-smart-slider-track::-webkit-scrollbar-thumb {
    background: #A58C84;
    border-radius: 3px;
}

.mhp-smart-slider-track::-webkit-scrollbar-thumb:hover {
    background: #8E7670;
}

/* Loading & Error States für Smart Recommendations */
.mhp-smart-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--mhp-text-light);
}

.mhp-smart-loading .mhp-spinner {
    margin: 0 auto 16px;
}

.mhp-smart-loading p {
    margin: 0;
    font-size: 14px;
    color: var(--mhp-text-light);
}

.mhp-smart-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--mhp-danger);
}

.mhp-smart-error p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

/* Profile Card - Neomorphism Style */
.mhp-smart-profile-card {
    flex: 0 0 260px;
    min-width: 260px;
    background: #FFF8E4;
    border-radius: 16px;
    padding: 20px 16px 16px;
    transition: all 0.3s ease;
    border: 1px solid #F0E6CC;
    box-shadow: 
        6px 6px 12px rgba(200, 190, 170, 0.2),
        -6px -6px 12px rgba(255, 255, 255, 0.7);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.mhp-smart-profile-card:hover {
    box-shadow: 
        8px 8px 16px rgba(200, 190, 170, 0.25),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    transform: translateY(-4px);
    border-color: #C4A69C;
}

/* Profile Image - Rounded (not circular) */
.mhp-smart-profile-image {
    width: 140px;
    height: 140px;
    background-size: cover;
    background-position: center;
    background-color: #F0E6CC;
    border-radius: 16px;
    margin-bottom: 16px;
    border: 2px solid #F0E6CC;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}

/* Content Area */
.mhp-smart-profile-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    text-align: center;
}

.mhp-smart-profile-name {
    font-size: 16px;
    font-weight: 600;
    color: #3D4E60;
    margin: 0 0 4px 0;
    line-height: 1.3;
    font-family: 'Noto Nastaliq Urdu', 'Roboto Slab', serif;
}

.mhp-smart-profile-role {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #A58C84;
    font-weight: 600;
    margin: 0 0 8px 0;
}

/* Topics Section */
.mhp-smart-profile-topics {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 0;
    border-top: 1px solid #F0E6CC;
    text-align: left;
}

.mhp-smart-topic-label {
    font-size: 11px;
    font-weight: 600;
    color: #A58C84;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mhp-smart-topics {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
}

/* Languages Section */
.mhp-smart-profile-lang {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    text-align: left;
}

.mhp-smart-lang-label {
    font-size: 11px;
    font-weight: 600;
    color: #A58C84;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mhp-smart-profile-lang span:last-child {
    font-size: 12px;
    color: #6b7280;
}

/* Match Score - Soft Accent */
.mhp-smart-match-score {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #F0E6CC;
}

.mhp-smart-match-bar {
    width: 100%;
    height: 6px;
    background: #F0E6CC;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.mhp-smart-match-fill {
    height: 100%;
    background: linear-gradient(90deg, #A58C84 0%, #8E7670 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.mhp-smart-match-label {
    font-size: 11px;
    color: #6b7280;
    font-weight: 500;
}

/* Fallback List Styles */
.mhp-recommendations-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mhp-recommendation-item {
    padding: 12px;
    background: #FFF8E4;
    border-radius: 12px;
    border: 1px solid #F0E6CC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 
        4px 4px 8px rgba(200, 190, 170, 0.15),
        -4px -4px 8px rgba(255, 255, 255, 0.6);
}

.mhp-rec-name {
    font-weight: 600;
    color: #3D4E60;
}

.mhp-rec-topics {
    font-size: 13px;
    color: #6b7280;
}

/* Responsive */
@media (max-width: 640px) {
    .mhp-smart-profile-card {
        flex: 0 0 220px;
        min-width: 220px;
        padding: 16px 12px 12px;
    }
    
    .mhp-smart-profile-image {
        width: 120px;
        height: 120px;
    }
    
    .mhp-smart-profile-name {
        font-size: 14px;
    }
    
    .mhp-smart-profile-role {
        font-size: 10px;
    }
}


/* ============================== */
/* MV Profiles Modal Styles      */
/* ============================== */

.mvp-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    padding: 20px;
}

.mvp-modal-backdrop.show {
    display: flex;
}

.mvp-modal {
    background: #FFF8E4;
    width: 100%;
    max-width: 1000px;
    border-radius: 20px;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    position: relative;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mvp-modal-header {
    padding: 24px 30px;
    border-bottom: 1px solid #F0E6CC;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #FFF8E4 0%, #FFF0D4 100%);
}

.mvp-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #3D4E60;
    margin: 0;
}

/* Close Button mit höherer Spezifität gegen Elementor-Überschreibungen */
#mvpModalBackdrop .mvp-modal-close,
.mvp-modal-backdrop .mvp-modal-close,
#mvpModalBackdrop #mvpModalClose,
.mvp-modal-header .mvp-modal-close {
    background: #A58C84 !important;
    border: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #fff !important;
    padding: 0 !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    transition: all 0.2s !important;
    flex-shrink: 0 !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
    z-index: 10 !important;
}

#mvpModalBackdrop .mvp-modal-close:hover,
.mvp-modal-backdrop .mvp-modal-close:hover,
#mvpModalBackdrop #mvpModalClose:hover,
.mvp-modal-header .mvp-modal-close:hover {
    background: #3D4E60 !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.05) !important;
}

.mvp-modal-body {
    padding: 30px;
    overflow-y: auto;
    flex: 1;
}

.mvp-modal-content {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 30px;
}

.mvp-modal-col-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 0;
    align-self: start;
}

.mvp-modal-profile-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid #F0E6CC;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.mvp-modal-video {
    width: 100%;
    border-radius: 12px;
    border: 2px solid #F0E6CC;
    background: #000;
}

.mvp-modal-contact-btn {
    padding: 14px 24px;
    background: #A58C84;
    color: #FFF;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
    box-shadow:
        0 4px 12px rgba(165, 140, 132, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mvp-modal-contact-btn:hover {
    background: #8B7166;
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(165, 140, 132, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.mvp-modal-col-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mvp-modal-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mvp-modal-section-title {
    font-size: 14px;
    font-weight: 700;
    color: #A58C84;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mvp-modal-section-content {
    font-size: 15px;
    line-height: 1.7;
    color: #3D4E60;
}

.mvp-modal-role {
    font-size: 16px;
    color: #6B7280;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 8px;
}

/* Modal Responsive */
@media (max-width: 768px) {
    .mvp-modal {
        max-width: 100%;
        border-radius: 12px;
        margin: 10px;
    }

    .mvp-modal-content {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .mvp-modal-col-left {
        position: static;
    }

    .mvp-modal-profile-image {
        max-width: 280px;
        margin: 0 auto;
    }

    .mvp-modal-header {
        padding: 20px;
    }

    .mvp-modal-title {
        font-size: 20px;
    }

    .mvp-modal-body {
        padding: 20px;
    }
}

@media (max-width: 480px) {
    .mvp-modal-profile-image {
        max-width: 100%;
    }

    .mvp-modal-content {
        gap: 20px;
    }

    .mvp-modal-section-content {
        font-size: 14px;
    }
}

/* =============================================================================
   TOAST NOTIFICATIONS
   ============================================================================= */

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

.mhp-toast-notification {
    animation: slideInRight 0.3s ease-out;
}

/* =============================================================================
   PSYCHOLOGISCHES JOURNAL - VOLLBILD MODAL
   ============================================================================= */

.mhp-journal-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease-out;
    padding: 20px;
}

.mhp-journal-modal-content {
    background: var(--neo-bg);
    width: 100%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 10px 10px 30px rgba(0,0,0,0.3), -10px -10px 30px rgba(255,255,255,0.1);
}

.mhp-journal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem;
    background: var(--neo-bg);
    border-bottom: 1px solid rgba(184, 193, 204, 0.3);
    position: relative;
}

.mhp-journal-header-left h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--neo-primary);
}

.mhp-journal-subtitle {
    margin: 0.3rem 0 0 0;
    font-size: 0.85rem;
    color: var(--neo-text-light);
    font-size: 1rem;
}

.mhp-journal-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mhp-journal-close:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

.mhp-journal-tabs {
    display: flex;
    gap: 8px;
    padding: 0 2rem 0 2rem;
    background: var(--neo-bg);
}

.mhp-journal-tab {
    background: transparent;
    border: none;
    padding: 1.25rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}

.mhp-journal-tab:hover {
    color: var(--mhp-primary);
    background: rgba(61, 78, 96, 0.05);
}

.mhp-journal-tab.active {
    color: var(--mhp-primary);
    border-bottom-color: var(--mhp-primary);
    font-weight: 600;
}

.mhp-journal-tab-content {
    display: none;
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
    background: var(--neo-bg);
    position: relative; /* Für absolute Positionierung des Detail-Views */
}

.mhp-journal-tab-content.active {
    display: block;
}

.mhp-journal-write-container,
.mhp-journal-mood-selector,
.mhp-journal-text-area,
.mhp-journal-gratitude {
    margin-bottom: 1.2rem;
}

.mhp-journal-question {
    font-size: 14px;
    font-weight: 600;
    color: var(--neo-text);
    margin-bottom: 10px;
}

.mhp-journal-char-count {
    font-size: 12px;
    color: var(--neo-text-light);
    text-align: right;
    margin-top: 6px;
}

/* Filter & Suche */
.mhp-journal-filters {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.mhp-journal-search {
    flex: 1;
    min-width: 300px;
    padding: 0.875rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.2s;
}

.mhp-journal-search:focus {
    outline: none;
    border-color: var(--mhp-primary);
    box-shadow: 0 0 0 4px rgba(61, 78, 96, 0.1);
}

.mhp-journal-filter {
    padding: 0.875rem 1.25rem;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
}

.mhp-journal-filter:focus {
    outline: none;
    border-color: var(--mhp-primary);
}

/* Einträge Liste */
.mhp-journal-entries {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mhp-journal-loading {
    text-align: center;
    padding: 3rem;
    color: #6b7280;
    font-size: 1.1rem;
}

.mhp-journal-entry-card {
    background: white;
    border-radius: 12px;
    padding: 1.5rem;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    gap: 1.5rem;
}

.mhp-journal-entry-card:hover {
    border-color: var(--mhp-primary);
    box-shadow: 0 4px 12px rgba(61, 78, 96, 0.1);
    transform: translateY(-2px);
}

.mhp-journal-entry-mood {
    font-size: 3rem;
    flex-shrink: 0;
}

.mhp-journal-entry-mood svg {
    width: 48px;
    height: 48px;
}

.mhp-journal-entry-content {
    flex: 1;
}

.mhp-journal-entry-date {
    color: #6b7280;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.mhp-journal-entry-gratitude {
    color: #1f2937;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.mhp-journal-entry-note-preview {
    color: #6b7280;
    font-size: 0.9rem;
    font-style: italic;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Insights Tab */
.mhp-journal-insight-card {
    background: var(--neo-bg);
    border-radius: 12px;
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light);
}

.mhp-journal-insight-card h3 {
    margin: 0 0 1rem 0;
    color: var(--neo-primary);
    font-size: 1.1rem;
    font-weight: 600;
}

.mhp-journal-chart {
    min-height: 108px; /* 40% kleiner: 180px * 0.6 = 108px */
    max-height: 120px; /* 40% kleiner: 200px * 0.6 = 120px */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--neo-text-light);
    background: var(--neo-bg);
    border-radius: 10px;
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light);
    padding: 1rem;
}

.mhp-journal-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.mhp-journal-stat-card {
    background: var(--neo-bg);
    border-radius: 12px;
    padding: 1.2rem;
    text-align: center;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light);
}

.mhp-journal-stat-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--mhp-primary);
    margin-bottom: 0.5rem;
}

/* Durchschnittsstimmung Smilies 3x größer */
#mhp-journal-avg-mood svg,
#mhp-journal-avg-mood .mhp-mood-svg {
    width: 144px !important; /* 3x 48px */
    height: 144px !important; /* 3x 48px */
}

.mhp-journal-stat-label {
    color: #6b7280;
    font-size: 0.95rem;
}

/* Entry Detail - jetzt direkt in der Liste, kein separates Modal */
.mhp-journal-entry-detail-wrapper {
    padding: 1rem 0;
}

.mhp-journal-entry-detail-header {
    margin-bottom: 1.5rem;
}

.mhp-journal-entry-back {
    background: var(--mhp-primary);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
}

.mhp-journal-entry-back:hover {
    background: var(--mhp-primary-dark);
    transform: translateX(-4px);
}

.mhp-journal-entry-detail-body-content {
    text-align: center;
}

.mhp-journal-entry-detail-mood {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.mhp-journal-entry-detail-mood .mhp-mood-svg {
    width: 80px;
    height: 80px;
}

.mhp-journal-entry-detail-date {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--mhp-primary);
    margin-bottom: 0.5rem;
}

.mhp-journal-entry-detail-label {
    color: #6b7280;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.mhp-journal-entry-detail-gratitude {
    background: transparent;
    border: none;
    padding: 1.5rem 0;
    border-radius: 0;
    margin-bottom: 1.5rem;
    text-align: left;
}

.mhp-journal-entry-detail-gratitude h3 {
    color: var(--mhp-primary, #3D4E60);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.mhp-journal-entry-detail-gratitude p {
    margin: 0;
    line-height: 1.8;
    font-size: 1.1rem;
    color: var(--mhp-text, #1f2937);
}

.mhp-journal-entry-detail-note {
    background: transparent;
    border: none;
    padding: 1.5rem 0;
    border-radius: 0;
    text-align: left;
}

.mhp-journal-entry-detail-note h3 {
    color: var(--mhp-primary, #3D4E60);
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.mhp-journal-entry-detail-note p {
    margin: 0;
    line-height: 1.8;
    font-size: 1.05rem;
    color: var(--mhp-text, #374151);
    white-space: pre-wrap;
}

/* Alte Detail-Modal Styles (für Kompatibilität, falls noch verwendet) */
.mhp-journal-entry-detail {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f9fafb;
    z-index: 10;
    animation: slideInRight 0.3s ease-out;
}

.mhp-journal-entry-detail-content {
    height: 100%;
    overflow-y: auto;
    padding: 2rem 2.5rem;
}

/* Responsive */
@media (max-width: 768px) {
    .mhp-journal-header {
        padding: 1.5rem;
    }

    .mhp-journal-header-left h2 {
        font-size: 1.3rem;
    }

    .mhp-journal-tabs {
        padding: 0 1rem;
    }

    .mhp-journal-tab {
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Modal auf Mobile fast fullscreen */
    .mhp-journal-modal {
        padding: 0 !important;
        align-items: flex-start !important;
    }

    .mhp-journal-modal-content {
        max-width: 100% !important;
        max-height: 100vh !important;
        height: 100vh !important;
        border-radius: 0 !important;
    }

    /* Header kompakter */
    .mhp-journal-header {
        padding: 1rem 1rem !important;
    }

    .mhp-journal-header-left h2 {
        font-size: 1.1rem !important;
    }

    .mhp-journal-subtitle {
        font-size: 0.8rem !important;
        margin-top: 0.2rem !important;
    }

    .mhp-journal-close {
        width: 40px !important;
        height: 40px !important;
        font-size: 1.5rem !important;
    }

    /* Tabs kompakter */
    .mhp-journal-tabs {
        padding: 0 1rem !important;
        gap: 4px !important;
    }

    .mhp-journal-tab {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.85rem !important;
        flex: 1 !important;
        text-align: center !important;
    }

    /* Content-Padding reduzieren */
    .mhp-journal-tab-content {
        padding: 1rem !important;
    }

    /* Date Selector kompakter */
    .mhp-journal-date-selector {
        padding: 10px !important;
        margin-bottom: 15px !important;
    }

    .mhp-journal-current-date {
        font-size: 14px !important;
        min-width: 100px !important;
    }

    .mhp-journal-date-prev,
    .mhp-journal-date-next {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    /* Alle Inputs auf 16px (verhindert Zoom) */
    .mhp-journal-search,
    .mhp-journal-filter,
    .mhp-journal-textarea,
    .mhp-journal-input,
    #mhp-journal-text-input,
    #mhp-journal-gratitude-input {
        font-size: 16px !important;
    }

    /* Filters mobile-freundlicher */
    .mhp-journal-filters {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 1.5rem !important;
    }

    .mhp-journal-search {
        min-width: 100% !important;
        padding: 0.75rem 1rem !important;
    }

    .mhp-journal-filter {
        padding: 0.75rem 1rem !important;
        font-size: 16px !important;
    }

    /* Einträge Liste scrollbar auf Mobile */
    #mhp-journal-tab-entries .mhp-journal-entries {
        max-height: calc(100vh - 300px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-right: 8px;
    }

    /* Question-Text kleiner */
    .mhp-journal-question {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }

    /* Textarea kompakter - 20px+ kleiner für Mobile damit Speichern-Button sichtbar */
    .mhp-journal-textarea,
    #mhp-journal-text-input {
        padding: 12px !important;
        min-height: 80px !important;
        max-height: 120px !important;
    }

    /* Buttons mobile-freundlicher */
    .mhp-btn-journal-save {
        padding: 12px 24px !important;
        font-size: 15px !important;
    }

    /* Entry Cards kompakter */
    .mhp-journal-entry-card {
        padding: 1rem !important;
        gap: 1rem !important;
    }

    .mhp-journal-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* Write Container Abstände reduzieren */
    .mhp-journal-write-container,
    .mhp-journal-mood-selector,
    .mhp-journal-text-area,
    .mhp-journal-gratitude {
        margin-bottom: 1rem !important;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================== */
/* JOURNAL - SOFT UI NEOMORPHISM STYLE */
/* ========================================== */

:root {
    --neo-bg: #f5f1e8;
    --neo-shadow-light: #ffffff;
    --neo-shadow-dark: #d4caba;
    --neo-primary: #3D4E60;
    --neo-primary-light: #507176;
    --neo-text: #1f2937;
    --neo-text-light: #6b7280;
    --mindvise-beige: #f5f1e8;
}

/* Journal öffnen Button - wie Entspannungs-Button (Primary) - rund wie "Starten" */
.mhp-btn-journal-open#mhp-open-journal {
    margin-top: 15px !important;
    width: 100% !important;
    background: var(--mhp-primary) !important;
    background-color: var(--mhp-primary) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.5 !important;
}

.mhp-btn-journal-open#mhp-open-journal:hover {
    background: var(--mhp-primary-dark) !important;
    background-color: var(--mhp-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 8px 8px 16px rgba(163, 140, 132, 0.3), -4px -4px 10px rgba(255, 255, 255, 0.3) !important;
}

.mhp-btn-journal-open#mhp-open-journal:active {
    transform: translateY(0) !important;
}

/* Journal Modal Buttons - Elementor Override */
.mhp-journal-tab[type="button"],
.mhp-journal-date-prev[type="button"],
.mhp-journal-date-next[type="button"],
.mhp-journal-mood-btn[type="button"],
.mhp-btn-journal-save[type="button"],
.mhp-journal-close[type="button"],
.mhp-journal-entry-back[type="button"] {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    cursor: pointer !important;
    user-select: none !important;
}

/* Journal Tabs - Neomorphism */
.mhp-journal-tab[type="button"] {
    padding: 10px 20px !important;
    background: var(--neo-bg) !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--neo-text-light) !important;
    transition: all 0.3s ease !important;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important;
}

.mhp-journal-tab[type="button"]:hover {
    box-shadow: 2px 2px 4px var(--neo-shadow-dark), -2px -2px 4px var(--neo-shadow-light) !important;
    transform: translateY(1px) !important;
}

.mhp-journal-tab[type="button"].active {
    background: var(--neo-bg) !important;
    color: var(--neo-primary) !important;
    font-weight: 600 !important;
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
}

/* Journal Close Button - Neomorphism */
.mhp-journal-close[type="button"] {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 36px !important;
    height: 36px !important;
    background: var(--neo-bg) !important;
    border-radius: 50% !important;
    font-size: 22px !important;
    color: var(--neo-text-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important;
}

.mhp-journal-close[type="button"]:hover {
    box-shadow: 2px 2px 4px var(--neo-shadow-dark), -2px -2px 4px var(--neo-shadow-light) !important;
    color: var(--neo-primary) !important;
    transform: scale(0.95) !important;
}

.mhp-journal-close[type="button"]:active {
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
}

/* Date Navigation - Neomorphism */
.mhp-journal-date-selector {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background: var(--neo-bg) !important;
    border-radius: 12px !important;
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
}

.mhp-journal-date-prev[type="button"],
.mhp-journal-date-next[type="button"] {
    width: 36px !important;
    height: 36px !important;
    background: var(--neo-bg) !important;
    border: none !important;
    border-radius: 50% !important;
    font-size: 16px !important;
    color: var(--neo-primary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important;
}

.mhp-journal-date-prev[type="button"]:hover,
.mhp-journal-date-next[type="button"]:hover {
    box-shadow: 2px 2px 4px var(--neo-shadow-dark), -2px -2px 4px var(--neo-shadow-light) !important;
    transform: scale(0.95) !important;
}

.mhp-journal-date-prev[type="button"]:active,
.mhp-journal-date-next[type="button"]:active {
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
}

.mhp-journal-current-date {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--neo-text) !important;
    min-width: 140px !important;
    text-align: center !important;
}

/* Mood Buttons - Neomorphism mit SVG Icons */
.mhp-journal-mood-buttons {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

.mhp-journal-mood-btn[type="button"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 12px 16px !important;
    background: var(--neo-bg) !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--neo-text-light) !important;
    transition: all 0.3s ease !important;
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important;
    min-width: 90px !important;
}

.mhp-journal-mood-btn[type="button"] .mhp-smiley-img {
    width: 50px !important;
    height: 50px !important;
    display: block !important;
}

/* Mobile: Smilies deutlich kleiner machen, damit 5 nebeneinander passen */
@media (max-width: 768px) {
    .mhp-journal-mood-buttons {
        gap: 4px !important;
        justify-content: space-between !important;
    }
    
    .mhp-journal-mood-btn[type="button"] {
        min-width: 0 !important;
        max-width: none !important;
        flex: 1 1 0 !important;
        padding: 6px 2px !important;
    }
    
    .mhp-journal-mood-btn[type="button"] .mhp-smiley-img,
    #mhp-journal-tab-write .mhp-journal-mood-btn[type="button"] .mhp-smiley-img,
    .mhp-journal-mood-selector .mhp-journal-mood-btn[type="button"] .mhp-smiley-img {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
    
    .mhp-journal-mood-btn[type="button"] span {
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
}

.mhp-journal-mood-btn[type="button"] span {
    display: block !important;
    text-align: center !important;
    line-height: 1.2 !important;
}

.mhp-journal-mood-btn[type="button"]:hover {
    box-shadow: 2px 2px 4px var(--neo-shadow-dark), -2px -2px 4px var(--neo-shadow-light) !important;
    color: var(--neo-primary) !important;
    transform: translateY(1px) !important;
}

.mhp-journal-mood-btn[type="button"]:hover .mhp-smiley-img circle,
.mhp-journal-mood-btn[type="button"]:hover .mhp-smiley-img path,
.mhp-journal-mood-btn[type="button"]:hover .mhp-smiley-img line {
    stroke: var(--neo-primary) !important;
}

.mhp-journal-mood-btn[type="button"].selected {
    background: var(--neo-primary) !important;
    color: white !important;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.2), inset -2px -2px 4px rgba(255,255,255,0.1) !important;
}

.mhp-journal-mood-btn[type="button"].selected .mhp-smiley-img circle,
.mhp-journal-mood-btn[type="button"].selected .mhp-smiley-img path,
.mhp-journal-mood-btn[type="button"].selected .mhp-smiley-img line {
    stroke: white !important;
    fill: none !important;
}

.mhp-journal-mood-btn[type="button"].selected .mhp-smiley-img circle[fill="#3D4E60"] {
    fill: white !important;
}

.mhp-journal-mood-btn[type="button"]:active {
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
}

/* ========================================== */
/* HR FEEDBACK RESPONSE BANNER */
/* ========================================== */

.mhp-feedback-response-banner {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
    animation: slideInDown 0.4s ease-out;
}

.mhp-feedback-response-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.mhp-feedback-response-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.mhp-feedback-response-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.mhp-feedback-response-count {
    background: rgba(255, 255, 255, 0.3);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-left: auto;
}

.mhp-feedback-response-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mhp-feedback-response-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 1rem;
    border-radius: 8px;
    border-left: 4px solid rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
}

.mhp-feedback-response-item:hover {
    background: rgba(255, 255, 255, 0.25);
    border-left-color: white;
    transform: translateX(4px);
}

.mhp-feedback-response-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.mhp-feedback-response-date {
    font-size: 0.85rem;
    opacity: 0.9;
}

.mhp-feedback-response-preview {
    font-size: 0.95rem;
    line-height: 1.4;
    opacity: 0.95;
}

.mhp-feedback-response-badge {
    background: #10b981;
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

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

/* Textarea - Neomorphism Inset */
.mhp-journal-textarea {
    width: 100% !important;
    padding: 14px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    line-height: 1.6 !important;
    resize: vertical !important;
    min-height: 120px !important;
    max-height: 200px !important;
    background: var(--neo-bg) !important;
    color: var(--neo-text) !important;
    transition: all 0.3s ease !important;
    box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important;
}

/* Mobile: Schriftgröße 16px für Journal-Eingabefelder (verhindert Zoom) */
@media (max-width: 768px) {
    .mhp-journal-textarea,
    .mhp-journal-input,
    #mhp-journal-text-input,
    #mhp-journal-gratitude-input {
        font-size: 16px !important;
    }
}

/* Desktop: Auch 16px für Inputs um Zoom zu verhindern */
.mhp-journal-textarea,
.mhp-journal-input,
#mhp-journal-text-input,
#mhp-journal-gratitude-input {
    font-size: 16px !important;
}

.mhp-journal-textarea:focus {
    outline: none !important;
    box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light) !important;
}

.mhp-journal-input {
    width: 100% !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    background: var(--neo-bg) !important;
    color: var(--neo-text) !important;
    box-shadow: inset 2px 2px 4px var(--neo-shadow-dark), inset -2px -2px 4px var(--neo-shadow-light) !important;
    transition: all 0.3s ease !important;
}

.mhp-journal-input:focus {
    outline: none !important;
    box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important;
}

/* Save Button - Neomorphism Primary */
.mhp-btn-journal-save[type="button"] {
    width: 100% !important;
    padding: 14px 32px !important;
    background: var(--neo-primary) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light) !important;
}

.mhp-btn-journal-save[type="button"]:hover {
    box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important;
    transform: translateY(1px) !important;
}

.mhp-btn-journal-save[type="button"]:active {
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -2px -2px 4px rgba(255,255,255,0.1) !important;
}

/* Calendar Navigation */
.mhp-journal-calendar-nav {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 20px 0;
    margin-bottom: 20px;
}

.mhp-journal-calendar-day {
    min-width: 80px;
    padding: 15px;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.mhp-journal-calendar-day:hover {
    border-color: var(--mhp-primary, #3D4E60);
}

.mhp-journal-calendar-day.has-entry {
    background: #f0f9ff;
    border-color: #3b82f6;
}

.mhp-journal-calendar-day.selected {
    background: var(--mhp-primary, #3D4E60);
    border-color: var(--mhp-primary, #3D4E60);
    color: white;
}

.mhp-journal-calendar-day-number {
    font-size: 24px;
    font-weight: 700;
    display: block;
    margin-bottom: 5px;
}

.mhp-journal-calendar-day-name {
    font-size: 12px;
    text-transform: uppercase;
    opacity: 0.7;
}

/* ========================================== */
/* MV PROFILES KONTAKT-MODAL */
/* ========================================== */
.contact-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: saturate(90%) blur(2px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}

.contact-modal-backdrop.show {
    display: flex;
}

.contact-modal {
    background: #fff;
    border-radius: 16px;
    width: min(95vw, 600px);
    max-height: 90vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.contact-header {
    position: relative;
    padding: 16px 60px 16px 18px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.contact-header h4 {
    font-size: 20px;
    margin: 0;
    color: #3D4E60;
}

.contact-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: #A58C84;
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    padding: 0;
    line-height: 1;
    transition: all 0.2s;
}

.contact-close:hover {
    background: #3D4E60;
    transform: translateY(-50%) scale(1.05);
}

.contact-body {
    padding: 16px;
    overflow: auto;
}

.contact-body label {
    font-size: 16px;
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
    color: #333;
}

.contact-input,
.contact-textarea {
    font-size: 16px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    transition: border-color 0.2s;
}

.contact-input:focus,
.contact-textarea:focus {
    outline: none;
    border-color: #3D4E60;
    box-shadow: 0 0 0 3px rgba(61, 78, 96, 0.1);
}

.contact-textarea {
    resize: vertical;
    min-height: 140px;
}

.contact-body input[type="checkbox"] {
    transform: scale(1.1);
    margin-right: 8px;
}

.contact-actions {
    padding: 12px 16px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

@media (max-width: 768px) {
    .contact-modal {
        width: 100%;
        height: 95vh;
        max-height: 95vh;
        border-radius: 14px;
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
    
    .contact-input,
    .contact-textarea {
        font-size: 16px !important; /* Verhindert Zoom auf Mobile */
    }
}

label.mv-privacy {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    line-height: 1.35;
    flex-wrap: wrap;
    font-weight: normal;
}

label.mv-privacy a {
    white-space: nowrap;
    color: #3D4E60;
    text-decoration: underline;
}

#mv_cf_msg {
    margin-top: 8px;
    font-size: 14px;
    min-height: 20px;
}

.profil-btn {
    background: #A58C84;
    color: #fff;
    border: none;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
    min-height: 46px;
}

.profil-btn:hover:not([disabled]) {
    background: #3D4E60;
}

.profil-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
    filter: saturate(0.6);
}