/* =========================================
   HS Güssing - user.css (Child Template)
   ========================================= */

/* === CSS VARIABLE OVERRIDE === */
:root {
    --cassiopeia-color-primary: #ffffff;
    --cassiopeia-color-primary-rgb: 255, 255, 255;
}

/* === HEADER === */
.container-header { background-color: #ffffff !important; background-image: none !important; }
header.container-header {
    display: flex !important; flex-wrap: wrap; align-items: stretch;
    justify-content: flex-start !important; padding: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12); width: 100%;
}

/* === TOPBAR === */
.container-topbar, header .container-topbar, .container-header .container-topbar {
    background-color: #dee2e6 !important; width: 100% !important;
    flex: 0 0 100% !important; order: 1; padding: 12px 0;
}
.topbar-inner {
    max-width: 1320px !important; margin: 0 auto !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 20px; padding: 0 15px;
}
.topbar-inner span, .topbar-inner a { color: #333333 !important; font-size: 15px !important; text-decoration: none; }
.topbar-inner i { color: #02978c; margin-right: 3px; font-size: 15px; }
.topbar-inner .topbar-facebook { margin-left: auto; color: #868990 !important; }
.topbar-inner .topbar-facebook i {
    color: #868990 !important; font-size: 1.8rem !important; margin-right: 0 !important;
}

/* === LOGO === */
header > .grid-child:not(.container-nav) {
    order: 2; flex: 0 0 200px !important; display: flex !important;
    align-items: center; padding: 8px 0 8px 0px;
    background-color: #ffffff !important; background-image: none !important;
    margin-left: max(0px, calc((100% - 1320px) / 2)) !important;
}
header > .grid-child:not(.container-nav) img { width: 150px !important; height: auto; }

/* === HAUPTNAVIGATION === */
header > .grid-child.container-nav {
    order: 2; flex: 1 1 0 !important; max-width: 1120px !important;
    display: flex !important; align-items: center;
    justify-content: flex-start !important; padding-left: 0;
    background-color: #ffffff !important; background-image: none !important;
}
.mod-menu.mod-list.nav .nav-item a {
    color: #333333 !important; text-transform: uppercase; letter-spacing: 0.06em;
    font-size: 22px !important; font-weight: 300 !important;
    text-decoration: none !important; padding: 5px 14px; display: block; border: none !important;
}
.mod-menu.mod-list.nav .nav-item.active a, .mod-menu.mod-list.nav .nav-item.current a {
    color: #02978c !important; font-weight: 400 !important; border: none !important;
}

/* === SIDEBAR-LINKS: Spezifizität (0,5,1) überschreibt Nav (0,4,1) === */
.container-sidebar-left .mod-menu.mod-list.nav .nav-item a {
    color: #333333 !important; font-size: 1rem !important; font-weight: 300 !important;
    text-transform: none !important; letter-spacing: normal !important;
    text-decoration: none !important; border: none !important; display: block; padding: 3px 0;
}
.container-sidebar-left .mod-menu.mod-list.nav .nav-item a:hover { color: #888888 !important; }
.container-sidebar-left .mod-menu.mod-list.nav .nav-item.active > a,
.container-sidebar-left .mod-menu.mod-list.nav .nav-item.current > a {
    color: #02978c !important; font-weight: bold !important;
}
.container-sidebar-left .mod-menu__sub .nav-item:not(.active) > a,
.container-sidebar-left .mod-menu__sub .nav-item:not(.current) > a {
    color: #333333 !important; font-weight: 300 !important;
}

/* === BANNER === */
.container-banner.full-width {
    background-color: #f4e049 !important; background-image: none !important;
    padding: 0 !important; width: 100%; line-height: 0;
}
.container-banner .mod-banners, .container-banner .bannergroup {
    max-width: 1320px; height: 500px; overflow: hidden; margin: 0 auto !important; display: block;
}
.container-banner img {
    width: 1320px !important; max-width: 1320px !important; height: 500px !important;
    object-fit: cover; object-position: center top; display: block; margin: 0 auto;
}

/* === MAIN CONTAINERS === */
.container-xxl { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }
.container-component { max-width: 1320px !important; margin-left: auto !important; margin-right: auto !important; }

/* === SIDEBAR CARD === */
.card { border: none !important; background: transparent !important; box-shadow: none !important; }
.card-body { padding: 10px 0 !important; }
.card-header {
    background-color: transparent !important; border: none !important;
    border-bottom: 1px solid #333333 !important; border-radius: 0 !important;
    padding: 0 0 8px 0 !important; font-size: 28px !important;
    font-weight: 300 !important; color: #333333; display: block; width: 100%;
}

/* === H1 === */
h1, .item-page h1, article h1, .com-content-article h1, .page-header h1 {
    font-size: 28px !important; font-weight: 300 !important;
    border-bottom: 1px solid #22262a; padding-bottom: 8px; margin-bottom: 14px;
    display: block; width: 100%;
}

/* === H2 === */
h2.item-title, .item-page h2, article h2, .blog h2, .com-content-article h2, .blog-featured h2 {
    font-size: 28px !important; font-weight: 300 !important;
    border-bottom: 1px solid #22262a; padding-bottom: 8px; margin-bottom: 14px;
    display: block; width: 100%;
}

/* === H3 === */
.item-page h3, article h3, .com-content-article h3 {
    border-bottom: 1px solid #333333; padding-bottom: 8px; margin-bottom: 14px;
    display: block; width: 100%;
}

/* === FOOTER === */
footer.container-footer {
    background-color: #f7f7f7 !important; background-image: none !important; width: 100%; padding: 20px 0;
}
footer.container-footer .grid-child { max-width: 1320px; margin: 0 auto; padding: 0 15px; }
footer.container-footer, footer.container-footer p, footer.container-footer span, footer.container-footer a {
    color: #868990 !important; font-size: 0.88rem;
}

/* === SCROLL TO TOP BUTTON === */
#back-top {
    background-color: #02978c !important; border-radius: 50% !important;
    width: 44px !important; height: 44px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important; color: #ffffff !important;
    text-decoration: none !important; border: none !important;
}
#back-top .icon-arrow-up { color: #ffffff !important; font-size: 1.2rem; }
#back-top:hover { background-color: #027a71 !important; color: #ffffff !important; }

/* === SIDEBAR: Untermenüs immer anzeigen, Toggle-Pfeil ausblenden === */
.container-sidebar-left .mod-menu__toggle-sub { display: none !important; }
.container-sidebar-left .mod-menu__sub { display: block !important; }
.container-sidebar-left .mod-menu__sub li a { font-size: 0.85rem !important; padding-left: 10px; }

/* =========================================
   MOBILE RESPONSIVE (max 767px)
   ========================================= */

/* === HAMBURGER BUTTON === */
.hs-hamburger {
    display: none;
    flex-direction: column; gap: 5px;
    justify-content: center; align-items: center;
    width: 44px; height: 44px;
    background: none; border: none; cursor: pointer;
    order: 2; margin-left: auto; margin-right: 10px;
    flex-shrink: 0; align-self: center;
}
.hs-hamburger span {
    display: block; width: 24px; height: 2px;
    background-color: #333333; border-radius: 2px;
    transition: all 0.25s ease;
}
.hs-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hs-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hs-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 767.98px) {

    /* Topbar: kompakt */
    .container-topbar, header .container-topbar { padding: 8px 0 !important; }
    .topbar-inner {
        flex-wrap: wrap !important; gap: 6px 15px !important;
        justify-content: flex-start !important;
    }
    .topbar-inner span, .topbar-inner a { font-size: 12px !important; }
    .topbar-inner i { font-size: 12px !important; }
    .topbar-inner .topbar-facebook { margin-left: 0 !important; }
    .topbar-inner .topbar-facebook i { font-size: 1.3rem !important; }

    /* Logo-Zeile: volle Breite, relative für Hamburger */
    header > .grid-child:not(.container-nav) {
        flex: 1 1 auto !important;
        max-width: calc(100% - 64px) !important;
        margin-left: 10px !important;
        padding: 8px 0 8px 10px !important;
    }

    /* Hamburger einblenden */
    .hs-hamburger { display: flex !important; }

    /* Nav: standardmäßig ausgeblendet, per max-height animiert */
    header > .grid-child.container-nav {
        flex: 0 0 100% !important; width: 100% !important;
        max-width: 100% !important; order: 3 !important;
        display: block !important; overflow: hidden;
        max-height: 0; transition: max-height 0.3s ease;
        padding: 0 !important; border-top: 0;
    }
    header > .grid-child.container-nav.nav-open {
        max-height: 75vh;
        overflow-y: auto !important;
        border-top: 1px solid #e9ecef;
    }
    header > .grid-child.container-nav .mod-menu.mod-list.nav {
        flex-direction: column !important;
        width: 100%; padding: 0 !important;
    }
    header > .grid-child.container-nav .mod-menu.mod-list.nav .nav-item {
        width: 100%;
    }
    header > .grid-child.container-nav .mod-menu.mod-list.nav .nav-item a {
        font-size: 18px !important;
        padding: 13px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
        letter-spacing: 0.04em !important;
        display: block !important; width: 100%;
    }

    /* Banner: Overflow beheben */
    .container-banner .mod-banners,
    .container-banner .bannergroup {
        height: 200px !important; max-width: 100% !important;
    }
    .container-banner img {
        width: 100% !important; max-width: 100% !important;
        height: 200px !important;
    }

    /* Verhindere generellen horizontalen Scroll */
    body, .container-xxl, .container-component {
        max-width: 100vw !important; overflow-x: hidden;
    }

    /* Sidebar ausblenden */
    .grid-child.container-sidebar-left { display: none !important; }

    /* Hauptmenü ausblenden, Mobilmenü anzeigen */
    #mod-menu97 { display: none !important; }

    /* Mobilmenü: Akkordeon mit Toggle-Pfeilen */
    #mod-menu133 .nav-item.deeper {
        display: flex !important; flex-wrap: wrap !important; align-items: stretch !important;
    }
    #mod-menu133 .nav-item.deeper > a { flex: 1 1 auto !important; width: auto !important; display: block !important; }
    #mod-menu133 .nav-item.deeper > .mod-menu__toggle-sub {
        display: flex !important; align-items: center !important; justify-content: center !important;
        background: none !important; border: none !important;
        border-left: 1px solid #e9ecef !important; border-bottom: 1px solid #f0f0f0 !important;
        color: #555 !important; min-width: 48px !important;
        padding: 0 !important; cursor: pointer !important; flex-shrink: 0 !important;
    }
    #mod-menu133 .nav-item.deeper > .mod-menu__toggle-sub[aria-expanded="true"] {
        color: #02978c !important;
    }
    #mod-menu133 .mod-menu__sub {
        flex: 0 0 100% !important; width: 100% !important;
        padding: 0 !important; display: none !important;
    }
    #mod-menu133 .mod-menu__sub[aria-hidden="false"] { display: block !important; }
    /* 2. Ebene */
    #mod-menu133 .mod-menu__sub > .nav-item > a {
        font-size: 15px !important; padding: 10px 20px 10px 35px !important;
        color: #444 !important; letter-spacing: 0 !important; text-transform: none !important;
        border-bottom: 1px solid #f5f5f5 !important;
    }
    /* 3. Ebene */
    #mod-menu133 .mod-menu__sub .mod-menu__sub > .nav-item > a {
        font-size: 13px !important; padding: 8px 20px 8px 50px !important; color: #555 !important;
    }
    /* Aktive Sub-Items */
    #mod-menu133 .mod-menu__sub .nav-item.active > a,
    #mod-menu133 .mod-menu__sub .nav-item.current > a { color: #02978c !important; }
}

@media (min-width: 768px) {
    .hs-hamburger { display: none !important; }
    #mod-menu133 { display: none !important; }
    header > .grid-child.container-nav {
        max-height: none !important; overflow: visible !important;
        transition: none !important;
    }
    header > .grid-child.container-nav .mod-menu.mod-list.nav {
        flex-direction: row !important;
    }
}