.row .span-2_4 {
    width: 20%;
}

:root{
    --light-antrazit: #636363;
    --dark-antrazit: #2b2b2b;
    --fmb-red:#c81432;
    --fmb-base-border-size: 5px;

    --h1-height: 3.5rem !important;
    --filter-white: invert(100%) sepia(100%) saturate(0%) hue-rotate(86deg) brightness(102%) contrast(101%);
    --filter-red: invert(20%) sepia(97%) saturate(3842%) hue-rotate(340deg) brightness(78%) contrast(100%);
    --font-size-text: 18px;

    --h1-padding-rl: 0.5em;
    --h1-padding-tb: 0.8em;
}

.teaser-list>.row.columns-3-3-3-3 .col {
    margin-top: 0;
}



header.main nav#navigation-main > ul > li.first .mega-nav.container-outer .container-inner ul.product-nav > li {
    width: 20%;
}

header.main nav#navigation-main > ul > li.first .mega-nav.container-outer .container-inner ul.product-nav > li a {
    line-height: 1.2;
    display: flex;
    align-items: center;
    padding-top: initial;
    hyphens: auto;
}

header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li:nth-child(5)>a {
    background-color: var(--dark-antrazit);
    background-image: url("../images/FMB-BASE-weiss.svg");
    background-size: 10%;
    background-repeat: no-repeat;
    background-position: 95% center;
}

header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li:nth-child(5)>a:hover {
    background-color: var(--dark-antrazit);
    opacity: .8;
}

.teaser-list.text-list .span-2_4 .teaser-box.banderole .teaser-content .title h4 a {
    font-size: 1rem;
}

@media (max-width: 1329px) and (min-width: 980px) {
    .teaser-list.text-list .teaser-box.banderole .teaser-content .title .table-cell,
    .teaser-list.imagetext-list .teaser-box.banderole .teaser-content .title .table-cell {
        padding: 0 5px 0 5px;
    }
    .teaser-list.text-list .span-2_4 .teaser-box.banderole .teaser-content .title h4 a {
        font-size: .9rem;
    }
    .teaser-list.text-list .teaser-box.banderole .teaser-content p.sub-title {
        padding: 0 5px;
        font-size: .9rem;
    }
}

@media (max-width: 1199px) and (min-width: 980px) {
    .teaser-list.text-list .span-2_4 .teaser-box.banderole .teaser-content .title h4 a {
        font-size: .8rem;
    }
}

@media (max-width: 1199px) {
    header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li:nth-child(2) {
        padding-right: 20px;
    }
}

@media (max-width: 980px) {
    header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li>a {
        font-size: 13px;
    }

    header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li ul li a {
        font-size: 14px;
    }

    header.main nav#navigation-main>ul>li.first .mega-nav.container-outer .container-inner ul.product-nav>li:nth-child(5)>a {
        background-size: 15%;
    }
}

.teaser-list.text-list .span-2_4 .teaser-box {
    height: 250px;
}


body .teaser-list.text-list .teaser-box.banderole.anthrazit  .teaser-content .title {
    background-color: var(--dark-antrazit);
    background: url("../images/bg/modulare-automation-bg-hell.jpg") top left no-repeat;
    transition: opacity 500ms ease;
    background-size: 100%;
}

body .teaser-list.text-list .teaser-box.banderole.anthrazit  .teaser-content .title i::before {
    display: none
}
body .teaser-list.text-list .teaser-box.banderole.anthrazit  .teaser-content .title i {
    display: block;
    width: 30px;
    height: 30px;
    background-image: url("../images/FMB-BASE-weiss.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

body .teaser-list.text-list .teaser-box.banderole.anthrazit  .teaser-content .title:hover {
    opacity: .85;
}

body.fmb-base main.main #content-header {
    background-color: var(--dark-antrazit);
    background-image: url("/fileadmin/medien/produkte/FMB-Base_Modulare-Automation/FMB-Base_background.png");
}

body.fmb-base main.main #content.container-outer {
    display: none;
}

body.fmb-base #content-footer {
    padding-top: 0;
    display: none;
}

h2.fmb-base {
    font-family: "Source Sans Pro";
    text-transform: uppercase;
    font-weight: 700;
    border: var(--fmb-base-border-size) solid var(--fmb-red);
    position: relative;
    font-size: 1.4rem;
    padding: 0.5em 0.8em;
    width: fit-content;
}

h1.fmb-base {
    font-family: "Source Sans Pro";
    text-transform: uppercase;
    font-weight: 900;
    position: relative;
    font-size: var(--h1-height);
    padding: 0;
    background: url('/fileadmin/medien/produkte/FMB-Base_Modulare-Automation/FMB-BASE-Der-Automations-Baukasten.svg') top left no-repeat;
    background-size: 68px 90px;
    padding-left: 90px;
    margin-bottom: 15px !important;
}



h1.fmb-base .fmb-base-subheader {
    display: block;
    font-size: 30px;
    line-height: 1;
}


body.fmb-base .csc-textpic-imagerow.csc-textpic-imagerow-last{
    display: grid;
    grid-template-columns: 6rem;
    grid-auto-flow: column;
}

body.fmb-base main.main div[data-csc-cols="4"] .csc-textpic-imagecolumn {
    width: initial;
}

body.fmb-base .csc-textpic-imagerow.csc-textpic-imagerow-last img{
    height: 5rem;
    object-fit: contain;
}

body.fmb-base main.main ul li::before {
    content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-dot" viewBox="0 0 16 16">    <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>    </svg>') !important;
    filter: var(--filter-white);
    position: absolute !important;
    top: 0.25em !important;
}

body.fmb-base figcaption {
    text-align: center;
}



body.fmb-base ul li {
    color: #fff;
    font-size: var(--font-size-text) !important;
}

body.fmb-base h3 {
    color: var(--light-antrazit);
    font-size: 20px;
}

body.fmb-base header.h3 + ul {
    margin-top: 15px;
}

body.fmb-base ul.zwei-spaltig {
    column-count: 2;
    column-gap: 10px;
}

body.fmb-base ul.fmb-red li {
    color: var(--fmb-red);
    font-weight: 600;
}

body.fmb-base ul.fmb-red li::before {
    filter: var(--filter-red) !important;
}

body.fmb-base main.main p {
    font-size: var(--font-size-text) !important;
    color: white !important;
    line-height: 1.5;
}

body.fmb-base main.main p.textklein {
    font-size: 15px !important;
}

body.fmb-base .tx-cindownloads .download-list .item {
    background-color: #404040;
    font-size: 15px !important;
}
body.fmb-base .tx-cindownloads .download-list .item a{
    color: #FFF;
    font-size: 18px !important;
}

#c1714 h2{
    color: var(--fmb-red);
    font-size: 1.4rem;
    text-transform: uppercase;
}




h1.fmb-base + p.bodytext {
    font-size: 22px !important;
    margin-bottom: 20px !important;
    padding-right: 10%;
}

body.fmb-base .csc-textpic-below .csc-textpic-text {
    margin-bottom: 20px;
}


body.fmb-base .csc-textpic-imagewrap {
    width: 75% !important;
}

body.fmb-base main.main .container-inner > .csc-default {
    margin-bottom: 80px;
}



h2.fmb-base::after {
    --after-padding: 4px;
    --font-size: calc(var(--fmb-base-border-size) * 10);
    --after-size: calc(var(--font-size) / 1.5);
    content: '+';
    color: var(--light-antrazit);
    display: flex;
    align-items: center;
    place-content: center;
    font-size: var(--font-size);
    background-position: calc(var(--after-size) / -2);
    width: var(--after-size);
    height: var(--after-size);
    padding: var(--after-padding);
    background-color: var(--dark-antrazit);
    position: absolute;
    right: calc((var(--after-size) / -2) - (var(--fmb-base-border-size) / 2));
    top: calc((var(--after-size) / -2) - var(--fmb-base-border-size));
}


@media (max-width: 1329px) {
    #homepage .teaser-box {
        height: 238px;
    }
}
@media (max-width: 1199px) {
    #homepage .teaser-box {
        height: 178px;
    }
}