/* =========================================
   maitre-event.css
   Erweiterung der stylesheet.css für Event-Unterseiten
   (z.B. Silvesterball, Tanz in den Mai)
   ========================================= */

/* 1. Die Event-Subnavigation (Programm, Flair, etc.) */
.event-nav {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 10px 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* 1. Die Event-Subnavigation (Programm, Fancy Vintage, etc.) */
.event-nav {
    display: flex;
    justify-content: space-between; /* Verteilt die Elemente auf die volle Breite */
    align-items: center;
    width: 100%;
    max-width: 926px; /* Exakt gleiche Breite wie das Bild-Banner */
    margin: 10px auto; 
    padding: 0;
}

.event-nav a {
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 0.9rem;
    color: var(--accent-brown);
    text-decoration: none;
    transition: color 0.3s ease;
    cursor: pointer;
}

/* Mouseover / Hover-Effekt */
.event-nav a:hover,
.event-nav a.active-event {
    color: var(--accent-rot);
}

/* Anpassung für Mobile */
@media (max-width: 768px) {
    .event-nav {
        flex-direction: column;
        justify-content: center;
        gap: 15px;
        text-align: center;
    }
}
/* 2. Die großen, klickbaren Event-Blöcke (z.B. Workshop, Promenade) */
.event-block {
    display: block;
    text-align: center;
    text-decoration: none !important;
    color: inherit !important;
    margin-bottom: 40px;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.event-block:hover {
    opacity: 0.8;
    transform: translateY(-2px);
}

/* Hover-Farbe für die Titel innerhalb der Blöcke */
.event-block:hover h3,
.event-block:hover h2 {
    color: var(--accent-rot) !important;
}

/* Die kleinen Wappen / Embleme über den Blöcken */
.event-emblem {
    height: 45px;
    width: auto;
    margin: 0 auto 15px auto;
    display: block;
}

/* Untertitel und Metadaten in den Blöcken */
.subhead {
    font-size: 1.15rem;
    font-family: serif;
    font-style: italic;
    color: var(--accent-brown);
    margin-bottom: 0.5rem;
    margin-top: 0;
}

.event-meta {
    font-size: 0.9rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--accent-brown);
    margin-top: 5px;
}

/* 3. Textformatierungen für Eventseiten */
.content-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8;
    font-size: 1.05rem;
}

/* Aufzählungen mit speziellen "Et"-Zeichen (For Your Delight) */
.delight-list {
    list-style: none;
    padding: 0;
    margin: 0 auto var(--grid-double) auto;
    max-width: 620px;
}

.delight-list li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: var(--grid-half);
    text-align: left;
    line-height: 1.6;
}

.delight-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.2rem;
    width: 1.4rem;
    height: 1.4rem;
    /* Hier kannst du dein gewünschtes Symbol-Bild einfügen. 
       Standardmäßig nehmen wir das Wappen oder ein CSS-Zeichen */
    background-image: url('../images/wappen.webp'); 
    background-size: contain;
    background-repeat: no-repeat;
}

/* 4. Das rotierende Karikaturen-Banner für Silvester */
.event-banner-container {
    display: block;
    position: relative;
    width: 100%;
    max-width: 926px; /* Angepasst an die page-wrapper Breite */
    margin: 0 auto;
    overflow: hidden;
    background-color: var(--bg-base);
}

.event-banner-placeholder {
    display: block;
    width: 100%;
    height: auto;
    visibility: hidden;
}

.event-slideshow-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    z-index: 1;
}

.event-slideshow-img.active {
    opacity: 1;
    z-index: 2;
}

/* Das statische Text-Logo für das Event */
.event-logo-bar {
    display: block;
    width: 100%;
    max-width: 926px;
    margin: 0 auto;
}

.event-logo-bar img {
    width: 100%;
    height: auto;
    display: block;
}

/* Hilfsklassen für Bilder */
.responsive-img {
    max-width: 100%;
    height: auto;
    display: block;
}