/* Custom CSS to adapt legacy layout to Bootstrap Grid */

/* Container wrapper for centering */
.container-kanzlei {
    width: 100%;
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 10px;
    padding-right: 10px;
}

/* Adjust header, content, and footer for responsiveness */
#header {
    width: 100% !important;
    max-width: 980px;
}

#content {
    width: 100% !important;
    max-width: 1040px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

#footer {
    width: 100% !important;
    max-width: 1040px;
}

#headerwrapper, #footerwrapper, #startpage #startcontent, #startpage #startcontact_wrapper {
    min-width: 0 !important; /* Remove legacy min-width constraints */
}

#mobileOffcanvas #navlogo {
    display: none;
    max-width: 60%;
    height: auto;
}

/* Fix hardcoded widths on the homepage that break the Bootstrap grid */
#startcontent_top,
#startcontent_bottom,
#startcontact {
    width: 100% !important;
    max-width: 1100px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-sizing: border-box;
}

#startcontent_top {
    height: auto !important;
    min-height: 92px;
}

/* Fix grid widths for startpage */
#startpage #startcontent {
    height: auto !important;
    min-height: 963px;
    padding-bottom: 240px;
}

@media (min-width: 991.99px) {
    .onlymobile {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .nomobile {
        display: none !important;
    }

    #startpage #startcontact_wrapper {
        margin-top: -15px;
        margin-bottom: 50px;
        height: auto;
    }
    #startbottom_left,
    #startcontact_left,
    #startbottom_right,
    #startcontact_right {
        width: 100% !important;
        text-align: left !important;
    }
    #startpage #startcontent {
        background-image: none;
        background-color: #FFFFFF;
        min-height: 0;
        padding-bottom: 50px;
    }
    #startcontent_bottom {
        margin-top: 50px !important;
        background-color: #D9DADB;
        margin-left: -10px;
        width: calc(100% + 20px) !important;
        padding: 25px 20px !important;
    }
    #startcontent_top {
        background-image: none !important;
        margin-top: -70px;
    }
    #startlink_rechtsanwaelte, #startlink_steuerkanzlei {
        float: none !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
        padding-right: 0 !important;
        background-image: none !important;
    }
    #startcontact_right #contact_rechtsanwaelte {
        margin-right: 0 !important;
        margin-bottom: 30px;
    }
}

@media (min-width: 992px) {
    #startbottom_left,
    #startcontact_left {
        width: 33.333333% !important;
    }
    #startbottom_right,
    #startcontact_right {
        width: 66.666667% !important;
    }
    #startcontact_right #contact_rechtsanwaelte {
        margin-right: 0 !important;
    }
}

/* Ensure images don't overflow their columns (except JS controlled background images) */
img:not(.startpageimage) {
    max-width: 100%;
    height: auto;
}

#main .contentbanner {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Prevent Bootstrap from breaking the Montserrat font hierarchy */
body, a, p, h1, h2, h3, h4, h5, ul, li {
    font-family: 'Montserrat', Arial, Verdana, sans-serif !important;
}

/* Ensure link styles are preserved */
#legal a { color: #666 !important; }
#anwaelte a { color: #A1232E !important; }
#steuer a { color: #013972 !important; }

/* Navigation Off-Canvas styling for mobile view */
@media (max-width: 991.98px) {
    #mobileOffcanvas {
        position: fixed;
        top: 0;
        right: -350px;
        width: 350px;
        height: 100vh;
        z-index: 1050;
        padding: 20px;
        background-color: #FFF;
        border-left: 1px solid #CCC;
        box-shadow: -4px 0 6px rgba(0,0,0,0.1);
        overflow-y: auto;
        transition: transform 0.3s ease;
    }
    
    body.menu-open #mobileOffcanvas {
        transform: translateX(-350px);
    }
    
    #menuOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(102,102,102,0.8);
        z-index: 1040;
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    body.menu-open #menuOverlay {
        visibility: visible;
        opacity: 1;
    }
    
    body.menu-open {
        overflow: hidden;
    }

    #mobileOffcanvas #navlogo {
        display: inline;
    }

    #header {
        position: relative;
    }

    #mobile_navi_btn {
        position: absolute;
        top: 25px;
        right: 15px;
        z-index: 1030;
        transition: transform 0.3s ease;
        background: transparent;
        border: none;
        padding: 0;
    }

    #mobile_close_btn {
        position: absolute;
        top: 25px;
        right: 15px;
        background: transparent;
        border: none;
        font-size: 40px;
        line-height: 0.5;
        color: #666;
        padding: 0;
        cursor: pointer;
        z-index: 1060;
    }
    body#anwaelte #mobile_close_btn {
        color: #A1232E;
    }
    body#steuer #mobile_close_btn {
        color: #013972;
    }

    #navigation {
        margin-top: 30px !important;
        padding-left: 0 !important;
        display: block !important;
    }
    #navigation li {
        padding: 8px 0 !important;
    }
    #navigation a {
        font-size: 16px !important;
    }
    #navigation .anwaelte {
        color: #A1232E;
    }
    #navigation .steuer {
        color: #013972;
    }
    #navigation .common {
        color: #666;
    }
    
    #startpage #startcontent {
        margin-top: 40vw !important; /* Adjust gap for sliding background image */
    }
}

@media (min-width: 767.99px) {
    .max767 {
        display: none !important;
    }
}

/* Fix mobile overlaps, floats, and burger button */
@media (max-width: 767.98px) {
    /*#header {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 20px;
    }

    #logo {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        margin-bottom: 15px;
        max-width: 100%;
        height: auto;
    }*/

    .min768 {
        display: none !important;
    }

    #logo {
        max-width: 187px;
        height: auto;
    }
    
    /* #legal h1, #anwaelte h1, #steuer h1 {
        text-align: center !important;
    }
    #main img[style*="float"] {
        float: none !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
    }*/

    #startlink_rechtsanwaelte,
    #startlink_steuerkanzlei {
        font-size: 24px;
    }
    #startlink_rechtsanwaelte span {
        font-size: 18px;
        line-height: 26px;
    }
    #startbottom_left h1,
    #startcontact_left h2 {
        font-size: 35px;
    }
    #startbottom_left h3,
    #startcontact_left h3 {
        margin-top: 20px;
    }
    #anwaelte h1,
    #steuer h1 {
       font-size: 22px; 
    }
    #anwaelte h1 span.subhead,
    #steuer h1 span.subhead,
    #main h2 {
        font-size: 18px;
    }
}

/* Increase desktop navigation width for long words */
@media (min-width: 992px) {
    #left.col-lg-3 {
        flex: 0 0 32% !important;
        max-width: 32% !important;
    }
    #main.col-lg-9 {
        flex: 0 0 68% !important;
        max-width: 68% !important;
    }
}

/* Global smooth scrolling to replace jQuery animate */
html {
    scroll-behavior: smooth;
}

/* CSS Animation for Startpage Image Fader (replaces jQuery) */
.startpageimage {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
    opacity: 0;
    animation: fade 20s infinite;
}

.startpageimage:nth-of-type(1) { animation-delay: 0s; }
.startpageimage:nth-of-type(2) { animation-delay: 5s; }
.startpageimage:nth-of-type(3) { animation-delay: 10s; }
.startpageimage:nth-of-type(4) { animation-delay: 15s; }

@keyframes fade {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    25%  { opacity: 1; }
    35%  { opacity: 0; }
    100% { opacity: 0; }
}