body.theme-oktoberfeest {
    --accent-color: #ed033f;
    --oktoberfeest-yellow: #f5c842;
    --oktoberfeest-blue: #277fc2;
    --dark-blue: #064b87;
    --not-black: #061e3b;
    --event-glow: rgba(245, 200, 66, 0.14);
    --event-line: rgba(245, 200, 66, 0.6);
    --event-surface: #0a3158;
    --oktoberfeest-stripes: repeating-linear-gradient(135deg, var(--oktoberfeest-blue) 0 4px, #ffffff 4px 8px);
}

.theme-oktoberfeest .theme-decor::before {
    content: '';
    position: absolute;
    inset: 0 0 auto;
    height: min(72rem, 100%);
    background: image-set(url('background.avif') type('image/avif'), url('background.jpg') type('image/jpeg')) center 42% / cover no-repeat;
    filter: saturate(0.95) contrast(1.02);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 58%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.7) 58%, transparent 100%);
    opacity: 0.48;
}

.theme-oktoberfeest .theme-decor::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 8% 5%, rgba(245, 200, 66, 0.48), transparent 36rem),
        radial-gradient(ellipse at 96% 24%, rgba(245, 200, 66, 0.24), transparent 30rem),
        radial-gradient(ellipse at 50% 32%, rgba(0, 13, 27, 0.6), transparent 72%),
        linear-gradient(to bottom, rgba(0, 13, 27, 0.08), var(--not-black) 80%);
}

.theme-oktoberfeest .event-marker {
    padding: 0.8rem 1.4rem;
    border: 3px solid transparent;
    border-radius: 0.5rem;
    background:
        linear-gradient(var(--event-surface), var(--event-surface)) padding-box,
        var(--oktoberfeest-stripes) border-box;
    box-shadow: none;
}

.theme-oktoberfeest .feed-item {
    border: 3px solid transparent;
    background:
        linear-gradient(var(--event-surface), var(--event-surface)) padding-box,
        var(--oktoberfeest-stripes) border-box;
}

.theme-oktoberfeest .feed-item.active .feed-title {
    background: linear-gradient(var(--accent-color), var(--accent-color)) center bottom / 3rem 3px no-repeat;
}

.theme-oktoberfeest .event-marker-name {
    color: var(--oktoberfeest-yellow);
}

.theme-oktoberfeest .about-column h3::after {
    background: var(--oktoberfeest-stripes);
}

.theme-oktoberfeest .content-section {
    border-left-color: var(--oktoberfeest-yellow);
    background: rgba(5, 30, 58, 0.96);
}