/**
 * Joomla Template Stylesheet
 * Optimierte & Bereinigte Version
 */

/* 1. GLOBALE VARIABLEN & BASICS */
:root {
    --dark: #211817;
    --gold: #c39a52;
    --cream: #f5efe3;
    --text: #302824;
    --red: #720b0b;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0 !important;
    background: var(--cream) !important;
    color: var(--text) !important;
    font-family: Verdana, "Lucida Sans Unicode", sans-serif;
    line-height: 1.6;
}

.container {
    width: min(100% - 2rem, 1000px);
    margin: auto;
}

/* 2. HEADER & NAVIGATION */
.site-banner {
    width: 100%;
    min-height: 150px;
    background: var(--red) url("../images/banner.gif") no-repeat center top;
    background-size: 1000px 150px;
}

.main-navigation {
    background: var(--dark) !important;
    border-top: 1px solid var(--gold);
    border-bottom: 3px solid var(--gold);
}

.main-navigation ul {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.8rem;
    margin: 0;
    padding: 0.8rem 0;
    list-style: none;
}

.main-navigation a {
    color: #f8ead0 !important;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.main-navigation a:hover,
.main-navigation .current a {
    color: #e2b866 !important;
}

.menu-toggle {
    display: none;
}

/* 3. MAIN CONTENT (INHALT) */
.main-content {
    min-height: 55vh;
    padding: 3rem 0;
    display: flow-root; /* Schließt schwebende Elemente ein */
}

.main-content > .container {
    display: flow-root;
}

.main-content h1,
.main-content h2,
.main-content h3 {
    color: var(--red) !important;
}

/* Links niemals unterstreichen */
a, a:hover, a:focus, a:focus-visible, a:active, a:visited {
    text-decoration: none !important;
}

/* 4. POLICING (SPEZIFISCHE BEREINIGUNGEN) */
.com-contact__miscinfo h3,
.com-contact__miscinfo .jicons-text {
    display: none;
}

/* Allgemeine Bildeinstellungen */
.main-content img {
    max-width: 100%;
    height: auto;
}

/* Links ausgerichtetes Bild */
.main-content img[style*="float: left"],
.main-content img[style*="float:left"],
.main-content img.align-left,
.main-content img.float-start,
.main-content .float-start img {
    margin-left: 0;
    margin-right: 15px;
    max-width: calc(100% - 15px);
}

/* Rechts ausgerichtetes Bild */
.main-content img[style*="float: right"],
.main-content img[style*="float:right"],
.main-content img.align-right,
.main-content img.float-end,
.main-content .float-end img {
    margin-left: 15px;
    margin-right: 0;
    max-width: calc(100% - 15px);
}

/* 5. FOOTER */
.site-footer {
    clear: both;
    padding: 2rem 0;
    background: var(--dark) !important;
    color: #f8ead0 !important;
    text-align: center;
}

/* 6. ACCESSIBILITY (BARRIEREFREIHEIT) */
.skip-link {
    position: absolute;
    left: -9999px;
}

.skip-link:focus {
    position: static;
    display: inline-block;
    padding: .5rem;
    background: #000;
    color: #fff;
}

/* 7. RESPONSIVE DESIGN (MEDIA QUERIES) */
@media (max-width: 1000px) {
    .site-banner {
        min-height: 15vw;
        background-size: 100% auto;
    }
}

@media (max-width: 700px) {
    .menu-toggle {
        display: block;
        margin: .75rem auto;
        padding: .5rem 1rem;
        background: transparent;
        border: 1px solid var(--gold);
        color: #f8ead0;
    }
    .main-navigation ul {
        display: block;
        padding: .5rem 0;
    }
    .main-navigation li {
        text-align: center;
        padding: .35rem;
    }
    .main-navigation #main-menu {
        display: none;
    }
    .main-navigation #main-menu.is-open {
        display: block;
    }
}

@media (max-width: 600px) {
    .site-banner {
        min-height: 90px;
        background-size: auto 90px;
        background-position: center center;
    }
}

/* 8. ERWEITERUNGEN: EVENTS BOOKING KALENDER */
.eb-calendar-navigation,
.eb-calendar-navigation::before,
.eb-calendar-nav a,
.fa-angle-double-left::before,
.fa-angle-double-right::before {
    color: var(--red) !important;
}

/* Hover-Effekt */
.eb-calendar-nav a:hover .eb-calendar-navigation,
.eb-calendar-nav a:hover .eb-calendar-navigation::before,
.fa-angle-double-left:hover::before,
.fa-angle-double-right:hover::before {
    color: var(--gold) !important;
}