/* 1. Schriftarten (Google Fonts) laden */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&family=Playfair+Display:ital,wght@0,400;0,600;1,400&display=swap');

/* 2. Hintergrund und allgemeine Text-Schriftart anpassen */
body, .sb-default-layout {
    background-color: #F9F7F2 !important; /* Cremefarbener Hintergrund */
    font-family: 'Inter', sans-serif !important;
    color: #3C332D !important;
}

/* 3. Überschriften anpassen (wie auf der Landingpage) */
h1, h2, h3, h4, h5, h6, #events h3 {
    font-family: 'Playfair Display', serif !important;
    color: #3C332D !important;
    font-weight: 400 !important;
}

/* 4. Buttons im Stil der Landingpage (Dunkelbraun & abgerundet) */
button, .btn, .sb-btn, .booking-btn, .btn-primary {
    background-color: #3C332D !important;
    color: #ffffff !important;
    border-radius: 50px !important; /* Macht den Button komplett rund */
    border: none !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    transition: all 0.3s ease !important;
}

/* 5. Button Hover-Effekt (Terracotta-Farbe, wenn man mit der Maus drüber geht) */
button:hover, .btn:hover, .sb-btn:hover, .booking-btn:hover, .btn-primary:hover {
    background-color: #BA7D65 !important;
    color: #ffffff !important;
}

/* 6. Dauer und kleine Texte anpassen (bezugnehmend auf dein erstes Bild) */
#events p.duration, #events div.duration {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9em !important;
    color: #666666 !important;
}