/* =================================
   BRÜCKENHOF PREMIUM DESIGN
================================= */

* {
    box-sizing:border-box;
}

body {
    margin:0;
    font-family:'Poppins', sans-serif;
    background:#fdfcf9;
    color:#333;
}

/* ================= HEADER ================= */

.main-header {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:18px 70px 14px;
    background:white;
    box-shadow:0 2px 15px rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.logo-area {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-bottom:8px;
}

.logo {
    height:65px;
}

.logo-text .brand {
    font-family:'Playfair Display', serif;
    font-size:22px;
    font-weight:700;
}

.logo-text .subtitle {
    font-size:12px;
    letter-spacing:1px;
    color:#777;
}

/* Navigation mit Gold-Hover */

.main-nav a {
	
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
    margin:0 14px;
    text-decoration:none;
    color:#444;
    font-weight:500;
    position:relative;
    transition:all .3s ease;
}

.main-nav a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:0%;
    height:2px;
    background:#c89b3c;
    transition:width .3s ease;
}

.main-nav a:hover {
    color:#c89b3c;
}

.main-nav a:hover::after {
    width:100%;
}

/* ================= SLIDESHOW / HERO ================= */

.hero-slideshow {
    display:flex;
    justify-content:center;
    padding:25px 0;
    position:relative;
    overflow:hidden;
}

.slideshow-wrapper {
    width:1200px;
    max-width:95%;
    height:400px;
    position:relative;
    overflow:hidden;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,0.15);
}

/* Logo im Banner – zentriert oben */

.hero-logo-overlay {
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);
    z-index:20;
    pointer-events:none;
}

.hero-logo-overlay img {
    height:120px;
    max-width:80%;
    filter:drop-shadow(0 10px 25px rgba(0,0,0,0.5));
}

/* Slides */

.slide {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity 1s ease;
}

.slide.active {
    opacity:1;
    box-shadow:0 20px 60px rgba(0,0,0,0.25);
}

/* ================= BUTTON: TISCHRESERVATION (oben) ================= */

.reservation-section {
    text-align:center;
    padding:40px 15px 20px;
}

.reservation-button {
    background:#c89b3c;
    color:white;
    border:none;
    padding:16px 45px;
    border-radius:50px;
    font-size:16px;
    cursor:pointer;
    box-shadow:0 8px 25px rgba(0,0,0,0.15);
    transition:.3s;
}

.reservation-button:hover {
    transform:translateY(-3px);
}

.reservation-text {
    margin-top:10px;
}

/* ================= BUFFET ================= */

.buffet-section {
    padding:60px 10%;
    background:white;
}

.buffet-section h2 {
    text-align:center;
    font-family:'Playfair Display', serif;
    font-size:32px;
}

.buffet-text {
    text-align:center;
    margin-bottom:30px;
    color:#555;
}

.buffet-gallery {
    display:flex;
    flex-direction:column;
    gap:20px;
}

.buffet-main img {
    width:100%;
    max-height:450px;
    object-fit:cover;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,0.12);
}

.buffet-thumbs {
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}

.buffet-thumb {
    width:160px;
    height:110px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
}

.buffet-thumb:hover {
    transform:scale(1.05);
    box-shadow:0 8px 20px rgba(0,0,0,0.25);
}

/* ================= EVENTS / SAAL ================= */

/* ================= VERANSTALTUNGEN ================= */

<section class="events-section" id="events">
    <h2>Veranstaltungen & Saal</h2>
    <div class="events-underline"></div>

    <?php
    // Veranstaltungs-/Saal-Bilder laden
    $eventImages = $pdo->query("SELECT * FROM event_images ORDER BY id ASC")->fetchAll();
    ?>

    <div class="events-image-wrapper">
        <?php if (!empty($eventImages)): ?>
            <img id="events-main-image"
                 src="<?= htmlspecialchars($eventImages[0]['image']) ?>"
                 alt="Veranstaltungssaal"
                 class="events-main-image">
        <?php else: ?>
            <img src="/assets/saal.jpg"
                 alt="Veranstaltungssaal"
                 class="events-main-image">
        <?php endif; ?>

        <div class="events-overlay">
            <div class="events-overlay-title">Saal für bis zu 100 Personen</div>
            <div class="events-overlay-sub">
                Selbstbedienungsbuffet · Musikanlage · Multimedia
            </div>
        </div>
    </div>

    <?php if (!empty($eventImages)): ?>
        <div class="events-thumbs">
            <?php foreach ($eventImages as $img): ?>
                <img src="<?= htmlspecialchars($img['image']) ?>"
                     data-large="<?= htmlspecialchars($img['image']) ?>"
                     class="events-thumb"
                     alt="Veranstaltungsbild">
            <?php endforeach; ?>
        </div>
    <?php endif; ?>

    <div class="events-text-center">
        <p class="events-lead">
            <strong>Familienfeiern, Firmenanlässe, Vereinsessen und Geburtstage</strong> –
            unser Saal bietet bis zu 100 Personen Platz und ist der ideale Rahmen
            für besondere Momente.
        </p>
        <p>
            Der Raum ist mit Musikanlage und Multimedia ausgestattet.
            Veranstaltungen werden als Selbstbedienungsbuffet durchgeführt,
            warme Haltegeräte sind vorhanden.
        </p>
        <p>
            Für Anfragen erreichen Sie uns über das Kontaktformular,
            per E-Mail an <strong>info@brückenhof.ch</strong>
            oder telefonisch unter <strong>027 946 24 92</strong>.
        </p>

        <button class="events-button" onclick="window.location.href='/kontakt.php'">
            Jetzt Event anfragen
        </button>
    </div>
</section>
/* ================= MENÜ ================= */

.menu-section {
    padding:70px 8%;
    background:#fdfcf9;
}

.menu-section h2 {
    text-align:center;
    font-family:'Playfair Display', serif;
    font-size:36px;
    margin-bottom:60px;
}

.menu-category {
    font-size:24px;
    margin-top:60px;
    margin-bottom:30px;
    padding-bottom:10px;
    border-bottom:2px solid #e7d9b9;
    font-family:'Playfair Display', serif;
}

.menu-category-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px 45px;
}

.menu-card {
    display:flex;
    gap:20px;
    align-items:flex-start;
    background:rgba(255,255,255,0.9);
    border-radius:18px;
    padding:25px;
    box-shadow:0 10px 35px rgba(0,0,0,0.06);
    border-bottom:1px solid #e7d9b9;
}

.menu-image-wrapper {
    width:400px;
    height:250px;
    flex-shrink:0;
    position:relative;
}

.menu-image {
    width:100%;
    height:100%;
    object-fit:contain;
    transition:.3s;
}

.menu-image-wrapper:hover .menu-image {
    transform:scale(1.8);
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(1.8);
    z-index:20;
    background:white;
    box-shadow:0 15px 45px rgba(0,0,0,0.4);
    border-radius:14px;
}

.menu-info {
    flex:1;
}

.menu-title-price {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

.menu-title-price h4 {
    margin:0;
    font-size:18px;
}

.price {
    font-weight:700;
    font-size:18px;
    color:#c89b3c;
}

.menu-desc {
    margin-top:10px;
    font-size:15px;
    line-height:1.6;
    color:#555;
}

/* ================= MAP ================= */

.map-section {
    padding:60px 10%;
    text-align:center;
    background:white;
}

.map-wrapper {
    display:flex;
    justify-content:center;
}

/* ================= RESERVIERUNGS-FORMULAR (unten) ================= */

.reservation-form-section {
    padding:70px 10%;
    background:#fdfcf9;
    text-align:center;
}

.reservation-form-section h2 {
    font-family:'Playfair Display', serif;
    font-size:32px;
    margin-bottom:8px;
}

.reservation-form-section p {
    margin-bottom:35px;
    color:#666;
}

.reservation-form {
    max-width:650px;
    margin:0 auto;
    background:white;
    border-radius:18px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,0.08);
    display:flex;
    flex-direction:column;
    gap:14px;
    text-align:left;
}

.reservation-form label {
    font-size:14px;
    font-weight:500;
    margin-bottom:4px;
}

.reservation-form input,
.reservation-form textarea {
    width:100%;
    padding:12px;
    border-radius:8px;
    border:1px solid #ddd;
    font-size:14px;
    transition:all .2s ease;
}

.reservation-form input:focus,
.reservation-form textarea:focus {
    border-color:#c89b3c;
    outline:none;
    box-shadow:0 0 0 2px rgba(200,155,60,0.15);
}

.reservation-form textarea {
    min-height:100px;
    resize:vertical;
}

.reservation-form .form-row {
    display:flex;
    gap:15px;
}

.reservation-form .form-row > div {
    flex:1;
}

.reservation-form button {
    margin-top:10px;
    background:#c89b3c;
    color:white;
    border:none;
    padding:12px 30px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    transition:.3s;
}

.reservation-form button:hover {
    transform:translateY(-2px);
    box-shadow:0 10px 25px rgba(0,0,0,0.15);
}

/* ================= KONTAKTSEITE ================= */

.contact-page {
    padding:60px 10%;
}

.contact-page h1 {
    font-family:'Playfair Display', serif;
    font-size:32px;
    margin-bottom:10px;
}

.contact-layout {
    display:flex;
    flex-wrap:wrap;
    gap:30px;
    margin-top:20px;
}

.contact-layout > div {
    flex:1;
    min-width:260px;
}

.contact-form {
    display:flex;
    flex-direction:column;
    gap:8px;
}

.contact-form input,
.contact-form textarea {
    padding:8px;
    border-radius:6px;
    border:1px solid #ccc;
    font-size:14px;
}

.contact-form textarea {
    min-height:90px;
}

.contact-form button {
    margin-top:5px;
    background:#c89b3c;
    border:none;
    color:white;
    padding:8px 20px;
    border-radius:999px;
    cursor:pointer;
    font-size:14px;
}

/* ================= FOOTER ================= */

.main-footer {
    background:#1f1d18;
    color:#eee;
    padding:60px 10% 30px;
}

.footer-columns {
    display:flex;
    flex-wrap:wrap;
    gap:40px;
}

.footer-column {
    flex:1;
    min-width:220px;
}

.footer-column h3 {
    color:#c89b3c;
    font-family:'Playfair Display', serif;
}

.footer-bottom {
    text-align:center;
    margin-top:40px;
    font-size:13px;
    color:#aaa;
}

/* ================= ADMIN-BEREICH ================= */

.admin-body {
    background:#f4f4f4;
    margin:0;
}

.admin-header {
    background:#2c2c2c;
    color:white;
    padding:15px 25px;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.admin-header nav a {
    color:#c89b3c;
    margin-left:20px;
    text-decoration:none;
}

.admin-main {
    padding:30px;
}

.admin-menu li {
    margin-bottom:8px;
}

.admin-form,
.admin-form-inline {
    margin-bottom:20px;
}

.admin-form input,
.admin-form textarea,
.admin-form select {
    width:100%;
    padding:8px;
    margin-bottom:10px;
}

.admin-form-inline input[type="file"],
.admin-form-inline input[type="text"],
.admin-form-inline input[type="number"] {
    margin-right:10px;
}

.admin-table {
    width:100%;
    border-collapse:collapse;
}

.admin-table th,
.admin-table td {
    border:1px solid #ddd;
    padding:6px 8px;
}

/* Admin Login */

.admin-login-body {
    display:flex;
    justify-content:center;
    align-items:center;
    height:100vh;
    background:#f0f2f5;
    margin:0;
}

.admin-login-box {
    background:white;
    padding:30px;
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
    width:320px;
}

.admin-login-box h1 {
    margin-top:0;
    margin-bottom:15px;
}

.admin-login-box input {
    width:100%;
    padding:8px;
    margin-bottom:10px;
    border-radius:6px;
    border:1px solid #ccc;
}

.admin-login-box button {
    width:100%;
    padding:10px;
    border:none;
    background:#c89b3c;
    color:white;
    border-radius:999px;
    cursor:pointer;
}

/* ================= RESPONSIVE ================= */

@media (max-width:1100px) {

    .main-header {
        padding:12px 20px;
        flex-direction:column;
        align-items:flex-start;
    }

    .main-nav {
        margin-top:10px;
    }

    .menu-category-grid {
        grid-template-columns:1fr;
    }

    .menu-card {
        flex-direction:column;
    }

    .menu-image-wrapper {
        width:100%;
        height:auto;
    }

    .events-image-parallax img {
        width:100%;
    }

    .events-overlay-title {
        font-size:22px;
    }

    .events-overlay-sub {
        font-size:14px;
    }

    .reservation-form .form-row {
        flex-direction:column;
    }

    .contact-layout {
        flex-direction:column;
    }

    .hero-logo-overlay img {
        height:90px;
    }
}
/* ===== HEADER FIX: LOGO ZENTRIEREN ===== */

.main-header {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    padding:18px 20px 12px;
}

.logo-area {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin-bottom:8px;
}

.logo {
    height:90px; /* etwas größer */
    display:block;
}

.logo-text .brand {
    text-align:center;
}

.logo-text .subtitle {
    text-align:center;
}

.main-nav {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:14px;
    margin-top:4px;
}
/* ===== NEUER HEADER MIT GOLD-HOVER ===== */

.main-header {
    background:white;
    box-shadow:0 2px 15px rgba(0,0,0,0.08);
    position:sticky;
    top:0;
    z-index:1000;
}

.header-inner {
    max-width:1200px;
    margin:0 auto;
    padding:16px 20px 10px;
    display:flex;
    flex-direction:column;
    align-items:center;
}

/* Logo zentriert */

.logo-block {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    margin-bottom:8px;
}

.logo {
    height:100px;
    display:block;
    margin-bottom:4px;
}

.logo-text .brand {
    font-family:'Playfair Display', serif;
    font-size:22px;
    font-weight:700;
}

.logo-text .subtitle {
    font-size:12px;
    letter-spacing:1px;
    color:#777;
}

/* Navigation: links / rechts */

.main-nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:900px;
    margin-top:6px;
}

.nav-left,
.nav-right {
    display:flex;
    gap:18px;
}

/* Gold-Hover wie früher */

.main-nav a {
    text-decoration:none;
    color:#444;
    font-weight:500;
    position:relative;
    padding-bottom:4px;
    transition:color .3s ease;
}

.main-nav a::after {
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:0%;
    height:2px;
    background:#c89b3c;
    transition:width .3s ease;
}

.main-nav a:hover {
    color:#c89b3c;
}

.main-nav a:hover::after {
    width:100%;
}

/* Mobile: Menü untereinander */

@media (max-width:800px) {
    .main-nav {
        flex-direction:column;
        gap:6px;
    }

    .nav-left,
    .nav-right {
        justify-content:center;
    }
}
/* ===== PREMIUM FOOTER STYLE ===== */

.main-footer {
    background:#1f1d18;
    color:#eee;
    padding:60px 10% 30px;
}

.footer-columns {
    display:flex;
    flex-wrap:wrap;
    gap:50px;
}

.footer-column {
    flex:1;
    min-width:260px;
}

.footer-column h3 {
    font-family:'Playfair Display', serif;
    font-size:22px;
    color:#c89b3c;
    margin-bottom:18px;
    position:relative;
}

.footer-column h3::after {
    content:"";
    position:absolute;
    left:0;
    bottom:-6px;
    width:60px;
    height:2px;
    background:#c89b3c;
}

/* Sub-Blöcke */

.footer-subblock {
    margin-bottom:28px;
    padding-bottom:18px;
    border-bottom:1px solid rgba(255,255,255,0.08);
}

/* Goldene Unterüberschrift */

.footer-subtitle {
    font-size:15px;
    font-weight:600;
    color:#c89b3c;
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:6px;
}

.gold-icon {
    font-size:17px;
}

/* Contact form */

.footer-column .contact-form input,
.footer-column .contact-form textarea {
    background:#fff;
    border:1px solid #aaa;
}

.footer-bottom {
    margin-top:40px;
    text-align:center;
    font-size:13px;
    color:#aaa;
}

/* Responsive */

@media (max-width:900px) {
    .footer-columns {
        flex-direction:column;
    }
}
/* Erfolgs- / Fehlerboxen */

.reservation-success,
.contact-success {
    max-width:650px;
    margin:30px auto 0;
    background:#e5f8ea;
    border-left:4px solid #3fa45b;
    padding:12px 18px;
    border-radius:8px;
    color:#234b2e;
    font-size:14px;
}

.reservation-error,
.contact-error {
    max-width:650px;
    margin:30px auto 0;
    background:#fde9e7;
    border-left:4px solid #d64545;
    padding:12px 18px;
    border-radius:8px;
    color:#5b1717;
    font-size:14px;
}
/* ================= VERANSTALTUNGEN & SAAL ================= */

.events-section {
    padding:80px 10%;
    text-align:center;
    background:white;
}

.events-section h2 {
    font-family:'Playfair Display', serif;
    font-size:34px;
    margin-bottom:10px;
}

.events-underline {
    width:80px;
    height:3px;
    background:#c89b3c;
    margin:0 auto 35px;
    border-radius:999px;
}

/* Großes Saalbild */

.events-image-parallax{
    position:relative;
    width:100%;
    max-width:900px;
    height:420px;
    margin:0 auto 25px auto;
    overflow:hidden;
    border-radius:20px;
}

.events-main-image {
    width:900px;
    max-width:95%;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
    object-fit:cover;
}

/* Overlay */

.events-overlay {
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    color:white;
    text-shadow:0 3px 10px rgba(0,0,0,0.8);
    padding:20px;
}

.events-overlay-title {
    font-family:'Playfair Display', serif;
    font-size:30px;
    font-weight:700;
    margin-bottom:8px;
}

.events-overlay-sub {
    font-size:16px;
    font-weight:500;
}

/* Thumbnails unter dem Saalbild */

.events-thumbs {
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:10px;
    margin-bottom:30px;
}

.events-thumb {
    width:150px;
    height:100px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:.3s;
    box-shadow:0 5px 15px rgba(0,0,0,0.25);
}

.events-thumb:hover {
    transform:scale(1.05);
}

/* Text darunter */

.events-text-center {
    max-width:900px;
    margin:0 auto;
    font-size:16px;
    line-height:1.8;
    color:#555;
    text-align:center;
}

.events-lead {
    font-size:18px;
    margin-bottom:15px;
}

.events-button {
    margin-top:20px;
    background:#c89b3c;
    color:white;
    border:none;
    padding:12px 30px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    box-shadow:0 10px 25px rgba(0,0,0,0.18);
    transition:.3s;
}

.events-button:hover {
    transform:translateY(-2px);
}
/* ===== FIX: EVENT-BILD ÜBERSCHNEIDET THUMBNAILS NICHT ===== */

.events-image-parallax {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 14px;      /* kleiner Abstand zum Thumb-Bereich */
}

/* Container mit definierter Höhe */
.events-main-image {
    width: 900px;
    max-width: 95%;
    height: 420px;            /* feste Höhe damit nix "nach unten" wächst */
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.18);
    object-fit: cover;
    display: block;
}

/* Overlay soll exakt im Bild bleiben */
.events-overlay {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 95%);
    height: 420px;            /* gleiche Höhe wie Bild */
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: white;
    text-shadow: 0 3px 10px rgba(0,0,0,0.8);
    padding: 20px;
}

/* Thumbnails sauber abgesetzt */
.events-thumbs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0;            /* wichtig */
    padding-top: 6px;         /* kleiner sauberer Abstand */
    margin-bottom: 30px;
}

/* Mobile: Höhe automatisch */
@media (max-width: 900px) {
    .events-main-image {
        height: 320px;
    }
    .events-overlay {
        height: 320px;
    }
}
/* =========================
   VERANSTALTUNGEN / SAAL
========================= */

.events-section{
    padding:80px 10%;
    text-align:center;
    background:#fff;
}

/* Überschrift */

.events-section h2{
    font-family:'Playfair Display',serif;
    font-size:34px;
    margin-bottom:10px;
}

.events-underline{
    width:80px;
    height:3px;
    background:#c89b3c;
    margin:0 auto 35px;
    border-radius:999px;
}


/* ===== GROSSES SAALBILD ===== */

.events-image-parallax{
    position:relative;
    width:100%;
    max-width:900px;
    height:420px;
    margin:0 auto 25px auto;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
}

.events-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}


/* Overlay Text */

.events-overlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    text-shadow:0 3px 10px rgba(0,0,0,0.8);
    padding:20px;
}

.events-overlay-title{
    font-family:'Playfair Display',serif;
    font-size:30px;
    font-weight:700;
    margin-bottom:6px;
}

.events-overlay-sub{
    font-size:16px;
}


/* ===== THUMBNAILS ===== */

.events-thumbs{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin-top:15px;
    margin-bottom:40px;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

.events-thumb{
    width:140px;
    height:90px;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.3s;
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
}

.events-thumb:hover{
    transform:scale(1.06);
}


/* ===== TEXT ===== */

.events-text-center{
    max-width:900px;
    margin:0 auto;
    font-size:16px;
    line-height:1.8;
    color:#555;
}

.events-lead{
    font-size:18px;
    margin-bottom:15px;
}


/* ===== BUTTON ===== */

.events-button{
    margin-top:20px;
    background:#c89b3c;
    color:white;
    border:none;
    padding:12px 30px;
    border-radius:999px;
    cursor:pointer;
    font-size:15px;
    font-weight:500;
    box-shadow:0 10px 25px rgba(0,0,0,0.18);
    transition:0.3s;
}

.events-button:hover{
    transform:translateY(-2px);
}
/* ===== EVENTS FIX (kein Überdecken) ===== */

.events-image-parallax{
    position:relative;
    width:100%;
    max-width:900px;
    height:420px;
    margin:0 auto 18px auto;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
}

/* Parallax bewegt nur dieses innere Element */
.events-image-inner{
    width:100%;
    height:100%;
    will-change:transform;
}

.events-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    /* sanfter Wechsel */
    opacity:1;
    transition:opacity .35s ease;
}

.events-main-image.is-fading{
    opacity:0.25;
}

/* Thumbnails sind sicher unterhalb und "oben" */
.events-thumbs{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
    margin:14px auto 40px auto;
    max-width:900px;
}
/* ===== Lightbox ===== */

#bh-lightbox{
    position:fixed;
    inset:0;
    display:none;
    z-index:9999;
}

#bh-lightbox.open{
    display:block;
}

.bh-lightbox-backdrop{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,0.75);
}

.bh-lightbox-content{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
}

.bh-lightbox-img{
    max-width:min(1100px, 95vw);
    max-height:90vh;
    border-radius:14px;
    box-shadow:0 25px 80px rgba(0,0,0,0.55);
    background:#fff;
}

.bh-lightbox-close{
    position:absolute;
    top:18px;
    right:22px;
    width:44px;
    height:44px;
    border:none;
    border-radius:999px;
    cursor:pointer;
    font-size:28px;
    line-height:1;
    background:rgba(255,255,255,0.14);
    color:#fff;
}
.bh-lightbox-close:hover{
    background:rgba(255,255,255,0.24);
}
/* ===== EVENTS: Hauptbild gross wie Buffet + Thumbnail-Scroller ===== */

.events-image-parallax{
    position:relative;
    width:100%;
    max-width:1200px;          /* grösser wie vorher */
    height:460px;              /* grosses Bild */
    margin:0 auto 18px auto;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
    background:#000;
}

.events-image-inner{
    width:100%;
    height:100%;
    will-change:transform;
}

.events-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:1;
    transition:opacity .35s ease;
}

.events-main-image.is-fading{ opacity:0.25; }

/* Overlay bleibt im Bild */
.events-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-shadow:0 3px 10px rgba(0,0,0,0.8);
    padding:20px;
    pointer-events:none;
}

/* ✅ Thumbnails werden EINER REIHE – horizontal scroll */
.events-thumbs{
    max-width:1200px;
    margin:14px auto 40px;
    padding:10px 6px;
    display:flex;
    gap:12px;
    overflow-x:auto;           /* horizontal scroll */
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x mandatory;
    background:rgba(0,0,0,0.02);
    border-radius:14px;
}

.events-thumb{
    width:140px;
    height:90px;
    flex:0 0 auto;             /* wichtig: NICHT umbrechen */
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.25s;
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
    scroll-snap-align:start;
}

.events-thumb:hover{ transform:scale(1.06); }

/* Mobile */
@media (max-width:900px){
    .events-image-parallax{ height:340px; }
    .events-thumb{ width:120px; height:80px; }
}
/* ===== EVENTS: grosses Bild + Thumbnail-Scroller ===== */

.events-image-parallax{
    position:relative;
    width:100%;
    max-width:1200px;
    height:460px;
    margin:0 auto 18px auto;
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.18);
    background:#000;
}

.events-image-inner{
    width:100%;
    height:100%;
    will-change:transform;
}

.events-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    opacity:1;
    transition:opacity .35s ease;
}

.events-main-image.is-fading{ opacity:0.25; }

.events-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:#fff;
    text-shadow:0 3px 10px rgba(0,0,0,0.8);
    padding:20px;
    pointer-events:none;
}

/* ✅ eine Reihe: nie mehr überdecken */
.events-thumbs{
    max-width:1200px;
    margin:14px auto 40px;
    padding:10px 6px;
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scroll-snap-type:x mandatory;
    background:rgba(0,0,0,0.02);
    border-radius:14px;
}

.events-thumb{
    width:140px;
    height:90px;
    flex:0 0 auto;
    object-fit:cover;
    border-radius:10px;
    cursor:pointer;
    transition:0.25s;
    box-shadow:0 6px 14px rgba(0,0,0,0.25);
    scroll-snap-align:start;
}

.events-thumb:hover{ transform:scale(1.06); }

@media (max-width:900px){
    .events-image-parallax{ height:340px; }
    .events-thumb{ width:120px; height:80px; }
}
/* ===== FORCE FIX: EVENTS HAUPTBILD IMMER FULL COVER ===== */
.events-hero{
  max-width:1200px !important;
  height:460px !important;
  background:#000 !important;
}

#events-main-image{
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center !important;
  display:block !important;
}
/* ===== EVENTS TEXT ZENTRIERUNG FIX ===== */

.events-hero-overlay{
  position:absolute !important;
  top:0 !important;
  left:0 !important;
  width:100% !important;
  height:100% !important;

  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;

  text-align:center !important;
  padding:20px !important;

  color:#ffffff !important;
  text-shadow:0 4px 14px rgba(0,0,0,0.8) !important;
  pointer-events:none !important;
}

.events-overlay-title{
  font-family:'Playfair Display', serif !important;
  font-size:32px !important;
  font-weight:700 !important;
  margin-bottom:8px !important;
}

.events-overlay-sub{
  font-size:18px !important;
  letter-spacing:0.5px !important;
}
/* ===== EVENTS HAUPTBILD ZENTRIEREN ===== */

.events-hero{
    width:100%;
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

#events-main-image{
    display:block;
    margin-left:auto;
    margin-right:auto;
}
/* ===== MOBILE: Hauptbilder nicht schneiden (contain) ===== */
@media (max-width: 700px){

  /* Buffet Hauptbild */
  #buffet-main-image{
    object-fit: contain !important;
    background: #000 !important;
  }

  /* Events Hauptbild */
  #events-main-image{
    object-fit: contain !important;
    background: #000 !important;
  }

  /* Optional: Höhe etwas reduzieren auf Mobile */
  .events-hero{
    height: 320px !important;
  }

  .buffet-main{
    height: 320px !important;
  }
}