/* Responsive CSS for BFR Wisskirchen */

/* CLS-Fix: Platz für Header reservieren, bevor includes.js ihn lädt */
#header {
    min-height: 230px;
}

/* Desktop layout fix: override mobile CSS that sets #main/#right to full width
   without media query. This loads last, so it wins on specificity tie. */
@media (min-width: 993px) {
    /* Only constrain #main when a sidebar is present */
    #container:has(#right) #main {
        width: 730px !important;
        float: left !important;
    }

    #right {
        width: 250px !important;
        float: right !important;
    }
}

/* Desktop: Nav-Hintergrund und vertikale Zentrierung */
#header .mod_navigation {
    background: #c30000;
    height: auto;
    display: flex;
    align-items: center;
}

#header .mod_navigation ul {
    height: auto;
    border: none;
}

#header .mod_navigation ul li,
#header .mod_navigation li.first {
    height: auto;
    padding: 0;
    border: none;
}

#header .mod_navigation a,
#header .mod_navigation span {
    padding: 10px 8px;
}

/* Kfz-Werkstatt: dotted border aus Hauptnav entfernen */
#header .mod_navigation a.kfz,
#header .mod_navigation span.active.kfz {
    border-bottom: none;
}

/* Secondary-Nav-Links in Hauptnav: auf Desktop ausblenden */
#header .mod_navigation li.mobile-secondary {
    display: none;
}

/* Hamburger button - hidden by default on desktop */
#hamburger {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    padding: 5px 10px;
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 100;
    color: #333;
}

/* Mobile styles */
@media (max-width: 992px) {
    /* Mobil: kleinerer Header (nur Logo + Hamburger, Nav eingeklappt) */
    #header {
        min-height: 70px;
    }

    body {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        width: auto !important;
        max-width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    #header .inside {
        margin: 0;
        padding: 0;
    }

    /* Show hamburger button */
    #hamburger {
        display: block;
    }

    /* Hide main navigation by default on mobile */
    #header nav.mod_navigation {
        display: none;
        background-color: #c30000;
        background-image: none;
        height: auto;
        margin: 0;
        padding: 0;
    }

    /* Show nav when toggled */
    #header nav.mod_navigation.nav-open {
        display: block;
    }

    #header nav.mod_navigation ul.level_1 {
        width: auto;
        height: auto;
        border: none;
    }

    #header nav.mod_navigation ul.level_1 li {
        display: block;
        float: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    #header nav.mod_navigation ul.level_1 li:last-child {
        border-bottom: none;
    }

    #header nav.mod_navigation ul.level_1 li a,
    #header nav.mod_navigation ul.level_1 li span.active {
        display: block;
        padding: 12px 20px;
        min-width: 0;
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: normal;
        text-align: left;
        border: none;
    }

    #header nav.mod_navigation ul.level_1 li a:hover,
    #header nav.mod_navigation ul.level_1 li a:focus {
        background-color: rgba(0, 0, 0, 0.15);
        font-weight: normal;
    }

    #header nav.mod_navigation ul.level_1 li span.active {
        font-weight: 600;
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Hide secondary nav on mobile (Links sind in Hauptnav integriert) */
    #header nav.mod_customnav {
        display: none;
    }

    /* Secondary-Nav-Links in Hauptnav anzeigen */
    #header nav.mod_navigation ul.level_1 li.mobile-secondary {
        display: block;
    }


    /* Logo responsive */
    #header #logo_links img {
        max-width: calc(100% - 60px);
        height: auto;
    }

    /* Main content and sidebar: full width, no float */
    #container {
        width: auto !important;
    }

    #main {
        width: auto !important;
        float: none !important;
    }

    #main .inside {
        padding: 0 15px 15px;
    }

    #right {
        width: auto !important;
        float: none !important;
        margin-top: 20px;
    }

    /* Images responsive */
    img {
        max-width: 100%;
        height: auto;
    }

    .image_container img {
        max-width: 100%;
        height: auto;
    }

    /* Float aufheben: Bild über Text statt daneben */
    .ce_text .image_container.float_left,
    .ce_text .image_container.float_right {
        float: none;
        margin: 0 0 10px 0;
    }

    /* Galerie-Übersicht: margin-left für Text zurücksetzen */
    .alben .ce_text {
        margin-left: 0;
    }

    .alben h2,
    .alben p {
        margin-left: 0;
    }

    /* Sidebar: border-left entfernen */
    .adresse,
    .postadresse,
    .open,
    .vcard_rechts {
        border-left: none;
    }

    /* Footer: Background-Image durch Seitenrot ersetzen */
    #footer p {
        background: #c30000;
        margin: 0;
    }

    /* Tables responsive */
    table {
        max-width: 100%;
    }

    /* Kontaktformular: feste Breiten aufheben */
    #kontaktformular {
        padding: 0 !important;
    }

    #kontaktformular .mandatory,
    #kontaktformular input.text,
    #kontaktformular input.captcha,
    #kontaktformular textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    #kontaktformular input.upload {
        max-width: 100%;
    }
}

/* 2-Klick-Lösung: YouTube-Video-Platzhalter */
.yt-consent { cursor: pointer; background: #000; }
.yt-consent-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.yt-consent-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.yt-consent-play { font-size: 4rem; color: #fff; background: rgba(255,0,0,.85); width: 80px; height: 56px; border-radius: 12px; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.yt-consent:hover .yt-consent-play { background: rgba(255,0,0,1); }
.yt-consent-notice { color: #fff; font-size: .8rem; text-align: center; margin-top: 12px; padding: 0 1rem; }
.yt-consent-notice a { color: #fff; text-decoration: underline; }