/* ============================================
   Custom Design - Dark Mode
   Generiert am: 2026-11-04 23:20:01
   ============================================ */

:root {
    /* Basis-Farben */
    --primary-color: #000000;
    --secondary-color: #929292;
    --background-color: #000000;
    --text-color: #ffffff;
    --accent-color: #b51a00;
    --font-family: Noto Sans, sans-serif;
    --event-layout: image-left-40;
    --border-radius: 8px;
    --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: #000000;
    --color-page-text: #ffffff;
    --color-link: #000000;
    --color-link-hover: #ffffff;
    --color-header-bg: #000000;
    --color-header-text: #ffffff;
    --color-hero-bg: #000000;
    --color-hero-text: #ffffff;
    --color-header-title-section-bg: #000000;
    --color-header-title-section-text: #ffffff;
    --color-header-title-section-title-text: #ffffff;
    --color-page-subtitle-text: #ffffff;
    --color-footer-bg: #929292;
    --color-footer-text: #000000;
    --color-footer-link: #000000;
    --color-footer-link-hover: #000000;
    --color-footer-link-border: #000000;
    --color-card-bg: #141414;
    --color-card-text: #ffffff;
    --color-card-border: #262626;
    --color-event-title-text: #ffffff;
    --color-meta-bg: #0d0d0d;
    --color-meta-text: #ffffff;
    --color-group-heading-bg: #000000;
    --color-group-heading-text: #ffffff;
    --color-group-heading-border: #000000;
    --color-info-container-bg: #1f1f1f;
    --color-info-text: #ffffff;
    --color-info-heading-text: #ffffff;
    --color-info-link: #ffffff;
    --color-info-link-border: #000000;
    --color-abo-bg: #000000;
    --color-abo-text: #ffffff;
    --color-abo-border: #000000;
    --color-abo-hover-bg: #b51a00;
    --color-abo-hover-text: #ffffff;
    --color-abo-hover-border: #b51a00;
    --color-subscribe-url-border: #000000;
    --color-subscribe-url-label: #929292;
    --color-subscribe-info-marker-bg: #000000;
    --color-subscribe-info-marker-text: #ffffff;
    --color-subscribe-info-marker-active-bg: #b51a00;
    --color-subscribe-info-marker-active-text: #ffffff;
    --color-subscribe-info-border: #000000;
    --color-subscribe-instructions-text: #ffffff;
    --color-subscribe-instructions-heading-text: #929292;
    --color-subscribe-instructions-number-text: #ffffff;
    --color-social-button-bg: #000000;
    --color-social-button-text: #ffffff;
    --color-social-button-border: #000000;
    --color-social-button-hover-bg: #b51a00;
    --color-social-button-hover-text: #ffffff;
    --color-social-button-hover-border: #b51a00;
    --color-social-list-bg: #141414;
    --color-social-list-text: #ffffff;
    --color-social-list-border: #262626;
    --color-social-list-hover-bg: #212121;
    --color-social-list-hover-text: #ffffff;
    --color-social-list-hover-border: #262626;
    --color-imprint-heading-text: #929292;
    --color-imprint-link: #000000;
    --color-imprint-link-border: #000000;
    --color-back-link-text: #000000;

    /* Zusätzliche Farben */
    --card-bg: #141414;
    --meta-bg: #0d0d0d;
    --border-color: #262626;
    --info-bg: #1f1f1f;
    --info-text: #ffffff;
}

/* Base styles */
body {
    background-color: var(--color-page-bg);
    color: var(--color-page-text);
}

.container {
    background-color: var(--color-page-bg);
}

/* Header */
.header {
    background-color: var(--color-header-bg);
    color: var(--color-header-text);
}

.hero-header.hero-logo-only {
    background-color: var(--color-hero-bg);
}

.hero-content,
.hero-content h1,
.hero-content .subtitle {
    color: var(--color-hero-text);
}

.header-title-section {
    background: var(--color-header-title-section-bg);
    color: var(--color-header-title-section-text);
}

/* Info Text Section */
.info-text-container {
    background-color: var(--color-info-container-bg);
}

.info-text {
    color: var(--color-info-text);
}

.info-text h1,
.info-text h2,
.info-text h3 {
    color: var(--color-info-heading-text);
}

.info-text a {
    color: var(--color-info-link);
}

.info-text a:hover {
    border-bottom-color: var(--color-info-link-border);
}

/* Subscribe Section */
.subscribe-section {
}

/* Group Headings */
.group-heading {
    color: var(--color-group-heading-text);
    border-bottom-color: var(--color-group-heading-border);
}

/* Event Card */
.event-card {
    background: var(--color-card-bg);
    border: 1px solid var(--border-color);
}

.event-card:hover {
    border-color: var(--color-card-border);
}

.event-title {
    color: var(--color-event-title-text);
}

.event-meta {
    background-color: var(--color-meta-bg);
}

.event-description code {
    background-color: var(--color-meta-bg);
    color: var(--color-meta-text);
}

.event-description strong {
    color: var(--color-info-heading-text);
}

/* Attachments */
.attachment-file a {
    background-color: var(--color-abo-bg);
}

.attachment-file a:hover {
    background-color: var(--color-abo-hover-bg);
}

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

/* Subscribe Button */
.subscribe-button {
    background: var(--color-abo-bg);
    color: var(--color-abo-text);
    border: 1px solid var(--color-abo-border);
}

.subscribe-button:hover {
    background: var(--color-abo-hover-bg);
    color: var(--color-abo-hover-text);
}

.subscribe-button-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.subscribe-info-icon {
    background: var(--color-abo-bg);
    color: var(--color-abo-text);
    border: 1px solid var(--color-abo-border);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.subscribe-info-icon:hover,
.subscribe-info-icon.active {
    background: var(--color-abo-hover-bg);
    color: var(--color-abo-hover-text);
    transform: scale(1.1);
}

/* Links */
a {
    color: var(--color-link);
}

a:hover {
    color: var(--color-link-hover);
}

/* Footer */
.footer {
    background-color: var(--color-footer-bg);
    color: var(--color-footer-text);
}

/* Back Link */
.back-link a {
    color: var(--color-back-link-text);
}

/* Mobile: Grid-Layouts zurück zu vertikal */
@media (max-width: 768px) {
    body[class*="layout-"] .event-card {
        grid-template-columns: 1fr !important;
    }

    body[class*="layout-"] .event-content {
        order: 1 !important;
    }

    body[class*="layout-"] .event-attachments {
        order: 2 !important;
    }

    body[class*="layout-"] .event-title {
        grid-column: 1 / -1;
    }
}