/* ============================================
   Farbschema: Standard - AUTO
   Generiert am: 2026-02-17 (aktualisiert)
   Nutzt @media (prefers-color-scheme) für automatisches Theme
   Browser: Safari 12.1+, Chrome 76+, Firefox 67+, Edge 79+
   ============================================ */

:root {
    /* Enable automatic light/dark mode switching */
    color-scheme: light dark;

    /* Light Mode (Standard) - Basis-Farben */
    --primary-color: #0891b2;
    --secondary-color: #64748b;
    --background-color: #ffffff;
    --text-color: #334155;
    --accent-color: #059669;
    --border-radius: 8px;
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.15);

    /* Element-spezifische Farben */
    --color-page-bg: #ffffff;
    --color-page-text: #334155;
    --color-link: #0891b2;
    --color-link-hover: #000000;
    --color-header-bg: #0891b2;
    --color-header-text: #000000;
    --color-hero-bg: #0891b2;
    --color-hero-text: #000000;
    --color-header-title-section-bg: #0891b2;
    --color-header-title-section-text: #000000;
    --color-header-title-section-title-text: #000000;
    --color-page-subtitle-text: #000000;
    --color-footer-bg: #64748b;
    --color-footer-text: #ffffff;
    --color-footer-link: #ffffff;
    --color-footer-link-hover: #ffffff;
    --color-footer-link-border: #ffffff;
    --color-card-bg: #ffffff;
    --color-card-text: #334155;
    --color-card-border: #e6e6e6;
    --color-event-title-text: #0891b2;
    --color-meta-bg: #f7f7f7;
    --color-meta-text: #334155;
    --color-group-heading-bg: #0891b2;
    --color-group-heading-text: #000000;
    --color-group-heading-border: #0891b2;
    --color-info-container-bg: #f3fafb;
    --color-info-text: #334155;
    --color-info-heading-text: #0891b2;
    --color-info-link: #000000;
    --color-info-link-border: #0891b2;
    --color-abo-bg: #0891b2;
    --color-abo-text: #000000;
    --color-abo-border: #0891b2;
    --color-abo-hover-bg: #059669;
    --color-abo-hover-text: #000000;
    --color-abo-hover-border: #059669;
    --color-subscribe-url-border: #0891b2;
    --color-subscribe-url-label: #64748b;
    --color-subscribe-info-marker-bg: #0891b2;
    --color-subscribe-info-marker-text: #000000;
    --color-subscribe-info-marker-active-bg: #059669;
    --color-subscribe-info-marker-active-text: #000000;
    --color-subscribe-info-border: #0891b2;
    --color-subscribe-instructions-text: #334155;
    --color-subscribe-instructions-heading-text: #64748b;
    --color-subscribe-instructions-number-text: #000000;
    --color-social-button-bg: #0891b2;
    --color-social-button-text: #000000;
    --color-social-button-border: #0891b2;
    --color-social-button-hover-bg: #059669;
    --color-social-button-hover-text: #000000;
    --color-social-button-hover-border: #059669;
    --color-social-list-bg: #ffffff;
    --color-social-list-text: #334155;
    --color-social-list-border: #e6e6e6;
    --color-social-list-hover-bg: #f7f7f7;
    --color-social-list-hover-text: #334155;
    --color-social-list-hover-border: #e6e6e6;
    --color-imprint-heading-text: #64748b;
    --color-imprint-link: #0891b2;
    --color-imprint-link-border: #0891b2;
    --color-back-link-text: #0891b2;

    /* Zusätzliche Farben */
    --card-bg: #ffffff;
    --meta-bg: #f7f7f7;
    --border-color: #e6e6e6;
    --info-bg: #f3fafb;
    --info-text: #334155;
}

/* Mode-specific styles (hero overlay, attachment colors) */
.hero-overlay {
    background: rgba(37, 99, 235, 0.3);
}

.hero-content h1 {
    color: white;
}

.attachment-file small {
    color: #666666;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Mode - Basis-Farben */
        --primary-color: #a78bfa;
        --secondary-color: #2dd4bf;
        --background-color: #121212;
        --text-color: #e1e1e1;
        --accent-color: #34d399;
        --shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.4);

        /* Element-spezifische Farben */
        --color-page-bg: #121212;
        --color-page-text: #e1e1e1;
        --color-link: #a78bfa;
        --color-link-hover: #34d399;
        --color-header-bg: #a78bfa;
        --color-header-text: #000000;
        --color-hero-bg: #a78bfa;
        --color-hero-text: #000000;
        --color-header-title-section-bg: #a78bfa;
        --color-header-title-section-text: #000000;
        --color-header-title-section-title-text: #000000;
        --color-page-subtitle-text: #000000;
        --color-footer-bg: #2dd4bf;
        --color-footer-text: #000000;
        --color-footer-link: #000000;
        --color-footer-link-hover: #000000;
        --color-footer-link-border: #000000;
        --color-card-bg: #262626;
        --color-card-text: #e1e1e1;
        --color-card-border: #383838;
        --color-event-title-text: #a78bfa;
        --color-meta-bg: #1f1f1f;
        --color-meta-text: #e1e1e1;
        --color-group-heading-bg: #a78bfa;
        --color-group-heading-text: #000000;
        --color-group-heading-border: #a78bfa;
        --color-info-container-bg: #1f1f1f;
        --color-info-text: #e1e1e1;
        --color-info-heading-text: #a78bfa;
        --color-info-link: #a78bfa;
        --color-info-link-border: #a78bfa;
        --color-abo-bg: #a78bfa;
        --color-abo-text: #000000;
        --color-abo-border: #a78bfa;
        --color-abo-hover-bg: #34d399;
        --color-abo-hover-text: #000000;
        --color-abo-hover-border: #34d399;
        --color-subscribe-url-border: #a78bfa;
        --color-subscribe-url-label: #2dd4bf;
        --color-subscribe-info-marker-bg: #a78bfa;
        --color-subscribe-info-marker-text: #000000;
        --color-subscribe-info-marker-active-bg: #34d399;
        --color-subscribe-info-marker-active-text: #000000;
        --color-subscribe-info-border: #a78bfa;
        --color-subscribe-instructions-text: #e1e1e1;
        --color-subscribe-instructions-heading-text: #2dd4bf;
        --color-subscribe-instructions-number-text: #000000;
        --color-social-button-bg: #a78bfa;
        --color-social-button-text: #000000;
        --color-social-button-border: #a78bfa;
        --color-social-button-hover-bg: #34d399;
        --color-social-button-hover-text: #000000;
        --color-social-button-hover-border: #34d399;
        --color-social-list-bg: #262626;
        --color-social-list-text: #e1e1e1;
        --color-social-list-border: #383838;
        --color-social-list-hover-bg: #333333;
        --color-social-list-hover-text: #e1e1e1;
        --color-social-list-hover-border: #383838;
        --color-imprint-heading-text: #2dd4bf;
        --color-imprint-link: #a78bfa;
        --color-imprint-link-border: #a78bfa;
        --color-back-link-text: #a78bfa;

        /* Zusätzliche Farben */
        --card-bg: #262626;
        --meta-bg: #1f1f1f;
        --border-color: #383838;
        --info-bg: #1f1f1f;
        --info-text: #e1e1e1;
    }

    /* Mode-specific styles (hero overlay, attachment colors) */
    .hero-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .hero-content h1 {
        color: var(--primary-color);
    }

    .attachment-file small {
        color: #999999;
    }
}