html.dark {
    /* Dark Mode (Default) */
    --color-bg: #0A0A0A;
    --color-card-bg-solid: #141414;
    --color-card-bg-transparent: rgba(20, 20, 20, 0.95);
    --color-text: #F9F6EE;
    --color-accent: #FFC107;
    --color-accent-hover: #c72020;
    --color-stripe: rgba(255, 193, 7, 0.08);
    --glow-color: rgba(255, 193, 7, 0.4);
}

html.light {
    /* Light Mode */
    --color-bg: #F9F6EE; /* Cremefarben als Hintergrund */
    --color-card-bg-solid: #FFFFFF;
    --color-card-bg-transparent: rgba(255, 255, 255, 0.85);
    --color-text: #1f2937; /* Dunkelgrau */
    --color-accent: #c72020; /* Dunkleres Rot */
    --color-accent-hover: #FFC107;
    --color-stripe: rgba(199, 32, 32, 0.08);
    --glow-color: rgba(199, 32, 32, 0.4);
}

.subtle-glow {
    box-shadow: 0 0 20px var(--glow-color);
    transition: box-shadow 0.3s ease;
}

.content-container {
    position: relative;
    z-index: 10;
}

body {
    background-color: var(--color-bg);
    background-image: repeating-linear-gradient(
        42deg,
        var(--color-stripe),
        var(--color-stripe) 10px,
        transparent 10px,
        transparent 20px
    );
    color: var(--color-text);
}
.card {
    background-color: var(--color-card-bg-transparent);
    border-color: transparent;
}
.card:hover {
    border-color: var(--color-accent);
}
.title {
    color: var(--color-text);
}
.footer {
    color: var(--color-text);
    opacity: 0.6;
}

/* Page-specific styles */

/* index.html */
.date {
    color: var(--color-accent);
}
.location {
    color: var(--color-text);
}
.location:hover {
    color: var(--color-accent);
}
.title-impact {
    font-size: 5rem;
    line-height: 0.9;
    font-family: 'Montserrat', sans-serif;
}
@media (min-width: 768px) {
    .title-impact {
        font-size: 7rem;
    }
}
.location-icon {
     display: inline-block;
     vertical-align: top;
     margin-right: 0.5rem;
}

/* impressum.html & datenschutz.html */
.prose-custom {
    color: var(--color-text);
}
.prose-custom h2 {
    color: var(--color-accent);
    font-family: 'Montserrat', sans-serif;
}
.prose-custom a {
    color: var(--color-accent);
}
.prose-custom a:hover {
    color: var(--color-accent-hover);
}

html.dark .club-logo {
    background-color: white;
    padding: 0.25rem;
    border-radius: 0.25rem;
}