/* ==================================================
   JFG Schwarze Laber - Mobile/SEO Bugfix für Bestandsseiten
   Ziel: keine horizontalen Überläufe, bessere Lesbarkeit, stabile Bilder/Buttons.
   Bewusst defensiv und überwiegend unter #main gekapselt.
   ================================================== */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

#main,
#main section{
    max-width:100%;
}

#main img,
#main svg,
#main video,
#main canvas{
    max-width:100%;
    height:auto;
}

#main iframe{
    max-width:100%;
}

#main table{
    width:100%;
    max-width:100%;
}

#main .table-responsive,
#main .responsive-table{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
}

#main .row > *,
#main [class*="col-"],
#main .container,
#main .container-fluid,
#main .card,
#main .service-box,
#main .portfolio-item{
    min-width:0;
}

#main a,
#main p,
#main li,
#main h1,
#main h2,
#main h3,
#main h4,
#main h5,
#main h6,
#main span,
#main strong{
    overflow-wrap:anywhere;
}

#main p,
#main li{
    hyphens:auto;
}

#main .btn,
#main button,
#main input[type="submit"]{
    max-width:100%;
    white-space:normal;
    text-align:center;
}

#main [style*="width: 1000px"],
#main [style*="width:1000px"],
#main [style*="width: 1200px"],
#main [style*="width:1200px"]{
    width:100% !important;
    max-width:100% !important;
}

@media(max-width:991px){
    #main .container{
        max-width:100%;
    }

    #main .row{
        margin-left:0;
        margin-right:0;
    }
}

@media(max-width:767px){
    #main{
        font-size:16px;
    }

    #main h1{
        font-size:clamp(2rem, 9vw, 3rem);
        line-height:1.12;
    }

    #main h2{
        font-size:clamp(1.55rem, 7vw, 2.25rem);
        line-height:1.18;
    }

    #main h3{
        font-size:clamp(1.22rem, 5.5vw, 1.65rem);
        line-height:1.22;
    }

    #main .btn,
    #main .button,
    #main button,
    #main input[type="submit"]{
        width:100%;
    }

    #main .d-flex{
        min-width:0;
    }

    #main .card,
    #main .service-box,
    #main .icon-box{
        margin-left:0;
        margin-right:0;
    }
}

@media(max-width:430px){
    #main h1{
        font-size:clamp(1.85rem, 10vw, 2.55rem);
    }

    #main h2{
        font-size:clamp(1.45rem, 8vw, 2rem);
    }

    #main .container,
    #main .container-fluid{
        padding-left:14px;
        padding-right:14px;
    }
}