/* PF Square Regular - latin */
@font-face {
    font-family: 'PFSquareSansPro';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/378D3B_2_0.eot');
    src: url('../fonts/378D3B_2_0.eot?#iefix') format('embedded-opentype'),
        url('../fonts/378D3B_2_0.woff2') format('woff2'),
        url('../fonts/378D3B_2_0.woff') format('woff'),
        url('../fonts/378D3B_2_0.ttf') format('truetype');
}

/* PF Square Medium - latin */
@font-face {
    font-family: 'PFSquareSansPro';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/378D3B_3_0.eot');
    src: url('../fonts/378D3B_3_0.eot?#iefix') format('embedded-opentype'),
        url('../fonts/378D3B_3_0.woff2') format('woff2'),
        url('../fonts/378D3B_3_0.woff') format('woff'),
        url('../fonts/378D3B_3_0.ttf') format('truetype');
}

/* PF Square Bold - latin */
@font-face {
    font-family: 'PFSquareSansPro';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/378D3B_1_0.eot');
    src: url('../fonts/378D3B_1_0.eot?#iefix') format('embedded-opentype'),
        url('../fonts/378D3B_1_0.woff2') format('woff2'),
        url('../fonts/378D3B_1_0.woff') format('woff'),
        url('../fonts/378D3B_1_0.ttf') format('truetype');
}

/* PF Square Italic - latin */
@font-face {
    font-family: 'PFSquareSansPro';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/378D3B_0_0.eot');
    src: url('../fonts/378D3B_0_0.eot?#iefix') format('embedded-opentype'),
        url('../fonts/378D3B_0_0.woff2') format('woff2'),
        url('../fonts/378D3B_0_0.woff') format('woff'),
        url('../fonts/378D3B_0_0.ttf') format('truetype');
}

/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Regular'), local('OpenSans-Regular'),
        url('../fonts/open-sans-v15-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-regular.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-italic.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Italic'), local('OpenSans-Italic'),
        url('../fonts/open-sans-v15-latin-italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-italic.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-600 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-600.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'),
        url('../fonts/open-sans-v15-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-600.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-600.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-600.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-600.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-600italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-600italic.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans SemiBold Italic'), local('OpenSans-SemiBoldItalic'),
        url('../fonts/open-sans-v15-latin-600italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-600italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-600italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-600italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-600italic.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-700 - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Bold'), local('OpenSans-Bold'),
        url('../fonts/open-sans-v15-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-700.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* open-sans-700italic - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v15-latin-700italic.eot');
    /* IE9 Compat Modes */
    src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'),
        url('../fonts/open-sans-v15-latin-700italic.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/open-sans-v15-latin-700italic.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/open-sans-v15-latin-700italic.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/open-sans-v15-latin-700italic.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/open-sans-v15-latin-700italic.svg#OpenSans') format('svg');
    /* Legacy iOS */
}

/* rajdhani-regular - latin */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/rajdhani-v7-latin-regular.eot');
    /* IE9 Compat Modes */
    src: local('Rajdhani Regular'), local('Rajdhani-Regular'),
        url('../fonts/rajdhani-v7-latin-regular.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/rajdhani-v7-latin-regular.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/rajdhani-v7-latin-regular.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/rajdhani-v7-latin-regular.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/rajdhani-v7-latin-regular.svg#Rajdhani') format('svg');
    /* Legacy iOS */
}

/* rajdhani-500 - latin */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/rajdhani-v7-latin-500.eot');
    /* IE9 Compat Modes */
    src: local('Rajdhani Medium'), local('Rajdhani-Medium'),
        url('../fonts/rajdhani-v7-latin-500.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/rajdhani-v7-latin-500.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/rajdhani-v7-latin-500.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/rajdhani-v7-latin-500.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/rajdhani-v7-latin-500.svg#Rajdhani') format('svg');
    /* Legacy iOS */
}

/* rajdhani-600 - latin */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/rajdhani-v7-latin-600.eot');
    /* IE9 Compat Modes */
    src: local('Rajdhani SemiBold'), local('Rajdhani-SemiBold'),
        url('../fonts/rajdhani-v7-latin-600.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/rajdhani-v7-latin-600.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/rajdhani-v7-latin-600.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/rajdhani-v7-latin-600.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/rajdhani-v7-latin-600.svg#Rajdhani') format('svg');
    /* Legacy iOS */
}

/* rajdhani-700 - latin */
@font-face {
    font-family: 'Rajdhani';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/rajdhani-v7-latin-700.eot');
    /* IE9 Compat Modes */
    src: local('Rajdhani Bold'), local('Rajdhani-Bold'),
        url('../fonts/rajdhani-v7-latin-700.eot?#iefix') format('embedded-opentype'),
        /* IE6-IE8 */
        url('../fonts/rajdhani-v7-latin-700.woff2') format('woff2'),
        /* Super Modern Browsers */
        url('../fonts/rajdhani-v7-latin-700.woff') format('woff'),
        /* Modern Browsers */
        url('../fonts/rajdhani-v7-latin-700.ttf') format('truetype'),
        /* Safari, Android, iOS */
        url('../fonts/rajdhani-v7-latin-700.svg#Rajdhani') format('svg');
    /* Legacy iOS */
}

* {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    position: relative;
    font-family: 'PFSquareSansPro';
    font-weight: 500;
    /* background-color: rgb(135,135,135); */
}

img {
    vertical-align: bottom;
    max-width: 100%;
}

strong {
    font-weight: 600;
}

h1,
.h1 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 24px;
}

h2,
.h2 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 24px;
}

h3,
.h3 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 8px;
}

.maincontent a {
    color: #000;
    text-decoration: underline;
}

.maincontent a:hover {
    text-decoration: none;
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    border: 1px solid #ddd;
}

td {
    padding: 5px;
    border: 1px solid #ddd;
    vertical-align: top;
}

.table-responsive {
    overflow-x: auto;
}

/*=================================================================================================================================*/
/*==== Header =====================================================================================================================*/
/*=================================================================================================================================*/
header.main {
    width: 100%;
    max-width: 1280px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0 auto;
    background-color: #fff;
}

@media only screen and (min-width : 900px) {
    header.main {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
        padding: 0 45px 0 45px;
    }
}

@media only screen and (min-width : 1281px) {
    header.main {
        padding: 0 45px 0 65px;
    }
}

/*=============== Header Menu Container ===============*/
.header-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #cedce3;
    padding: 10px 5%;
    position: relative;
}

@media only screen and (min-width : 900px) {
    .header-menu {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        background-color: transparent;
        padding: 0 30px 0 0;
    }
}

/*=============== Header Menu ===============*/
ul#headermenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

ul#headermenu li {
    position: relative;
}

ul#headermenu li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    margin: 0 8px;
    color: #231f20;
    text-decoration: none;
    font-size: 18px;
}

ul#headermenu li:first-child a {
    margin-left: 0;
}

ul#headermenu li:last-child a {
    margin-right: 0;
}

ul#headermenu li a span {
    margin-right: 10px;
}

ul#headermenu li a:after {
    content: '';
    display: block;
    /*background: red;*/
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top left;
}

ul#headermenu li a.kontakt-link:after {
    width: 27px;
    height: 20px;
    background-image: url(../images/kontakt-icon.svg);
}

ul#headermenu li a.login-link:after {
    width: 14px;
    height: 20px;
    background-image: url(../images/kundenlogin-icon.svg);
}

ul#headermenu li a.suchen-link:after {
    width: 19px;
    height: 20px;
    background-image: url(../images/suchen-icon.svg);
}

ul#headermenu li a span {
    /* display: none; */
}

@media only screen and (max-width : 899px) {
    ul#headermenu li a span {
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

@media only screen and (min-width : 900px) {
    ul#headermenu li a {
        margin: 0 20px;
    }

    ul#headermenu li a span {
        display: block;
    }
}

/*=============== Logo ===============*/
@media only screen and (max-width : 499px) {
    .logo {
        width: 100%;
        padding: 20px 5%;
        text-align: right;
        display: block;
    }

    .logo img {
        width: 70%;
        max-width: 260px;
    }
}

@media only screen and (min-width : 500px) {
    .logo {
        width: auto;
        padding: 20px 5%;
        text-align: right;
        display: block;
    }

    .logo img {
        width: auto;
        height: 60px;
    }
}

@media only screen and (min-width : 900px) {
    .logo {
        padding: 20px 0;
    }
}

/*=============== Main Menu Button ===============*/
.menu-btn-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}

.menu-btn-label {
    padding-right: 10px;
    font-size: 20px;
}

.menu-btn {
    width: 30px;
    height: 24px;
    display: block;
    /*margin: 50px auto;*/
    position: relative;
}

.menu-btn-line {
    width: 100%;
    height: 4px;
    display: block;
    position: absolute;
    background-color: #231f20;
    border-radius: 5px;
    -webkit-transition: all .15s ease-in-out;
    -o-transition: all .15s ease-in-out;
    transition: all .15s ease-in-out;
}

.mbl-top {
    top: 0;
}

.mbl-middle {
    top: calc(50% - 2px);
    -webkit-transition: width .1s ease-in-out, opacity .1s ease-in-out;
    -o-transition: width .1s ease-in-out, opacity .1s ease-in-out;
    transition: width .1s ease-in-out, opacity .1s ease-in-out;
}

.mbl-bottom {
    bottom: 0;
}

.mb-active .mbl-top {
    top: calc(50% - 2px);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.mb-active .mbl-middle {
    width: 0;
    opacity: 0;
}

.mb-active .mbl-bottom {
    bottom: calc(50% - 2px);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

@media only screen and (min-width : 900px) {
    .menu-btn-wrapper {
        display: none;
    }
}

/*=================================================================================================================================*/
/*==== Main Menu ==================================================================================================================*/
/*=================================================================================================================================*/
/*=============== Mobile ===============*/
@media only screen and (max-width : 649px) {
    ul#mainmenu>li>ul>li {
        width: 80%;
        margin-left: 20%;
    }
}

@media only screen and (min-width : 650px) and (max-width : 899px) {
    ul#mainmenu>li>ul>li {
        width: 50%;
        margin-left: 50%;
    }
}

@media only screen and (max-width : 899px) {
    nav.main {
        background-color: #231f20;
        padding: 20px 5%;
    }

    nav.main a {
        color: #fff;
        font-weight: 600;
        text-decoration: none;
        display: block;
    }

    ul#mainmenu li {
        width: 100%;
        display: block;
        border-bottom: 1px dotted #fff;
    }

    ul#mainmenu>li {
        padding: 8px 0;
    }

    ul#mainmenu>li>a {
        font-size: 20px;
    }

    ul#mainmenu li>ul li {
        padding: 5px 0;
    }

    ul#mainmenu li>ul li>a {
        font-size: 18px;
        position: relative;
    }

    ul#mainmenu li>ul li>a:after {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 50%;
        background-color: red;
    }

    ul#mainmenu li>ul li:nth-child(3n+1) a:after {
        background-color: #e40018;
    }

    ul#mainmenu li>ul li:nth-child(3n+1)>ul li a:after {
        background-color: #ef6674;
    }

    ul#mainmenu li>ul li:nth-child(3n+2) a:after {
        background-color: #f07d00;
    }

    ul#mainmenu li>ul li:nth-child(3n+2)>ul li a:after {
        background-color: #f6b166;
    }

    ul#mainmenu li>ul li:nth-child(3n+3) a:after {
        background-color: #e1dd00;
    }

    ul#mainmenu li>ul li:nth-child(3n+3)>ul li a:after {
        background-color: #edeb66;
    }

    ul#mainmenu li>ul>li a.e-mobilitaet-link:after {
        background-color: #41a090;
    }

    /*ul#mainmenu > li > ul > li {
	width: 50%;
	margin-left: 50%;
}*/
    ul#mainmenu>li>ul>li>ul>li {
        width: 90%;
        margin-left: 10%;
    }

    ul#mainmenu li>ul li:last-child {
        border-bottom: none;
    }

    ul#mainmenu li>ul li a {
        padding: 0 8px;
    }

    /*-- Startseite Link --*/
    ul#mainmenu li a.startseite-link {
        padding-right: 0;
    }

    ul#mainmenu li a.startseite-link img {
        /*background-color: pink;*/
        width: 24px;
        height: 24px;
        display: block;
        background-image: url(../images/home-weiss.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    /*-- zweites Untermenü bei Netze, Häufige Fragen verstecken --*/
    ul#mainmenu li.item-105 ul ul,
    ul#mainmenu li.item-129 ul {
        display: none;
    }

    nav.main {
        display: none;
    }
}

/*=============== Desktop ===============*/
@media only screen and (min-width : 900px) {
    .nav-wrapper {
        width: 100%;
        background-color: #cedce3;
    }

    nav.main {
        display: block !important;
        width: 100%;
        max-width: 1280px;
        margin: 0 auto;
        padding: 0 20px 0 20px;
        background-color: #cedce3;
    }

    nav.main a {
        display: block;
    }

    ul#mainmenu {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        max-width: 900px;
    }

    ul#mainmenu li {
        position: relative;
    }

    ul#mainmenu ul {
        position: absolute;
        z-index: 3000;
        width: 220px;
    }

    ul#mainmenu ul ul {
        top: 0;
        left: 100%;
    }

    ul#mainmenu>li>a {
        padding: 10px 25px;
        color: #231f20;
        text-decoration: none;
        font-weight: 600;
        font-size: 20px;
    }

    ul#mainmenu ul>li a {
        padding: 5px 25px;
        color: #fff;
        border-bottom: 1px dotted #fff;
        position: relative;
    }

    ul#mainmenu ul>li a:after {
        content: '';
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 50%;
        right: 15px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        border-radius: 50%;
    }

    ul#mainmenu ul>li:nth-child(3n+1) a:after {
        background-color: #e40018;
    }

    ul#mainmenu ul>li:nth-child(3n+1)>ul li a:after {
        background-color: #ef6674;
    }

    ul#mainmenu ul>li:nth-child(3n+2) a:after {
        background-color: #f07d00;
    }

    ul#mainmenu ul>li:nth-child(3n+2)>ul li a:after {
        background-color: #f6b166;
    }

    ul#mainmenu ul>li:nth-child(3n+3) a:after {
        background-color: #e1dd00;
    }

    ul#mainmenu ul>li:nth-child(3n+3)>ul li a:after {
        background-color: #edeb66;
    }

    ul#mainmenu ul>li a.e-mobilitaet-link:after {
        background-color: #41a090;
    }

    ul#mainmenu ul>li:hover>a,
    ul#mainmenu ul>li.active>a {
        background-color: #fff;
        color: #231f20;
        border-bottom: 1px dotted #231f20;
    }

    ul#mainmenu ul>li:last-child>a {
        border-bottom: none;
    }

    ul#mainmenu>li>ul>li>a {
        background-color: #231f20;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        -webkit-transition: background-color .175s linear, color .175s linear, border-color .175s linear;
        -o-transition: background-color .175s linear, color .175s linear, border-color .175s linear;
        transition: background-color .175s linear, color .175s linear, border-color .175s linear;
    }

    ul#mainmenu>li>ul>li>ul>li>a {
        background-color: #fff;
        color: #231f20;
        border-color: #231f20;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        -webkit-transition: background-color .175s linear, color .175s linear, border-color .175s linear;
        -o-transition: background-color .175s linear, color .175s linear, border-color .175s linear;
        transition: background-color .175s linear, color .175s linear, border-color .175s linear;
    }

    ul#mainmenu>li>ul>li>ul>li:hover>a,
    ul#mainmenu>li>ul>li>ul>li.active>a {
        background-color: #231f20;
        color: #fff;
        border-color: #fff;
    }

    ul#mainmenu li>ul {
        visibility: hidden;
        opacity: 0;
        -webkit-transition: opacity .175s linear .3s, visibility 0s linear .3s;
        -o-transition: opacity .175s linear .3s, visibility 0s linear .3s;
        transition: opacity .175s linear .3s, visibility 0s linear .3s;
    }

    ul#mainmenu li:hover>ul {
        visibility: visible;
        opacity: 1;
        -webkit-transition: opacity .175s linear .3s, visibility 0s linear;
        -o-transition: opacity .175s linear .3s, visibility 0s linear;
        transition: opacity .175s linear .3s, visibility 0s linear;
    }

    /*-- Startseite Link --*/
    ul#mainmenu li a.startseite-link {
        padding-right: 0;
    }

    ul#mainmenu li a.startseite-link img {
        /*background-color: pink;*/
        width: 22px;
        height: 22px;
        display: block;
        background-image: url(../images/home-schwarz.svg);
        background-size: 100%;
        background-repeat: no-repeat;
    }

    /*-- zweites Untermenü bei Netze, Häufige Fragen verstecken --*/
    ul#mainmenu li.item-105 ul ul,
    ul#mainmenu li.item-129 ul {
        display: none;
    }

    /*-- Untermenü Netze nach Links versetzen (Kleinere Desktop) --*/
    ul#mainmenu li.item-105 ul {
        right: 0;
    }
}

@media only screen and (min-width : 940px) {
    ul#mainmenu li a.startseite-link {
        padding-right: 25px;
    }
}

@media only screen and (min-width : 1060px) {

    /*-- Untermenü Netze normal (Kleinere Desktop) --*/
    ul#mainmenu li.item-105 ul {
        right: auto;
    }
}

@media only screen and (min-width : 1281px) {
    nav.main {
        padding: 0 20px 0 40px;
    }
}

/*=================================================================================================================================*/
/*==== Post Header ================================================================================================================*/
/*=================================================================================================================================*/
.post-header {
    width: 100%;
    max-width: 1280px;
    margin: 15px auto 0;
    position: relative;
    z-index: 1;
}

/*=============== Galerie ===============*/
.gallery {
    position: relative;
}

/*=============== Schweif ===============*/
/*=============== Schweif (Update: 10.2021) ===============*/
.extra {
    width: 100%;
    position: absolute;
    bottom: -10.8%;
    z-index: 20;
}

.extra.netze {
    bottom: -17.2%;
}

/*=================================================================================================================================*/
/*==== Main========================================================================================================================*/
/*=================================================================================================================================*/
main {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    position: relative;
    background-color: #fff;
}

@media only screen and (min-width : 900px) {
    main {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

/*=============== Maincontent ===============*/
/*==== Cards (Neu: 10.2021) ====*/
.wlcards-container {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
}

.wlcard {
    width: calc(100% - 20px);
    margin: 10px;
    background: #e7eef1;
}

@media only screen and (min-width : 600px) {
    .wlcard {
        width: calc(50% - 20px);
    }
}

@media only screen and (min-width : 900px) {
    .wlcards-container--3pl .wlcard {
        width: calc(33.333% - 20px);
    }

    .wlcards-container--4pl .wlcard {
        width: calc(25% - 20px);
    }
}

.wlcard--padding {
    padding: 20px;
}

.wlcard__header {
    padding: 20px 20px 15px 20px;
}

.wlcard--padding .wlcard__header,
.wlcard__header--bottom {
    padding: 0 0 15px 0;
}

.wlcard__header h2 {
    margin-bottom: 0;
}

.wlcard__header--left {
    text-align: left;
}

.wlcard__header--center {
    text-align: center;
}

.wlcard__header--right {
    text-align: right;
}

.wlcard__body {
    padding: 20px 20px 20px 20px;
    font-size: 16px;
}

.wlcard--padding .wlcard__body {
    padding: 20px 0 0 0;
}

.wlcard--padding .wlcard__body:first-child {
    padding: 0;
}

.wlcard__button {
    background-color: #e3051b;
    color: #fff;
    font-weight: 600;
    text-align: center;
    padding: 10px;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.wlcard__button.wlcard__button--link {
    padding: 0;
}

.wlcard__button:not(:first-child) {
    margin-top: 20px;
}

.wlcard__button a {
    display: block;
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    padding: 10px;
    -webkit-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}

.wlcard__button a:hover {
    background-color: #231f20;
}

.wlcard__link--all {
    text-decoration: none !important;
}

.wlcard__link--all:hover>.wlcard__body>.wlcard__button {
    background-color: #231f20;
}

.wlcard__image a {
    text-decoration: none;
}

.wlcard figcaption {
    text-align: left;
    text-decoration: none;
    font-style: normal;
    margin-top: 0;
    padding: 5px 20px;
    color: #000;
}

.wlcard.wlcard--padding figcaption {
    padding: 5px 0;
}

.wlcard__figcaption-align--left {
    text-align: left !important;
}

.wlcard__figcaption-align--center {
    text-align: center !important;
}

.wlcard__figcaption-align--right {
    text-align: right !important;
}

.wlcard__figcaption--bold {
    font-weight: 600;
}

/*== News ==*/
@media only screen and (min-width : 900px) {
    .wlcards-container--news-content .wlcard {
        width: calc(33.333% - 20px);
    }
}

@media only screen and (min-width : 1150px) {
    .wlcards-container--news-content .wlcard {
        width: calc(25% - 20px);
    }
}

.wlcards-container--news-content .wlcard__body {
    padding: 15px 20px;
}

.wlcards-container--news-content .wlcard__date {
    font-weight: 700;
    padding-bottom: 10px;
}

.wlcards-container--news-content .wlcard__header {
    padding: 0;
    font-weight: 600;
    font-size: 18px;
}

.wlcards-container--news-content .wlcard__header a {
    text-decoration: none;
}

.wlcards-container--news-content .wlcard__header a:hover {
    text-decoration: underline;
}

/*-- If Card is Swiper --*/
.wlcards-container .wlcard.swiper-slide {
    margin: initial;
}

.wlcards-container .swiper-button-prev,
.wlcards-container .swiper-button-next {
    width: 30px;
    height: 30px;
}

.wlcards-container .swiper-button-prev:after,
.wlcards-container .swiper-button-next:after {
    content: '';
}

.wlcards-container .swiper-button-prev {
    left: 0;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    background-image: url(../images/zurueck-grau.svg);
}

.wlcards-container .swiper-button-next {
    right: 0;
    -webkit-transform: translateX(50%);
    -ms-transform: translateX(50%);
    transform: translateX(50%);
    background-image: url(../images/weiter-grau.svg);
}

/*== Artikel Startseite & Cards Extern ==*/
.wlcards-container--articles-frontpage {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    padding-top: 15px;
    padding-right: 0;
    padding-bottom: 15px;
    padding-left: 0;
}

@media only screen and (min-width : 900px) {
    .wlcards-container--articles-frontpage {
        padding: 20px 0 20px 0;
    }
}

.wlcards-container--articles-frontpage a {
    color: #000;
    font-size: 16px;
    text-decoration: none;
}

.wlcards-container--articles-frontpage a:hover {
    text-decoration: underline;
}

.wlcards-container--articles-frontpage .wlcard__image img {
    width: 100%;
}

.wlcards-container--articles-frontpage .wlcard__header {
    padding: 0;
    font-weight: 600;
    font-size: 18px;
}

.wlcards-container--articles-frontpage .wlcard__header h2 {
    font-size: 22px;
}

.wlcards-container--articles-frontpage .wlcard__content:last-child {
    padding-top: 15px;
}

/* Articles Frontpage Extern (Neu: 07.2020) => Cards extern (07.10.2021) */
.articles-external {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 calc(5% + 10px);
    position: relative;
    background-color: #fff;
}

@media only screen and (min-width : 500px) {
    .articles-external {
        padding: 0 5%;
    }
}

@media only screen and (min-width : 700px) {
    .articles-external {
        padding: 0 45px;
    }
}

@media only screen and (min-width : 1281px) {
    .articles-external {
        padding: 0 65px;
    }
}

/* Slick */
.wlcards-container--articles-frontpage .slick-track {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

.wlcards-container--articles-frontpage .slick-slide {
    height: inherit !important;
}

/*-------- Positionen --------*/
.zweispaltig article.maincontent {
    width: 100%;
    padding: 50px 5%;
}

.einspaltig article.maincontent {
    width: 100%;
    padding: 50px 5%;
}

@media only screen and (min-width : 600px) {
    .zweispaltig article.maincontent {
        padding: 60px 5%;
    }

    .einspaltig article.maincontent {
        padding: 60px 5%;
    }
}

@media only screen and (max-width : 700px) {

    .startseite.einspaltig article.maincontent,
    .has-tr--big article.maincontent {
        padding: 20px 5% !important;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }
}

@media only screen and (min-width : 650px) {
    .einspaltig article.maincontent {
        font-size: 18px;
    }
}

@media only screen and (min-width : 700px) {
    .zweispaltig article.maincontent {
        padding: 60px 20px 30px 45px;
    }

    .startseite.zweispaltig article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }

    .einspaltig article.maincontent {
        padding: 60px 45px 30px 45px;
    }

    .startseite.einspaltig article.maincontent,
    .has-tr--big article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }
}

@media only screen and (min-width : 800px) {
    .has-tr--big article.maincontent {
        padding-top: 280px;
    }
}

@media only screen and (min-width : 900px) {
    .zweispaltig article.maincontent {
        width: 61.71875%;
        padding: 60px 20px 30px 45px;
    }

    .startseite.zweispaltig article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }

    .einspaltig article.maincontent {
        width: 100%;
        padding: 60px 45px 30px 45px;
    }

    .startseite.einspaltig article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }

    .has-tr--big article.maincontent {
        padding-top: 190px;
    }
}

@media only screen and (min-width : 1024px) {
    .has-tr--big article.maincontent {
        padding-top: 220px;
    }
}

@media only screen and (min-width : 1281px) {
    .zweispaltig article.maincontent {
        padding: 60px 20px 30px 65px;
    }

    .startseite .zweispaltig article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }

    .einspaltig article.maincontent {
        padding: 60px 45px 30px 65px;
    }

    .startseite .einspaltig article.maincontent {
        padding-top: 30px;
        /*-- Tarifrechner Kreis nicht mehr auf Startseite (07.2020) --*/
    }

    .has-tr--big article.maincontent {
        padding-top: 220px;
    }
}

/*-------- Inhalt --------*/
.maincontent ul,
.maincontent ol {
    margin-left: 18px;
}

.maincontent ul li {
    list-style-type: disc;
    margin: 2px 0;
}

.maincontent ol li {
    margin: 2px 0;
}

/*=============== Subcontent ===============*/
/*-------- Positionen --------*/
.zweispaltig aside.subcontent {
    width: 100%;
    background-color: #fffbe8;
    padding: 20px 5%;
}

@media only screen and (min-width : 900px) {
    .zweispaltig aside.subcontent {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        padding: 60px 0 30px;
    }
}

/*-------- Inhalt --------*/
.subcontent ul {
    margin-left: 18px;
}

.subcontent ul li {
    list-style-type: disc;
    margin: 2px 0;
}

.zweispaltig aside.subcontent h2,
.zweispaltig aside.subcontent h3 {
    padding: 0 0 8px 0;
    font-size: 20px;
    border-bottom: 2px dotted #e40018;
    margin-bottom: 20px;
}

.zweispaltig aside.subcontent a {
    color: #000;
}

.startseite.zweispaltig aside.subcontent h2,
.startseite.zweispaltig aside.subcontent h3 {
    margin-bottom: 10px;
}

.netze.zweispaltig aside.subcontent {
    background-color: #fef1e3;
}

.e-mobilitaet.zweispaltig aside.subcontent {
    background-color: #eaf3f2;
}

@media only screen and (min-width : 900px) {

    .zweispaltig aside.subcontent h2,
    .zweispaltig aside.subcontent h3 {
        padding: 0 45px 8px 30px;
    }

    .startseite.zweispaltig aside.subcontent h2,
    .startseite.zweispaltig aside.subcontent h3 {
        margin-bottom: 10px;
    }
}

/*=============== Breadcrumbs ===============*/
ul.breadcrumb {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 0 15px 0 !important;
    font-size: 14px;
}

ul.breadcrumb li {
    list-style-type: none !important;
}

ul.breadcrumb a {
    text-decoration: none;
    color: #000;
}

.breadcrumbs .divider {
    margin-right: 3px;
}

.breadcrumbs .divider.icon-location {
    display: none;
}

/*=============== Claim ===============*/
.claim {
    display: block;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.claim h1 {
    font-size: 30px;
    font-weight: 600;
    color: #231f20;
    margin-top: 0px;
    margin-bottom: 0;
}

@media only screen and (min-width : 1130px) {
    .claim h1 {
        font-size: 40px;
    }
}

@media only screen and (min-width : 1250px) {
    .claim h1 {
        font-size: 50px;
    }
}

/*=============== Content Menü ===============*/
ul.contentmenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 15px 0;
}

ul.contentmenu li {
    list-style-type: none;
    /*width: 100%;*/
    width: 75%;
    display: block;
    margin-bottom: 10px;
}

ul.contentmenu li a {
    display: block;
    background-repeat: no-repeat;
    background-size: 100%;
    width: 100%;
    height: 0;
    padding-bottom: 41.6666667%;
    position: relative;
}

ul#contentmenu-start li a {
    padding-bottom: 41.6666667%;
}

ul#contentmenu-waerme li a {
    padding-bottom: 30.8474576%;
}

ul.contentmenu li a span {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 10%;
    font-size: 14px;
    font-weight: 600;
}

/*---- Startseite ----*/
ul.contentmenu li a.cnt-strom-link {
    background-image: url(../images/cnt-menu-strom-inactive.svg);
}

ul.contentmenu li a:hover.cnt-strom-link {
    background-image: url(../images/cnt-menu-strom-active.svg);
}

ul.contentmenu li a.cnt-gas-link {
    background-image: url(../images/cnt-menu-gas-inactive.svg);
}

ul.contentmenu li a:hover.cnt-gas-link {
    background-image: url(../images/cnt-menu-gas-active.svg);
}

ul.contentmenu li a.cnt-waerme-link {
    background-image: url(../images/cnt-menu-waerme-inactive.svg);
}

ul.contentmenu li a:hover.cnt-waerme-link {
    background-image: url(../images/cnt-menu-waerme-active.svg);
}

ul.contentmenu li a.cnt-e-mobilitaet-link {
    background-image: url(../images/cnt-menu-emobilitaet-inactive.svg);
}

ul.contentmenu li a:hover.cnt-e-mobilitaet-link {
    background-image: url(../images/cnt-menu-emobilitaet-active.svg);
}

/*---- Wärme ----*/
ul.contentmenu li a.cnt-gasheizung-link {
    background-image: url(../images/cnt-menu-gasheizung.svg);
}

ul.contentmenu li a.cnt-waermelieferung-link {
    background-image: url(../images/cnt-menu-waermelieferung.svg);
}

ul.contentmenu li a.cnt-contracting-link {
    background-image: url(../images/cnt-menu-contracting.svg);
}

/*@media only screen and (min-width : 550px) {

ul#contentmenu-start li {
	width: 47%;
}

}*/
@media only screen and (min-width : 360px) {
    ul.contentmenu {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    ul#contentmenu-waerme {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    ul.contentmenu li {
        width: 47%;
    }

    ul#contentmenu-waerme li {
        width: 75%;
    }

    ul.contentmenu li a span {
        font-size: 13px;
    }
}

@media only screen and (min-width : 500px) {
    ul.contentmenu li a span {
        font-size: 16px;
    }
}

@media only screen and (min-width : 570px) {
    ul#contentmenu-waerme {
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }

    ul#contentmenu-waerme li {
        width: 47%;
    }
}

@media only screen and (min-width : 600px) {
    ul.contentmenu li {
        width: 40%;
    }
}

@media only screen and (min-width : 800px) {
    ul.contentmenu li a span {
        font-size: 20px;
    }
}

@media only screen and (min-width : 930px) {
    ul#contentmenu-waerme li {
        width: 30%;
    }
}

@media only screen and (min-width : 1000px) {
    ul.contentmenu li {
        width: 23%;
        margin-bottom: 0;
    }

    ul.contentmenu li a span {
        font-size: 18px;
    }
}

@media only screen and (min-width : 1100px) {
    ul.contentmenu li a span {
        font-size: 22px;
    }
}

@media only screen and (min-width : 1180px) {
    ul.contentmenu li a span {
        font-size: 24px;
    }
}

/*=============== Newsbereich Startseite ===============*/
.wl-swszbnews {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px;
    background-color: #edf1f4;
}

.wl-swszbnews-inner {
    width: 100%;
}

.wl-swszbnews-content {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.wl-swszbnews-content.img-top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.wl-swszbnews-content.img-bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.wl-swszbnews-text {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.headline-text {
    display: none;
}

.wl-swszbnews-image {
    width: 100%;
}

.wl-swszbnews-content.img-top .wl-swszbnews-image {
    padding-bottom: 20px;
}

.wl-swszbnews-content.img-bottom .wl-swszbnews-image {
    padding-top: 20px;
}

.wl-swszbnews-image img {
    width: 100%;
}

.wl-swszbnews h2 {
    font-size: 28px;
}

.wl-swszbnews a {
    text-decoration: none;
}

.wl-swszbnews a:hover {
    text-decoration: underline;
}

@media only screen and (min-width : 800px) {
    .wl-swszbnews-content {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
        /*align-items: center;*/
    }

    .wl-swszbnews-content.img-left {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: reverse !important;
        -ms-flex-direction: row-reverse !important;
        flex-direction: row-reverse !important;
    }

    .wl-swszbnews-content.img-right {
        -webkit-box-orient: horizontal !important;
        -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
        flex-direction: row !important;
    }

    .headline-top {
        display: none;
    }

    .headline-text {
        display: block;
    }

    .wl-swszbnews-content.img-right .wl-swszbnews-text {
        padding-right: 20px;
    }

    .wl-swszbnews-content.img-left .wl-swszbnews-text {
        padding-left: 20px;
    }

    .wl-swszbnews-image {
        width: auto;
        max-width: 65%;
    }

    .wl-swszbnews-content.img-top .wl-swszbnews-image {
        padding-bottom: 0;
    }

    .wl-swszbnews-content.img-bottom .wl-swszbnews-image {
        padding-top: 0;
    }

    .wl-swszbnews-inner.no-text .wl-swszbnews-image {
        max-width: 100% !important;
    }

    .wl-swszbnews-inner.no-text .headline-top {
        display: block !important;
    }
}

@media only screen and (min-width : 1000px) {
    .wl-swszbnews h2 {
        font-size: 30px;
    }

    .wl-swszbnews-text {
        font-size: 20px;
    }
}

@media only screen and (min-width : 1200px) {
    .wl-swszbnews h2 {
        font-size: 34px;
    }

    .wl-swszbnews-text {
        font-size: 24px;
    }
}

/*=============== Veranstaltungen einspaltig über View (Kategorie) ===============*/
.veranstaltungen.category aside.subcontent,
.news.category aside.subcontent {
    display: none;
}

.veranstaltungen.category article.maincontent,
.news.category article.maincontent {
    width: 100%;
    padding: 20px 5%;
}

@media only screen and (min-width : 700px) {

    .veranstaltungen.category article.maincontent,
    .news.category article.maincontent {
        padding: 60px 45px 60px 45px;
    }
}

@media only screen and (min-width : 1281px) {

    .veranstaltungen.category article.maincontent,
    .news.category article.maincontent {
        padding: 60px 45px 60px 65px;
    }
}

/*=============== Custom Fields Rechts ===============*/
.custom-fields-right h2 {
    font-size: 20px;
    border-bottom: 2px dotted #e40018;
    margin-bottom: 20px;
    padding-bottom: 8px;
}

@media only screen and (min-width : 900px) {
    .custom-fields-right h2 {
        padding-right: 45px;
        padding-left: 30px;
    }

    .cfr-content {
        padding: 0 45px 0 30px;
    }
}

/*=============== Intro Images Rechts ===============*/
.intro-image-right-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.intro-image-right-wrapper.vert,
.intro-image-right-wrapper.horz {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

.intro-image-right.img1 {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.intro-image-right.img2 {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

.intro-image-right.img {
    width: 100%;
    text-align: center;
    margin-bottom: 20px;
}

@media only screen and (min-width : 900px) {
    .intro-image-right-wrapper.vert {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .intro-image-right-wrapper.horz {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .intro-image-right-wrapper.horz .intro-image-right.img1 {
        width: 48%;
    }

    .intro-image-right-wrapper.horz .intro-image-right.img2 {
        width: 48%;
    }
}

/*=============== Menü Rechts ===============*/
ul#rightmenu {
    margin: 0;
}

ul#rightmenu li {
    list-style-type: none;
    border-bottom: 2px dotted #000;
}

ul#rightmenu li:nth-child(3n+1) {
    border-color: #e40018;
}

ul#rightmenu li:nth-child(3n+2) {
    border-color: #f07d00;
}

ul#rightmenu li:nth-child(3n+3) {
    border-color: #e1dd00;
}

ul#rightmenu li:last-child {
    border: none;
}

ul#rightmenu li a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 45px;
    color: #000;
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
    position: relative;
}

ul#rightmenu li.active a,
ul#rightmenu li a:hover {
    background-color: #fff;
}

ul#rightmenu li a:before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #e40018;
    margin-right: 20px;
}

.haeufige-fragen ul#rightmenu li a:before {
    background-color: #f07d00;
}

/*=============== Mehr Gesetze (Strom & Gas Auswahlseite) ===============*/
.more-law {
    margin-top: 50px;
}

a.more-dl {
    font-size: 18px;
    text-decoration: none;
    position: relative;
}

a.more-dl:hover {
    text-decoration: underline;
}

@media only screen and (min-width : 550px) {
    a.more-dl:after {
        content: '';
        width: 20px !important;
        height: 20px !important;
        display: block;
        position: absolute;
        right: -25px;
        top: 50%;
        background-image: url(../images/pfeil-schwarz.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 75%;
        -webkit-transform: translateY(-55%);
        -ms-transform: translateY(-55%);
        transform: translateY(-55%);
    }
}

@media only screen and (min-width : 630px) {
    a.more-dl {
        font-size: 18px;
    }
}

/*=============== Modalfenster ===============*/
.wl-modal {
    display: none;
    position: fixed;
    z-index: 50000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.6);
}

.wl-modal__inner {
    width: 80%;
    background-color: #fff;
    margin: 15% auto 0;
    position: relative;
    opacity: 0;
    /*transform: translateY(-100%);*/
    -webkit-animation: animateTop 0.25s ease forwards;
    animation: animateTop 0.25s ease forwards;
}

@-webkit-keyframes animateTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes animateTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

.wl-modal__header {
    background-color: #ed1c2a;
    color: #fff;
    padding: 20px;
}

.wl-modal__header h3 {
    color: #fff;
    margin-bottom: 0;
}

.wl-modal__close {
    font-size: 40px;
    cursor: pointer;
    position: absolute;
    top: 8px;
    right: 20px;
}

.wl-modal__content {
    padding: 20px;
}

@media only screen and (min-width : 900px) {
    .wl-modal__inner {
        width: 60%;
        font-size: 18px;
    }

    .wl-modal__header h3 {
        font-size: 18px;
    }
}

/*=============== E-Mobilität ===============*/
/*.e-mobilitaet .maincontent h1 {
	font-weight: 700;
	font-size: 40px;
}

.e-mobilitaet .maincontent h1 span {
	font-weight: 400;
	font-style: italic;
}*/
.e-mobilitaet .maincontent h3 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.e-mobilitaet .maincontent h3:before {
    content: '';
    display: block;
    width: 20px;
    height: 15px;
    margin-bottom: 2px;
    background-image: url(../images/stecker-icon.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top left;
    margin-right: 8px;
}

/*=============== Freunde werben Freunde ===============*/
.freunde-werben .maincontent h1 {
    font-weight: 700;
    font-size: 40px;
}

.freunde-werben.formular .maincontent h1 {
    font-size: 30px;
}

.freunde-werben .maincontent h3 {
    font-size: 25px;
    margin: 8px 0;
    font-weight: 700;
    color: #e40018;
}

.freunde-werben.zweispaltig aside.subcontent h2,
.freunde-werben.zweispaltig aside.subcontent h3 {
    padding: 0;
    border-bottom: 0;
    position: relative;
}

.freunde-werben.zweispaltig aside.subcontent h3 {
    margin: 8px 0;
    font-weight: 600;
    color: #e40018;
}

.freunde-werben.zweispaltig aside.subcontent h2 {
    display: inline-block;
}

.freunde-werben.zweispaltig aside.subcontent h2:after {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    background-image: url(../images/sprechblase.svg);
    background-repeat: no-repeat;
    background-size: 100%;
    position: absolute;
    top: -75px;
    right: -60px;
}

.freunde-werben.zweispaltig aside.subcontent img {
    width: 100%;
    max-width: 400px;
}

.freunde-werben.zweispaltig aside.subcontent strong {
    font-weight: 700;
    color: #e40018;
}

.freunde-werben.zweispaltig aside.subcontent {
    padding-top: 90px;
    background-color: #fef1e2;
}

@media only screen and (min-width : 900px) {
    .freunde-werben.zweispaltig aside.subcontent {
        padding-top: 135px;
    }
}

/*=============== Landingpages ===============*/
@media only screen and (min-width : 650px) {

    .einspaltig.lp-strom article.maincontent,
    .einspaltig.lp-gas article.maincontent {
        font-size: 20px;
    }
}

/*-------- Schritte Angebot --------*/
.steps-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    margin: 30px 0;
}

.steps {
    width: 100%;
    /*background: #fdece5;*/
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 20px 22px;
    margin-bottom: 25px;
}

.lp-strom .steps {
    background: #fdece5;
}

.lp-gas .steps {
    background: #fff5c7;
}

.lp-waerme .steps {
    background: #fce5cc;
}

.lp-emobilitaet .steps {
    background: #d9ece9;
}

.img-step {
    width: 60px;
    margin-right: 30px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.img-step img {
    width: 100%;
    height: 100%;
    display: block;
}

.text-step {
    font-size: 25px;
    font-weight: 600;
    -webkit-box-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.step-arrow {
    position: absolute;
    bottom: -13px;
    right: 25px;
}

.step-ok {
    position: absolute;
    bottom: -13px;
    right: 25px;
}

@media only screen and (min-width : 600px) {
    .img-step {
        width: 80px;
    }

    .text-step {
        font-size: 30px;
    }
}

@media only screen and (min-width : 900px) {
    .steps-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        margin: 30px 0;
    }

    .steps {
        width: 30%;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 20px 22px;
        margin-bottom: 0;
    }

    .img-step {
        width: 110px;
        margin-bottom: 20px;
    }

    .step-arrow {
        bottom: 0;
        right: -25px;
    }

    .step-ok {
        bottom: 0;
        right: -8px;
    }
}

@media only screen and (min-width : 1000px) {
    .steps {
        padding: 20px 35px;
    }
}

/*=============== Suche ===============*/
#search-form {
    margin-bottom: 30px;
}

ul.search-resultssuchen {
    margin-left: 0 !important;
}

ul.search-resultssuchen li {
    margin-bottom: 25px;
    list-style-type: none;
}

.result-title {
    margin-bottom: 8px;
}

.result-title a {
    color: #f07d00;
}

.result-textsuchen {
    margin-bottom: 8px;
}

.result-urlsuchen {
    font-size: 14px;
    font-style: italic;
}

.search-resultssuchen .highlight {
    font-weight: 600;
    background-color: #fffbe8;
    padding: 0 5px;
}

.result-title .highlight {
    color: #000;
}

/*=============== Pagination ===============*/
.pagination {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    margin-top: 20px;
}

@media only screen and (min-width : 700px) {
    .pagination {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }

    .pagination-list {
        margin-bottom: 0 !important;
    }
}

.pagination ul {
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 0;
}

.pagination ul>li {
    display: inline;
}

.pagination ul>li:first-child>a,
.pagination ul>li:first-child>span {
    border-bottom-left-radius: 4px;
    border-left-width: 1px;
    border-top-left-radius: 4px;
}

.pagination ul span,
.pagination ul a,
.pagination ul a:hover,
.pagination ul a:focus {
    color: #ed1b29;
}

.pagination ul>.disabled span,
.pagination ul>.disabled a,
.pagination ul>.disabled a:hover,
.pagination ul>.disabled>a:focus {
    background-color: transparent;
    color: #999;
    cursor: default;
}

.pagination ul>li>a,
.pagination ul>li>span {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background-color: #fff;
    border-color: #ddd;
    -o-border-image: none;
    border-image: none;
    border-style: solid;
    border-width: 1px 1px 1px 0;
    float: left;
    line-height: 18px;
    padding: 4px 12px;
    text-decoration: none;
}

.pagination ul>li>a:hover,
.pagination ul>li>a:focus,
.pagination ul>.active>a,
.pagination ul>.active>span {
    background-color: #f5f5f5;
    color: #000 !important;
}

@font-face {
    font-family: 'IcoMoon';
    src: url('../../../media/jui/fonts/IcoMoon.eot');
    src: url('../../../media/jui/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('../../../media/jui/fonts/IcoMoon.woff') format('woff'), url('../../../media/jui/fonts/IcoMoon.ttf') format('truetype'), url('../../../media/jui/fonts/IcoMoon.svg#IcoMoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[data-icon]:before {
    font-family: 'IcoMoon';
    content: attr(data-icon);
    speak: none;
}

[class^="icon-"],
[class*=" icon-"] {
    display: inline-block;
    width: 14px;
    height: 14px;
    *margin-right: .3em;
    line-height: 14px;
}

[class^="icon-"]:before,
[class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}

[class^="icon-"].disabled,
[class*=" icon-"].disabled {
    font-weight: normal;
}

.icon-first:before {
    content: "}";
}

.icon-previous:before,
.icon-backward:before {
    content: "|";
}

.icon-next:before,
.icon-forward:before {
    content: "{";
}

.icon-last:before {
    content: "\e000";
}

/*=============== einzelne Seiten ===============*/
.haeufige-fragen main h3 {
    color: #f07d00;
}

/*=============== SW Button ===============*/
a.sw-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 250px;
    margin: 0;
    text-decoration: none;
    padding: 5px 20px;
    border-radius: 30px;
    background-color: #000;
    color: #fff;
}

a.sw-btn.large {
    max-width: 350px;
}

a.sw-btn:after {
    content: '';
    display: block;
    width: 11.25px;
    height: 15px;
    margin-left: 10px;
    background-image: url(../images/pfeil-unten.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

a.sw-btn.arr-right:after {
    background-image: url(../images/pfeil-weiss.svg);
}

/*=============== Download Layouts ===============*/
.netze .jd_content_file {
    display: block !important;
}

.jd_content_file {
    display: block !important;
}

/*-------- SWSZB1 --------*/
.dl-swszb1-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: top;
    -ms-flex-align: top;
    align-items: top;
    margin-bottom: 20px;
    /*border-bottom: 1px dotted #ccc;*/
}

.dl-swszb1-wrapper .dl-info-wrapper {
    margin-right: 0;
}

.dl-swszb1-wrapper .dl-title {
    margin-bottom: 8px;
}

.dl-swszb1-wrapper .dl-title a {
    color: #000;
    text-decoration: underline;
}

.dl-swszb1-wrapper .dl-title a:hover {
    text-decoration: none;
}

.dl-swszb1-wrapper .dl-title .jd_download_url {
    margin-left: 0;
}

.dl-swszb1-wrapper .dl-info {
    margin: 8px 0;
    font-size: 14px;
}

/*-------- SWSZB2 --------*/
.custom.dl-swszb2-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.custom.dl-swszb2-wrapper>p {
    /*-- Remove auto-generated <p> --*/
    display: none;
}

.dl-swszb2-wrapper .jd_content.jd_content_plugin {
    width: 48%;
    margin-bottom: 20px;
}

.dl-swszb2-wrapper .dl-image {
    margin-bottom: 15px;
    border: 1px solid #999;
}

.kundenmagazin .dl-swszb2-wrapper .dl-image {
    border: none;
}

.kundenmagazin .dl-swszb2-wrapper .dl-image img {
    border: 1px solid #999;
}

.dl-swszb2-wrapper .dl-info {
    font-weight: 700;
    font-size: 24px;
    margin-bottom: 15px;
}

/*-------- SWSZB3 --------*/
.dl-swszb3-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    padding: 0 45px 0 30px;
}

.dl-swszb3-wrapper .dl-info-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.dl-swszb3-wrapper .dl-info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    font-size: 22px;
    font-weight: 700;
    margin-right: 30px;
}

.dl-swszb3-wrapper .dl-image img {
    border: 1px solid #999;
}

.dl-swszb3-wrapper .dl-btn {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    margin-left: 25px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
}

.jdbutton {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;
    max-width: 150px;
    zoom: 1;
    vertical-align: inherit;
    margin: 0;
    outline: inherit;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    font: inherit;
    padding: 5px 20px;
    text-shadow: none;
    border-radius: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    background-color: #000;
    color: #fff !important;
}

.jdbutton:after {
    content: '';
    display: block;
    width: 11.25px;
    height: 15px;
    margin-left: 10px;
    background-image: url(../images/pfeil-unten.svg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

/*-------- SWSZB5 --------*/
.dl-swszb5-wrapper .dl-title .jd_download_url {
    margin-left: 0;
}

@media only screen and (min-width : 650px) {

    /*-------- SWSZB3 --------*/
    .dl-swszb3-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .dl-swszb3-wrapper .dl-info-wrapper {
        margin-bottom: 0;
    }

    .dl-swszb3-wrapper .dl-btn {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}

@media only screen and (min-width : 900px) {

    /*-------- SWSZB1 --------*/
    .dl-swszb1-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .dl-swszb1-wrapper .dl-info-wrapper {
        margin-right: 20px;
        width: calc(100% - 150px);
    }

    /*-------- SWSZB3 --------*/
    .dl-swszb3-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    .dl-swszb3-wrapper .dl-info-wrapper {
        margin-bottom: 20px;
    }

    .kundenmagazin .dl-swszb3-wrapper .dl-info-wrapper .dl-info {
        width: 30px;
    }

    .kundenmagazin .dl-swszb3-wrapper .dl-info-wrapper .dl-image {
        -webkit-box-flex: 1;
        -ms-flex: 1 auto;
        flex: 1 auto;
    }

    .dl-swszb3-wrapper .dl-btn {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}

@media only screen and (min-width : 1000px) {

    /*-------- SWSZB2 --------*/
    .dl-swszb2-wrapper .jd_content.jd_content_plugin {
        width: 18%;
    }
}

@media only screen and (min-width : 1281px) {

    /*-------- SWSZB3 --------*/
    .dl-swszb3-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .dl-swszb3-wrapper .dl-info-wrapper {
        margin-bottom: 0;
    }

    .dl-swszb3-wrapper .dl-btn {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }

    .kundenmagazin .dl-swszb3-wrapper .dl-image {
        width: 200px;
    }
}

/*=============== News Layouts ===============*/
/*-------- News Sidebar --------*/
.startseite.zweispaltig aside.subcontent {
    background-color: #fef1e2;
}

.news-sidebar-wrapper .ns-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px 0 10px 0;
    border-bottom: 2px dotted #000;
}

.news-sidebar-wrapper .ns-row:nth-child(3n+1) {
    border-color: #f07d00;
}

.news-sidebar-wrapper .ns-row:nth-child(3n+2) {
    border-color: #e1dd00;
}

.news-sidebar-wrapper .ns-row:nth-child(3n+3) {
    border-color: #e40018;
}

.news-sidebar-wrapper .ns-row .ns-date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    font-weight: 700;
    font-size: 22px;
    /*width: 38px;*/
    margin-right: 18px;
}

.news-sidebar-wrapper .ns-row .ns-title {
    margin-bottom: 2px;
}

.news-sidebar-wrapper .ns-row .ns-title a {
    color: #000;
    font-weight: 600;
    text-decoration: none;
}

.news-sidebar-wrapper .ns-row .ns-title a:hover {
    text-decoration: underline;
}

.news-sidebar-wrapper .ns-row .ns-description a {
    color: #000;
    padding-left: 5px;
}

.news-sidebar-wrapper .ns-row .ns-description a:hover {
    text-decoration: none;
}

@media only screen and (min-width : 650px) {

    /*-------- News Sidebar --------*/
    .news-sidebar-wrapper .ns-row {
        padding: 10px 45px 10px 30px;
    }
}

/*-------- News Maincontent (Detailseite) --------*/
.news-maincontent-back {
    margin-top: 20px;
    display: block;
    text-align: right;
}

.news-maincontent-back a {
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/*=================================================================================================================================*/
/*==== Kontakte ===================================================================================================================*/
/*=================================================================================================================================*/
/*-- Kontaktseite Rechts --*/
.wl-contacts .ansprechpartner-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10px 0 10px 0;
    border-bottom: 2px dotted #000;
    font-weight: 600;
}

.wl-contacts .ansprechpartner-row:nth-child(3n+1) {
    border-color: #e40018;
}

.wl-contacts .ansprechpartner-row:nth-child(3n+2) {
    border-color: #f07d00;
}

.wl-contacts .ansprechpartner-row:nth-child(3n+3) {
    border-color: #e1dd00;
}

.wl-contacts .ansprechpartner-row a {
    color: #000;
    text-decoration: none;
}

.wl-contacts .ansprechpartner-row a:hover {
    text-decoration: underline;
}

.wl-contacts h2.ap-headline {
    margin-bottom: 10px !important;
}

.wl-contacts .ap-name {
    width: 150px;
}

@media only screen and (min-width : 400px) {
    .wl-contacts .ansprechpartner-row {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

@media only screen and (min-width : 650px) {
    .wl-contacts .ansprechpartner-row {
        padding: 20px 45px 20px 30px;
    }
}

/*-- Kontakte Footer --*/
footer.main .wl-contacts .wl-contact-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 5px;
}

footer.main .wichtige-rufnummern .wl-contacts .wl-contact.wlc-name {
    width: 95px;
}

footer.main .wichtige-rufnummern {
    font-weight: 600;
}

/*-- Kontakte Header --*/
/* Kontaktkasten befindet sich in ul unterhalb item-114 / per Hand in index */
.item-114>ul {
    position: absolute;
    top: 100%;
    left: -40px;
    z-index: 2000;
    padding-top: 39px;
    display: none;
}

@media only screen and (min-width : 900px) {

    /* Triggered jQuery */
    .item-114>ul.shown {
        display: block;
        opacity: 0;
        -webkit-animation: showWLC 0.3s linear forwards;
        animation: showWLC 0.3s linear forwards;
    }
}

@-webkit-keyframes showWLC {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes showWLC {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.header-menu .wl-contacts {
    background-color: #231f20;
    color: #fff;
    padding: 15px 40px;
    width: 440px;
}

.header-menu .wl-contacts:before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    background-color: #231f20;
    position: absolute;
    top: -10px;
    left: 40px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.header-menu .wl-contacts a {
    color: #fff !important;
    text-decoration: none;
}

.header-menu .wl-contacts a:hover {
    text-decoration: underline !important;
}

.header-menu .wl-contact-row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    border-bottom: 1px dotted #fff;
    padding: 5px 40px;
    margin: 0 -40px;
}

.header-menu .wlc-block {
    margin-bottom: 20px;
}

.header-menu .wl-contact-row.email,
.header-menu .wl-contact-row.misc,
.header-menu .wl-contact-row.adresse {
    border-bottom: none;
}

.header-menu .wlc-label {
    width: 65px;
}

.header-menu .wlc-block.oeffnungszeiten h3,
.header-menu .wlc-block.adresse h3 {
    border-bottom: 1px dotted #fff;
    padding: 5px 40px;
    margin: 0 -40px 10px;
}

.header-menu .wlc-block h3 span {
    position: relative;
}

.header-menu .wlc-block h3 span:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    left: -25px;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.header-menu .wlc-block.nummern h3 span:before,
.header-menu .wlc-block.kontaktformular h3 span:before {
    background-color: #e40018;
}

.header-menu .wlc-block.oeffnungszeiten h3 span:before {
    background-color: #f07d00;
}

.header-menu .wlc-block.adresse h3 span:before {
    background-color: #e1dd00;
}

.header-menu .wlc-block.kontaktformular {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.header-menu .wlc-block.kontaktformular h3 {
    margin-bottom: 0;
}

.header-menu .wlc-block.kontaktformular .oeffnen {
    display: inline-block;
    color: #000;
    background-color: #FFDD00;
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 20px 2px;
    border-radius: 50px;
}

.header-menu .wlc-block.kontaktformular .oeffnen a {
    color: #231f20 !important;
}

/*-- Kontakte auf Kontaktseite (Neu: September 2020) --*/
.m-kontakt .wlc-address,
.m-kontakt .wlc-contactinfo {
    margin-bottom: 20px;
}

.m-kontakt .wl-contact label {
    display: inline-block;
    width: 90px;
}

.m-kontakt .wlc-misc>p:first-child {
    margin-bottom: 10px;
    font-weight: 600;
}

.m-kontakt .wlc-misc span {
    display: inline-block;
    width: 90px;
}

/* --- extra Klasse Clip für Karte usw --- */
.obj-fit {
    width: 100%;
    height: 450px;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (min-width : 700px) {
    .obj-fit {
        height: 600px;
    }
}

figcaption {
    margin-top: 5px;
    text-align: right;
    font-style: italic;
    color: #999;
}

figcaption a {
    color: #999 !important;
}

/*======== Articles Frontpage (Aktualisiert: 07.2020) ========*/
/* 
.cards-container--articles-frontpage {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	position: relative;
	background-color: #fff;
	padding-top: 15px;
	padding-right: 0;
	padding-bottom: 15px;
	padding-left: 0;
}

.cards-container--articles-frontpage a {
	color: #000;
	font-size: 16px;
	text-decoration: none;
}

.cards-container--articles-frontpage a:hover {
	text-decoration: underline;
}

.cards-container--articles-frontpage .card__header {
	height: 55px;
}

.cards-container--articles-frontpage .card__header h2 {
	font-size: 22px;
}

.cards-container--articles-frontpage .card__content {
	height: 60px;
}

@media only screen and (min-width : 900px) {

.cards-container--articles-frontpage {
	padding: 20px 0 20px 0;
}

}

@media only screen and (min-width : 1281px) {

.cards-container--articles-frontpage {
	padding: 20px 0 20px 0;
}

} */
/*==== Articles Frontpage Extern (Neu: 07.2020) ====*/
/* .articles-external {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 5%;
	position: relative;
	background-color: #fff;
}

@media only screen and (min-width : 700px) {
	.articles-external {
		padding: 0 45px;
	}
}

@media only screen and (min-width : 1281px) {
	.articles-external {
		padding: 0 65px;
	}
} */
/*======== Slick ========*/
.slk-btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 100;
    cursor: pointer;
    background-size: 100%;
    background-repeat: no-repeat;
}

.slick-prev {
    left: 0;
    background-image: url(../images/zurueck-grau.svg);
}

.slick-next {
    right: 0;
    background-image: url(../images/weiter-grau.svg);
}

.slick-track {
    margin-left: 0 !important;
}

@media only screen and (min-width : 420px) {
    .slick-prev {
        left: -5px;
    }

    .slick-next {
        right: -5px;
    }
}

@media only screen and (min-width : 600px) {
    .slk-btn {
        width: 30px;
        height: 30px;
    }

    .slick-prev {
        left: -15px;
    }

    .slick-next {
        right: -15px;
    }
}

/*-- Slick Tarifrechner Ausgabe --*/
.strom-produkt-wrapper .slk-btn,
.gas-produkt-wrapper .slk-btn {
    top: 230px;
    bottom: auto;
    /*transform: translateY(50%);*/
}

.strom-produkt-wrapper .slick-prev,
.gas-produkt-wrapper .slick-prev {
    left: 5px;
}

.strom-produkt-wrapper .slick-next,
.gas-produkt-wrapper .slick-next {
    right: 5px;
}

.strom-produkt-wrapper .slick-prev {
    background-image: url(../images/zurueck-rot.svg);
}

.strom-produkt-wrapper .slick-next {
    background-image: url(../images/weiter-rot.svg);
}

.gas-produkt-wrapper .slick-prev {
    background-image: url(../images/zurueck-gelb.svg);
}

.gas-produkt-wrapper .slick-next {
    background-image: url(../images/weiter-gelb.svg);
}

@media only screen and (min-width : 420px) {

    .strom-produkt-wrapper .slick-prev,
    .gas-produkt-wrapper .slick-prev {
        left: 0px;
    }

    .strom-produkt-wrapper .slick-next,
    .gas-produkt-wrapper .slick-next {
        right: 0px;
    }
}

@media only screen and (min-width : 600px) {

    .strom-produkt-wrapper .slick-prev,
    .gas-produkt-wrapper .slick-prev {
        left: -10px;
    }

    .strom-produkt-wrapper .slick-next,
    .gas-produkt-wrapper .slick-next {
        right: -10px;
    }
}

/*======== Pre Footer ========*/
.pre-footer {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    padding: 20px 0;
}

.pre-footer-content {
    background-color: #231F20;
    background-image: url(../images/logo-streifen.svg);
    background-repeat: no-repeat;
    background-position: right 20px;
    background-size: auto 60px;
    color: #fff;
    padding: 20px 5% 20px 5%;
    font-size: 16px;
}

.pre-footer-content h2 {
    padding-right: 60px;
    margin-bottom: 25px;
}

@media only screen and (min-width : 450px) {
    .pre-footer-content h2 {
        padding-right: 100px;
    }
}

@media only screen and (min-width : 510px) {
    .pre-footer-content h2 {
        padding-right: 150px;
    }
}

@media only screen and (min-width : 660px) {
    .pre-footer-content {
        background-position: right center;
        background-size: auto 70px;
        padding: 20px 150px 20px 5%;
        font-size: 18px;
    }

    .pre-footer-content h2 {
        padding-right: 0;
        margin-bottom: 15px;
    }
}

@media only screen and (min-width : 850px) {
    .pre-footer {
        padding: 20px 5% 40px;
    }

    .pre-footer-content {
        background-position: right center;
        background-size: auto 100px;
        border-radius: 500px;
        padding: 50px 150px 50px 80px;
    }
}

@media only screen and (min-width : 900px) {
    .pre-footer {
        padding: 20px 45px 40px 45px;
    }

    .pre-footer-content {
        font-size: 20px;
        padding: 35px 150px 35px 80px;
    }
}

@media only screen and (min-width : 1281px) {
    .pre-footer {
        padding: 20px 45px 40px 65px
    }
}

/*======== Footer ========*/
.footer-wrapper {
    width: 100%;
    background: -o-linear-gradient(top, #cedce3, #ffffff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cedce3), to(#ffffff));
    background: linear-gradient(to bottom, #cedce3, #ffffff);
}

footer.main {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 20px 5%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /*align-items: flex-end;*/
    /*flex-wrap: wrap;*/
    position: relative;
    background: -o-linear-gradient(top, #cedce3, #ffffff);
    background: -webkit-gradient(linear, left top, left bottom, from(#cedce3), to(#ffffff));
    background: linear-gradient(to bottom, #cedce3, #ffffff);
    font-size: 14px;
}

.footer-info-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /*margin-bottom: 20px;*/
}

.footer-info-wrapper h3 {
    font-size: 18px;
    margin-bottom: 10px;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer-info-wrapper h3:before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: red;
    margin-right: 8px;
}

.footer-info-wrapper .moduletable {
    margin-bottom: 30px;
}

.footer-info-wrapper .moduletable:nth-child(1) h3:before {
    background-color: #e40018;
}

.footer-info-wrapper .moduletable:nth-child(2) h3:before {
    background-color: #f07d00;
}

.footer-info-wrapper .moduletable:nth-child(3) h3:before {
    background-color: #e1dd00;
}

.footer-info-wrapper .custom.zertifikate {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.footer-info-wrapper .zertifikate a {
    margin: 0 5px;
}

.footer-info-wrapper .zertifikate a:first-child {
    margin-left: 0;
}

.footer-info-wrapper .zertifikate a:last-child {
    margin-right: 0;
}

.footer-info-wrapper .zertifikate img {
    width: 50px;
}

nav.footer {
    text-align: center;
}

ul#footermenu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 10px;
}

ul#footermenu li a {
    color: #000;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.5;
}

ul#footermenu li a:hover {
    text-decoration: underline;
}

@media only screen and (min-width : 610px) {
    .footer-info-wrapper {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

    .footer-info-wrapper .moduletable {
        width: 50%;
    }
}

@media only screen and (min-width : 900px) {
    footer.main {
        padding: 20px 45px 20px 45px;
    }

    .footer-info-wrapper h3 {
        display: block;
    }

    .footer-info-wrapper h3:before {
        position: absolute;
        top: 50%;
        left: -25px;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        margin-right: 0;
    }

    nav.footer {
        text-align: inherit;
    }

    ul#footermenu {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }

    ul#footermenu li {
        padding: 0 15px;
    }
}

@media only screen and (min-width : 950px) {
    .footer-info-wrapper .moduletable {
        width: auto;
    }
}

@media only screen and (min-width : 1080px) {
    footer.main {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-align: end;
        -ms-flex-align: end;
        align-items: flex-end;
    }

    .footer-info-wrapper .moduletable {
        margin-bottom: 0;
    }

    nav.footer {
        margin-left: 100px;
    }

    ul#footermenu {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }

    ul#footermenu li {
        padding: 0;
    }
}

@media only screen and (min-width : 1281px) {
    footer.main {
        padding: 20px 45px 20px 65px;
    }
}

/*===== Countdown =====*/
.wlcountdown {
    width: 90%;
    max-width: 400px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.timeel {
    margin: 0 15px;
    text-align: center;
}

.timevalue {
    font-size: 40px;
    margin-bottom: 10px;
}

.timelabel {
    font-size: 12px;
}

/*==== Sonstiges ====*/
.padding-0 .wl-swszbnews {
    padding: 0 !important;
}

/*==== NEWSTEASER (Neu: 07.2020) ====*/
.wlnewsteaser {
    background-color: #fff;
}

.wlnewsteaser a {
    color: #000;
}

.wlnewsteaser__description {
    background-color: rgba(253, 219, 186, 0.85) !important;
    font-weight: 600;
    font-size: 16px;
    bottom: 20px !important;
    width: auto !important;
    padding-left: 5% !important;
    padding-right: 25px !important;
}

.wlnewsteaser .swiper-button-next,
.wlnewsteaser .swiper-button-prev {
    color: #fff !important;
}

@media only screen and (min-width : 400px) {
    .wlnewsteaser__description {
        font-size: 20px;
    }
}

@media only screen and (min-width : 700px) {
    .wlnewsteaser__description {
        padding-left: 45px !important;
        font-size: 25px;
        bottom: 40px !important;
    }
}

@media only screen and (min-width : 900px) {
    .wlnewsteaser__description {
        font-size: 30px;
    }
}

.wlnewsteaser .swiper-pagination {
    bottom: -30px !important;
    z-index: 100 !important;
    width: 100%;
}

.wlnewsteaser .swiper-pagination-bullet {
    width: 12.5px !important;
    height: 12.5px !important;
    margin-left: 6px;
    margin-right: 6px;
}

.wlnewsteaser .swiper-pagination-bullet-active {
    background-color: #cedce3 !important;
}

@media only screen and (min-width : 900px) {
    .wlnewsteaser .wlnewsteaser {
        height: 450px !important;
    }

    .wlnewsteaser .swiper-wrapper {
        width: calc(100% - 300px) !important;
    }

    .wlnewsteaser .swiper-pagination {
        width: 300px !important;
        right: 0 !important;
        background-color: #fddbba !important;
        border-left: 2px solid #fff;
    }

    .wlnewsteaser .swiper-pagination-bullet {
        width: 100% !important;
        height: auto !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 25px !important;
        margin-left: 0;
        margin-right: 0;
    }

    .wlnewsteaser .swiper-pagination-bullet-active {
        background-color: #f6a758 !important;
        color: #000000 !important;
    }
}

/*==== Sidenav (Neu: 07.2020) ====*/
.sidenav {
    position: fixed;
    /* top: 30px; */
    right: 0;
    z-index: 5000;
    -webkit-transform: translateX(calc(100% - 38px));
    -ms-transform: translateX(calc(100% - 38px));
    transform: translateX(calc(100% - 38px));
    margin-top: 30px;
}

@media only screen and (min-width : 600px) {
    .sidenav {
        -webkit-transform: translateX(calc(100% - 50px));
        -ms-transform: translateX(calc(100% - 50px));
        transform: translateX(calc(100% - 50px));
    }
}

.sidenav__element {
    background: #000;
    color: #fff;
    margin: 10px 0;
    padding: 7px 7px 7px 38px;
    -webkit-transition: -webkit-transform 0.2s linear;
    transition: -webkit-transform 0.2s linear;
    -o-transition: transform 0.2s linear;
    transition: transform 0.2s linear;
    transition: transform 0.2s linear, -webkit-transform 0.2s linear;
    border-radius: 100px 0 0 100px;
    background-position: 10px center;
    background-repeat: no-repeat;
    background-size: 18px;
    position: relative;
}

@media only screen and (min-width : 600px) {
    .sidenav__element {
        margin: 10px 0;
        padding: 10px 10px 10px 50px;
        background-position: 15px center;
        background-size: 25px;
    }
}

.no-js .sidenav__element:hover,
.sidenav__element--hover {
    -webkit-transform: translateX(calc(-100% + 38px));
    -ms-transform: translateX(calc(-100% + 38px));
    transform: translateX(calc(-100% + 38px));
}

@media only screen and (min-width : 600px) {

    .no-js .sidenav__element:hover,
    .sidenav__element--hover {
        -webkit-transform: translateX(calc(-100% + 50px));
        -ms-transform: translateX(calc(-100% + 50px));
        transform: translateX(calc(-100% + 50px));
    }
}

.sidenav__element--phone {
    background-image: url(../images/sidenav/phone.svg);
}

.sidenav__element--attention {
    background-image: url(../images/sidenav/attention.svg);
}

.sidenav__element--contact {
    background-image: url(../images/sidenav/contact.svg);
}

.sidenav__element--chat {
    background-image: url(../images/sidenav/chat.svg);
    background-size: 23px;
}

@media only screen and (min-width : 600px) {
    .sidenav__element--chat {
        background-size: 30px;
    }
}

.sidenav__element--calculator {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 30px;
    background-image: url(../images/sidenav/calculator.svg);
    background-size: 14px;
}

@media only screen and (min-width : 600px) {
    .sidenav__element--calculator {
        padding-top: 15px;
        padding-bottom: 15px;
        background-size: 18px;
    }
}

.sidenav__link {
    cursor: pointer;
}

.sidenav__link a {
    color: #fff;
    text-decoration: none;
}

@media only screen and (max-width : 899px) {
    .sidenav__toggler {
        position: absolute;
        top: 0;
        left: 0;
        width: 50px;
        height: 100%;
        display: block;
        border-radius: 100px 0 0 100px;
        cursor: pointer;
    }
}

.d-none {
    display: none;
}

/*==== Seite schmaler Mobile (Neu: 07.2020) ====*/
@media only screen and (max-width : 899px) {
    body {
        width: calc(100% - 43px);
        background-color: #f2f5f7;
    }

    body.external-content {
        width: 100% !important;
        background-color: #fff !important;
    }

    header.main,
    nav.main {
        width: calc(100% + 43px);
        margin-right: -43px;
    }

    @media only screen and (min-width : 600px) {
        body {
            width: calc(100% - 55px);
        }

        header.main,
        nav.main {
            width: calc(100% + 55px);
            margin-right: -55px;
        }
    }
}

/*==== Youtube iFrame (Neu: 07.2020) ====*/
.youtube-container {
    margin: 0 auto;
}

.youtube-container--fullscreen {
    width: 100%;
    max-width: 100% !important;
}

.youtube-container__inner {
    width: 100%;
    height: 0;
    position: relative;
}

.youtube-container iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/*====== Usercentrics (Neu: 07.2020) ====*/
.youtube-container .uc-embedding-container {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

/*==== Ansprechpartner (Neu: 07.2020) ====*/
.wl-contact__content {
    text-align: center;
    line-height: 25px;
}

/*====== Accordion (Neu: 07.2020) ======*/
/*====== Element Header ======*/
.element__header {
    display: block;
    position: relative;
    border-bottom: 4px solid #fff;
    z-index: 20;
    margin-bottom: 0;
}

.element__header:before,
.element__header:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 50px;
    height: 50px;
    -webkit-transform: translateX(-50%) rotate(45deg);
    -ms-transform: translateX(-50%) rotate(45deg);
    transform: translateX(-50%) rotate(45deg);
}

.element__header:after {
    bottom: -14px;
    background-color: #e7eef1;
}

.element__header:before {
    bottom: -20px;
    background-color: #fff;
}

.element__header--red,
.element__header--red:after {
    background-color: #ed1c2a !important;
}

.element__header--orange,
.element__header--orange:after {
    background-color: #f47216 !important;
}

.element__header--yellow,
.element__header--yellow:after {
    background-color: #fddd04 !important;
}

.element__header--gray,
.element__header--gray:after {
    background-color: #567483 !important;
}

.element__header--lightgray,
.element__header--lightgray:after {
    background-color: #dcdfe3 !important;
}

.element__header--turquoise,
.element__header--turquoise:after {
    background-color: #50a092 !important;
}

.element__label {
    display: block;
    color: #000;
    background-color: #e7eef1;
    padding: 20px;
    text-align: center;
    font-weight: 600;
    font-size: 25px;
    position: relative;
    z-index: 10;
}

.element__label--red {
    background-color: #ed1c2a !important;
    color: #fff;
}

.element__label--orange {
    background-color: #f47216 !important;
    color: #fff;
}

.element__label--yellow {
    background-color: #fddd04 !important;
}

.element__label--gray {
    background-color: #567483 !important;
    color: #fff;
}

.element__label--lightgray {
    background-color: #dcdfe3 !important;
}

.element__label--turquoise {
    background-color: #50a092 !important;
    color: #fff;
}

/*====== Element Content ======*/
.element__content-container {
    display: block;
    position: relative;
}

.element__content--red {
    background-color: #fde7de !important;
}

.element__content--orange {
    background-color: #fdf2e5 !important;
}

.element__content--yellow {
    background-color: #fffce5 !important;
}

.element__content--gray {
    background-color: #eeeff2 !important;
}

.element__content--lightgray {
    background-color: #eeeff2 !important;
}

.element__content--turquoise {
    background-color: #ecfdfa !important;
}

/*====== Element Content Collapsible // Accordion ======*/
.collapse-trigger-label {
    cursor: pointer;
}

.collapse-trigger-cbx {
    display: none;
}

.collapse,
.collapse-flex {
    display: none;
}

.collapse-trigger-cbx:checked~.collapse {
    display: block;
}

.collapse-trigger-cbx:checked~.collapse-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

@media only screen and (min-width: 900px) {
    .collapse-trigger-cbx:checked~.collapse-flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }
}

/*====== Accordion Block ======*/
.accordion__element {
    margin-bottom: 35px;
}

.accordion__element--flex-alternate .element__content-container.collapse-flex {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
}

.accordion__element .element__content {
    padding: 20px;
    background-color: #e7eef1;
}

.accordion__element .element__image img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

@media only screen and (min-width: 900px) {
    .accordion__element .element__content-container section {
        width: 50%;
    }

    .accordion__element--flex-alternate .element__content-container.collapse-flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .accordion__element--flex-alternate:nth-child(even) .element__content-container.collapse-flex {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: reverse;
        -ms-flex-direction: row-reverse;
        flex-direction: row-reverse;
    }
}

/*=============== Accordion (Neu: 02.11.2021) ===============*/
/* No JS*/
/* .wl-accordion__cbx {
	display: none;
}

.wl-accordion__content {
	display: none;
}

.wl-accordion__cbx:checked ~ .wl-accordion__content {
	display: block;
} */
/* JS */
.wl-accordion__opener {
    cursor: pointer;
}

.wl-accordion__content {
    display: none;
    width: 100%;
}

.wl-accordion--active .wl-accordion__content {
    display: block;
}

/*=============== Button ===============*/
.rnd-btn {
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
    color: #fff;
    background-color: var(--gray);
    font-weight: 600;
    font-size: 18px;
    padding: 10px 20px 8px;
    border-radius: 500px;
}

/*-- Clearfix --*/
.clearfix:after {
    visibility: hidden;
    display: block;
    content: "";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}

/* IE6 */
*:first-child+html .clearfix {
    zoom: 1;
}

/* IE7 */
/*-- Alerts --*/
.close {
    float: right;
    font-size: 20px;
    font-weight: bold;
    line-height: 18px;
    color: #000;
    text-shadow: 0 1px 0 #ffffff;
    opacity: 0.2;
    filter: alpha(opacity=20);
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.alert {
    padding: 8px 35px 8px 14px;
    margin-bottom: 18px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5;
    border-radius: 4px;
}

.alert,
.alert h4 {
    color: #c09853;
}

.alert h4 {
    margin: 0;
}

.alert .close {
    position: relative;
    top: -2px;
    right: -21px;
    line-height: 18px;
}

.alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #468847;
}

.alert-success h4 {
    color: #468847;
}

.alert-danger,
.alert-error {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}

.alert-danger h4,
.alert-error h4 {
    color: #b94a48;
}

.alert-info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #3a87ad;
}

.alert-info h4 {
    color: #3a87ad;
}

.alert-block {
    padding-top: 14px;
    padding-bottom: 14px;
}

.alert-block>p,
.alert-block>ul {
    margin-bottom: 0;
}

.alert-block p+p {
    margin-top: 5px;
}