@charset "utf-8";

/**
 * Main layout and module blocks, column framework.
 * Code order: Visual appearance AND grouped by parent blocks; top to bottom.
 *
 * @date       2011-10-28, 2011-08-17
 * @since      2011-07-18
 * @author     Christian Oellers <c.oellers@*.de>
 * @copyright  Alldesign, http://alldesign.de
 * @version    1.1.4
 */

/* ----------------------------------------------------------------------------------------------------------- BLOCKS */

html, body {
    display:block;
    width:100%;
    height:100%;
    background: rgb(227,228,229);
}

/**
 * Shift background-image by:
 *
 * x:  265 Col. left
 *   + 490 Col. main
 *   = 755 px
 *
 * y:  340 mod_article (Slider, image)
 *   +  20 nav-unternehmen
 *   + 120 nav-location
 *   +  45 nav-main
 *   = 525 px
 */
.wrapper {
    position:relative;
    max-width:1020px;
    width:100%;
    height:100%;
    margin:0 auto;
    background:#ffffff;
}

body > .wrapper {
    height:auto;
    min-height:100%;
}

/* -------------------------------------------------------------- header */

/**
 * Head image or JS content slider.
 *
 * @see  Contao dashboard.
 */
.header .mod_article {
    position:relative;
    height:340px;
    padding:20px 0 0;
}

.header .mod_article .ce_image:nth-child(1) img {
    object-fit:cover;
    height:340px;
}

.header .nav-location {
    padding:5px 0 15px 0;
    background:#3EB303;
    border-bottom:1px solid #297602;
}

.header .nav-main {
    background:#3EB503;
    background-image:-moz-linear-gradient(100% 100% 90deg, #2C8501, #42BE03);
    background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#42BE03), to(#2C8501));
    border-top:1px solid #9AD77C;
    height:44px;
}

/**
 * IE 7-8, Mac/FF fix.
 *
 * Increase max. width a bit to prevent the last item
 * from disappearing/shifting into the next row.
 */

/**
 * Special offer link.
 */
* {
    box-sizing:border-box;
}

.header .special-offer {
    width:164px;
    height:153px;
    overflow:hidden;
    position:absolute;
    top:15px;
    left:-5px;
}

.header .special-offer a {
    background:url('/tl_files/layout/special-offer.png') no-repeat;
}

.header .special-offer a:hover {
    background-position:0 -161px;
}

.header .special-offer a:active {
    background-position:0 0;
}

@media(max-width:435px) {
    .header .special-offer {
        display:none;
    }
}

/* ----------------------------------------------------------- container */

.container {
    display:flex;
    justify-content:space-between;
    padding:0 0 80px;
}

.container .left,
.container .right {
    flex:0 0 25%;
 }

.left {
   order:0;
}

.left .inside {
    padding:30px 0 0;
}

.main {
    flex:0 0 50%;
    padding:30px 25px 0 25px;
    order:1;
}
.right {
    order:2;
    background: rgb(247,217,9);
    background: linear-gradient(180deg, rgba(247,217,9,1) 0%, rgba(255,255,255,1) 100%);
}

.right .inside {
    padding:30px 15px 0;
}

@media(max-width:1020px) {
    .container {
        flex-wrap:wrap;
        justify-content:start;
    }

    .container .right {
        flex-basis:100%;
    }

    .container .right .inside {
        max-width:260px;
        margin:0 auto !important;
    }

    .container .left {
        flex-basis:25%;
    }

    .container .main {
        flex:0 0 70%;
    }
}


@media(max-width:650px) {
    .container .main {
        order:1;
        flex:0 0 100%;
    }

    .container .left {
        order:2;
        flex-basis:100%;
        padding:0 25px;
        margin-bottom:35px;
    }

    .container .left .inside {
        display:flex;
        justify-content:space-between;
    }

    .container .left .box {
        float:none !important;
        margin-top:0;
        flex:0 0 30%;
    }
}

@media(max-width:552px) {
    .container .left .inside {
        display:block;
    }

    .container .left .inside .box {
        margin-left:auto;
        margin-right:auto;
    }

    .container .left .inside .box + .box {
        margin-top:15px;
    }
}

/* -------------------------------------------------------------- footer */

.footer {
    overflow:hidden;
    height:45px;
    margin:-45px auto 0;
}

/* ---------------------------------------------------------------------------------------------------------- LAYOUTS */

.layout-products .wrapper {
    background-image:none;
}

.layout-products .col.main {
    width:755px;
}

.layout-products .col.main .inside {
    padding:0 20px;
}

.layout-products .col.right {
    display:none;
}