@charset "utf-8";

/* Roboto  */
@font-face {
    font-family: 'robotoblack';
    src: url('../webfonts/roboto-black-webfont.woff2') format('woff2'), url('../webfonts/roboto-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotobold';
    src: url('../webfonts/roboto-bold-webfont.woff2') format('woff2'), url('../webfonts/roboto-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotomedium';
    src: url('../webfonts/roboto-medium-webfont.woff2') format('woff2'), url('../webfonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotoregular';
    src: url('../webfonts/roboto-regular-webfont.woff2') format('woff2'), url('../webfonts/roboto-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'robotolight';
    src: url('../webfonts/roboto-light-webfont.woff2') format('woff2'), url('../webfonts/roboto-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


@font-face {
    font-family: 'Dancing Script';
    font-style: normal;
    font-weight: 700;
    src: url('../webfonts/dancing-script-v24-latin-700.woff2') format('woff2'), url('../webfonts/dancing-script-v24-latin-700.woff') format('woff');
    font-display: swap;
}
.mod-login__submit svg {
  width: 20px
}
.jmodedit,
div[role="tooltip"],
.visually-hidden,
.icon-edit,
a[aria-describedby^="editarticle"] {
    display: none !important;
}

.day.wn,
.day-name.wn {
    display: none;
}

*:focus {
    outline: none;
}

#modvisform127telefonlbl {
    opacity: 0;
    line-height: 0;
    margin: 0 !important;
}

.frc-captcha {
    border: 0 !important;
    background-color: transparent !important;
}

.frc-button,
.frc-banner {
    display: none !important;
}

#mod-visform64 .frc-captcha .frc-text,
#mod-visform8 .frc-captcha .frc-text {
    color: #fff !important;

}

#mod-visform64 .frc-captcha .frc-icon,
#mod-visform8 .frc-captcha .frc-icon {
    fill: #fff !important;
    stroke: #fff !important;
}

.frc-captcha * {
    overflow: hidden !important;
}

/* Entfernt die Pfeile des Zählers in Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Für Firefox */
input[type="number"] {
    -moz-appearance: textfield;
}

@media(min-width: 576px) {
    .cat-130 .com-content-article__body>.container {
        width: 100%;
        max-width: 100%;
        padding: 0;
    }

    .py-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
    #headerBox.full .textBox li {
      padding-left: 15%;
      padding-right: 15%;
    }
}

.gradient-bg {
    background-image: linear-gradient(90deg, var(--ci), #48abd9);
    padding: 30px 0;
    color: #fff;
}

.gradient-bg .btn-wrap {
    text-align: center;
    gap: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.elearning-statistics-widget {
    color: #fff;
    background-image: linear-gradient(90deg, var(--ci), #48abd9);
    padding: 5px 50px;
    margin-bottom: 80px;
    position: relative;
    min-height: 177px;
}


.elearning-statistics-widget .esw-heading-section {
    text-align: center;
    font-size: 36px;
    color: #fff
}

.elearning-statistics-widget .esw-subheading-section {
    text-align: center;
    color: #fff;
    font-size: 20px
}

.elearning-statistics-widget .esw-element-row {
    display: flex;
    flex-flow: wrap;
    justify-content: center
}

.elearning-statistics-widget .esw-element-item {
    padding: 0;
    flex: 0 0 max-content;
}

.cat-130 .elearning-statistics-widget .esw-element-item.certificates-count-block,
.cat-130 .elearning-statistics-widget .esw-element-item.trainings-count-block {
    flex: 0 0 351px;
}

.cat-130 .elearning-statistics-widget .esw-element-item.customer-count-block {
    flex: 0 0 270px;
}

.elearning-statistics-widget .esw-card {
    background: transparent;
    padding: 0 45px;
}

.elearning-statistics-widget .esw-card .esw-row {
    display: flex
}

.elearning-statistics-widget .esw-card .esw-details {
    width: 100%;
    display: flex;
    flex-direction: column-reverse;
}

.elearning-statistics-widget .esw-card .esw-details .esw-row {
    justify-content: right;
    text-align: right
}

.elearning-statistics-widget .esw-card .esw-details .esw-details-key {
    font-size: 21px;
    margin-bottom: 22px;
    line-height: 20px
}

.elearning-statistics-widget .esw-card .esw-details .esw-details-value {
    font-size: 70px;
    min-width: 180px;
    font-family: 'robotobold';
    height: 105px;
    opacity: 0;
}

.elearning-statistics-widget .esw-card .esw-details .esw-details-value:before {
    display: none;
}

.elearning-statistics-widget .esw-image svg,
.elearning-statistics-widget .esw-image img {
    width: 70px;
    margin: 20px
}

.elearning-statistics-widget .esw-image {
    display: none;
}

.esw-heading-section,
.esw-subheading-section {
    display: none
}


.freeIcon {
    height: 30px;
    position: absolute;
    top: -14px;
    right: -45px;

}

/* --------------------------------------------
      Allgemein / Main
-------------------------------------------- */
:root {
    /* diverse Farben */
    --ci: #002f74;
    --grauD: #333333;
    --grauM: #6d6d6d;
    --grauH: #ebebeb;
    --gruen: #77b52b;
    --orange: #eb9c3a;
    --blau: #227DA5;
    --WBpaddingX: 150px;
    --WBpaddingY: 90px;
    --paleblue: #5A77A5;
    --abstand1: 100px;
    --abstand2: 50px;
    --difference: calc((100vw - 1270px) / 2);
    --differenceSM: calc((100vw - 1290px) / 2);
}

html {
    scroll-padding-top: 250px;
    /* height of sticky header */
}

*,
::after,
::before {
    box-sizing: border-box;
}

body {
    font-family: "robotolight", Arial;
    font-size: 16px;
    color: var(--ci);
    max-width: 1920px;
    margin: 0 auto;
}

.margin-bottom-minus {
    margin-bottom: -100px;
}

video,
img {
    max-width: 100%;
    height: auto;
}

.yt-videos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-gap: 80px 40px;
    margin-bottom: 80px;
}

.yt-videos>div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.yt-videos h4 {
    background: var(--ci);
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-family: 'robotolight';
    padding: 14px;
    flex: 1 1 auto;
    margin-bottom: 0;
}

.yt-videos img {
    height: auto !important;
    width: auto !important;
}

.yt-videos figure {
    margin-bottom: 0;
}

@media(min-width: 1300px) {
    .container {
        max-width: 1270px;
        margin: 0 auto;
    }

}

.required {
    text-align: left;
}

.dnone {
    display: none !important;
}

.chillcreations-bootstrap {
    text-align: center;
    width: 100%;
    max-width: 1270px;
    margin: 80px auto;
}

.chillcreations-bootstrap table {
    width: 100%;
}

.chillcreations-bootstrap table td {
    text-align: left;
}

.chillcreations-bootstrap table tr:nth-child(odd) {
    background: none;
}

.chillcreations-bootstrap table tr:nth-child(3) {
    display: none;
}

.chillcreations-bootstrap li.icon-checkmark,
.chillcreations-bootstrap ::marker {
    display: none !important;
}

.chillcreations-bootstrap .alert-success {
    background-color: #fff;
    color: var(--ci);
    border: 0 none;
}

.chillcreations-bootstrap .wrap_horizontal .form-group:first-child {
    display: none !important;
}

.item-page .chillcreations-bootstrap .wrap_horizontal .form-group {
    flex: 1 1 auto;
    max-width: 80%;
    max-width: calc(100% - 250px);
}

.chillcreations-bootstrap .wrap_horizontal .form-group .form-control {
    border-radius: 0;
    height: 44px;
}

footer .awesomplete {
    flex: 1 1 auto;
}

footer .chillcreations-bootstrap .wrap_horizontal .form-group {
    padding-right: 0;
    flex: 1 1 50%;
    flex: 1 1 calc(100% - 155px);
    min-width: 200px;
}

footer .chillcreations-bootstrap .wrap_horizontal .col:not(.form-group) {
    padding-left: 0;
}

footer .btn {
    padding: 10px 15px;
}

footer input[type="text"] {
    background-color: #444;
    border: 0 none;
    color: #fff;
}

footer input[type="text"]::placeholder {
    color: #fff;
}

@media(max-width: 575px) {

    .py-7 {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    .chillcreations-bootstrap .wrap_horizontal {
        display: block;
    }

    .chillcreations-bootstrap .wrap_horizontal .form-group {
        max-width: 100%;
        width: 100%;
    }
}

.container-small {
    max-width: 960px;
    margin: 0 auto;
}

#aside .custom.blue p strong::after,
.blue .visforms fieldset input[type="submit"],
.blue h2 u,
.blue .h2 u,
.nohome .blue #switchInfo h2 strong,
#boxen .box.color-blue .btn,
#headerBox #bars .bar.color-blue a.btn,
#headerBox #bars .bar.color-blue span.bold:after,
#switchInfo .color-blue .bar a.btn {
    background-color: var(--blau);
}

#aside .custom.green p strong::after,
.green .visforms fieldset input[type="submit"],
.green h2 u,
.green .h2 u,
.nohome .green #switchInfo h2 strong,
#boxen .box.color-green .btn,
#headerBox #bars .bar.color-green a.btn,
#headerBox #bars .bar.color-green span.bold:after,
#switchInfo .color-green .bar a.btn {
    background-color: var(--gruen);
}

#aside .custom.orange p strong::after,
.orange .visforms fieldset input[type="submit"],
.orange h2 u,
.orange .h2 u,
.nohome .orange #switchInfo h2 strong,
#boxen .box.color-orange .btn,
#headerBox #bars .bar.color-orange a.btn,
#headerBox #bars .bar.color-orange span.bold:after,
#switchInfo .color-orange .bar a.btn {
    background-color: var(--orange);
}
.orange .h2 u {
  color: #000 !important;
}
#boxen .box.color-ci .btn,
#headerBox #bars .bar.color-ci a.btn,
#headerBox #bars .bar.color-ci span.bold:after,
#switchInfo .color-ci .bar a.btn {
    background-color: var(--ci);
}

#boxen .box.color-ci-outline .btn,
#headerBox #bars .bar.color-ci-outline a.btn,
#switchInfo .color-ci-outline .bar a.btn {
    background-color: #fff;
    color: var(--ci);
    border: 1px solid var(--ci)
}

.isAudit .visforms fieldset input[type="submit"] {
    border: 1px solid var(--ci) !important;
}

/*.infotext .btn:hover, .infotext .btn:focus, .infotext .btn:active {
	color: #222;
}*/
.home #switchInfo .color-blue h2+h3,
#boxen .box.color-blue .line {
    border-color: var(--blau);
}

.home #switchInfo .color-ci-outline h2+h3,
#boxen .box.color-ci-outline .line,
.home #switchInfo .color-ci h2+h3,
#boxen .box.color-ci .line {
    border-color: var(--ci);
}

.home #switchInfo .color-green h2+h3,
#boxen .box.color-green .line {
    border-color: var(--gruen);
}

.home #switchInfo .color-orange h2+h3,
#boxen .box.color-orange .line {
    border-color: var(--orange);
}

.d-flex {
    flex-wrap: wrap;
}

.webcam,
.ytplayer {
    overflow: hidden;
}

.webcam.noclick,
.ytplayer.noclick {
    background: #eaeaea;
    border: 1px solid #686868;
    width: 100%;
    position: relative;
    cursor: pointer;
}

footer .item-132,
.webcam.isclick .hint,
.ytplayer.isclick .hint {
    display: none;
}

.video-wrapper .hint,
.ytplayer .hint {
    position: absolute;
    text-align: center;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding: 20px;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    top: 0;
    left: 0;
    opacity: 0;
    transition: 0.3s;
}

.video-wrapper .hint,
.webcam .hint {
    position: absolute;
    text-align: center;
    width: 100%;
    height: auto;
    padding: 20px;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.8);
    bottom: 0;
    left: 0;
    transition: 0.3s;
}

.webcam .hint a,
.ytplayer .hint a {
    color: #fff !important
}

.webcam .hint .activate,
.ytplayer .hint .activate {
    background: var(--ci);
    padding: 10px 20px;
    text-align: center;
    color: #fff;
}

.webcam .hint .activate {
    display: block;
    margin: 10px auto 0;
}

.video-wrapper:hover .hint,
.ytplayer:hover .hint {
    opacity: 1;
}

.webcam img,
.ytplayer img {
    max-width: 100%;
    height: auto
}

.video-wrapper {
    position: relative;
}

.video-wrapper button {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    background: var(--ci);
    color: #fff;
    padding: 10px 20px;


}

.isSelfcheck #mod-visform65 #modvisform205frage-3lbl,
#modvisform175frage-3lbl{
    display: none !important;
}

.ytplayer.isclick img {
    display: none;
}

.webcam.noclick iframe,
.ytplayer.noclick iframe {
    display: none;
}

.webcam.isclick,
.ytplayer.isclick {
    padding-bottom: 56.25%;
    /* ratio 16x9 */
    position: relative;
}

.webcam.isclick iframe,
.ytplayer.isclick iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.webcam.isclick .hint,
.webcam.isclick img {
    display: none;
}

.item-489 i {
    padding-left: 5px;
    color: #f00;
}

/* --------------------------------------------
    Schriften
-------------------------------------------- */
h1,
h2 {
    font-family: "robotolight";
    font-size: 50px;
    line-height: 54px;
}

.h2 {
    font-family: "robotolight";
    font-size: 50px;
    line-height: 54px;
    display: block;
}



.isCareer h1,
.isCareer h2 {
    font-family: "robotolight";
}


.noBox #headerBox h1,
.noBox #headerBox h2 {
    color: #fff;
    font-family: 'robotolight';
    font-size: 45px;
}



h2 u,
.h2 u {
    color: #fff;
    background: var(--ci);
    display: inline-block;
    padding: 5px 25px;
    font-family: 'robotolight';
    font-size: 50px;
    position: relative;
    top: 0px;
    text-decoration: none;
}

h3 {
    font-family: "robotolight";
    font-size: 30px;
    margin-bottom: 0;
}

.h3 {
    font-family: "robotolight";
    font-size: 30px;
    margin-bottom: 0;
    display: block;
}

#contactBox .h3 {
    text-align: center;
}

h1+h2,
h2+h3 {
    font-family: "robotolight";
    font-size: 30px;
    line-height: 35px;
    margin-bottom: 50px;
}


#headerBox h1+h2 {
    margin-bottom: 10px;
}

.textBox h1 {
    margin-bottom: 30px;
}

.home .textBox h1 {
    text-align: center;
  font-size: 42px
}

.home .textBox img {
    position: absolute;
    top: -60px;
    right: -80px;
    width: 220px;
    z-index: 1;
}

@media(max-width: 1420px) {
    .home .textBox img {
        right: -50px;
    }
}

@media(max-width: 1300px) {
    .home .textBox img {
        top: -30px;
        right: -60px
    }
}

@media(max-width: 1200px) {
    .home .textBox img {
        top: -90px;
        right: -20px;
    }
}

h1+p,
h2+div,
h2+div.row,
h2+p,
h2+ul,
ul+h2,
ul+h3,
table+h3,
p+h2,
p+h3 {
    margin-top: 50px
}

h3+p,
h3+ul {
    margin-top: 30px
}

ul+h3,
p+h3 {
    margin-bottom: 30px
}

h1+h2+p,
h1+h2+ul,
h1+h2+div {
    margin-top: 0
}

h2 u,
.h2 u {
    font-size: 50px;
    line-height: 1;
    color: #fff;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px 15px;
}

p {
    font-size: 100%;
    line-height: 20px;
    margin-bottom: 30px;
}

a {
    text-decoration: none;
    color: var(--ci);
}

a:hover,
a:focus,
a:active {
    opacity: 0.8;
}

.signetlink:hover {
    opacity: 1;
    cursor: pointer;
}

strong,
b {
    font-family: 'robotobold';
}

main ul {
    padding: 0;
    list-style: none
}

main ul li {
    text-indent: -13px;
    padding-left: 26px;
}

main ul li::before {
    display: inline-block;
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    padding-right: 10px;
}

main .landingpage .lightgrey .text ul li {
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    margin-bottom: 10px;
    font-size: 22px;
}

main .white .text ul.unstyled li,
main .darkgrey .text ul.unstyled li,
main .lightgrey .text ul.unstyled li {
    background: transparent;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 28px;
    margin-bottom: 0px;
    font-size: 16px;
}

main .blog,
main .border-top-10,
.authorBox .custom {
    /*border-top: 5px solid var(--ci);*/
    padding-top: 50px;
    margin-bottom: 100px;
}

.home .border-top-10,
.product .border-top-10 {
    border-top: 0;
    margin-bottom: 0;
    padding-top: 0;
}

.content h2,
.content h3,
#faq h2,
#faq h3,
.product .com-content-article__body,
.home .com-content-article__body,
.content .h2,
.content .h3 {
    text-align: center;
}

.blue #formSwitch p strong,
.blue .content p strong,
.blue .visCustomText p strong,
.blue ul li::before,
#switchInfo .color-blue ul li::before {
    color: var(--blau);
}

.green #formSwitch p strong,
.green .content p strong,
.green .visCustomText p strong,
.green ul li::before,
#switchInfo .color-green ul li::before {
    color: var(--gruen);
}

.orange #formSwitch p strong,
.orange .content p strong,
.orange .visCustomText p strong {
  color: var(--ci);
}
.orange ul li::before,
#switchInfo .color-orange ul li::before {
    color: var(--orange);
}

.bg-dark h2,
.bg-dark h3 {
    color: #fff;
}

@media(min-width: 576px) {
    .center {
        text-align: center !important
    }

    .paleblue-xl {
        background-color: #5A77A5;
        color: #fff;
    }
    #headerBox.full .container {
     max-width: 95%;
    }
}

@media(min-width: 350px) {
    .nowrap {
        white-space: nowrap;
    }
    #headerBox.full .textBox li {
      padding-left: 15%;
      padding-right: 15%;
    }
}


.h2marked h2,
.marked {
    display: inline;
    line-height: 1.3;
    -webkit-box-decoration-break: clone;
    -ms-box-decoration-break: clone;
    -o-box-decoration-break: clone;
    box-decoration-break: clone;
    color: #fff;
    position: relative;
    left: 10px;
    background: var(--ci);
    box-shadow: 10px 0 0 var(--ci), -10px 0 0 var(--ci);
}

.blue .marked {
    background: var(--blau);
    box-shadow: 10px 0 0 var(--blau), -10px 0 0 var(--blau);
}

.green .h2marked h2,
.green .marked {
    background: var(--gruen);
    box-shadow: 10px 0 0 var(--gruen), -10px 0 0 var(--gruen);
}

.orange .marked {
    background: var(--orange);
    box-shadow: 10px 0 0 var(--orange), -10px 0 0 var(--orange);
}

.fa-brands {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
}

.cat-128 td:first-child {
    width: 20%;
    min-width: 250px;
}

table tr:nth-child(odd) {
    background-color: var(--grauH);
}

table td {
    padding: 5px;
}

iframe,
embed,
video {
    max-width: 100%;
}

.item-119 button {
    border: 0;
    color: #fff;
    background: transparent;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    /* ratio 16x9 */
    height: 0;
    overflow: hidden;
    width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container video,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



/* ratio 4x3 */
.embed-container.ratio4x3 {
    padding-bottom: 75%;
}

.modal-dialog {
    max-width: 70%;
}

.com-users-login {
    max-width: 1080px;
    margin: 80px auto;
}

.com-users-login .form-control {
    margin-bottom: 20px;
}

.com-users-login .input-password-toggle {
    display: none;
}

.com-users-login .com-users-login__submit {
    margin-top: 20px;
    margin-bottom: 20px;
}

#options.form-control {
    border: 1px solid var(--ci);
    border-radius: 0;
}

/* --------------------------------------------
    Buttons
-------------------------------------------- */
.btn {
    color: #fff;
    border-radius: 0;
    border: 1px solid var(--ci);
    padding: 10px 20px;
    font-family: 'robotolight';
    background: var(--ci);
    text-decoration: none;
}

#readMore2 .accordion-item,
#readMore .accordion-item {
    background-color: #fff;
    border: 0 !important;
}

#readMore2 .accordion-button::after,
#readMore .accordion-button::after {
    filter: invert(1)
}

#readMore2 .accordion-button:not(.collapsed),
#readMore .accordion-button:not(.collapsed) {
    display: none
}

.accordion-button {
    border-color: var(-ci);
    border-radius: 0 !important
}

.btn-small {
    padding: 10px 15px;
}


.btn-outline {
    color: var(--ci) !important;
    border: 1px solid var(--ci) !important;
    background: #fff !important;
}

.btn-white {
    border-color: #fff;
    color: var(--ci);
    background-color: #fff;
}

.btn:hover,
.btn:focus,
.btn:active {
    opacity: 0.8;
    color: #fff;
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active {
    background: var(--ci) !important;
    color: #fff !important;
}

.btn-grey {
    background-color: var(--grauD);
    border-color: var(--grauD);
}

.green .visforms fieldset input[type="submit"],
.green .btn,
.green .visBtnCon .btn,
.green .dark .btn,
.btn-green {
    background-color: var(--gruen);
    border-color: var(--gruen);
    color: #fff;
}

.orange .visforms fieldset input[type="submit"],
.orange .btn,
.orange .dark .btn,
.btn-orange {
    background-color: var(--orange);
    border-color: var(--orange);

}
#calculatePrice,
.orange .boxBordered .btn,
.orange .visforms fieldset input[type="submit"],
.boxGradient .btn,
.btn-orange {
    color: #000 !important;

}

.orange .visforms fieldset input[type="submit"] {
    border-color: var(--orange) !important;
}

.blue .visforms fieldset input[type="submit"],
.blue .dark .btn,
.btn-blue {
    background-color: var(--blau) !important;
    border-color: var(--blau) !important;
}

.btn-ci,
.infotext .btn-ci {
    border-color: var(--ci) !important;
    background-color: var(--ci) !important;
    color: #fff !important;
}

.btn-ci-outline,
.infotext .btn-ci-outline {
    background-color: #fff;
    color: var(--ci);
    border: 1px solid var(--ci);
}

.btn-ci-outline:hover,
.btn-ci-outline:active,
.btn-ci-outline:focus,
.infotext .btn-ci-outline:hover,
.infotext .btn-ci-outline:focus,
.infotext .btn-ci-outline:active {
    color: #222;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
    color: var(--ci);
}

.item-page p a:not(.btn) {
    text-decoration: underline;
}

/* --------------------------------------------
    Header
-------------------------------------------- */
header {
    padding-bottom: 30px;
    position: relative;
    z-index: 9;
}

header #top-bar {
    margin: 0 auto;
    text-align: center;
    clear: both;
    height: 45px;
    padding: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

header #top-bar .youtubeLink {
    color: #f00;
    padding: 5px;
}

#mod-custom111 p a:nath-child(2) {
    padding_ 8px
}

header #top-bar .linkedinLink {
    color: #0a66c2;
    padding: 5px 15px;
}

header #top-bar .custom {
    display: block;
}

header #top-bar .custom p {
    margin-bottom: 0;
}

header #top-bar .custom p a:first-child::after {
    content: "|";
    margin-left: 15px;
    padding-right: 15px;
}

header #top-bar .custom p a:nth-child(2)::after {
    content: "|";
    margin-left: 15px;
    padding-right: 5px;
}


header #logo {
    flex: 0 0 320px;
}

.en-gb header #logo {
    flex: 0 0 155px;
}

header #top-navigation {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    position: absolute;
    top: 10px;
    right: 40px;
}

header #top-navigation ul li.parent {
    position: relative;
    cursor: pointer;
}

header #top-navigation ul ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0px;
    z-index: 9;
    background: #fff;
    padding: 15px;
    width: 330px;
    box-shadow: 2px 3px 5px 0px #bebebe;
}

header #top-navigation ul li:hover ul {
    display: block;
}

header #top-navigation ul li a {
    font-family: 'robotolight';
    color: var(--ci);
    padding: 10px;
}

header #top-navigation ul ul li a {
    color: #fff;
    padding: 10px;
    background-color: var(--blau);
    width: 100%;
    display: block;
    font-family: 'robotolight';
    margin-bottom: 10px;
    text-align: center;
}

header #top-navigation ul ul li:first-child a {
    background-color: var(--blau);
}

header #top-navigation ul ul li:last-child a {
    background-color: var(--orange);
    margin-bottom: 0;
}

header #top-navigation .mod-languages ul li {
    margin-right: 0;
    height: 15px;
    line-height: 1;
    padding-right: 10px;
    position: relative;
    top: 1px;
}

header #top-navigation .mod-menu li {
    border-left: 1px solid var(--ci);
    line-height: 1;
}

header #top-navigation .mod-languages ul li a {
    font-family: 'robotolight';
    padding: 0;
}

header #top-navigation .youtubeLink {
    padding-left: 10px;
    margin-left: 0px;
    border-left: 1px solid var(--ci);
    height: 15px;
    display: block;
}

header #top-navigation .youtubeLink i {
    position: relative;
    top: -4px;
    color: #f00;
}

header .iconFree {
    height: 15px;
    position: relative;
    top: -8px;
    padding-left: 5px;

}

header #navigation ul li.item-164,
header #navigation ul li.item-101 {
    display: none;
}

header #navigation ul li:last-child {
    border-right: 0;
}

header #navigation ul li.parent {
    position: relative;
}

header #navigation ul li.parent .fa {
    position: absolute;
    top: 8px;
    right: 25px;
}

header #navigation li:hover ul li.item-210>a,
header #navigation li:hover ul li.item-218>a {
    background: url('../img/privassist.png') no-repeat 160px 5px;
    background-size: 80px;
}

.en-gb header #navigation li:hover ul li.item-210>a,
.en-gb header #navigation li:hover ul li.item-218>a {
    background-position: 185px 5px;
}

header #navigation ul li.item-218>a {
    background-position: 180px 5px;
}

header #navigation li:hover ul li.item-538>a {
    background: url('https://iitr.de/images/firmenlogos/inside_wortbildmarke_gruen.png') no-repeat 180px 10px;
    background-size: 80px;
}

header #mod-custom185 {
    margin-top: 0;
}

footer ul li.parent .fa,
header #top-navigation ul li.parent .fa {
    display: none;
}

header #navigation ul li span,
header #navigation ul li a {
    font-family: 'robotolight';
    padding: 10px;
    color: var(--ci);
}

header #navigation ul.mod-menu>li>span,
header #navigation ul.mod-menu>li>a {
    font-size: 20px;
    padding: 10px 60px
}

header #navigation ul ul {
    display: none;
}



.scroll header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    padding-bottom: 10px;
    padding-top: 10px;
    margin-top: 0;
}

.scroll header #logo {
    position: relative;
    top: -15px;
}

.scroll header #logo svg,
.scroll header #logo img {
    max-width: 200px;
}

.scroll header .btn {
    padding: 5px 30px;
}

.scroll main {
    margin-top: 85px;
}



/* --------------------------------------------
    Footer
-------------------------------------------- */
footer {
    background-color: var(--grauD);
    color: #fff;
    padding: 60px 0;
}

footer p {
    margin-bottom: 0;
}

footer ul.mod-menu>li {
    margin-right: 30px;
}

footer #mod-custom153 p strong,
footer #mod-custom112 .nav-header,
footer #mod-custom193 .nav-header,
footer ul li .nav-header,
footer ul .item-114>a {
    font-size: 20px;
    font-family: "robotomedium";
    margin-bottom: 20px;
    display: block;
}

footer #mod-custom112 .nav-header,
footer #mod-custom193 .nav-header {
    padding-top: 5px;
    margin-bottom: 35px;
}

footer ul li.item-147 {
    position: absolute;
    bottom: 0;
    left: 280px;
}

footer ul li a:hover {
    color: var(--grauH);
}

footer ul.mod-menu__sub li {
    text-indent: -8px;
}

footer ul.mod-menu__sub li a {
    padding-left: 8px;
}

footer ul.mod-menu__sub li.active a {
    font-family: 'robotolight';
    letter-spacing: 0.04em;
}

footer ul.mod-menu__sub li a::before {
    content: "- ";
}

footer ul li.item-147 a {
    font-family: 'robotolight'
}

footer #mod-custom112 a,
footer ul li a,
footer #mod-custom193 a,
footer ul li a {
    color: #fff;
}

footer #mod-custom112 a,
footer #mod-custom193 a {
    font-size: 40px;
    padding-right: 15px;
}

footer #mod-custom112 a .fa-linkedin,
footer #mod-custom193 a .fa-linkedin {
    color: #0a66c2;
}

footer #mod-custom112 a .fa-twitter,
footer #mod-custom193 a .fa-twitter {
    color: #1d9bf0;
}

footer li .fa-youtube,
footer #mod-custom112 a .fa-youtube,
footer #mod-custom193 a .fa-youtube {
    color: #FF0000;
}

footer #copyright {
    text-align: center;
    margin-top: 60px;
}

footer #mod-custom153 {
    flex: 0 0 305px;
}

footer #mod-custom153 {
    flex: 0 0 305px;
}

footer #newsletter {
    flex: 0 0 calc(100% - 305px);
    padding-left: 100px;
}

footer #mod-custom153 p strong {
    font-weight: normal;
    text-transform: uppercase;
}

footer .navbar-expand-md {
    padding-top: 0;
}

#consulting {
    position: fixed;
    bottom: 30px;
    left: 30px;
    display: none;
}

#consulting p {
    margin-bottom: 0;
}

#consulting .shadow-wrap {
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
    position: absolute;
    bottom: 242px;
    left: -78px;
}

#consulting .whitebar {
    background: #fff;
    padding: 15px 15px 30px 30px;
    font-family: 'robotomedium';
    transform: rotate(270deg);
    width: max-content;
    font-size: 24px;
    clip-path: polygon(100% 0, 100% 100%, 3px 100%, 10px 82%, 13px 65%, 13px 35%, 10px 17%, 4px 0);
}

#consulting .bluebar {
    background: var(--ci);
    color: #fff;
    padding: 10px 76px 10px 30px;
    transform: rotate(270deg);
    width: max-content;
    position: absolute;
    left: -30px;
    bottom: 269px;
    font-size: 18px;
}

#consulting .bluebar .fa {
    font-size: 25px;
    position: absolute;
    top: 9px;
    right: 34px;
}

#consulting .bluebox {
    background: var(--ci);
    color: #fff;
    width: 540px;
    padding: 30px 50px 0;
    position: absolute;
    bottom: 152px;
    left: 87px;
    height: 274px;
    transition: 0.3s;
    display: none;
    opacity: 0;
}

#consulting:hover .bluebox {
    display: block;
    opacity: 1;
}

#consulting .bluebox .close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    background-color: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    /* Damit es über anderen Inhalten angezeigt wird */
}

#consulting .bluebox .fa {
    position: absolute;
    top: 28px;
    left: 15px;
    font-size: 27px;
}

#consulting .bluebox .headline {
    font-size: 24px;
    border-bottom: 1px solid #fff;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

#consulting .bluebox .headline img {
    position: absolute;
    right: 50px;
    top: 20px;
}

#consulting .pic img {
    height: 140px;
    width: 140px;
}

#consulting .visforms fieldset {
    display: flex;
    height: 60px;
}

#consulting .visforms fieldset .field549 {
    flex: 1 0 70%;
    margin-right: 0;
    margin-top: 10px;
}

#consulting .visforms fieldset .visBtnCon {
    flex: 0 0 calc(30% - 10px);
}

#consulting .visforms fieldset input[type="text"] {
    background: #fff;
}

#consulting .visforms fieldset input[type="submit"] {
    background: var(--blau);
}

@media(max-width:768px) {
    .home .textBox img {
        transform: translate(0);
        display: block;
        text-align: center;
        margin: -10px auto 30px
    }

    #consulting {
        display: none !important;
        position: fixed;
        bottom: 30px;
        left: 0;
        display: none;
        transform: translateX(-50%);
        width: 430px;
        left: 50%;
    }

    #consulting .position-relative {
        display: flex;
        flex-direction: column-reverse;
        padding-top: 100px;
    }

    #consulting .pic {
        position: absolute;
        top: 0;
        z-index: 3;
    }

    #consulting .shadow-wrap {
        bottom: auto;
        left: auto;
        top: 35px;
        right: 0;
    }

    #consulting .whitebar {
        transform: none;
    }

    #consulting .bluebar {
        background: var(--ci);
        color: #fff;
        padding: 10px 76px 10px 30px;
        transform: none;
        width: 275px;
        position: relative;
        right: 0;
        top: -15px;
        font-size: 18px;
        left: auto;
        margin-right: 0;
        margin-left: auto;
        z-index: 2;
    }

    #consulting .bluebox {
        background: var(--ci);
        color: #fff;
        width: auto;
        padding: 30px 50px 0;
        position: relative;
        bottom: 0;
        left: 0;
        height: 0;
        transition: 0.3s;
        opacity: 0;
        margin-top: -56px;
        z-index: 1;
    }

    #consulting:hover .bluebox {
        height: auto;
        padding-top: 80px;
        opacity: 1;
    }

    #consulting .bluebox .headline {
        font-size: 18px;
    }

    #consulting .bluebox .headline img {
        top: 70px;
    }

    #consulting .bluebox .fa {
        display: none;
    }

    #consulting .visforms fieldset {
        display: block;
        height: auto;
    }

    #consulting .visforms fieldset .field549 {
        flex: 0 0 70%;
        margin-right: 0;
        margin-top: 10px;
    }
}

@media(max-width:500px) {
    #consulting {
        width: 300px;
    }

    #consulting .pic {
        position: absolute;
        top: 20px;
        z-index: 3;
        left: -15px;
    }

    #consulting .pic img {
        height: 80px;
        width: 80px;
    }

    #consulting .bluebar {
        padding: 10px 48px 10px 30px;
        text-align: right;
    }

    #consulting .bluebar .fa {
        right: 15px;
    }

    #consulting .bluebox {
        padding: 30px 15px 0;
    }

    #consulting .whitebar {
        font-size: 19px;
        clip-path: none;
    }

    #consulting .bluebox .headline img {
        top: 70px;
        display: none;
    }

    #consulting:hover .bluebox {
        height: auto;
        padding-top: 55px;
        opacity: 1;
    }
}

/*-------------suche--------------------------*/
#search-form input,
#searchModule input {
    border-radius: 0;
    height: 46px;
}

#search-form input {
    width: 300px;
}

#search-form .btn-secondary {
    margin-left: 50px;
}

#search-form .card {
    border-radius: 0;
    background-color: #f5f5f5;
}

#search-form .form-select {
    border-radius: 0;
    margin-bottom: 20px;
}

.com-finder__navigation.search-pagination,
#search-result-list {
    margin-top: 100px;
}

#search-result-list .result__taxonomy,
.com-finder li::before {
    display: none;
}

.result__title-text {
    font-size: 1.3rem;
    margin-top: 10px;
    margin-bottom: 10px !important;
}

.com-finder__counter.search-pages-counter {
    text-align: center;
    margin-bottom: 50px;
}

.awesomplete>ul {
    border-radius: 0;
    background: #f5f5f5;
    border: 1px solid #ddd;
}

.awesomplete>ul>li {
    color: #000;
    text-indent: 0;
}

/* --------------------------------------------
  Content -  HeaderBox
-------------------------------------------- */
#headerBox {
    position: relative;
}

#headerBox.full .container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.noBox #headerBox.full .container {
    left: auto;
    width: 500px;
    right: 10%;
    transform: translate(0, -50%);
}

.noBox #headerBox .visforms {
    max-width: 300px;
}

#headerBox picture {
    box-shadow: 10px 10px 10px 2px #bebebe;
    display: block;
}

@media(min-width: 1900px) {
    #headerBox picture {
        min-height: 595px;
    }
}

#headerBox picture img {
    width: auto;
    height: auto;
}



#headerBox.full .textBox {
    background: #fff;
    width: 670px;
    margin-left: auto;
    padding: 35px;
}

.home #headerBox.full .textBox {
    width: 970px;
}

@media(min-width: 1640px) {
    .home #headerBox.full .textBox {
        position: relative;
        left: 60px;
        margin-right: -60px;
    }
}

@media(max-width: 1640px) {
    .home #headerBox.full .textBox {
        width: 885px;
    }
}
@media(max-width: 1300px) and (min-width: 1201px) {

.home #headerBox.full .textBox .d-flex {
      justify-content: flex-start !important;
}
  }
@media(max-width: 1300px) and (min-width: 992px) {
  .home #boxen.tablet3 .box .border ul {
    min-height: 170px;
}
  }
@media(max-width: 1300px) {

    .home #headerBox.full .textBox {
        width: 720px;
    }

    .home #headerBox.full .textBox h1 {
        font-size: 30px
    }
}

.isCareer #headerBox.full .textBox {
    background-color: rgba(255, 255, 255, 0.5);
}

.noBox #headerBox.full .textBox {
    background-color: transparent;
    color: #fff;
}

.cat-524 #headerBox.full .textBox {
    background: none;
    width: 590px;
}


.noBox #headerBox.full .textBox {
    width: 100%;
    padding: 0;
}

main #headerBox .textBox ul {
    margin-bottom: 30px;
    margin-left: 30px;
}

#headerBox .textBox a.btn {
    height: 42px;
    line-height: 1
}

#headerBox #bars .bar {
    background: var(--ci);
    color: #fff;
    padding: 10px 0;
    margin-bottom: 20px;
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 4px 5px 8px #797979;
    margin-left: -65px;
    width: 120%;
    width: calc(100% + 140px);
    min-height: 75px;
}

#headerBox #bars .bar.hasButton {
    margin-bottom: 60px;
}

#headerBox #bars .bar a.around {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#headerBox #bars .bar a.around:hover {
    opacity: 1;
    color: #ccc;
}

#headerBox.full #bars .bar::after {
    content: "";
    display: block;
    border-width: 11px 40px 0 0;
    border-color: #002f3e transparent transparent transparent;
    position: absolute;
    bottom: -10px;
    right: 0px;
    width: 41px;
    height: 10px;
    border-style: solid;
}

#headerBox #bars .bar span {
    display: inline-block;
    padding: 0 25px;
    flex: 0 0 auto;
    line-height: 20px;
}

#headerBox #bars .bar.el-2 span {
    flex: 0 0 50%;
}

#headerBox #bars .bar.el-3 span {
    max-width: 30%;
}

#headerBox #bars .bar span:first-of-type {
    border-right: 1px solid #fff;
}

#headerBox #bars .bar span:last-of-type {
    padding-right: 0px;
    display: inline-flex;
    align-items: center;
}

#headerBox #bars .bar span.bold {
    font-size: 20px;
    font-family: 'robotolight';
    min-width: 275px;
    max-width: 430px;
    line-height: 26px;
    position: relative;
    padding-left: 65px;
    display: inline-flex;
    align-items: center;
}

#headerBox #bars .bar span.bold:after {
    height: 5px;
    width: 80%;
    position: absolute;
    bottom: -12px;
    right: 15px;
    content: "";
}

#headerBox #bars .bar.hasButton span.bold::after {
    display: none;
}

#headerBox #bars .bar .fa-chevron-right {
    padding: 5px 20px;
    font-size: 35px;
    margin-left: auto;
    position: absolute;
    right: 20px;
    top: 13px;
}

#headerBox #bars .bar a {
    color: #fff;
}

#headerBox #bars .bar a.btn {
    position: absolute;
    top: 100%;
    left: 0;
    font-family: 'robotolight'
}

/* --------------------------------------------
    Boxen
-------------------------------------------- */
#boxen {
    background-color: var(--grauH);
    padding: 80px 0 60px;
}

.cat-130 #boxen {
    background-color: #f5f5f5;
}

#boxen>.container>h2,
#boxen>.container>h3 {
    text-align: center;
}

#boxen>.container>h3+.text-center {
    margin-bottom: 30px;
}

#boxen .box {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 20px;
}

#boxen .box .border {
    position: relative;
    padding: 30px 20px 95px;
    border: 1px solid var(--grauM);
    background-color: #fff;
    height: 100%;
    box-shadow: 5px 5px 5px 2px #bebebe;
}

#boxen .box .border.noLink {
    padding-bottom: 30px;
}

#boxen .box .border ul {
    text-align: left;
    margin: 20px 3px 10px;
    max-width: max-content;
}

#boxen .box .border img {
    max-height: 240px;
    width: auto;
}

#boxen .box.count-1,
#boxen .box.count-3,
#boxen .box.count-5,
#boxen .box.count-7,
#boxen .box.count-8,
#boxen .box.count-6 {
    flex: 0 0 33.3333%;
}

#boxen .box.count-10,
#boxen .box.count-2 {
    flex: 0 0 50%;
}

#boxen .box.count-4 {
    flex: 0 0 25%;
}

#boxen .box h3,
#boxen .box .h3 {
    font-size: 22px;
    font-family: 'robotoregular';
    margin-bottom: 5px;
}

#boxen .box h3 span,
#boxen .box h4,
#boxen .box .h4 {
    font-size: 16px;
    font-family: 'robotolight';
    display: block;
}

#boxen .box.color-orange .h4 {
    border-bottom: 1px solid var(--orange);
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: block;
}

#boxen .box p {
    margin-bottom: 0
}

#boxen .box p strong {
    margin-bottom: 20px;
    display: block;
}

#boxen .box .line {
    border-bottom: 5px solid;
    padding-bottom: 20px;
    margin-bottom: 20px;
    display: block;
}

#boxen .box .btn.btn-absolute {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 95%;
    width: calc(100% - 40px);
}

#boxen .box .btn-wrap-absolute {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 95%;
    width: calc(100% - 40px);
    display: flex;
    gap: 20px;
}

#boxen .box .btn-wrap-absolute .btn {
    padding: 10px !important;
    flex: 1 1 auto;
}

/* --------------------------------------------
    Wechsel Information
-------------------------------------------- */
#switchInfo {
    padding-top: 80px;
}

#switchInfo .row {
    background-color: #f2f2f2;
}

.nohome #switchInfo .container-fluid h2 {
    font-size: 30px;
    line-height: 32px;
    font-family: 'robotolight'
}

.nohome #switchInfo .container-fluid .h2 u,
.nohome #switchInfo .container-fluid h2 u {
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    font-family: 'robotolight';
    font-size: 30px;
}

.nohome #switchInfo h2 {
    margin-bottom: 30px;
}

.home #switchInfo h2+h3 {
    border-bottom: 5px solid;
    padding-bottom: 30px;
}

#switchInfo h2+div {
    margin-top: 0;
}

#switchInfo .infotext h3 {
    font-size: 30px;
    font-family: 'robotolight';
    margin-bottom: 20px;
}

/* CHANGE */
#switchInfo .pic {
    min-height: 600px;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
}

#switchInfo .pic img {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    width: 100%;
}

@media(max-width: 1400px) {
    #switchInfo .pic img {
        width: auto;
        height: 100%;
    }
}

/* /CHANGE */
#switchInfo .text {
    padding: var(--WBpaddingY) var(--WBpaddingX);
}

#switchInfo .bar {
    background: var(--ci);
    color: #fff;
    padding: 10px 0;
    margin-bottom: 20px;
    margin-left: calc(var(--WBpaddingX) * (-1));
    width: 120%;
    width: calc(100% + var(--WBpaddingX));
    position: relative;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    box-shadow: 4px 5px 8px #797979;
}

#switchInfo .flex-row-reverse .bar {
    margin-left: 0px;
}

#switchInfo .bar span {
    display: inline-block;
    padding: 0 25px;
    flex: 0 0 50%;
    line-height: 20px;
}

#switchInfo .bar span:first-of-type {
    border-right: 1px solid #fff;
    padding-left: var(--WBpaddingX);
}

#switchInfo .flex-row-reverse .bar span:first-of-type {
    padding-left: 15px;
}

#switchInfo .bar a.btn {
    position: absolute;
    top: 100%;
    left: auto;
    right: 0;
    font-family: 'robotolight'
}

#switchInfo .flex-row-reverse .bar a.btn {
    left: 0;
    right: auto;
}

#switchInfo ul {
    padding-left: 0;
    list-style: none;
}

/* --------------------------------------------
  Carousel
-------------------------------------------- */
.carousel-inner {
    text-align: center;
}

.carousel .fa {
    color: var(--grauD);
}

.carousel img {
    margin: 0 2%;
    height: auto !important
}

/* --------------------------------------------
  counter
-------------------------------------------- */
.counter {
    font-size: 30px;

}

.counter .item strong,
.counter .plus {
    font-size: 60px;
    font-family: 'robotomedium';
}

.counter .item strong {
    display: block;
}

#blueCounter {
    background-image: linear-gradient(90deg, var(--ci), var(--blau) calc(100% - 125px), var(--ci) calc(100% - 125px));
    padding: 50px;
    margin-bottom: 80px;
    position: relative;
}

#blueCounter .counter {
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    justify-content: center;
}

#blueCounter .counter .item {
    margin-right: 50px;
    text-align: right;
}

#blueCounter .counter .item strong {
    display: block;
    font-size: 70px;
    line-height: 1;
}

#blueCounter .counter .item>span {
    display: block;
    font-size: 20px;
    font-family: 'robotolight';
}

#blueCounter::after {
    content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: 20px;
    font-size: 200px;
    background: url('/images/icons/shield.svg') no-repeat;
    width: 202px;
    height: 210px;
    display: block;
}

.inside {
    width: 100px;
    margin: 0 auto;
    display: block;
}

/* --------------------------------------------
  Vergleichstabelle
-------------------------------------------- */
.greenHeadline .text-0>h2 {
    font-size: 50px;
    line-height: 1;
    color: #fff;
    width: max-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 10px 20px 15px;
    background-color: var(--gruen);
}

#vergleichstabelle .col-12 {
    padding: 0 5px;
}

#vergleichstabelle .kopfzeile h2 {
    font-size: 28px;
    line-height: 33px;
    margin-bottom: 0;
    text-transform: uppercase;
    font-family: 'robotolight';
    position: relative;
    z-index: 3;
}

#vergleichstabelle .vergleichEins .kopfzeile,
#vergleichstabelle .vergleichZwei .kopfzeile,
#vergleichstabelle .vergleichDrei .kopfzeile {
    color: #fff;
    padding: 10px 10px;
    height: 230px;
    background: url(/images/icons/datenschutz-kit-basis-header.png) center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#vergleichstabelle .vergleichZwei .kopfzeile {
    background: url(/images/icons/datenschutz-kit-plus-header.png) center top;
    background-size: 100% auto;
    background-repeat: no-repeat;
}

#vergleichstabelle .kopfzeile .kopfzeileText {
    text-align: left;
    padding-left: 10px;
}

#vergleichstabelle .kopfzeile .kopfzeileText h3 {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
    font-weight: bold;
    margin-bottom: 0px;
}
#vergleichstabelle2 {
  position: relative;
}
#vergleichstabelle2::before {
  content: "";
  background: var(--grauH);
  width: 100%;
  height:180px;
  position: absolute;
  left: 0;
  top: 10px;
  z-index: -1;
}
#vergleichstabelle2 .btn {
    padding: 10px !important;
}

#vergleichstabelle2 .btn-blue {
    background-color: var(--blau) !important;
    border-color: var(--blau) !important;
}

#vergleichstabelle2 .kopfzeile {
    padding: 10px;
    height: 200px;
    margin-bottom: 50px;
    position: relative;
}

#vergleichstabelle2 .Angebot {
    padding: 10px;
}

#vergleichstabelle2 .Angebot .btn {
    padding: 10px 15px;
}

#vergleichstabelle2 .kopfzeile h2 {
    font-size: 25px;
    line-height: 1;
    margin-bottom: 10px;
    padding-bottom: 12px;
    font-family: 'robotomedium';
    position: relative;
    z-index: 3;
    border-bottom: 1px solid #fff;
    text-align: left;
    color: #fff;
}

#vergleichstabelle2 .vergleichEins .kopfzeile .pfeil,
#vergleichstabelle2 .vergleichEins .kopfzeile .kopfzeileText {
    background-color: var(--ci);
}

#vergleichstabelle2 .vergleichZwei .kopfzeile .pfeil,
#vergleichstabelle2 .vergleichZwei .kopfzeile .kopfzeileText {
    background-color: var(--gruen);
}

#vergleichstabelle2 .vergleichDrei .kopfzeile .pfeil,
#vergleichstabelle2 .vergleichDrei .kopfzeile .kopfzeileText {
    background-color: var(--blau);
}

#vergleichstabelle2 .vergleichEins .kopfzeile .kopfzeileText,
#vergleichstabelle2 .vergleichZwei .kopfzeile .kopfzeileText,
#vergleichstabelle2 .vergleichDrei .kopfzeile .kopfzeileText {
    color: #fff;
    padding: 20px 20px 0;
    position: relative;
    text-align: left;
    height: 100%;
}

#vergleichstabelle2 .kopfzeile .pfeil {
    width: 100%;
    height: 50px;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
    margin-top: -1px;
}

#vergleichstabelle2 .vergleichZwei .kopfzeile img {
    position: absolute;
    bottom: -50px;
    right: 30px;
    width: 110px;
}

#vergleichstabelle2 .kopfzeile .kopfzeileText h3 {
    font-size: 16px;
    line-height: 20px;
    margin-top: 10px;
    font-family: 'robotomedium';
    margin-bottom: 0px;
    color: #fff;
}

#vergleichstabelle2 .kopfzeile .kopfzeileText p {
    margin: 10px 0 0;
}

#vergleichstabelle2 ul li {
    text-indent: 0;
    padding-left: 0;
    text-align: left;
    min-height: 70px;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}


#vergleichstabelle2 .vergleichInfo ul li {
    justify-content: start;
    text-align: left;
    font-size: 14px;
    line-height: 1.2;
}

#vergleichstabelle2 li::before,
#vergleichstabelle2 .vergleichInfo li::before,
#vergleichstabelle2 .vergleichInfo li>span::before {
    display: none !important;
}

#vergleichstabelle2 ul li>span::before {
    display: inline-block;
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    color: var(--gruen);
    font-size: 20px;
    background-color: #E4F0D5;
    border-radius: 50%;
    height: 36px;
    width: 36px;
    text-align: center;
    padding: 3px;
}

#vergleichstabelle2 ul li>span.no::before {
    content: "\f00d";
    color: #F75454;
    font-size: 21px;
    background-color: #FDDDDD;
}

#vergleichstabelle2 ul li>span.booking::before {
    content: "\21";
    color: #f7ce54;
    font-size: 21px;
    background-color: #fdf6dd;
}


@media(max-width: 1300px) {
    #vergleichstabelle2 .vergleichZwei .kopfzeile img {
        position: absolute;
        bottom: -40px;
        right: 20px;
        width: 90px;
    }

}

@media(max-width: 1300px) and (min-width: 992px) {

    #vergleichstabelle2 .Angebot .btn .pipe {
        display: none
    }

    #vergleichstabelle2 .Angebot .btn strong {
        display: block;
    }
}

@media(max-width: 1200px) {
    .home #headerBox.full .textBox {
        width: 100%;
    }

    .en-gb header #navigation li:hover ul li.item-210>a,
    .en-gb header #navigation li:hover ul li.item-218>a {
        background-position: 230px 5px;
    }

    #vergleichstabelle2 .vergleichZwei .kopfzeile img {
        display: none
    }

    .freeIcon {
        top: 8px;
        right: auto;
        left: 50px;
    }

    #vergleichstabelle .kopfzeile .kopfzeileText {
        text-align: center;
    }

    #vergleichstabelle .vergleichZwei .kopfzeile {
        background: url(/images/icons/datenschutz-kit-plus-blanko-header.png) center top;
        background-size: 100% auto;
        background-repeat: no-repeat;
    }
}

@media(max-width: 992px) {

    #vergleichstabelle .vergleichEins .kopfzeile,
    #vergleichstabelle .vergleichZwei .kopfzeile,
    #vergleichstabelle .vergleichDrei .kopfzeile {
        padding-top: 90px;
        background: none var(--ci);
    }

    #vergleichstabelle .kopfzeile .kopfzeileText {
        padding: 0;
    }

    #vergleichstabelle .kopfzeile .kopfzeileText h2 {
        transform: rotate(-90deg);
    }

    #vergleichstabelle .kopfzeile .kopfzeileText h3,
    #vergleichstabelle .kopfzeile .kopfzeileText p {
        display: none;
    }

    #vergleichstabelle2 .kopfzeile .kopfzeileText h2 {
        transform: rotate(-90deg);
        transform-origin: 60% 100%;
        border-bottom: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    #vergleichstabelle2 .vergleichZwei .kopfzeile img,
    #vergleichstabelle2 .kopfzeile .pfeil,
    #vergleichstabelle2 .kopfzeile .kopfzeileText h3,
    #vergleichstabelle2 .kopfzeile .kopfzeileText p {
        display: none;
    }

    #vergleichstabelle2 .Angebot a {
        transform: rotate(-90deg);
        transform-origin: 65% 76%;

    }

    #vergleichstabelle2 .Angebot {
        padding: 0;
        margin-top: 0 !important;
        position: relative;
        height: 320px;
    }

    #vergleichstabelle2 .Angebot a {
        transform: rotate(-90deg) translate(-50%, 0%);
        transform-origin: center;
        left: -50px;
        position: absolute;
        top: 0;
        width: 290px !important;
    }

}

@media(max-width: 768px) {
  #vergleichstabelle2::before {
    height: 170px;
}
    #vergleichstabelle .btn-ci {
        transform: rotate(-90deg);
        padding: 28px 10px;
        width: auto !important;
        height: 111px;
    }

    #vergleichstabelle .vergleichInfo {
        padding-right: 0;
    }


    #vergleichstabelle2 .kopfzeile {
        margin-bottom: 0;
        height: 190px;
    }

    #vergleichstabelle2 .kopfzeile .kopfzeileText h2 {
        transform-origin: 0;
        text-align: center;
        width: 100%;
        height: 0px;
        top: 90px;
    }

    #vergleichstabelle2 .Angebot a {
        left: -100px;
    }

}

#vergleichstabelle .kopfzeile .kopfzeileText p {
    font-size: 14px;
    margin: 0;
}


#vergleichstabelle .vergleichInfo .kopfzeile {
    padding: 35px 0px;
    height: 230px;
}

#vergleichstabelle .vergleichEins img,
#vergleichstabelle .vergleichZwei img,
#vergleichstabelle .vergleichDrei img {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
}


#vergleichstabelle .vergleichEins,
#vergleichstabelle .vergleichZwei,
#vergleichstabelle .vergleichDrei {
    border: 1px solid var(--ci);
    padding-bottom: 40px;
}

#vergleichstabelle .vergleichInfo {
    border: 2px solid #fff;
    padding-bottom: 38px;
    padding-right: 3em;
}

#vergleichstabelle .vergleichEins ul,
#vergleichstabelle .vergleichZwei ul,
#vergleichstabelle .vergleichDrei ul {
    padding: 0 50px;
}

@media(max-width: 576px) {
    #vergleichstabelle .btn-ci {
        transform: rotate(-90deg);
        padding: 14px 11px;
        width: 110px !important;
        height: 74px;
        position: relative;
        top: 20px;
        left: -18px;
        display: block;
    }

    #vergleichstabelle .vergleichEins ul,
    #vergleichstabelle .vergleichZwei ul,
    #vergleichstabelle .vergleichDrei ul {
        padding: 0 0px;
    }

    #vergleichstabelle .vergleichInfo {
        padding-right: 0;
        padding-left: 2em;
    }

    #vergleichstabelle .col-sm-6 {
        width: calc(100% - 180px);
    }

    #vergleichstabelle .col-sm-3:nth-child(2) {
        padding-right: 5px;
        width: 90px;
    }

    #vergleichstabelle .col-sm-3:nth-child(3) {
        padding-left: 5px;
        width: 90px;
    }

    #vergleichstabelle2 {
        margin: 0;
    }

    #vergleichstabelle2 .kopfzeile .kopfzeileText h2 {
        font-size: 24px !important;
    }

    #vergleichstabelle2 .Angebot a {
        transform: rotate(-90deg) translate(-50%, -60px);
        left: -42px;
        top: -20px;
    }
}

@media(max-width: 480px) {
  #vergleichstabelle2::before {
    height: 146px;
    left: -2px;
    top: 2px;
    z-index: -1;
}
    #vergleichstabelle2 .kopfzeile {
        padding: 2px;
        height: 150px;
    }

    #vergleichstabelle2 .vergleichEins .kopfzeile .kopfzeileText,
    #vergleichstabelle2 .vergleichZwei .kopfzeile .kopfzeileText,
    #vergleichstabelle2 .vergleichDrei .kopfzeile .kopfzeileText {
        padding: 10px 15px 0;
    }

    #vergleichstabelle2 .col-2 {
        width: 60px;
    }

    #vergleichstabelle2 .col-6 {
        width: calc(100% - 180px);
    }

    #vergleichstabelle2 .Angebot a {
        transform: rotate(-90deg) translate(-50%, -68px);
    }

    #vergleichstabelle2 ul li {

        min-height: 90px;
    }
}

#vergleichstabelle ul li {
    text-indent: 0;
    padding-left: 0;
    text-align: left;
    min-height: 50px;
    border-bottom: 2px dashed #ddd;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

#vergleichstabelle ul {
    margin-bottom: 40px;
}

#vergleichstabelle ul:last-child {
    margin-bottom: 0;
}

#vergleichstabelle ul:last-child li:last-child {
    border-bottom: 0;
}

#vergleichstabelle .Preis {
    font-family: 'robotoblack';
    font-size: 20px;
}

#vergleichstabelle .vergleichInfo ul li {
    justify-content: flex-end;
    text-align: right;
    font-size: 14px;
    line-height: 1.2;
}

#vergleichstabelle .vergleichInfo .Preis,
#vergleichstabelle .vergleichInfo .kopfzeile h2 {
    text-align: right;
    text-transform: none;
}

#vergleichstabelle ul li::before {
    display: none;
}

#vergleichstabelle ul li>span {
    display: inline-block;
    width: 40px;
    text-align: center;

}

#vergleichstabelle ul li>span::before {
    display: inline-block;
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    color: var(--gruen);
    font-size: 25px;
}

#vergleichstabelle ul li>span.no::before {
    content: "\f00d";
    color: var(--blau);
    font-size: 30px;
}

/* --------------------------------------------
  Kontakt Box
-------------------------------------------- */
#contactForm {
    margin-bottom: 100px;
}

/*
#contactForm div.required > label.visCSSlabel.asterix-ancor:after, #contactForm label {
  display: none !important;
  height: 0;
  margin: 0;
  padding: 0;
}*/
#contactForm label {
    margin: 0 !important;
    font-size: 16px;
    font-family: 'robotolight'
}

#contactBox {
    background: url(../img/contactbox-bg.webp) no-repeat top left #fff;
    padding: 0px 0 15px;
    margin: 30px 0 0;
}

#contactBox .custom,
#contactBox .rueckruf,
#contactBox .beratung {
    width: 850px;
    margin-left: auto;
    text-align: left;
}

#contactBox .rueckruf .btn {
    height: 50px;
}

#contactBox .custom .h2 {
    font-size: 50px;
    font-family: 'robotolight';
    color: var(--ci);
    border-bottom: 5px solid var(--ci);
    text-align: center;
    padding-bottom: 30px;
    margin-bottom: 30px;
}

#contactBox .custom .h3 {
    font-size: 30px;
    text-align: center;
    margin-bottom: 0px;
    font-family: 'robotolight';
}

#contactBox .custom h4 {
    font-size: 30px;
    font-family: 'robotoblack';
    text-align: center;
    line-height: 32px;
    margin-bottom: 0;
}

#contactBox .custom h5 {
    font-size: 16px;
    font-family: 'robotolight';
    text-align: center;
    border-bottom: 5px solid var(--grauM);
    margin-bottom: 15px;
    padding-bottom: 15px;
}

#contactBox .custom p {
    margin-bottom: 10px;
}

#contactBox .custom .d-flex {
    margin-top: 50px;
}

#contactBox .custom .d-flex>div {
    flex: 0 0 40%;
    text-align: center;
}

#contactBox .custom .d-flex>div:first-child {
    padding-right: 50px;
    flex: 0 0 60%;
}

#contactBox .custom .btn {
    width: 100%;
    font-size: 20px;
    font-family: 'robotolight';
    line-height: 1;
}

#contactBox .custom .btn .fa {
    padding-right: 10px;
    float: left;
    position: relative;
    top: 5px;
}

.container .visforms {
    padding-bottom: 30px;
}

#contactBox .container .visforms {
    padding-bottom: 0px;
    padding-top: 30px;
}

#contactBox .visforms input {
    margin-bottom: 5px;
}

#contactBox .visforms textarea {
    margin-bottom: 0px;
}

#contactBox .visforms .rueckruf .visBtnCon {
    flex: 0 0 50%;
  max-width: 50%;
    margin: 0 !important;
  display: flex;
}

#contactBox .visforms .rueckruf .visBtnCon input {
    margin: 0 !important;
    padding: 10px;
      flex: 1 0 0;
}


#contactBox .visforms .beratung .field-calendar>.input-append>button {
    width: 65px;
    padding: 10px;
}

#contactBox .visforms .beratung input[type="text"],
#contactBox .visforms .beratung input[type="date"],
#contactBox .visforms input[type="email"],
#contactBox .visforms textarea {
    background: #fff;
}

#contactBox .visforms .beratung .visBtnCon {
    margin-left: auto;
    flex: 0 0 100%;
  display: flex;
}
#contactBox .visforms .beratung .visBtnCon .btn {
  flex: 1 0 0;
}
#mod-visform35 .visBtnCon small {
    text-align: left;
    display: block;
}

/* --------------------------------------------
FAQ Startseite
-------------------------------------------- */
.home #faq {
    padding: 0 0 80px;
}

.home #faq h2,
.home #faq h3 {
    position: relative;
}

.home #faq .faq-list {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 50px -50px 0;
}

.home #faq .faq-list>div {
    flex: 0 0 50%;
    padding: 0 50px;
}

.home #faq .faq-list h4 {
    font-size: 16px;
    font-family: 'robotolight';
    margin-bottom: 0;
}


/* --------------------------------------------
FAQ Unterseite
-------------------------------------------- */
.nohome #faq {
    background-color: var(--grauH);
    padding: 70px 0;
}

#faqAccordion {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0 -15px;
}

#faqAccordion .accordion-item {
    flex: 0 0 50%;
    padding: 0 15px;
    background-color: transparent;
    border: 0;
    margin-bottom: 20px;
}

#faqAccordion .accordion-item h4 {
    background-color: var(--grauM);
    margin-bottom: 0;
}

#faqAccordion .accordion-item .accordion-collapse {
    background-color: #fff;
    border: 1px solid var(--grauD);
    padding: 15px;
}

#faqAccordion .accordion-item .accordion-collapse p {
    margin-bottom: 0;
    color: var(--grauD);
}

#faqAccordion .accordion-item .accordion-collapse ul {
    color: var(--grauD);
    margin-top: 10px;
}

#faqAccordion .accordion-button {
    color: var(--grauD);
    border: 1px solid var(--grauD);
    background-color: #ccc;
    box-shadow: none;
    border-radius: 0;
}

#faqAccordion .accordion-button:not(.collapsed) {
    color: #fff;
    border: 1px solid #999;
    background-color: #999;
}

#faqAccordion .accordion-button:not(.collapsed)::after {
    content: "\f068";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    background-image: none;
    font-size: 20px;
    transform: none;
}

#faqAccordion .accordion-button::after {
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    background-image: none;
    content: "\2b";
    font-size: 30px;
    width: auto;
    height: 40px;
}

/* ----------------------------------
IT-Kanzlei Hinweisgebersystem Unterseite
---------------------------------- */
@media(min-width: 1200px) {
    .cat-572 .noBox #headerBox.full .textBox {
        margin-left: -50px;
        text-align: center;
    }
}

/* ----------------------------------
Datenschutz-Tools Unterseite
---------------------------------- */
.cat-569 .content .row {
    align-items: center;
}

.cat-569 #headerBox.full .textBox h1 span {
    font-family: 'Dancing Script';
    font-size: 150%;
    font-weight: 700;
    margin-left: 36px;
}

.cat-569 #headerBox.full .textBox h1 {
    line-height: 60px;
    margin-bottom: 20px;
}

@media (min-width: 992px) {

    .cat-569 .content .text {
        padding-top: 30px !important;
        padding-bottom: 0px !important;
        min-height: 350px;
        display: inline-flex;
        width: 100%;
        flex: 0 0 100%;
        align-items: center;
    }
}

.cat-569 .content .text .field-value {
    width: 100%
}

@media(max-width: 575px) {

    .cat-569 #headerBox.full .textBox h1 {
        line-height: 46px;
        margin-bottom: 20px;
    }
}

/* ----------------------------------
Provisionsmodelle Unterseite
---------------------------------- */
.cat-593 #headerBox.full .container {
    top: 20%;
}

.cat-593 #headerBox.full .textBox {
    background: none;
    margin-left: 0;
    margin: 0 auto;
    text-align: center;
}



/* ----------------------------------
YellowBox
---------------------------------- */
.klappBox {
    position: relative;
    padding: 15px 50px 15px 15px;
    text-align: left;
    margin-bottom: 20px;
}

.klappBox .klappText {
    height: 100px;
    overflow: hidden;
}

.klappBox.open .klappText {
    height: auto;
    white-space: normal;
}

.klappBox.yellow,
.klappBox.yellow .dots {
    background-color: #ffe;
    border: 1px solid #ffdc8f
}

.klappBox.grey,
.klappBox.grey .dots {
    background-color: #eee;
    border: 1px solid #ccc;
}

.klappBox .fa {
    float: right;
    width: 30px;
    height: 30px;
    background: #f9f9f9;
    padding: 9px 0;
    text-align: center;
    cursor: pointer;
    position: absolute;
    right: 15px;
}

.klappBox .dots {
    position: absolute;
    right: 50%;
    margin-right: -20px;
    bottom: -11px;
    width: 40px;
    height: 20px;
    text-align: center;
    cursor: pointer;
    line-height: 11px;
}

.klappBox.open .dots {
    display: none;
}

.klappBox.open .fa-caret-down:before {
    content: "\f0d8";
}


.accordion .accordion-button:not(.collapsed) .mehr {
    display: none
}

.accordion .accordion-button.collapsed .weniger {
    display: none
}

/* --------------------------------------------
    LiveDemo
-------------------------------------------- */
.cat-130 #b3,
.cat-130 #b3 {
    background-image: url('/templates/iitr2022/img/live-demo-bg.webp');
    background-repeat: no-repeat;
    background-position: 83% bottom;
    background-size: contain;
}

@media(max-width: 1500px) {

    .cat-130 #b3,
    .cat-130 #b3 {
        background-position: 95% bottom;
    }
}

@media(max-width: 1200px) {

    .cat-130 #b3,
    .cat-130 #b3 {
        background-image: none;
    }
}

/* --------------------------------------------
    Unterseiten
-------------------------------------------- */
.siegelRechts {
    width: 100px;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
}

.cat-131 #b8,
.cat-117 #b8 {
    padding-bottom: 15px;
}

.cat-117 #headerBox.full .textBox {
    padding-right: 155px;
}

.cat-117 #b3 .videoIcon {

    float: right;

}

.container .com-content-article__body .container {
    padding: 0;
}

.home .com-content-article__body,
.product .com-content-article__body {
    margin: 100px 0;
}

.authorBox .custom {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.authorBox .custom .authorImg {
    flex: 0 0 200px;
    padding-right: 40px
}

.authorBox .custom .authorText {
    flex: 0 0 calc(100% - 200px);
}

.authorBox .authorImg a {
    font-size: 20px;
    color: #fff;
    width: 40px;
    display: inline-block;
    padding: 6px;
    height: 40px;
    text-align: center;
    margin-top: 15px;
    margin-right: 16px;
}

.authorBox .authorImg a.xing {
    background: #126567;
}

.authorBox .authorImg a.linkedin {
    background: #0077b5;
}

.authorBox .authorImg a.twitter {
    background: #55acee;
    margin-right: 0;
}

.cat-435 .authorBox {
    display: none;
}

/* --------------------------------------------
  Bereiche
-------------------------------------------- */
.content {
    padding: 80px 0;
}

.content.isCounter {
    background-image: linear-gradient(90deg, var(--ci), var(--blau) calc(100% - 125px), var(--ci) calc(100% - 125px));
    padding: 50px;
    margin-bottom: 80px;
    position: relative;
}

.content.isCounter::after {
    content: "";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: 20px;
    font-size: 200px;
    background: url('https://www.iitr.de/images/icons/shield.svg') no-repeat;
    width: 202px;
    height: 210px;
    display: block;
}

.counter {
    color: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    position: relative;
    justify-content: center
}

.counter .item {
    margin-right: 50px;
    text-align: right
}

.counter .item strong {
    display: block;
    font-size: 70px;
    line-height: 1
}

.counter .item>span {
    display: block;
    font-size: 20px;
    font-family: 'robotolight'
}

.mod-breadcrumbs {
    font-size: 13px;
}

#breadcrumbs {
    margin-bottom: -50px;
}

#breadcrumbs a {
    text-decoration: none;
    font-size: 20px;
    padding: 0 10px;
}

#breadcrumbs a:hover,
#breadcrumbs a:focus,
#breadcrumbs a:active {
    text-decoration: underline;
}



.content.white+.white,
.content.lightgrey+#boxen,
.content.lightgrey+.lightgrey,
.content.darkgrey+.darkgrey {
    padding-top: 0;
}

.content.white.lightblue+.white {
    padding-top: 80px
}

.content ul li {
    margin-bottom: 20px;
    font-size: 18px;
}

.content ul.smallList li {
    margin-bottom: 0;
    font-size: 16px
}

.content ol li {
    margin-bottom: 20px;
    font-size: 18px;
}

.content .text {
    padding-bottom: 50px;
}

.content .text h3 {
    text-align: left;
}

.content .text .aufbau h3 {
    font-size: 18px;
    font-family: 'robotomedium';
    margin-bottom: 10px;
    margin-top: 20px;
}

.content .text .aufbau h3+p {
    margin-top: 0;
}

.paleblue {
    background-color: #5A77A5;
    color: #fff;
}
#switchInfo .color-gradient {
    color: #fff;
    background: linear-gradient(135deg, var(--ci) 45%,  var(--blau) 70%);
}
#switchInfo .flex-row-reverse.color-gradient {
    color: #fff;
    background: linear-gradient(135deg, var(--ci) 10%,  var(--blau) 35%);
}

@media(max-width: 830px) {
  #switchInfo .flex-row-reverse.color-gradient {
    background: linear-gradient(135deg, var(--ci) 50%, var(--blau) 70%);
}
}
.content.gradient {
    color: #fff;
    background: linear-gradient(90deg, var(--ci) 20%, var(--blau) 60%);
}

#switchInfo .color-gradient *,
.content.gradient * {
    color: #fff;
}
#switchInfo .color-gradient .btn-ci-outline {
  color: var(--ci) !important;
}
.btn.paleblue {
    color: #fff;
}

.lightgrey {
    background-color: var(--grauH);
    color: var(--grauD);
    border-color: var(--grauD);
}

.lightgrey.lightblue {
    background-color: #f1f5f6;
}

.lightgrey.lightblue,
.lightgrey.lightblue h2,
.lightgrey.lightblue h3,
.lightgrey.lightblue p {
    color: var(--ci);
}

.darkgrey.gradient {
    background: linear-gradient(90deg, var(--ci), var(--blau));
}

.darkgrey.gradient .text {
    padding-bottom: 0 !important;
}

.darkgrey.gradient h2 {
    text-align: left;
}

.darkgrey.gradient strong {
    color: #fff !important;
}

.leitfadenSVG {
    position: absolute;
    top: -120px;
    right: 0;
    width: 90%;
}

.cat-117 #b6 {
    padding-top: 80px;
}

.cat-117 #b6.lightgrey {
    background: #f1f5f6;
}

.darkgrey {
    background-color: var(--grauD);
    color: #fff;
    border-color: #fff;
}

.darkgrey a {
    color: #fff;
    text-decoration: underline;
}

.darkgrey h2 {
    color: #fff;
}

.cols-0>.text,
.cols-1>.text {
    flex: 0 0 100%;
}

.cols-2>.text {
    flex: 0 0 50%;
    max-width: 50%;
}

.cols-2>.text:nth-child(odd) {
    padding-right: 80px;
    border-right: 1px solid;
}

@media (min-width: 992px) {
    .content.row-reverse .row {
        flex-direction: row-reverse
    }

    .content.row-reverse .cols-2>.text:nth-child(odd) {
        padding-left: 80px;
        padding-right: 13px;
        border-right: 0;
        border-left: 1px solid;
    }

    .content.row-reverse .cols-2>.text:nth-child(even) {
        padding-left: 13px;
        padding-right: 80px;
    }
}

#b3.darkgrey .cols-2>.text:nth-child(odd) {

    border-right: 1px solid;
    padding-right: 0;
}

.cols-2>.text:nth-child(even) {
    padding-left: 80px;
}


.cols-3>.text {
    flex: 0 0 33%;
    max-width: 33%;
    padding: 0 40px;
    border-right: 1px solid;
}

.cols-3>.text:first-child,
.cols-3>.text:nth-child(4n) {
    padding-left: 0;
}

.cols-3>.text:nth-child(3n) {
    padding-right: 0;
    border-right: 0;
}

.cols-4>.text {
    flex: 0 0 25%;
    max-width: 25%;
    padding: 0 20px;
    border-right: 1px solid;
}

.cols-4>.text:first-child,
.cols-4>.text:nth-child(5n) {
    padding-left: 0;
}

.cols-4>.text:nth-child(4n) {
    padding-right: 0;
    border-right: 0;
}

.cat-131 #b8 .text,
.minimalPadding .text {
    padding-bottom: 0 !important
}

.anfragenBox {
    text-align: left;
    display: flex;
    width: 100%;
}

.anfragenBox .fa {
    font-size: 110px;
    line-height: 1;
    position: relative;
    top: -19px;
    color: var(--ci);
    margin-right: 20px;
}

.anfragenBox .visforms {
    padding-bottom: 0;
}

.anfragenBox .visforms fieldset input {
    margin-bottom: 0 !important;
}

.anfragenBox #mod-visform63,
#mod-visform37 {
    margin-top: 0;
}

.anfragenBox #mod-visform63 fieldset,
#mod-visform37 fieldset {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.anfragenBox #mod-visform63 fieldset .field522,
#mod-visform37 fieldset .field305 {
    flex: 1 1 auto;
    height: 50px;
}

#mod-visform63 fieldset input[type="email"],
#mod-visform37 fieldset input[type="email"] {
    background-color: #fff;
}

.anfragenBox #mod-visform63 fieldset .visBtnCon,
#mod-visform37 fieldset .visBtnCon {
    margin-top: 0 !important;
    height: 50px;
}

.anfragenBox #mod-visform63 fieldset .visBtnCon {
    margin-bottom: 0;
}

.anfragenBox #mod-visform63 fieldset .visCSSlabel {
    display: none;
}

.anfragenBox #mod-visform63 fieldset .visBtnCon input {
    padding: 13px 50px;
}

.anfragenBox p {
    margin-bottom: 0px;
}

.item-page .anfragenBox p a:not(.btn) {
    text-decoration: none;
}

#reviews blockquote {
    padding: 80px;
    background: var(--grauH);
    color: var(--grauD);
    text-align: left;
    position: relative;
}

#reviews blockquote::before {
    content: "\f10d";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    display: block;
    position: absolute;
    top: 20px;
    left: 30px;
    font-size: 40px;
    color: #fff;
}

#reviews blockquote::after {
    content: "\f10d";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    display: block;
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 40px;
    color: #fff;
}

#teamBoxen .box {
    border: 10px solid var(--ci);
    background-color: var(--ci);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

#teamBoxen .box .h3,
#teamBoxen .box h3 {
    text-align: center;
    background: #fff;
    color: var(--ci);
    width: calc(100% + 30px);
    display: block;
    padding: 15px 0 15px;
    margin-left: -15px;
    margin-top: -10px;
    font-size: 25px;
}

#teamBoxen .box .text {
    padding: 10px 15px;
    color: #fff;
}

#teamBoxen .box img {
    height: auto !important;
    width: auto !important;
}

#steps {
    margin-top: 80px;
}

#steps .steps {
    margin-top: 100px;
    padding-top: 40px;
    border-top: 2px solid var(--ci);
    position: relative;
}

#steps .steps::before {
    content: " ";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 45px solid var(--ci);
    position: absolute;
    right: -5px;
    top: -20px;
    height: 0;
    width: 0;
    display: block;
}

#steps .steps .d-flex {
    flex-wrap: wrap;
    align-items: center;
    background: #f5f5f5;
    padding: 10px;
}

#steps .step {
    position: relative;
    padding-right: 30px;
    flex: calc(100% - 60px);
    padding-right: 0;
    min-height: 45px;
    display: flex;
    align-items: center;
}

#steps .step p {
    margin-bottom: 0px;
}

#steps .step strong {
    font-size: 20px;
    margin-bottom: 10px;
    color: var(--ci);
}

#steps .step::before {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 2px solid var(--ci);
    background: #fff;
    content: " ";
    position: absolute;
    left: 70px;
    top: -60px;
}

.fancyList {
    margin-top: 30px;
}

.fancyList .listPoint {
    background: #f5f5f5;
    padding: 10px;
    flex: 0 0 80px;
    margin-right: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fancyList .listPoint .icon,
#steps .icon {
    float: left;
    border: 2px solid var(--ci);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    flex: 0 0 50px;
    text-align: center;
    padding: 8px;
    margin-right: 10px;
    margin-bottom: 0px;
}

.fancyList .listPoint .icon {
    font-family: 'robotobold';
    font-size: 28px;
    line-height: 1;
    margin-right: 0;
}

#steps .icon .fa {
    font-size: 30px;
}

.fancyList .col-12 {
    margin-bottom: 10px;
}

.fancyList .list {
    height: 100%;
}

.fancyList .listText,
#steps .steptext {
    margin-top: 10px;
    background: var(--ci);
    height: calc(100% - 90px);
    padding: 20px;
    color: #fff;
}

.fancyList .listText {
    flex: 0 0 calc(100% - 90px);
    margin-top: 0;
    height: 100%;
}

.fancyList .listText p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------
    Video Karussell
-------------------------------------------- */
#videoCarousel {
    background-color: #ebebeb;
    padding: 50px;
}

#videoCarousel .newsflash-title {
    min-height: 80px;
    text-align: left;
}

#videoCarousel .newsflash-title p {
    margin-bottom: 0;
}

#videoCarousel .btn {
    display: block;
}

#videoCarousel.carousel img {
    margin: 0;
}

#videoCarousel .carousel-control-prev {
    left: -80px;
    width: 80px;
    font-size: 40px;
}

#videoCarousel .carousel-control-next {
    right: -80px;
    width: 80px;
    font-size: 40px;
}

#videoCarousel .video-link {
    position: relative;
}

#videoCarousel .video-link .fa {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: #fff;
}

@media(max-width: 1450px) {
    #videoCarousel .carousel-control-prev {
        left: 0px;
        width: 50px;
        font-size: 40px;
    }

    #videoCarousel .carousel-control-next {
        right: 0px;
        width: 50px;
        font-size: 40px;
    }
}


/* --------------------------------------------
    Spalte
-------------------------------------------- */
#content {
    flex: calc(100% - 370px);
    max-width: calc(100% - 370px);
}

#aside {
    flex: 0 0 370px;
    padding-left: 40px;
}

#aside .custom {
    background: var(--ci);
    color: #fff;
    padding: 20px 15px;
    margin-bottom: 20px;
}

#aside .custom p {
    margin-bottom: 0
}

#aside .custom p strong {
    font-family: 'robotolight';
    font-size: 25px;
    margin-bottom: 30px;
    position: relative;
    display: block;
}

#aside .custom p strong::after {
    height: 5px;
    width: 250px;
    content: "";
    display: block;
    position: absolute;
    bottom: -20px;
    left: -15px;
}

#aside .custom a {
    color: #ffff;
    display: block;
    margin-top: 20px;
}

#aside .custom a::after {
    display: inline-block;
    content: "\f054";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
    padding-left: 20px;
}

/* --------------------------------------------
    Ratgeber
-------------------------------------------- */
.blog h1,
.blog h2 {
    text-align: left;
    margin-bottom: 80px;
}

.blog .blog-item {
    border-bottom: 1px solid var(--ci);
    padding-bottom: 80px;
    margin-bottom: 80px;
}

.blog .blog-item:last-child {
    border: 0;
    margin-bottom: 0;
}

.blog-date {
    flex: 0 0 125px;
    padding-right: 20px;
}

.blog-date span {
    display: block;
    background: var(--ci);
    padding: 5px;
    font-family: 'robotobold';
    font-size: 25px;
    color: #fff;
    width: 100%;
    text-align: center;
}

.blog-text {
    flex: 0 0 calc(100% - 125px);
}

.blog-text h3 {
    text-align: left;
    font-family: 'robotolight';
    font-size: 25px;
    margin-bottom: 15px;
}

.blog-text .readmore {
    margin-bottom: 0;
}

.blog-text .readmore .btn {
    background: #fff;
    padding: 0;
    font-family: 'robotoregular';
    font-size: 16px;
    color: var(--ci);
    border: 0;
}

.blog-text .readmore .btn::after {
    display: inline-block;
    content: "\f054";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
    padding-left: 8px;
}

.com-content-category-blog__counter {
    display: block;
    text-align: center;
    float: none !important;
    border-top: 1px solid var(--ci);
    margin-top: 50px;
    padding-top: 30px !important;
}

.pagination {
    justify-content: center;
    flex-wrap: wrap;
}

.pagination .page-link {
    padding: 7px;
    width: 40px;
    height: 40px;
    text-align: center;
    border-color: var(--ci);
    border-radius: 0 !important;
    color: var(--ci);
}

.pagination .page-item.disabled .page-link {
    border-color: var(--ci);
    border-radius: 0;
}

.pagination .page-item.active .page-link {
    background-color: var(--ci);
    border-color: var(--ci);
}

.pagination .page-link:hover {
    background-color: var(--ci);
    color: #fff;
    opacity: 1;
}

.pagination .icon-angle-left::before {
    content: "\f104";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
}

.pagination .icon-angle-double-left::before {
    content: "\f100";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
}

.pagination .icon-angle-right::before {
    content: "\f105";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
}

.pagination .icon-angle-double-right::before {
    content: "\f101";
    font-weight: bold;
    font-family: 'Font Awesome 5 Free';
}

.pagination li {
    text-indent: 0;
    padding-left: 5px;
    margin-bottom: 5px;
}

.pagination li::before {
    display: none;
}

/* --------------------------------------------
    Formulare
-------------------------------------------- */
@media(min-width: 768px) {

    .mt-6 {
        margin-top: 60px !important;
    }

    .mt-7 {
        margin-top: 100px !important;
    }
}

.visform:not(.bt5):not(.bt4mcindividual):not(.uikit3):not(.uikit2) p.errorcontainer {
    padding-top: 0;
    margin-top: 0;
    margin-bottom: -10px;
}

.visform:not(.bt5):not(.bt4mcindividual):not(.uikit3):not(.uikit2) label.error {
    font-size: 14px;
    color: #fff;
    background: #ff4f4f !important;
    font-size: 10px;
    color: #fff;
    padding: 10px;
}

.visform:not(.bt5):not(.bt4mcindividual):not(.uikit3):not(.uikit2) p.errorcontainer:after {
    border-top: 12px solid #ff4f4f !important;
}

.visforms fieldset .errorcontainer label {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.visform {
    margin-top: 0 !important;
}

.visforms fieldset {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.visforms fieldset div[class^="field"],
.visforms fieldset div[class^="conditional"] {
    position: relative;
    padding: 0 10px;
}

.visforms .visCustomText {
    text-align: left
}

.visforms input,
.visforms select,
.visforms .visCSSinput {
    border: 1px solid var(--grauM) !important;
    padding: 12px !important;
    width: 100%;
    margin-top: 0;
    margin-bottom: 5px;
}

.visforms textarea,
.visforms input[type="text"],
.visforms input[type="email"] {
    background-color: #fff !important;
}

.visforms #mod-visform64 input[type="text"] {
    background-color: transparent !important;
    border: 1px solid var(--grauM) !important;
    padding: 10px !important;
}

.visforms .visCSSlabel {
    display: block;
    float: none;
    margin-top: 10px;
    margin-right: 0;
    margin-bottom: 6px;
    width: 100%;
    display: none;
}

#modvisform164mitarbeiterlbl,
#mod-visform42 .visCSSlabel,
.isSelfcheck #mod-visform65 .visCSSlabel {
    display: block !important;
}

#formSwitch p strong {
    font-size: 30px;
    font-family: 'robotoblack';
    margin-top: 30px;
    margin-bottom: 20px;
    display: block;
}

#formSwitch p {
    margin-bottom: 10px;
    margin-top: 0;
    font-size: 16px;
}

.visforms fieldset input[type="checkbox"]+label,
.visforms .selfCheck fieldset .time input[type="radio"]+label,
.visforms fieldset input[type="radio"]+label,
#formSwitch .btn-grey {
    font-family: 'robotoregular';
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    margin: 0 0 5px 0 !important;
    min-height: 50px;
    width: 100%;
    background: var(--grauM);
    padding: 6px 50px 6px 20px;
    color: #fff;
    text-align: left
}
.visforms fieldset input[type="checkbox"]:disabled + label {
  opacity: 0.5;
}
.visforms fieldset input[type="checkbox"]+label:hover,
.visforms fieldset input[type="checkbox"]:checked+label,
.visforms .selfCheck fieldset .time input[type="radio"]:checked+label,
.visforms fieldset input[type="radio"]+label:hover,
.visforms fieldset input[type="radio"]:checked+label,
#formSwitch .btn-grey:hover,
#formSwitch .btn-grey.clicked {
    background-color: var(--grauD);
}

.visforms fieldset input[type="checkbox"]+label::after,
.visforms fieldset input[type="radio"]+label::after,
#formSwitch .btn-grey::after {
    display: block;
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    content: "\f00c";
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 25px;
    color: #fff;
    opacity: 0;
}

.visforms fieldset input[type="checkbox"]:checked+label::after,
.visforms fieldset input[type="radio"]:checked+label::after,
#formSwitch .btn-grey.clicked::after {
    opacity: 1;
}

.visforms .moreInfo,
.field271,
.visforms .visCSSclear,
.visforms label:empty,
.visforms fieldset input[type="checkbox"],
.visforms fieldset input[type="radio"],
.visforms .visCSSlabel.radioButtonLabel {
    display: none !important;
}

.visforms input:checked+label+.visCustomText .moreInfo {
    display: block !important;
    border: 1px solid #ddd;
    padding: 10px;
    margin-top: -10px;
}

.visforms .visCSStop0,
.visforms .visCSSmargLeft {
    margin: 0 !important;
    padding-top: 0 !important
}

.visforms fieldset input[type="submit"] {
    background: var(--ci);
    padding: 12px;
    width: 100%;
}

.visforms .visBtnCon {
    order: 99;
    padding: 0 10px;
    flex: 0 0 100%
}

.visforms .visCheckbox+.visCustomText {
    margin: 0 !important
}

.live-demo .visforms .field342 .visCSStop10 {
    padding-right: 10px !important;
    min-height: 42px;
    font-size: 15px;
    padding-left: 10px !important;
    text-align: center;
    align-items: center;
}

.live-demo .visforms .field342 .visCSStop10::after {
    display: none;
}

/*elearning formualr*/
#mod-visform64 fieldset {
    justify-content: center
}

.visforms .field290,
.visforms .field292 {
    display: flex;
    flex-direction: row;
}

.visforms .field290 label {
    display: none !important;
}

.visforms .field290 p {
    font-family: 'robotobold';
    font-size: 18px !important;
}

.visforms .field291>label {
    display: block;
    font-size: 16px;
    text-align: left;
    margin-top: 30px !important;
    border-top: 1px solid var(--ci);
    padding-top: 20px;
}

.visforms .field290 .visCustomText,
.visforms .field292 .visCustomText {
    flex: 0 0 auto;
}

.visforms .field290 .visCustomText {
    position: absolute;
    top: -9px;
    left: 10px;
    background: #fff;
    border: 1px solid var(--grauM);
    padding: 25px 10px;
    width: 100%;
    width: calc(100% - 20px);
    height: 105px;
    text-align: center;
    font-family: 'robotolight';
}

.visforms .field292 input.isCal,
.visforms .field526 input.isCal {
    border: 0 !important;
    padding: 0 !important;
    color: var(--ci) !important;
    margin-bottom: 0 !important;
    margin-top: 10px;
    margin-left: 25px;
    text-align: right;
    height: 20px;
}

.visforms .field529 input.isCal,
.visforms .field290 input.isCal {
    border: 0 !important;
    padding: 0 !important;
    color: var(--ci) !important;
    margin-bottom: 0 !important;
    margin-top: 0px;
    margin-left: 25px;
    text-align: right;
    font-family: 'robotobold';
    font-size: 18px;
    height: 40px;
}

.visforms .field290 input.isCal {
    position: absolute;
    text-align: center;
    left: 11px;
    bottom: -34px;
    z-index: 1;
    margin-left: 0;
    width: calc(100% - 22px);
}

.visforms .field525 input:focus,
.visforms .field529 input.isCal:focus {
    outline: none;
}

.visforms .field525 {
    justify-content: flex-end;
}

.visforms .field525,
.visforms .field526,
.visforms .field529,
.visforms .field290,
.visforms .field292 {
    display: flex;
    flex-direction: row;
}

.visforms .field525 .visCustomText {
    padding-right: 20px;
}

.visforms .field525 input {
    width: 160px;
    height: 45px;
}

.visforms .field529 input.isCal {
    border-top: 0 !important;
    padding: 0 !important;
    margin-top: 0px;
    width: 120px;
    height: 45px
}

/**/
@media (min-width: 768px) {
    .mt-minus-4 {
        margin-top: -40px
    }

    .field294 {
        order: 8;
        flex: 0 0 auto;
        width: 33.33333333%;
    }

    .order-md-6 {
        order: 6 !important;
    }

    .order-md-7 {
        order: 7 !important;
    }

    .order-md-8 {
        order: 8 !important;
    }

    .order-md-9 {
        order: 9 !important;
    }

    .order-md-10 {
        order: 10 !important;
    }

    .order-md-11 {
        order: 11 !important;
    }

    .order-md-12 {
        order: 12 !important;
    }

    .order-md-13 {
        order: 13 !important;
    }

    .order-md-14 {
        order: 14 !important;
    }

    .order-md-15 {
        order: 15 !important;
    }

    .order-md-16 {
        order: 16 !important;
    }

    .order-md-17 {
        order: 17 !important;
    }

    .order-md-18 {
        order: 18 !important;
    }
}

.visforms .time .visCSSrbinl,
.visforms .selfCheck .time .visCSSrbinl {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px
}

.visforms .time .visCSSrbinl>label,
.visforms .selfCheck .time .visCSSrbinl>label {
    flex: 1 1 0;
}

.visforms .hasGrid fieldset {
    display: grid;
    grid-template-columns: 50% 50%;
    margin: 0 -10px;
}

.visforms .hasGrid .grid-left-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
}

.visforms .hasGrid .grid-left-2 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;
}

.visforms .hasGrid .grid-left-3 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 4;
}

.visforms .hasGrid .grid-left-4 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 4;
    grid-row-end: 5;
}

.visforms .hasGrid .grid-right-1 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 4;
}

.visforms .hasGrid .grid-right-2,
.visforms .hasGrid .grid-right-3 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
}

.visforms .hasGrid .grid-right-4 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
}

.visforms .hasGrid .visBtnCon {
    grid-column-start: 1;
    grid-column-end: 3;
}

/*selfcheck*/

#mod-visform65 #moreInfo h2 {
    font-size: 25px;
    font-family: 'robotolight';
    line-height: 1;
    margin-bottom: 20px;
}

#mod-visform65 .row.w-100,
.field451,
.field385,
.visforms fieldset div[class^="field"].isfinished,
#mod-visform42 .visBtnCon,
#mod-visform65 .visBtnCon,
.isSelfcheck #moreInfo,
.isSelfcheck .alert.isfinished .alert-info,
.isSelfcheck .alert-0,
.isSelfcheck .alert-1,
.isSelfcheck .alert-2,
.isSelfcheck .alert-3,
.isSelfcheck .alert-4,
.isSelfcheck .alert-5,
.isSelfcheck .alert-6 {
    display: none;
}

.isSelfcheck .alert .alert-info,
.isSelfcheck .alert-1,
.isSelfcheck .alert-2,
.isSelfcheck .alert-3,
.isSelfcheck .alert-4,
.isSelfcheck .alert-5,
.isSelfcheck .alert-6 {
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

.isSelfcheck .alert-1 {
    background-color: #d9151f;
    color: #fff;
}

.isSelfcheck .alert-2 {
    background-color: #f2700f;
    color: #fff;
}

.isSelfcheck .alert-3 {
    background-color: #fed800;
    color: #000;
}

.isSelfcheck .alert-4 {
    background-color: #d5dd04;
    color: #000;
}

.isSelfcheck .alert-5 {
    background-color: #6cbf4f;
    color: #fff;
}

.isSelfcheck .alert-6 {
    background-color: #008f33;
    color: #fff;
}

.isSelfcheck .alert p {
    margin-bottom: 0;
}

.isSelfcheck .punktzahl {
    text-align: center;
    font-size: 60px;
    font-family: 'robotoblack';
    position: relative;
    left: -4px;
    top: -20px;
    display: none;
}

.isSelfcheck .question {
    text-align: center;
    font-size: 30px;
}

.baromether {
    width: 400px;
    position: relative;
    margin: 0 auto;
}

.baromether .zeiger {
    width: 150px;
    position: absolute;
    top: 165px;
    left: 50%;
    transform: rotate(0deg);
    transform-origin: 80% 21%;
    margin-left: -120px;
    transition: 0.5s;
    display: none;
}

.isSelfcheck .isfinished .alert-0,
.field451.isfinished,
.field385.isfinished,
#mod-visform42 .visBtnCon.isfinished,
.isSelfcheck #moreInfo.isfinished,
.isSelfcheck .alert.isfinished,
.isSelfcheck .alert-1.isfinished,
.isSelfcheck .alert-2.isfinished,
.isSelfcheck .alert-3.isfinished,
.isSelfcheck .alert-4.isfinished,
.isSelfcheck .alert-5.isfinished,
.isSelfcheck .alert-6.isfinished,
.punktzahl.isfinished,
.baromether.isfinished .zeiger {
    display: block;
}

#mod-visform65 .row.w-100.isfinished {
    display: flex;
}

@keyframes pulse-blue {
    0% {
        transform: scale(0.95);
        text-shadow: 0 0 5px rgba(0, 0, 0, 1);
    }

    70% {
        transform: scale(1);
        text-shadow: 0 0 30px rgba(0, 0, 0, 1);
    }

    100% {
        transform: scale(0.95);
        text-shadow: 0 0 5px rgba(0, 0, 0, 0);
    }
}

.baromether .qumark {
    animation: pulse-blue 2s infinite;
    width: 100%;
    position: absolute;
    top: 167px;
    left: 0;
    z-index: 2;
    font-size: 335px;
    font-family: 'robotoblack';
    text-align: center;
    color: #fff;
    opacity: 0.2;
}

.baromether.isfinished .qumark {
    display: none;
}

.baromether .bg {
    filter: blur(2px);
}

.baromether.isfinished .bg {
    filter: none;
}

.isSelfcheck .visCSStop0 {
    padding-top: 0;
}

.isSelfcheck .tooltip {
    background: var(--grauM);
    padding: 10px;
    font-size: 15px;
    color: #fff;
    max-width: 90%;
    top: -50px;
    z-index: -1;
}

#modvisform175frage-2lbl-b span {
    text-decoration: underline;
    cursor: pointer;
}

.baroIcon {
    position: relative;
}

.baroIcon .zeiger {
    position: absolute;
    width: 100px;
    top: 73px;
    transform: rotate(66deg);
    left: 52px;
}

.selfCheck fieldset input[type="radio"]+label {
    background: transparent;
    padding: 0;
    padding-left: 50px;
    color: var(--ci);
    min-height: 10px !important;
}

.selfCheck fieldset input[type="radio"]+label:hover {
    background-color: #f5f5f5
}

.selfCheck fieldset input[type="radio"]:checked+label {
    background-color: transparent
}

.selfCheck fieldset input[type="radio"]+label::after {
    display: block;
    position: absolute;
    transform: translateY(-50%);
    top: 11px !important;
    left: 20px !important;
    right: auto !important;
    content: "\f111";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold !important;
    font-size: 15px !important;
    color: var(--ci) !important;
    opacity: 1;
}

.selfCheck fieldset .time input[type="radio"]+label::after {
    display: none
}

.visforms .selfCheck fieldset input[type="radio"]:checked+.visCSSrlinl::after {
    content: "\f058" !important;
}

.isAudit #b7 {
    background-color: var(--blau);
}

.isAudit #b8 .text-0 {
    position: relative;
}

.isAudit #b8 .row {
    align-items: center;
}

.isAudit #b6 .imgWrap {
    text-align: center;
    min-height: 180px;
    margin-bottom: 80px;
}

.hasFancyList.lightgrey .text ul li {
    background: #fff;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    margin-bottom: 10px;
    font-size: 22px;
}

.fancy-h3 {
    color: var(--blau);
    font-size: 25px;
    margin-bottom: 10px;
}

/*LANDINGPAGe*/

.landingpage h1 {
    font-family: "robotoblack";
    font-size: 60px;
    letter-spacing: 0.2rem;
}

.landingpage #headerBox h2 {
    font-size: 50px;
    line-height: 1.1em;
    font-family: "robotolight";
}

.landingpage .content h2 {
    font-family: "robotoblack";
    font-size: 60px;
    letter-spacing: 0.2rem;
    color: var(--ci);
}

.landingpage .content h2+h3 {
    font-size: 50px;
    line-height: 1.1em;
    font-family: "robotolight";
    margin-bottom: 50px;
    color: var(--blau);
}

.landingpage .h2 {
    font-family: "robotoblack";
    font-size: 50px;
    letter-spacing: 0.2rem;
}

.landingpage #booking .stepCount,
.landingpage .steps {
    margin-bottom: 100px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--grauM);
    position: relative;
}

.landingpage .steps::after {
    content: " ";
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 45px solid var(--grauM);
    position: absolute;
    right: -5px;
    bottom: -20px;
    height: 0;
    width: 0;
    display: block;
}

.landingpage .icon {
    float: left;
    border: 2px solid var(--ci);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    text-align: center;
    padding: 8px;
    margin-right: 20px;
    margin-bottom: 30px;
}

.landingpage .icon .fa {
    font-size: 30px;
}

.landingpage .step {
    position: relative;
    padding-right: 30px;
    min-height: 61px;
}

.landingpage .step strong {
    font-size: 20px;
    margin-bottom: 10px;
}

.landingpage #booking .stepCount span,
.landingpage .step::after {
    height: 15px;
    width: 15px;
    border-radius: 50%;
    border: 2px solid var(--grauM);
    background: #fff;
    content: " ";
    position: absolute;
    left: 16px;
    bottom: -38px;
}

.landingpage #headerBox .textBox {
    background: transparent
}

.landingpage.dark #headerBox .textBox {
    width: 500px
}

.landingpage.dark #headerBox.full .textBox h1 {
    color: white;
}

blockquote {
    padding: 80px;
    background: var(--grauH);
    color: var(--grauD);
    text-align: left;
    position: relative;
}

.landingpage #booking,
.landingpage #booking>.container {
    position: relative;
}

.landingpage #booking::before {
    content: "";
    background: var(--grauH);
    height: 300px;
    width: 100%;
    display: block;
    position: absolute;
    top: -30px;
    left: 0;
    z-index: -1;
}

.landingpage #booking .pic {
    height: 269px;
    width: 290px;
    background: url('https://www.iitr.de/templates/iitr2022landingpages/img/mann-freigestellt.png') no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
}

.landingpage #booking .moduletable_landingpage {
    max-width: 900px;
    margin-left: auto;
    background: #fff;
    box-shadow: 0 0 5px var(--grauM);
    padding: 0 20px 20px;
    position: relative;
}

.landingpage #booking .stepCount {
    max-width: 900px;
    margin-left: auto;
    margin-bottom: 40px;
}

.landingpage #booking .stepCount span {
    bottom: -8px;
}

.landingpage #booking .stepCount span:nth-child(2) {
    left: 50%;
}

.landingpage #booking .stepCount span:last-child {
    left: auto;
    right: 70px;
}

.landingpage #booking #formSwitch p strong {
    font-size: 20px;
}

/*
.cat-130 #b1 .container {
    max-width: 100%;
    padding: 0;
}
.cat-130 #b1 .container .row {
   margin: 0
}
.cat-130 #b1 .container .text {
   padding: 0
}
*/

#b1.fullWidth .container {
    max-width: 100%;
    padding: 0;
}

#b1.fullWidth .container .row {
    margin: 0
}

#b1.fullWidth .container .text {
    padding: 0
}

#modulesBoxed .modules-wrapper {
    display: grid;
    grid-template-columns: repeat(4, calc(25% - 15px));
    grid-template-rows: repeat(2, 225px);
    grid-gap: 20px;
}
#modulesBoxed .modules-wrapper:has( .item-5 ) {
    grid-template-rows: repeat(3, 160px);
}

#modulesBoxed .modules-wrapper.open {
    grid-template-rows: repeat(4, max-content);
}
#modulesBoxed .modules-wrapper.open:has( .item-5 ) {
    grid-template-rows: repeat(5, max-content);
}

.modul-item {
    transition: 1s ease;
}

.modul-item.item-1 {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3;
}

.modul-item.item-2 {
    grid-column-start: 2;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
}
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-1,
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-2 {
  grid-row-end: 4;
}
.modul-item.item-3 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}

.modul-item.item-4 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 2;
    grid-row-end: 3;
}
.modul-item.item-5 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 3;
    grid-row-end: 4;
}
.modul-item.active {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 4;
    padding: 30px 50px 20px;
    border: 1px solid var(--ci);
    background-color: #fff !important;
}
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.active {
  grid-row-end: 5;
}

.modul-item.inactive {
    grid-column-start: 4 !important;
    grid-column-end: 5 !important;
    grid-row-start: auto !important;
    grid-row-end: auto !important;
    padding: 20px;
    cursor: pointer;
    border: 1px solid transparent;
}

.modul-item.inactive:hover {
    border-color: var(--orange);
}

.modul-item.inactive .h4,
.modul-item.inactive h4 {
    position: relative;
    border-bottom: 0;
    padding-bottom: 0;
    padding-right: 50px;
    margin-bottom: 0 !important
}

.modul-item.active .h4,
.modul-item.active h4 {
    font-size: 30px;
    color: var(--ci) !important;
    border-bottom: 0 !important
}

.modul-item.active .h4 br,
.modul-item.active h4 br {
    display: none;
}

.modul-item.active li {
    color: var(--ci) !important;
    position: relative;
    padding-left: 30px;
    text-indent: 0;
    line-height: 1.5rem;
}

.modul-item.active li::before {
    content: "";
    background: url(https://www.iitr.de/images/icons/icon-check-circle-blue.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: contain;
    margin-right: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.modul-item.inactive .h4::after,
.modul-item.inactive h4::after {
    content: '\f054';
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    color: var(--orange);
    position: absolute;
    right: 00px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 25px;
}

.modul-item ul:first-of-type {
    height: 175px;
    overflow: hidden;
}
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-3 ul:first-of-type,
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-4 ul:first-of-type,
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-5 ul:first-of-type {
  height: 50px
}

.modul-item .zugang,
.modul-item.active button,
.modul-item.inactive button,
.modul-item.inactive ul,
.modul-item ul:not(:first-of-type) {
    display: none;
}

.modul-item.active .zugang,
.modul-item.active ul:not(:first-of-type) {
    display: block;
}
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-3.active ul:first-of-type,
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-4.active ul:first-of-type,
#modulesBoxed .modules-wrapper:has( .item-5 ) .modul-item.item-5.active ul:first-of-type,
.modul-item.active ul {
    height: auto;
    margin-bottom: 40px
}

.modul-item ul li {
    font-size: 16px;
    margin-bottom: 10px;
    line-height: 1.2rem;
}

.modul-item.active ul li {
    margin-bottom: 15px;
}

.modul-item.active .flex-active {
    display: flex;
    flex-wrap: wrap
}

.modul-item.active .flex-active:has(ul:nth-child(2)) ul {
    flex: 0 0 50%;
    max-width: 50%;
}

.modul-item.active .flex-active ul:nth-child(odd) {
    padding-right: 50px;
}

.modul-item.active .flex-active ul:nth-child(even) {
    padding-left: 50px;
}

.modul-item.active .center-active {
    text-align: center;
    margin-bottom: 15px;
}

.textBlue h2,
.textBlue h3,
.textBlue h4,
.textBlue li,
.textBlue p {
    color: var(--ci)
}

.noPaddingBottom {
    padding-bottom: 0 !important
}

.noContainer>.container,
.noContainer>.container .text {
    max-width: 100%;
    padding: 0;
}

.noContainer>.container>.row {
    margin: 0
}

.boxGradient {
    padding: 30px 30px 80px 30px;
    position: relative;
    color: #fff !important;
    height: 100%
}

.boxColored {
    padding: 30px;
    margin-bottom: 20px;
    color: #fff !important;
}

.boxonblue h4,
.boxColored h4 {
    font-family: 'robotomedium';
    font-size: 16px;
}

.boxGradient * {
    color: #fff !important;
}
.boxGradient.box-5 * {
    color: #000 !important;
}

.boxColored.box-1,
.boxGradient.box-1 {
    background-color: var(--ci);
}

.boxColored.box-2,
.boxGradient.box-2 {
    background-color: #1a4482;
}

.boxColored.box-3,
.boxGradient.box-3 {
    background-color: #335890;
}

.boxColored.box-4,
.boxGradient.box-4 {
    background-color: #4d6d9e;
}

.boxColored.box-4 {
    background-color: #F2F5F8;
    color: var(--ci) !important;
}

.boxGradient.box-5 {
    background-color: var(--grauD);
}
.cat-130 .boxGradient.box-5 {
  background-color: #86a5d5;
}
.boxGradient.box-invert {
    background-color: #fff;
border: 1px solid var(--ci) !important;
  color: var(--ci);
}
.boxGradient.box-invert p,
.boxGradient.box-invert h4 {
  color: var(--ci) !important;
}
.boxGradient .h4,
.boxGradient h4 {
    font-size: 20px;
    font-family: 'robotomedium';
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--orange);
}

.boxGradient .btn {
    position: absolute;
    left: 30px;
    bottom: 30px;
    width: calc(100% - 60px);
}

.boxGradient .zugang {
    width: 100%;
    position: relative;
    left: 0;
    border: 0;
    width: auto;
    max-width: 300px;
    margin: 30px auto 0;

}

.paddingConter {
    margin: -15px;
}

.boxBordered {
    flex: 0 0 50%;
    padding: 15px;
}

.kostenBoxen .boxBordered {
    flex: 0 0 25%;
}

.boxBordered .border {
    position: relative;
    padding: 30px 20px 95px;
    border: 1px solid var(--grauM);
    background-color: #fff;
    height: 100%;
    box-shadow: 0px 0px 5px 2px #bebebe;
}

.boxBordered.active .border {
    border-color: var(--orange) !important;
    box-shadow: 0px 0px 5px 2px #eb9c3a75
}

.boxBordered.active .border::before {
    content: "";
    display: block;
    height: 6px;
    width: 100%;
    background-color: var(--orange);
    position: absolute;
    top: 0;
    left: 0;

}

.boxBordered .border .btn-absolute {
    position: absolute;
    bottom: 30px;
    left: 20px;
    width: 95%;
    width: calc(100% - 40px);
}

.boxBordered .border .h3 {
    font-size: 20px;
    font-family: 'robotomedium';
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--orange);
}

.boxBordered .border p.center {
    margin-bottom: 0px
}

.boxBordered .border strong {
    color: var(--ci) !important;
    display: block;
    margin-top: 10px;
}

.workerCount {
    margin-bottom: 50px;
}

.workerCount .bg-blue {
    background-color: var(--ci);
    color: #fff;
    padding: 20px 50px;
    flex: 0 0 50%;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
}

.workerCount .bg-blue button {
    flex: 0 0 100%;
}

@media(min-width: 1201px) {
    .workerCount .bg-blue button {
        margin-top: 10px;
        margin-bottom: 5px
    }
}

.workerCount .visforms {
    padding-bottom: 0;
    width: 100%;
}

.workerCount .bg-blue p {
    color: #fff !important
}

.workerCount .bg-blue #field529 {
    color: var(--orange) !important
}

.workerCount .bg-blue .field525,
.workerCount .bg-blue .field529 {
    flex: 0 0 50%;
    max-width: 50%;
    width: 50%;
    display: block !important;
}


.workerCount .bg-blue .visforms #mod-visform64 #field529 {
    margin-left: 0;
    border: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    font-size: 40px;
    text-align: left
}

.workerCount .bg-blue .field529 .visCustomText p,
.workerCount .bg-blue .field525 .visCustomText p {
    margin-bottom: 0;
    font-family: 'robotomedium';
    font-size: 20px
}

.workerCount .bg-blue #field525 {
    background-color: #fff;
}

.workerCount .bg-blue .visBtnCon {
    display: none !important
}

.workerCount #animateContent {
    border: 3px solid var(--ci);
    padding: 35px 50px 20px;
    flex: 0 0 50%;
}

ul.flex-list li,
.workerCount #animateContent ul li {
    font-size: 23px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    text-indent: 0;
    padding-left: 0;
    line-height: 1.6rem;
}

ul.flex-list li {
    font-size: 16px;
    line-height: 14.rem;
}

ul.flex-list li::before,
.workerCount #animateContent ul li::before {
    display: none;
}

.workerCount #animateContent ul li i {
    color: var(--ci);
    font-size: 25px;
}

.workerCount #animateContent .animated-item span {
    flex: 0 0 340px;
    text-align: left;
}

.workerCount #animateContent .animated-item .btn {
    width: 400px;
}

.animated-item {
    opacity: 0;
    transition: opacity 1s ease;
}

.animated-item.visible {
    opacity: 1;
}

.workerCount #animateContent {
    position: relative;
}

#initial {
    font-size: 25px;
    position: absolute;
    line-height: 1;
    padding-left: 50px;
    top: 50%;
    left: 50px;
    width: calc(100% - 100px);
    transform: translateY(-50%);
    transition: 1s ease;
}

#initial img {
    position: absolute;
    left: 0;
    top: 0;
}

#initial.visible {
    display: none;
}

.btn-gradient {
    background: linear-gradient(90deg, var(--ci) 0%, var(--blau) 100%);
    border-color: transparent !important;
}

.cat-130 #b2 .center strong {
    background: -webkit-linear-gradient(360deg, var(--ci), var(--blau));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cat-130 #b5.content ul li {
    margin-bottom: 8px;
    font-size: 16px;
    padding-left: 31px;
    position: relative;
    text-indent: 0
}

.cat-130 #b5.content ul li::before {
    display: inline-block;
    content: "\f00c";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    padding-right: 0;
    border: 2px solid var(--orange);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    padding: 1px 4px;
    font-size: 10px;
    position: absolute;
    top: 3px;
    left: 0;
}

@media(min-width: 769px) {
    .border-right {
        border-right: 1px solid var(--ci);
        padding-right: 50px;
    }

    .border-right+.col-md-6 {
        padding-left: 50px;
    }
}

/* CHANGE */
.lightblue {
    background: #f1f5f6;
    padding: 80px 0 !important;
}

.lightblue.content .text {
    padding-bottom: 0;
}

.bluebar {
    background: linear-gradient(180deg, #f1f5f6 50%, transparent 50%);
}

.boxonblue,
.bluebar .text .box {
    border: 1px solid #eee;
    background: #fff;
    padding: 40px !important;
    box-shadow: 0 0 10px #eee;
}

.lightblue .text .box h4,
.bluebar .text .box h4 {
    font-weight: 600;
    margin-bottom: 22px;

}

.content.bluebar ul li {
    margin-bottom: 10px;
}

.bg-absolute-gradient {
    position: relative;
    padding: 50px;
    display: inline-flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}

.bg-absolute-ci {
    position: relative;
    padding: 50px;

}

.bg-absolute-ci::after {
    content: "";
    height: 100%;
    width: calc(100% + var(--difference));
    display: block;
    background-color: var(--ci);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.bg-absolute-gradient::after {
    content: "";
    height: 100%;
    width: calc(100% + var(--difference));
    display: block;
    background: linear-gradient(90deg, var(--ci) 0%, var(--blau) 100%);
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.bg-absolute-gradient h2,
.bg-absolute-ci h3 {
    color: #fff;
    text-align: left;
    margin-top: 0 !important;
}

.bg-absolute-ci h3 {
    font-size: 25px;
    margin-bottom: 20px;
    margin-top: 50px !important;
}

.bg-absolute-gradient h2 strong {
    display: block;
}

.bg-absolute-gradient .fa {

    font-size: 50px;
    color: #fff;
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);

}

/* /CHANGE */
.cat-117 #b7 .cols-1>.text-1,
.cat-117 #b7 .cols-1>.text-2,
.cat-117 #b7 .cols-1>.text-3,
.cat-117 #b7 .cols-1>.text-4 {
    padding: 80px 0 !important;
}

.cat-117 #b7 .cols-1>.text-1,
.cat-117 #b7 .cols-1>.text-3 {
    background-color: #F2F5F8;
    position: relative;
}

.cat-117 #b7 .cols-1>.text-1::after,
.cat-117 #b7 .cols-1>.text-1::before,
.cat-117 #b7 .cols-1>.text-3::after,
.cat-117 #b7 .cols-1>.text-3::before {
    content: "";
    height: 100%;
    width: calc(100% + var(--differenceSM));
    display: block;
    background-color: #F2F5F8;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

.cat-117 #b7 .cols-1>.text-1::after,
.cat-117 #b7 .cols-1>.text-3::after {
    top: 0;
    left: auto;
    right: 0;
}

#prozess .prozess {
    display: flex;
    gap: 0 100px;
    align-items: center;
}

#prozess .prozess-2,
#prozess .prozess-4 {
    flex-direction: row-reverse;
}

#prozess .prozess-l,
#prozess .prozess-r {
    flex: 1 1 auto;
    width: 50%
}

#prozess .prozess-line {
    width: 1px;
    height: 350px;
    background: #eee;
    display: block;
    flex: 0 0 1px;
}

#prozess .prozess-r-inner {
    background-color: #F2F5F8;
    padding: 100px 40px 40px;
    box-shadow: 0 0 10px #F2F5F8;
    position: relative;
}

#prozess .prozess-r-inner::after {
    content: "";
    height: 5px;
    width: 100%;
    display: block;
    background: linear-gradient(90deg, var(--ci) 0%, var(--blau) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
}

#prozess .prozess-r-inner h3 {
    font-size: 20px;
    font-family: 'robotomedium';
    margin-bottom: 10px;
}

#prozess .prozess-r-inner p {
    margin: 0 !important;
}

#prozess .prozess-r-inner .number {
    font-size: 60px;
    color: var(--ci);
    font-family: 'robotoblack';
    font-style: italic;
    opacity: 0.5;
    position: absolute;
    top: 0;
    right: 20px;
}

#prozess .prozess-1 .prozess-l,
#prozess .prozess-3 .prozess-l {
    text-align: right;
}

#prozess .prozess-2 .prozess-r-inner h3,
#prozess .prozess-4 .prozess-r-inner h3,
#prozess .prozess-2 .prozess-r-inner,
#prozess .prozess-4 .prozess-r-inner {
    text-align: right;
}

#prozess .prozess-2 .prozess-r-inner .number,
#prozess .prozess-4 .prozess-r-inner .number {
    right: auto;
    left: 20px;
}

.cat-117 main ul li::before {
    content: "\f058";
    font-weight: normal;
}

.cat-129 #b2 ul li {
    position: relative;
    text-indent: 0;
    padding-left: 40px;
    line-height: 1.2rem;
    margin-bottom: 30px;
}

.cat-129 #b2 ul li b {
    display: block;
    margin-bottom: 15px;
}

.cat-129 #b2 ul li::before {
    content: "";
    background: url(https://www.iitr.de/images/icons/icon-check-circle-blue.png) no-repeat;
    width: 25px;
    height: 25px;
    background-size: contain;
    margin-right: 10px;
    position: absolute;
    top: -2px;
    left: 0;

}

.has-grid fieldset {
    display: grid !important;
    grid-gap: 10px;
}

.grid-2-1 fieldset {
    grid-template-columns: repeat(3, 30%);
}

.grid-2-1 .grid-right {
    padding-left: 20px
}

.grid-left.grid-item-1,
.grid-left.grid-item-3,
.grid-left.grid-item-5 {
    grid-column-start: 1;
}

.grid-left.grid-item-2,
.grid-left.grid-item-4 .grid-left.grid-item-6 {
    grid-column-start: 2;
}


.grid-right.grid-item-1 {
    grid-row-start: 1
}

.grid-right.grid-item-1,
.grid-right.grid-item-2 {
    grid-column-start: 3
}

.grid-right.grid-item-2.grid-height-2 {
    grid-row: 2 / span 2
}

.visforms .time .visCSSrbinl {
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
    background: #fff;
    padding-top: 0;
}

.visforms .time .visCSSrlinl {
    padding: 13px;
    flex: 0 0 25%;
}

.cat-129 #b1 {
    position: relative;
}

.cat-129 #b1::before {
    content: "";
    position: absolute;
    top: 0;
    right: 10%;
    background: url(https://www.iitr.de/images/compliance-kit/bg-live-demo.png) no-repeat bottom right;
    background-size: contain;
    height: 100%;
    width: 470px;
    z-index: 2;
}

#mod-visform76 {
    background: #ccd5e3;
    padding: 30px;
    padding-right: 20%;
    position: relative;

}

#mod-visform76 fieldset div[class^="field"] {
    padding: 0
}

#mod-visform76 .visCSSlabel {
    font-family: 'robotomedium';

}

#mod-visform76 input {
    border: 0 !important
}

#mod-visform76 fieldset input[type="radio"]+label {
    background-color: #fff;
    color: var(--ci);
    padding: 5px 10px !important;
}

#mod-visform76 fieldset input[type="radio"]+label:after {
    display: none !important;
}

#mod-visform76 fieldset input[type="radio"]:checked+label,
#mod-visform76 fieldset input[type="radio"] label:hover {
    font-family: 'robotomedium';
}

#mod-visform76 .visBtnCon {
    grid-column: 3;
    padding: 0;
}

@media(max-width: 1400px) {
    .cat-129 #b1 {
        overflow: hidden;
    }


    .cat-129 #b1::before {
        display: none
    }

    #mod-visform76 {
        padding: 30px;
        padding-right: 30px;
    }

    #mod-visform76 .fieldset {
        margin: 0;
    }

    .grid-2-1 fieldset {
        grid-template-columns: repeat(3, calc(33.333% - 6px));
    }
}

@media(max-width: 991px) {
    .home .textBox img {
        top: -110px;
    }

    .grid-2-1 fieldset {
        display: block !important;
    }

    .leitfadenSVG {
        position: relative;
        top: 0;
        right: 0;
        width: 90%;
        margin: 0 auto;
        display: block;
    }
}

/* --------------------------------------------
    Responsive
-------------------------------------------- */

@media(min-width: 1201px) {
    header #navigation {
        padding-right: 184px
    }

    header #navigation:has(#mod-custom185) {
        padding-right: 0
    }

    header #navigation ul ul li a {
        color: var(--ci);
        font-size: 16px;
        padding: 10px 20px;
        display: block;
    }

    header #navigation ul ul li:hover a,
    header #navigation ul ul li:focus a,
    header #navigation ul ul li:active a {
        background-color: var(--ci) !important;
        color: #fff;
    }

    header #menuToggle {
        display: none;
    }

    div:not(.landingpage) #headerBox {
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 40.25%;
        position: relative;
        overflow: hidden;
        box-shadow: 10px 10px 10px 2px #bebebe;
    }

    #headerBox picture img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cat-538 .noBox #headerBox h1 {
        color: #fff !important;
    }

    .cat-538 .noBox #headerBox .visforms fieldset input[type="submit"] {
        color: #fff !important;
        border: 1px solid #fff;
    }

    .cat-130 #headerBox.full .container {
        left: 55%
    }

    .cat-130 #headerBox.full .textBox {
        width: 760px;
    }

    header #navigation ul.mod-menu>li.active>span,
    header #navigation ul.mod-menu>li.active>a {
        color: var(--grauD);
    }

    header #navigation ul.mod-menu__sub li.active>span,
    header #navigation ul.mod-menu__sub li.active>a {
        background-color: var(--grauH);
    }

    header #navigation ul.mod-menu__sub li.active>a:active,
    header #navigation ul.mod-menu__sub li.active>a:hover,
    header #navigation ul.mod-menu__sub li.active>a:focus {
        color: #fff;
    }

    header #navigation ul li:hover>ul {
        display: block;
        position: absolute;
        top: 100%;
        right: 0;
        width: auto;
        min-width: 300px;
        padding: 0px;
        background: #fff;
        border: 1px solid;
    }

    header #navigation ul li.item-107:hover>ul {
        min-width: 400px;
    }
}

@media(max-width: 1550px) {
    :root {
        --WBpaddingX: 100px;
        --WBpaddingY: 50px;
        --differenceSM: calc((100vw - 1290px) / 2);
    }

    .content {
        overflow: hidden
    }

    #contactBox {
        background: url(../img/contactbox-bg.webp) no-repeat -190px 0px #f2f2f2;
    }
}

@media(max-width: 1450px) {

    header #navigation ul.mod-menu>li>span,
    header #navigation ul.mod-menu>li>a {
        padding: 10px 60px 10px 30px;
    }
}

@media(max-width: 1355px) {

    h1,
    h2 {
        font-size: 45px;
        line-height: 40px;
    }

    #switchInfo h2 {
        font-size: 40px;
    }

    #switchInfo h3 {
        font-size: 25px;
        line-height: 27px;
    }

    #headerBox {
        overflow: hidden;
    }

    #headerBox picture img {
        height: 500px;
        max-width: none;
    }

    .siegelRechts img {
        height: auto !important;
    }

    #headerBox #bars .bar {
        margin-left: -35px;
        width: 100%;
        width: calc(100% + 70px);
    }

    #headerBox.full #bars .bar::after {
        display: none;
    }

    #headerBox #bars .bar span,
    #headerBox #bars .bar span:last-of-type {
        padding: 0 35px;
    }

    #headerBox #bars .bar span.bold {
        font-size: 20px;
        padding-left: 35px;
    }

    #headerBox #bars .bar .fa-chevron-right {
        display: none;
    }

    #headerBox #bars .bar.el-2 span {
        flex: 0 0 50%;
    }

    #headerBox #bars .bar.el-3 span {
        max-width: 36%;
    }

    #contactBox {
        background: #f2f2f2;
    }

    #contactBox .rueckruf,
    #contactBox .beratung,
    #contactBox .custom {
        width: 100%;
        margin-left: auto;
        text-align: left;
        margin-right: auto;
    }
}

@media(max-width: 1300px) {
  .home #boxen.tablet3 > .container {
    padding: 0;
  }
  .home #boxen.tablet3 .box .border img {
    max-height: 180px;
}
  .home #boxen.tablet3 .box h3, 
  .home #boxen.tablet3 .box .h3 {
    font-size: 18px
  }
  .home #boxen.tablet3 .btn-ci {
    margin: 0 0 5px !important;
    display: block !important;
    flex: 0 0 100% !important;
  }
    :root {
        --differenceSM: calc((100vw - 1160px) / 2);
    }

    .bg-absolute-ci::after,
    .bg-absolute-gradient::after {
        display: none;
    }

    .bg-absolute-ci {
        background: var(--ci);
    }

    .bg-absolute-gradient {
        background: linear-gradient(90deg, var(--ci) 0%, var(--blau) 100%);
    }

    .kostenBoxen .boxBordered {
        flex: 0 0 50%;
    }

    .gradient-bg,
    .elearning-statistics-widget {
        background-image: linear-gradient(90deg, var(--ci), var(--blau));
    }

    .elearning-statistics-widget::after {
        display: none;
    }

    .elearning-statistics-widget .esw-card .esw-details .esw-details-value {
        font-size: 50px;
    }

    .isSelfcheck .punktzahl {
        left: 20px;
    }



    #formSwitch p strong,
    .product .visCustomText p strong {
        font-size: 25px;
    }

    footer .navbar-expand-md,
    footer .navbar-expand-md ul.nav {
        width: 100%;
    }

    footer ul.mod-menu>li {
        margin-right: 0;
        flex: 1 1 auto;
    }

    footer ul li.item-147 {
        position: relative;
        bottom: 0;
        left: 0;
        order: 2;
    }

    footer .footerRight {
        margin-top: 3rem;
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }

    #searchModule {
        padding-left: 100px;
        margin-top: 0 !important;
        flex: 0 0 calc(100% - 305px);
    }

    footer #mod-custom112,
    footer #mod-custom193 {
        flex: 0 0 305px;
    }

    footer .btn {
        padding: 10px 15px;
        min-width: 120px;
    }

    #steps .icon {
        height: 40px;
        width: 40px;
        flex: 0 0 40px;
    }

    #steps .icon .fa {
        font-size: 20px;
    }

    #steps .step strong {
        font-size: 17px;
    }

    #steps .step::before {
        top: -60px;
    }
}

@media(max-width: 1200px) {
    :root {
        --differenceSM: calc((100vw - 980px) / 2);
    }

    .bg-absolute-gradient h2 {
        font-size: 35px;
        ;
    }

    .bg-absolute-ci h3 {
        font-size: 20px;
    }

    .workerCount .bg-blue button {
        margin-top: 15px;
    }

    #modulesBoxed .modules-wrapper {
        grid-template-columns: repeat(3, calc(33% - 16px));
        grid-template-rows: repeat(2, 230px);
    }

    .modul-item.active {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .modul-item.inactive {
        grid-column-start: 3 !important;
        grid-column-end: 4 !important;
    }

    .workerCount #animateContent,
    .workerCount .bg-blue {
        flex: 0 0 100%;
    }

    .workerCount .bg-blue .visforms {
        width: 100%;
    }

    .workerCount .bg-blue .visforms #mod-visform64 #field529 {
        text-align: left;
    }

    .cat-117 #headerBox.full .textBox {
        padding-right: 35px;
    }

    #headerBox #bars {
        max-width: 600px;
        margin: 0 auto;
    }

    #headerBox #bars .bar br,
    #headerBox #bars .bar span.bold:after {
        display: none !important;
    }

    #headerBox #bars .bar.color-green {
        border-left: 10px solid var(--gruen);
    }

    #headerBox #bars .bar.color-blue {
        border-left: 10px solid var(--blau);
    }

    #headerBox #bars .bar.color-orange {
        border-left: 10px solid var(--orange);
    }

    #headerBox #bars .bar a.around {
        display: block;
    }

    #headerBox #bars .bar span.bold {
        font-family: 'robotobold';
        min-width: 275px;
        max-width: none;
        display: block;
    }

    #headerBox #bars .bar span:first-of-type {
        border-right: 0;
    }

    #mod-visform45 fieldset .visCSSrbinl {
        margin: 0 -10px 30px !important;
    }

    #mod-visform45 fieldset .visCSSrlinl {
        max-width: calc(25% - 20px);
        margin: 0 10px !important;
        width: calc(25% - 20px);
        min-height: 100px;
    }

    .isCareer h1,
    .isCareer h2 {
        font-size: 30px;
    }

    .visforms .field529,
    .visforms .field525 {
        justify-content: center;
    }

    .noBox #headerBox.full .container {
        left: auto;
        width: 100%;
        right: 0;
        transform: translate(0, 0);
        margin-top: 50px;
    }


    .noBox #headerBox .visforms {
        max-width: 100%;
    }

    .noBox #headerBox h1,
    .noBox #headerBox h2 {
        color: var(--ci);
    }

    #breadcrumbs a {
        padding: 10px;
        display: inline-block;
    }

    .isSelfcheck .punktzahl {

        left: 48px;
    }

    #mod-visform58 fieldset .visCSSrbinl {
        margin: 0 -10px 30px !important;
    }

    #mod-visform58 fieldset .visCSSrlinl {
        max-width: calc(25% - 20px);
        margin: 0 10px !important;
        width: calc(25% - 20px);
        min-height: 100px;
    }

    #mod-custom185 {
        margin-left: 28px;
        margin-bottom: 20px;
        width: 100%;
        max-width: 390px;
    }

    #mod-custom185 a {
        width: 100%;
    }

    .menu-open {
        overflow: hidden;
    }

    header {
        padding-top: 10px;
    }

    main #headerBox .textBox ul {
        width: 100%;
        margin-left: 0%;
        text-align: left;
    }

    header #navigation ul li.item-210>a {
        background-position: 220px 6px !important;
    }

    header #navigation ul li.item-218>a {
        background-position: 225px 10px !important;
    }

    header #navigation ul li.item-538>a {
        background-position: 240px 10px !important;
    }

    #menuToggle {
        margin-top: 10px;
    }

    header #logo {
        flex: 0 0 250px;
    }

    header #top-navigation {
        margin-left: auto;
        margin-right: 30px;
    }

    header #menuToggle .burger-line:not(:last-child) {
        height: 5px;
        background: var(--ci);
        margin-top: 4px;
        display: block;
        position: relative;
        transition: 0.3s;
    }

    header #menuToggle .burger-line:last-child {
        text-transform: uppercase;
    }

    .menu-open #menuToggle .burger-line:first-child {
        transform: rotate(10deg);
        top: 6px;
    }

    .menu-open #menuToggle .burger-line:nth-child(2) {
        transform: rotate(-10deg);
        top: -3px;
    }

    header #navigation {
        display: none;
        position: fixed;
        top: 115px;
        left: 0;
        width: 100%;
        height: calc(100% - 115px);
        background: #fff;
        z-index: 9;
        padding-top: 0px;
        transition: 0.3s;
    }

    header #navigation .d-flex {
        display: block !important;
        width: 100%;
    }

    header #navigation ul.mod-menu>li>span,
    header #navigation ul.mod-menu>li>a {
        padding: 10px;
        order: 1;
    }

    header #navigation .mod-languages {
        padding: 0 8px;
    }

    .menu-open header #navigation {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
    }

    #top-navigation-xs {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        border-top: 1px solid #ddd;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: 20px 50px !important;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        z-index: 2;
    }

    #top-navigation-xs,
    header #navigation>ul {
        padding: 50px 0;
    }

    #top-navigation-xs .item-216 {
        border-right: 1px solid var(--ci);
        padding-right: 30px;
    }

    #mod-custom185 {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
    }

    #mod-custom185 a {
        width: 100%;
        font-size: 20px;
    }

    header #navigation .d-flex>.mod-menu {
        overflow-y: auto;
        height: calc(100% - 165px);
        display: block;
    }

    header #navigation ul li.parent .fa {
        position: relative;
        top: 0px;
        right: 0;
        font-size: 20px;
        flex: 0 0 20%;
        text-align: center;
        order: 2;
    }

    header #navigation>ul {
        padding: 20px 0;
        width: 100%;
        display: block;
    }

    #top-navigation-xs .navbar {
        padding: 0;
    }

    header #navigation ul.mod-menu>li {
        padding: 10px 40px;
        width: 100%;
        border-bottom: 1px solid #ddd;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
    }

    header #navigation #top-navigation-xs ul.mod-menu>li {
        width: 100%;
        border-bottom: 0;
        padding: 5px;
    }

    header #navigation #navbar110 ul.mod-menu>li {
        width: 95%;

    }

    header #navigation .mod-languages a {
        font-size: 20px;
        padding: 28px 5px;
    }

    header #navigation ul li span,
    header #navigation ul li a {
        font-family: 'robotolight';
        padding: 10px;
        color: var(--ci);
        display: block;
        flex: 0 0 80%
    }

    header #navigation ul li .image-title {
        padding: 0px !important;
    }

    header #navigation ul.mod-menu>li>span,
    header #navigation ul.mod-menu>li>a {
        font-size: 20px;
        line-height: 28px;
        text-transform: uppercase;
    }

    header #navigation ul ul {
        padding-bottom: 15px;
        flex: 0 0 100%;
        order: 3;
    }

    header #navigation ul li.open ul {
        display: block;
    }

    header #navigation ul ul li a {
        padding: 10px;
        font-family: 'robotoregular';
        font-size: 20px;
        line-height: 23px;
    }

    header #navigation ul ul li a::before {
        display: inline-block;
        content: "\f054";
        font-family: 'Font Awesome 5 Free';
        font-weight: bold;
        padding-right: 10px;
    }

    footer ul.mod-menu>li {
        margin-right: 30px;
        margin-bottom: 30px;
    }

    #headerBox.full .container {
        position: relative;
        top: -150px;
        left: 0;
        transform: translate(0%, 0%);
        background-color: rgba(255, 255, 255, 0.9);
        width: 95%;
        box-shadow: 5px 5px 10px #ccc;
        -webkit-box-shadow: 5px 5px 10px #ccc;
        -moz-box-shadow: 5px 5px 10px #ccc;
    }

     .home #headerBox.full .container {
        position: relative;
        top: -0;
        left: 0;
        transform: translate(0%, 0%);
        background-color: none;
        width: 95%;
        box-shadow: 0 0 0 transparent;
        -webkit-box-shadow: 0 0 0 transparent;
        -moz-box-shadow: 0 0 0 transparent;
    }

    #headerBox.full .textBox {
        background: transparent;
        width: 100%;
    }
    #headerBox.full .textBox ul {
      margin-bottom: 30px;
    };

    #headerBox.full .textBox li {
      padding-left: 14%;
      padding-right: 14%;
      font-size: 18px;
      line-height: 20px;
      margin-bottom: 20px;
    }



    #boxen .box.count-2,
    #boxen .box.count-3,
    #boxen .box.count-4,
    #boxen .box.count-5,
    #boxen .box.count-6,
    #boxen .box.count-7,
    #oxen .box.count-10,
    #boxen .box.count-8 {
        flex: 0 0 50%;
    }

    /* CHANGE */
    #switchInfo .pic {
        width: 40%;
        min-height: 500px;
        background-position: center;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    }

    #switchInfo .pic img {
        position: relative;
        max-width: 100%;
        width: 100%;
    }

    /* /CHANGE */
    #switchInfo .text {
        width: 60%;
    }

    .carousel {
        padding: 0 50px;
    }

    .carousel-item img {
        max-width: 25%;
    }

    #markenCarousel .carousel-item img {
        max-width: 100%;
    }

    #videoCarousel .carousel-item img,
    .isAudit .carousel-item img {
        max-width: 100%;
    }

    .carousel-control-next,
    .carousel-control-prev {
        width: 50px;
    }

    #formSwitch p strong,
    .product .visCustomText p strong {
        font-size: 25px;
    }

    body.cat-117 .visCSSrlinl {
        min-height: 100px;
    }

    #content,
    #aside {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    #aside {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin-bottom: 50px;
    }

    #aside .custom {
        flex: 0 0 calc(50% - 15px);
    }

    #aside .custom:nth-child(odd) {
        margin-right: 30px;
    }

    main .blog,
    main .border-top-10,
    .authorBox .custom {
        margin-bottom: 50px;
    }

    .cat-483 #b1 {
        background-image: none;
    }

    .live-demo .col-md-6 {
        flex: 0 0 100%;
        width: 100%;
    }

    #steps .steps .d-flex {
        text-align: center;
        display: block !important;
    }

    #steps .icon {
        float: none;
        margin: 0 auto;
    }

    #steps .step {
        position: relative;
        padding-right: 0;
        margin-top: 10px;
        width: 100%;
        text-align: center;
        display: block;
    }

    #steps .step::before {
        left: 90px;
        top: -107px;
    }

  
}

@media(max-width: 1024px) {
    #blueCounter {
        background-image: linear-gradient(90deg, var(--ci), var(--blau));
        ;
    }

    #blueCounter::after {
        display: none;
    }

    .isAudit #b8 .text-0 .btn {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .isAudit #b8 .text-0 img {
        width: 100%;
    }
}

@media(min-width: 992px) and (max-width: 1200px) {
  .home #boxen.tablet3 .box h3, .home #boxen.tablet3 .box .h3 {
    font-size: 16px;
}
    #boxen.tablet3 .box.count-3 {
        flex: 0 0 33.33333333%;
    }

    #boxen.tablet3 .box .border {
        padding: 30px 20px 135px;
    }
  .home #boxen.tablet3 .box .border {
    padding: 30px 20px;
  }

    #boxen.tablet3 .box.count-3 .border p span {
        font-size: 24px !important;
    }

    #boxen.tablet3 .box .btn-wrap-absolute {
        gap: 10px;
        flex-direction: column;
    }

    #boxen.tablet3 .box .btn {
        padding: 10px;
    }
}

@media(max-width: 991px) {
    #prozess .prozess-line {
        display: none;
    }

    #prozess .prozess {
        flex-direction: column;
    }

    #prozess .prozess-1 .prozess-l,
    #prozess .prozess-2 .prozess-l,
    #prozess .prozess-3 .prozess-l,
    #prozess .prozess-4 .prozess-l {
        text-align: center;
    }

    #prozess .prozess-l,
    #prozess .prozess-r {
        width: 100%;
    }

    #prozess .prozess-2 .prozess-r-inner h3,
    #prozess .prozess-4 .prozess-r-inner h3,
    #prozess .prozess-2 .prozess-r-inner,
    #prozess .prozess-4 .prozess-r-inner {
        text-align: left;
    }

    #prozess .prozess-2 .prozess-r-inner .number,
    #prozess .prozess-4 .prozess-r-inner .number {
        right: 20px;
        left: auto;
    }

    :root {
        --differenceSM: calc((100vw - 740px) / 2);
    }

    .bluebar {
        background: linear-gradient(180deg, #f1f5f6 70%, transparent 70%);
    }

    .visforms .field290 .visCustomText {
        padding: 10px;
    }

    .visforms .field290 input.isCal {
        bottom: -45px;
    }

    #formSwitch p strong,
    .product .visCustomText p strong {
        font-size: 20px;
    }

    #modulesBoxed .modules-wrapper {
        display: block;
    }

    #modulesBoxed .modules-wrapper .modul-item {
        margin-bottom: 30px;
    }

    .modul-item ul:first-of-type {
        max-height: 180px;
        height: auto
    }

    .modul-item.active ul {
        height: auto;
        max-height: none;
    }

    .landingpage .content h2+h3 {
        font-size: 40px;
    }

    #contactBox .field87 {
        flex: 0 0 100%;
    }
   #contactBox .field87 input {
        background: #fff;
    }
  #contactBox .visforms .rueckruf .visBtnCon {
    flex: 0 0 100%;
    max-width: 100%;
}

    .cat-593 #headerBox picture img {
        height: auto;
        max-width: 100%;
    }

    .elearning-statistics-widget {
        min-height: 490px;
    }

    .elearning-statistics-widget .esw-element-item {
        padding: 0;
        flex: 0 0 100%;
        text-align: center;
    }

    .elearning-statistics-widget .esw-card .esw-details .esw-row {
        justify-content: center;
        text-align: center;
    }

    #mod-visform45 fieldset .visCSSrlinl {
        background-color: var(--ci);
        color: #fff;
        float: left;
        max-width: calc(50% - 20px);
        margin: 0 10px 10px !important;
        display: inline-flex !important;
        width: calc(50% - 20px);
        min-height: 100px;
        align-items: center;
    }

    .navbar-expand-md .navbar-collapse {
        display: block !important;
    }

    #b3.darkgrey .cols-2>.text:nth-child(odd) {
        border-right: 0 none;
    }

    main .text ul {
        padding-left: 5%;
    }

    .cat-117 #b3 .videoIcon {
        width: 100%;
        float: none;
        text-align: center;
        margin: 0 auto;
    }


    #top-navigation-xs {
        border-bottom: 1px solid #fff;
    }

    header #navigation>ul {
        width: 100% !important;
        display: block;
    }

    header #top-bar {
        padding: 10px;
    }

    .scroll header #top-bar .custom p {
        margin-bottom: 15px;
    }

    h1,
    h2,
    .h2 {
        font-size: 40px;
        line-height: 35px;
    }

    .greenHeadline .text-0>h2,
    h2 u,
    .h2 u {
        font-size: 40px;
        padding: 8px 15px 10px;
    }


    header #navigation>ul {
        width: 470px;
    }

    .home #faq .faq-list>div {
        flex: 0 0 100%;
    }

    #switchInfo .pic {
        width: 100%;
        min-height: 500px;
    }

    #switchInfo .text {
        width: 100%;
    }

    #boxen .box,
    #boxen .box.count-10,
    #boxen .box.count-2,
    #boxen .box.count-3,
    #boxen .box.count-4,
    #boxen .box.count-5,
    #boxen .box.count-7,
    #boxen .box.count-8,
    #boxen .box.count-6 {
        flex: 0 0 100% !important;
    }

    #mod-custom114 .d-flex {
        display: block !important;
    }

    #contactBox .custom h3 {
        margin-bottom: 50px;
    }

    #contactBox .custom .d-flex>div:first-child {
        padding-right: 0;
        flex: 0 0 60%;
        margin-bottom: 50px;
    }

    footer ul.mod-menu>li {
        margin-right: 0;
        margin-bottom: 30px;
        flex: 0 0 33%;
        padding-right: 30px;
    }

    footer ul li.item-147 {
        left: 230px;
    }

    .cols-2>.text,
    .cols-3>.text,
    .cols-4>.text {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0 15px;
        border-right: 0;
    }

    .cols-3>.text:first-child,
    .cols-3>.text:nth-child(4n) {
        padding-left: 15px;
    }

    .cols-2>.text:nth-child(odd) {
        padding-right: 15px;
        border-right: 0;
    }

    .cols-2>.text:nth-child(even) {
        padding-left: 15px;
        margin-top: 50px;
    }

    body.cat-117 .visforms fieldset .last,
    body.cat-117 .visforms fieldset .offset-lg-4 {
        margin-top: 0;
    }

    .visforms fieldset .third {
        width: 100%;
    }

    .visforms fieldset .last {
        order: 0;
    }

    body:not(.cat-117) .visforms fieldset .wrap-3:first-of-type {
        margin-top: 10px;
    }

    body:not(.cat-117) .visforms fieldset .wrap-3:nth-child(2) {
        margin-top: 70px;
    }

    #faqAccordion .accordion-item {
        flex: 0 0 100%;
    }

    .content .text .aufbau .order-2 {
        order: 1 !important
    }

    .content .text .aufbau .order-1 {
        order: 2 !important
    }

    footer #mod-custom112,
    footer #mod-custom193,
    footer #mod-custom153 {
        flex: 0 0 255px;
    }

    footer #newsletter,
    #searchModule {
        padding-left: 30px;
        flex: 0 0 calc(100% - 255px);
    }

    .baromether {
        width: 200px;
        position: relative;
    }

    .baromether .zeiger {
        width: 70px;
        top: 83px;
        margin-left: -57px;
    }

    .baromether .qumark {
        top: 95px;
        left: 0;
        font-size: 110px;
        ;
    }

    .isSelfcheck .punktzahl {
        font-size: 25px;
        left: 0;
    }

    #mod-visform58 fieldset .visCSSrlinl {
        background-color: var(--ci);
        color: #fff;
        float: left;
        max-width: calc(50% - 20px);
        margin: 0 10px 10px !important;
        display: inline-flex !important;
        width: calc(50% - 20px);
        min-height: 100px;
        align-items: center;
    }

    div[itemprop="text"],
    .content h2[itemprop="name"] {
        text-align: left !important;
    }

    #steps .steps {
        border-top: 0;
        padding-top: 0;
    }

    #steps .step::before,
    #steps .steps::before {
        display: none;
    }

    #steps .col-12 {
        margin-bottom: 40px !important;
    }

}

@media(max-width: 800px) {

    .field451 p,
    .field451 h2,
    .field385 h2,
    .isSelfcheck #moreInfo h2,
    .field451 label,
    .field385 label {
        font-size: 20px;
    }

    #blueCounter .counter {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    #blueCounter .counter .item {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-right: 0;
    }

    #blueCounter .counter .item,
    #blueCounter .counter .item>span {
        text-align: center;
    }
}

@media(max-width: 768px) {
    :root {
        --differenceSM: calc((100vw - 560px) / 2);
    }

    .visforms .field290 .visCustomText {
        position: relative;
        top: 0;
        left: 0;
        background: transparent;
        border: 0;
        padding: 0;
        width: auto;
        height: auto;
        text-align: left;
        font-family: 'robotolight';
        flex: 1 1 auto
    }

    .visforms .field290 input.isCal {
        position: relative;
        text-align: right;
        left: 0;
        bottom: 0;
        z-index: 1;
        margin-left: 0;
        width: auto;
    }

    .workerCount #animateContent {
        padding: 35px 40px 20px;
      height: 300px
    }

    .modul-item.active .flex-active ul {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 0px;
    }

    .modul-item.active .flex-active ul:nth-child(odd) {
        padding-right: 0;
    }

    .modul-item.active .flex-active ul:nth-child(even) {
        padding-left: 0;
    }

    .boxGradient .zugang {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 60px;
    }

    .kostenBoxen .boxBordered {
        flex: 0 0 100%;
    }

    .visforms .hasGrid fieldset {
        display: block;
    }

    header {
        padding-top: 5px !important
    }

    .scroll header {
        padding-top: 0px !important
    }

    .scroll header #top-bar .custom p {
        margin-bottom: 0;
    }

    #top-navigation-xs .navbar-toggler {
        display: none;
    }

    header #navigation #top-navigation-xs ul.mod-menu>li a {
        padding: 0;
    }

    header #navigation .mod-languages a {
        padding: 0 5px;
    }

    header #navigation ul.mod-menu>li {
        width: 100%;
        padding: 10px 50px;
    }

    header #navigation ul.mod-menu>li>span,
    header #navigation ul.mod-menu>li>a {
        font-size: 20px;
    }

    header #navigation .mod-languages a,
    #mod-custom185 a,
    header #navigation ul ul li a,
    header #navigation ul li.parent .fa {
        font-size: 20px;
    }

    #mod-custom185 {
        margin-top: 20px;
    }

    header #navigation {
        top: 115px;
        height: calc(100% - 115px);
    }

    .scroll header #navigation {
        top: 102px;
        height: calc(100% - 102px);
    }

    h1+h2,
    h2+h3 {
        font-size: 25px;
        line-height: 30px;
    }

    header #navigation ul li.item-210>a,
    header #navigation ul li.item-218>a {
        background-position: 200px 5px !important;
    }

    #top-navigation-xs .nav,
    #top-navigation-xs .navbar-collapse {
        display: block !important
    }

    main #headerBox .textBox ul {
        width: 100%;
        margin-left: 0%;
    }

    header #navigation #navbar110 ul.mod-menu>li {
        width: 100%;
    }

    header {
        padding-bottom: 15px;
    }

    header #top-bar {
        width: 100%;
        height: 35px;
        padding: 0;
        background: var(--ci);
        margin: -10px -3rem;
        width: 120%;
        width: calc(100% + 6rem);
        margin-bottom: 10px;
    }
  header #top-bar p a:first-child img,
  header #top-bar p a:nth-child(2) img {
    filter: invert(1) grayscale(1) brightness(1)
  }

    .scroll header #logo {
        position: relative;
        top: 0;
    }

    header #top-navigation {
        display: none;
    }

    header #top-bar .custom {
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    header #top-bar .custom p {
        margin-left: 0px;
        margin-bottom: 0px;
    }

    header #top-bar .custom p a {
        font-size: 15px;
        padding: 6px 10px;
        color: #fff;
    }

    header #top-bar .custom p::after {
        display: none;
    }

    header #navigation ul.mod-menu>li {
        width: 100%;
    }

    header #navigation ul.mod-menu>li span,
    header #navigation ul.mod-menu>li a {
        padding: 10px 0;
    }

    div.mod-languages ul.lang-inline li {
        display: inline-block;
        margin: 0;
    }

    header #logo {
        flex: 0 0 200px;
    }

    footer .navbar-collapse {
        display: block !important;
    }

    footer ul.mod-menu>li {
        flex: 0 0 100%;
        padding-right: 0px;
    }

    footer ul li.item-147 {
        left: 0;
        position: relative;
    }

    #contactBox .custom h3 {
        font-size: 25px;
    }

    #headerBox #bars .bar .fa-chevron-right {
        display: none;
    }

    .siegelRechts {
        position: relative;
        top: 0;
        right: 0;
        transform: translateY(0%);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
    }

    .siegelRechts img {
        height: auto !important;
        max-width: 140px !important;
        flex: 0 0 50%;
    }

    #aside .custom {
        flex: 0 0 100%;
    }

    #aside .custom:nth-child(odd) {
        margin-right: 0px;
    }

    #search-form .awesomplete {
        flex: 1 1 auto;
    }

    #search-form input {
        width: 100%;
    }

    #search-form .btn-secondary {
        margin-left: 0;
        margin-top: 30px;
        width: 100%;
    }

    footer #mod-custom112,
    footer #mod-custom193 {
        text-align: left;
    }

    footer #mod-custom112,
    footer #mod-custom193,
    footer #mod-custom153,
    footer #newsletter,
    #searchModule {
        flex: 0 0 100%;
        padding: 0 !important;
    }

    #searchModule {
        margin-top: 50px !important;
    }

    footer #newsletter {
        margin-top: 20px;
    }

    .fancy .carousel-control-next {
        right: 0;
    }

    .fancy .carousel-control-prev {
        left: 0;
    }

    .isAudit #b8 .text-0 .btn {
        position: relative;
        bottom: 0;
        right: 0;
        width: 100%;
    }

    .isAudit #b8 .text-0 img {
        margin-bottom: 30px;
    }

    .isAudit #b6 .left .imgWrap {
        border-right: 0;
    }

    .isAudit #b6 .imgWrap {
        margin-bottom: 30px;
    }

    .isAudit #b6 .right {
        margin-top: 30px;
    }

    main .text ul {
        padding-left: 0;
    }

    #reviews blockquote {
        padding: 40px;
    }

    #reviews blockquote::before {
        top: 10px;
        left: 14px;
        font-size: 20px;
        color: #fff;
    }

    #reviews blockquote::after {
        bottom: 10px;
        right: 14px;
        font-size: 20px;
        color: #fff;
    }

    .cat-147 .com-content-article__body>.container {
        max-width: 95%;
    }

    #steps .steptext {
        height: auto;
    }

    #steps .steptext p:last-child {
        margin-bottom: 0;
    }
}

@media(max-width: 575px) {
    .boxColored .fa {
        margin-left: 4px;
    }

    .home .textBox img {
        right: 0;
        top: -85px;
    }

    .cat-117 #b7 .cols-1>.text-1::after,
    .cat-117 #b7 .cols-1>.text-1::before,
    .cat-117 #b7 .cols-1>.text-3::after,
    .cat-117 #b7 .cols-1>.text-3::before {
        display: none;
    }

    .cat-130 #b5 .col-6 {
        text-align: center !important;
    }

    .cat-130 #b5 .col-6 strong {
        display: block;
        min-height: 50px;
    }

    .cat-130 #b5 .col-6 br {
        display: none;
    }

    .workerCount .bg-blue {
        padding: 20px 30px;
    }

    .workerCount #animateContent {
        padding: 35px 20px 20px;
    }

    ul.flex-list li,
    .workerCount #animateContent ul li {
        justify-content: start;
        font-size: 18px;
        gap: 15px;
    }

    .workerCount #animateContent .animated-item img {
        width: 25px;
        height: auto;
    }

    .workerCount #animateContent .animated-item span {
        flex: 0 0 auto;
        text-align: left;
    }

    #modulesBoxed {
        margin-top: 30px;
    }

    .boxGradient .h4,
    .boxGradient h4,
    .modul-item.active .h4,
    .modul-item.active h4 {
        margin-top: 0 !important;
    }

    .workerCount .bg-blue .field525,
    .workerCount .bg-blue .field529 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .workerCount #animateContent .animated-item .btn {
        width: 100%;
    }

    .kostenBoxen {
        margin-top: 30px !important
    }

    #boxen .box .border ul {
        margin: 20px 20px 10px;
    }

    .text-1 h3:has(+ ul.unstyled) {
        margin-top: 30px;
    }

    .cat-213 .col-10,
    .cat-213 .col-2 {
        flex: 0 0 100%;
    }

    .cat-213 .col-2 img {
        max-width: 70% !important;
        margin: 0 auto;
        display: block;
    }

    .webcam .hint {
        font-size: 12px;
    }

    .cat-574 h2 img {
        display: block;
        margin-bottom: 20px;
    }

    .cat-129 #b2.content strong {
        color: #fff;
    }

    .col-4 img {
        display: block;
        margin: 0 auto;
        height: auto;
    }

    #reviews.carousel {
        padding: 0;
    }

    #reviwes.carousel-control-next,
    #reviews.carousel-control-prev {
        display: none
    }

    .landingpage .content h2+h3 {
        font-size: 30px;
    }

    .cat-131 #boxen>h3,
    .cat-131 #b2>.container>h2 {
        background: var(--blau);
        box-shadow: 10px 0 0 var(--blau), -10px 0 0 var(--blau);
    }

    .cat-131 #b2>.container>h2 u,
    .cat-117 h2 u,
    .cat-117 .h2 u {
        font-size: inherit;
        padding: 0;
        background-color: transparent !important;
        display: inline
    }

    .cat-131 #switchInfo>.container>h2 u {
        font-size: 20px !important
    }

    .text-center,
    .cat-131 #switchInfo .text-center {
        text-align: left !important;
    }

    .cat-131 #boxen>.d-flex {
        margin-top: 50px;
    }

    .cat-131 #b2>.container>h2,
    .cat-119 #switchInfo {
        padding-top: 50px;
    }

    .cat-569 #headerBox h1 {
        font-size: 40px
    }

    .cat-569 #headerBox h1 span {
        margin-left: 0 !important;
    }

    .cat-569 #headerBox .textBox {
        border-bottom: 1px solid var(--ci);
        padding-bottom: 50px;
    }

    .cat-569 #audit img {
        display: block;
        margin: 0 auto 20px
    }

    .cat-131 #switchInfo .text h2 {
        font-size: 23px !important;
        font-family: 'robotomedium';
    }

    .cat-131 #switchInfo .text h2 u {
        padding: 0;
        display: inline;
        background-color: transparent;
        color: var(--ci);
        font-size: 23px !important;
        font-family: 'robotomedium';
    }

    .cat-569 #b8 .d-flex img,
    .cat-131 #b5 #audit .d-flex img {
        flex: 0 0 33%;
        height: auto;
        max-width: 33%
    }

    .cat-131 #b6 .cols-2>.text-1 h2 {
        margin-top: 50px;
    }

    .cat-131 #b7 .cols-2>.text-0 {
        margin-bottom: 50px;
    }

    .cat-574 #b8,
    .cat-596 #b6,
    .cat-131 #b8 {
        padding-bottom: 0
    }

    .cat-131 #b8 .text-0 p:last-child {
        margin-bottom: 0;
    }

    .cat-131 #b8 .h2,
    .cat-131 #b8 h3 {
        font-size: 30px;
        font-family: 'robotolight';
    }

    .cat-131 #b8 .h2,
    .cat-131 #b8 h3,
    .cat-131 #b8 p {
        text-align: left !important
    }

    h1+p,
    h2+div,
    h2+div.row,
    h2+p,
    h2+ul,
    ul+h2,
    ul+h3,
    table+h3,
    p+h2,
    p+h3 {
        margin-top: 10px;
    }

    #boxen .box .border .line+div span {
        font-size: 23px !important;
        font-family: 'robotomedium';
        margin-bottom: 20px;
        display: block;
    }

    #boxen .box .border ul.smallList li {
        margin-bottom: 10px;
    }

    .lightgrey {
        color: var(--ci);
    }

    .content ul li {
        margin-bottom: 15px;
        font-size: 18px;
    }

    .cat-117 #b2 .text-0>h3 {
        text-align: left !important;
        margin-top: 20px;
        font-size: 23px;
    }

    .cat-117 #vergleichstabelle .vergleichZwei .kopfzeile {
        background: var(--gruen)
    }

    .cat-117 #b7 .cols-1>.text-1>h2 {
        margin-top: 20px;
        margin-bottom: 30px
    }

    .cat-117 #b7 .cols-1>.text-4>h2 {
        margin-bottom: 30px
    }

    .cat-117 #b7 .cols-1>.text-4 img {
        width: 60%;
        height: auto;
    }

    #vergleichstabelle ul,
    #vergleichstabelle .vergleichEins ul,
    #vergleichstabelle .vergleichZwei ul,
    #vergleichstabelle .vergleichDrei ul {
        margin-bottom: 0;
    }

    #vergleichstabelle ul li {
        height: 80px;
        margin: 0;
    }

    #vergleichstabelle .vergleichInfo ul li {
        height: 80px;
        padding-bottom: 20px;
        margin: 0;
        padding-top: 20px;
    }

    #contactBox {
        background: #fff;
        padding-top: 0 !important
    }

    #contactBox .custom .h2 {
        border-bottom: 1px solid var(--ci);
    }

    #contactBox .custom .h3 {
        font-size: 23px;
        text-align: center;
        margin-bottom: 0px;
        font-family: 'robotomedium';
    }

    #switchInfo ul {
        margin-bottom: 2rem;
    }

    #switchInfo .text {
        padding: var(--WBpaddingY) 25px 30px;
    }

    #boxen .box .border ul {
        text-align: left;
        margin: 0 0 10px;
        max-width: 100%;
    }

    #headerBox h1 {
        text-align: center;
        margin-top: 20px;
    }

    .home #headerBox h1 {
        margin-top: 40px;
        margin-bottom: 0;
    }

    #headerBox #bars {
        margin: 60px auto 0;
    }

    .cat-117 #b2 .cols-1>.text-1 {
        margin-top: 100px;
        background-color: var(--grauH);
        margin-left: -13px;
        width: calc(100% + 26px);
        max-width: none;
        flex: 0 0 auto;
        padding-left: 25px;
        padding-right: 25px;
    }

    .cat-117 #b7 .cols-1>.text-3,
    .cat-117 #b7 .cols-1>.text-1 {
        background-color: var(--grauH);
        margin-left: -13px;
        width: calc(100% + 26px);
        max-width: none;
        flex: 0 0 auto;
        padding-left: 25px !important;
        padding-right: 25px !important;
        padding-top: 30px;
        margin-bottom: 30px
    }

    .cat-117 #b7 .cols-1>.text-1 h3 {
        text-align: left !important;
        font-size: 30px;
    }

    .cat-117 #b7 .cols-1>.text-2 .row {
        margin-top: 0 !important
    }

    .cat-117 #b7 .cols-1>.text-4 .cols-2 .text {
        box-shadow: 0px 0px 5px 2px var(--grauH);
        border: 1px solid var(--grauH);
        margin-bottom: 30px;
        padding-bottom: 40px;
        font-size: 18px;
    }

    .cat-117 #b8 {
        padding-bottom: 0px;
    }

    .cat-130 #b8>.container>h2,
    .cat-569 #b7>.container>h2,
    .cat-569 #b4>.container>h2,
    .cat-117 #b8>.container>h2 {
        border-top: 1px solid var(--ci);
        padding-top: 50px;
    }

    .cat-130 #b8>.container>h3 {
        margin-bottom: 0
    }

    .cat-569 #b5 .text-0 img {
        margin-bottom: 20px;
    }

    .cat-569 #b5 .text-1 h4 {
        margin-bottom: 0 !important;
        padding-top: 0 !important
    }

    .cat-117 #b7 h2,
    .cat-117 #b7 h3,
    .cat-117 #b7 .center {
        text-align: left !important;
    }

    .cat-117 #b2 .text-1 h3 {
        text-align: left !important
    }

    .cat-117 #b2 .text-1 img {
        float: none !important;
        margin: 0 auto;
        display: block;
        width: 100%;
    }

    #faq h2 {
        margin-bottom: 25px;
    }

    #faq h3 {
        font-family: 'robotomedium';
    }

    .visforms .field290 {
        display: block;
    }

    .visforms .field290 input.isCal {
        border: 0 !important;
        border-top: 0;
        padding: 10px 0 0 0 !important;
        color: var(--ci) !important;
        margin-bottom: 0 !important;
        margin-top: 0;
        margin-left: 0;
        text-align: left;
        font-family: 'robotobold';
        font-size: 18px;
    }

    .content h2+h3 {
        margin-top: 15px;
    }

    .pt-5 {
        padding-top: 1rem !important;
    }

    .cat-117 #b3 {
        background-color: #fff !important;
        padding-top: 0 !important
    }

    .cat-117 #b3 h2 {
        color: var(--ci);
        margin-bottom: 25px;
    }

    .cat-117 #b3 h2 a {
        font-family: 'robotobold';
    }

    .aufbau img {
        margin: 0 auto;
        display: block
    }

    .cat-131 #b2,
    .cat-131 #boxen,
    .cat-130 #boxen,
    .cat-131 #b1,
    .cat-131 #b3,
    .cat-117 #b5 {
        background-color: #fff !important;
    }

    .cat-131 #b2 {
        padding-top: 10px;
        padding-bottom: 0;
    }

    .cat-131 #b3 .cols-1>.text-2,
    .cat-117 #b6 {
        padding-top: 50px
    }


    .cat-131 #b3 .cols-1>.text-2 {
        border-top: 1px solid var(--ci);
        margin-top: 50px
    }

    .cat-130 #b1 {
        padding-top: 0;
        padding-bottom: 50px
    }

    .cat-130 #boxen {
        padding-top: 0
    }

    .cat-130 #anfrage {
        padding-left: 0 !important
    }

    .cat-130 #anfrage>h2 {
        text-align: left !important
    }

    .cat-130 #boxen>.container>h2 {
        border-top: 1px solid var(--ci);
        padding-top: 50px
    }

    .cat-131 #b3 .cols-1>.text-0>h2 {
        padding-top: 50px !important;
        margin-bottom: 20px;

    }

    .cat-131 #b3 .cols-1>.text-0>h2,
    .cat-131 #boxen {
        border-top: 1px solid var(--ci);
        padding-bottom: 0
    }

    .cat-117 #b4 ul.text-left {
        margin-top: 30px
    }

    .cat-131 #b3 .text,
    .cat-131 #b3 .text p {
        text-align: left !important;

    }

    .cat-131 #b3 .text p.h3 {
        text-align: center !important;
        font-size: 25px;
        font-family: 'robotomedium';
        margin-bottom: 10px !important
    }

    .cat-131 #b3 #teamBoxen .box p.h3 {
        margin-bottom: 25px !important;
    }

    .cat-131 #b3 .text p img {
        display: block;
        margin: 0 auto
    }

    .cat-131 #boxen>h3 {
        font-size: 30px !important;
        line-height: 34px;
        font-family: 'robotolight';
        text-align: left !important;
    }

    .cat-131 #b4 .text .h3 {
        font-size: 20px;
        font-family: 'robotomedium'
    }

    .visforms .field525,
    .visforms .field526,
    .visforms .field529 {
        display: flex;
        flex-direction: column;
        justify-content: flex-start !important;
        align-items: flex-start;
        width: 100%;
    }

    .visforms .field529 p,
    .visforms .field525 p {
        margin-bottom: 0
    }

    .visforms .field525 input {
        width: 100%;
        height: 45px;
    }

    .visforms .field529 input.isCal {
        border-top: 0 !important;
        padding: 15px !important;
        margin-top: 3px;
        width: 100%;
        height: 45px;
        margin-left: 0;
        border: 1px solid var(--grauD) !important;
    }

    .visforms #mod-visform64 input[type="text"] {
        border: 1px solid var(--grauD) !important;
    }

    #steps .col-12 {
        margin-bottom: 20px !important;
    }

    #steps .steps .d-flex {
        text-align: center;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    #steps .icon {
        flex: 0 0 40px;
        margin: 0 10px 0 0;
    }

    #steps .step {
        flex: 0 0 max-content;
        margin-top: 20px
    }

    #steps .steptext {
        margin-top: 0;
    }

    .cat-130 #b6 .cols-2 .text-1 p strong,
    #steps .step strong {
        font-size: 23px;
        font-family: 'robotomedium';
        font-weight: normal;
    }

    .content .text .aufbau h3 {
        font-family: 'robotomedium';
        margin-bottom: 10px;
    }

    #readMore2 {
        width: 100% !important;
    }

    #readMore2 .btn-ci {
        background-color: var(--gruen) !important;
        border-color: var(--gruen) !important;
    }

    #contactBox .visforms .beratung .visBtnCon {
        margin-left: auto;
        flex: 0 0 100%;
    }

    .content .text {
        padding-bottom: 0;
    }

    .isCarousel .text-0 {
        border-bottom: 1px solid var(--ci);
    }

    #switchInfo .container-fluid {
        padding-right: var(--bs-gutter-x, .75rem);
        padding-left: var(--bs-gutter-x, .75rem);
    }

    .home #headerBox {
        padding-top: 0px;
    }



    .home #headerBox h1::after {
        display: none
    }

    .home #headerBox .container {
        background-color: var(--grauH);
    }

    .home #headerBox .container {
        padding-bottom: 50px
    }

    .home #boxen {
       padding: 50px 20px
    }

    .home #boxen h2 {
        text-align: center !important
    }

    #boxen .box .border {
        box-shadow: 0px 0px 5px 2px var(--grauH);
    }

    #boxen .box .line {
        border-bottom: 1px solid;
    }

    #headerBox #bars .bar {
        margin-left: 0;
        width: 100%;
        width: 100%;
    }

    .container,
    .container-fluid,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        padding-right: 25px;
        padding-left: 25px;
    }

    .cat-130 .com-content-article__body .container .container {
        padding-left: 0;
        padding-right: 0;
    }

    #boxen>.container>h2,
    #boxen>.container>h3 {
        text-align: left;
    }

    #boxen>.container>h3 {
        font-family: 'robotomedium';
    }

    #boxen .box .h4 {
        text-align: center;
    }

    #boxen .box {
        padding: 0;
    }

    p {
        line-height: 25px;
    }

    .content {
        padding: 50px 0;
    }

    .elearning-statistics-widget .esw-card .esw-details .esw-details-value {
        height: 75px;
    }

    .elearning-statistics-widget {
        min-height: 420px;
        padding-top: 50px;
        padding-bottom: 50px;
        margin-bottom: 0;
        margin-left: -25px;
        margin-right: -25px;
    }

    .cat-130 .elearning-statistics-widget {
        margin-left: 0;
        margin-right: 0;
    }

    .cat-130 main .border-top-10 {
        margin-bottom: 00px;
    }

    body {
        color: var(--ci);
    }

    #breadcrumbs {
        margin-bottom: 0;
        border: 1px solid var(--grauH);
        box-shadow: 0px 0px 5px var(--grauH);
        padding: 30px;
    }

    #breadcrumbs p {
        color: #fff;
        margin-bottom: 0;
    }

    #breadcrumbs a {
        padding: 10px;
        display: block;
        font-family: 'robotomedium';
        font-size: 23px;
        border-bottom: 1px solid;
        padding-bottom: 30px;
    }

    #breadcrumbs a {
        border-color: var(--grauM);
    }

    .green #breadcrumbs a {
        border-color: var(--gruen);
    }

    .orange #breadcrumbs a {
        border-color: var(--orange);
    }

    .blue #breadcrumbs a {
        border-color: var(--blau);
    }

    #breadcrumbs a span {
        font-size: 20px;
        font-family: 'robotolight';
        display: block;
        text-decoration: none;
        padding-top: 10px
    }

    #breadcrumbs a:last-child {
        border-bottom: 0;
        padding-bottom: 10px;
    }

    .siegelRechts {
        padding-bottom: 50px;
        border-bottom: 1px solid var(--ci)
    }

    .cat-117 #headerBox.full .textBox {
        padding-right: 0;
    }

    #headerBox .textBox a.btn+.btn {
        margin-top: 10px;
    }

    .home .mod-articlesnews {
        border-top: 1px solid var(--ci);
        padding-top: 60px;
    }

    .home #b6 {
        padding-bottom: 0px;
    }

    .home #b8 h2 {
        color: var(--ci);
    }

    .home #b8 h2+div {
        margin-top: 25px
    }

    .gradient-bg h2 {
        text-align: center !important;
        margin-bottom: 20px;
    }

    .gradient-bg .btn-wrap {
        flex-direction: column;
    }

    .gradient-bg .btn-ci {
        background-color: #fff !important;
        color: var(--ci) !important;
    }

    .isCarousel.content h2 {
        text-align: center;
        font-size: 30px !important
    }

    .isCarousel.content h2 u {
        font-size: 30px !important
    }

    #markenCarousel {
        margin-bottom: 60px
    }

    #markenCarousel .carousel-indicators {
        bottom: -40px
    }

    #markenCarousel .carousel-indicators button {
        width: 50px;
        height: 5px;
        margin-right: 0;
        margin-left: 0;
        opacity: 1;
        background-color: var(--grauH);
    }

    #markenCarousel .carousel-indicators button.active {
        background-color: var(--ci)
    }

    #faqAccordion {
        margin: 0;
    }

    #faqAccordion .accordion-item {
        flex: 0 0 100%;
        border-bottom: 1px solid var(--ci);
        padding: 0;
        margin-bottom: 10px;
    }

    #faqAccordion .accordion-button {
        color: var(--ci);
        border: 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
        text-align: left;
        padding: 0 0 10px 0;
        font-family: 'robotolight';
    }

    #faqAccordion .accordion-button::after {
        content: "\f054";
        font-size: 20px;
        padding-top: 5px;
    }

    #faqAccordion .accordion-button:not(.collapsed) {
        color: var(--ci);
        border: 0;
        background-color: transparent;
        font-family: 'robotomedium'
    }

    #faqAccordion .accordion-button:not(.collapsed)::after {
        content: "\f078";
    }

    #faqAccordion .accordion-item .accordion-collapse {
        background-color: transparent;
        border: 0;
        padding: 0 0 20px 0;
    }

    #faqAccordion .accordion-item .accordion-collapse p {
        color: var(--ci);
    }

    header #navigation ul ul li a {
        text-indent: -10px;
        padding-left: 25px !important;
    }

    .freeIcon {
        top: 11px;
        right: auto;
        left: 0;
    }

    header #navigation ul.mod-menu>li {
        padding: 10px 15px;
    }

    header #navigation ul.mod-menu>li>span,
    header #navigation ul.mod-menu>li>a {
        font-size: 17px;
    }

    header #navigation .mod-languages a,
    #mod-custom185 a,
    header #navigation ul ul li a,
    header #navigation ul li.parent .fa {
        font-size: 17px;
    }

    #top-navigation-xs {
        padding: 20px 15px !important;
    }

    header #navigation {
        top: 110px;
        height: calc(100% - 110px);
    }

    #mod-visform45 fieldset .visCSSrbinl {
        margin: 0 0px 30px !important;
    }

    #mod-visform45 fieldset .visCSSrlinl {
        float: none;
        max-width: 100%;
        margin: 0 0 10px !important;
        width: 100%;
        min-height: 60px;
    }

    :root {
        --WBpaddingX: 15px;
        --WBpaddingY: 50px;
    }

    .isAudit #b7 h3 {
        font-size: 30px;
        margin-bottom: 30px;
    }

    .anfragenBox {
        margin-bottom: 30px;
    }

    .anfragenBox .fa {
        display: none;
    }

    .isAudit #b2 h2 img {
        height: 40px;
        width: auto;
    }

    .fancy .lightgrey .text ul li {
        font-size: 18px;
        padding-right: 10px;
    }

    .isAudit #b6 .imgWrap {
        min-height: 120px;
        padding: 0 50px;
    }

    .isAudit #b7 {
        padding: 30px 0px !important;
    }

    #blueCounter {
        margin-bottom: 40px;
    }

    .carousel {
        padding: 0;
    }

    #markenCarousel .h2 {
        text-align: center !important
    }

    .cat-130 #b5 .text-0 .col-6 {
        text-align: center !important;
    }

    .cat-130 #b5 .text-0 .col-6 p {
        padding: 0 10px;
    }

    .cat-130 #b5 .text-0 .col-6 p strong {
        display: block;
        min-height: 50px;
    }

    .cat-130 #b5 .text-0 .col-6 p br {
        display: none;
    }

    .fancy .carousel-control-next,
    .fancy .carousel-control-prev {
        display: none;
    }

    .cat-130 .w-100,
    .moduletable_landingpage .w-100 {
        width: auto !important;
    }

    .blog-text h3 {
        font-size: 20px;
    }

    .authorBox .custom {
        display: block;
    }

    .authorBox .custom .authorImg {
        max-width: 160px;
        margin: 0 auto 30px;
        padding: 0;
    }

    header #navigation .mod-languages {
        padding: 0;
    }

    .w-50 {
        width: 100% !important;
    }

    .h4,
    h4 {
        text-align: left;
        margin-bottom: 30px;
        margin-top: 30px;
        font-family: 'robotomedium';
    }

    #boxen .box h4,
    #boxen .box .h4 {
        margin-top: 0;
        margin-bottom: 0;
    }

    .cols-2>.text:nth-child(even) {
        margin-top: 0;
    }

    .content h2,
    .content h3,
    #faq h2,
    #faq h3,
    .product .com-content-article__body,
    .home .com-content-article__body,
    .content .h2,
    .content .h3 {
        text-align: left;
    }

    h1,
    h2,
    .h2,
    .h2 u,
    #contactBox .custom .h2 {
        font-size: 30px !important;
        line-height: 34px;
    }

    .content h3,
    #switchInfo h3 {
        font-size: 20px;
        line-height: 27px;
        font-family: 'robotomedium';
    }

    .home #switchInfo h2+h3 {
        border-bottom: 1px solid;
    }

    .infotext .btn+.btn {
        margin-top: 10px
    }

    .fancy #headerBox h2,
    .fancy h1+h2,
    .fancy h2+h3,
    h1+h2,
    h2+h3 {
        font-size: 23px;
        line-height: 30px;
        margin-bottom: 30px;
    }

    #boxen {
        padding: 40px 0;
    }

    .greenHeadline .text-0>h2 {
        padding: 0;
    }


    .nohome #switchInfo .container-fluid .h2 u,
    .nohome #switchInfo .container-fluid h2 u {
        font-size: 25px;
    }

    header #navigation>ul {
        max-width: 100%;
    }

    .home .com-content-article__body,
    .product .com-content-article__body {
        margin: 50px 0;
    }

    #headerBox picture {
        width: 100%;
        position: relative;
        height: 0;
        padding-top: calc(100% /(575 / 500));
    }

    #headerBox picture img {
        height: auto;
        max-width: 100%;
        position: absolute;
        top: 0;
        left: 0;
    }

    #headerBox.full .textBox {
        padding: 10px 0px;
    }

    #headerBox .textBox ul li {
        margin-bottom: 10px
    }





    #switchInfo {
        padding-top: 0px;
    }

    #switchInfo h2 {
        font-size: 30px;
    }

    #switchInfo .infotext h3 {
        font-size: 25px;
    }

    .btn {
        width: 100%;
    }

    .visforms fieldset .input-append button {
        height: 50px;
        width: 50px;
        padding: 10px 10px;
    }

    .blog-text .readmore .btn {
        width: auto;
    }

    .home #faq .faq-list {
        margin: 50px 0px 0;
    }

    .home #faq .faq-list>div {
        padding: 0;
    }

    #contactBox {
        padding: 50px 0 50px;
    }

    footer ul.list-unstyled {
        padding-left: 5%;
        padding-right: 5%;
    }

    footer ul li .nav-header {
        padding: 0 2%;
    }

    footer ul.mod-menu__sub li a {
        padding: 8px;
        border-bottom: 1px solid var(--grauM);
        display: block;
    }

    footer ul.mod-menu__sub li:last-child a {
        border-bottom: 0;
    }

    .carousel-item img {
        max-width: 50%;
    }

    .blog .item-content .d-flex {
        flex-direction: column;
    }

    .blog .blog-item {
        padding-bottom: 50px;
        margin-bottom: 50px;
    }

    .blog-date {
        flex: 0 0 auto;
        padding-right: 0;
        margin-bottom: 10px;
    }

    .blog-text {
        flex: 0 0 auto;
    }

    .cat-128 table {
        width: 100%;
    }

    .cat-128 td {
        width: 100%;
        display: block;
    }

    #contactBox .visforms .rueckruf fieldset {
        display: block;
    }

    #contactBox .visforms .rueckruf .field195,
    #contactBox .visforms .rueckruf .field87 {
        margin-bottom: 10px;
    }

    footer .chillcreations-bootstrap .wrap_horizontal .form-group {
        padding-right: calc(var(--bs-gutter-x) * .5);
        margin-bottom: 0 !important;
    }

    footer .chillcreations-bootstrap .wrap_horizontal .col:not(.form-group) {
        padding-left: calc(var(--bs-gutter-x) * .5);
    }

    footer .btn {
        margin-top: 5px;
    }

    footer .item-119 {
        position: relative;
    }

    footer .item-119 button {
        position: absolute;
        top: 5px;
        right: 0;
    }

    #baro {
        position: relative !important;
        top: 0 !important;
    }

    #field451,
    #field385 {
        max-width: 100%;
    }

    #mod-visform42 .visBtnCon {
        width: 100%;
        position: relative;
        bottom: 30px;
    }

    #mod-visform42.selfCheck .visBtnCon {
        width: 100%;
        float: none;
    }

    .visform fieldset #field451,
    #field385 {
        max-width: 100%;
        float: none;
        margin-right: 0;
    }

    #mod-visform58 fieldset .visCSSrbinl {
        margin: 0 0px 30px !important;
    }

    #mod-visform58 fieldset .visCSSrlinl {
        float: none;
        max-width: 100%;
        margin: 0 0 10px !important;
        width: 100%;
        min-height: 60px;
    }

    #mod-visform58 fieldset {
        flex-wrap: wrap;
    }

    #mod-visform58 fieldset .visBtnCon,
    #mod-visform58 fieldset .field389 {
        flex: 0 0 100%;
    }

}

@media(max-width: 535px) {
  #contactBox .visforms .beratung .visBtnCon,
  #contactBox .visforms .rueckruf .visBtnCon {
    display: block !important;
}
    header #navigation {
        top: 105px;
        height: calc(100% - 105px);
    }

    .scroll header #navigation {
        top: 62px;
        height: calc(100% - 62px);
    }

    .freeIcon {
        left: 0;
    }

    header #top-bar {
        justify-content: center !important;
    }

    header #top-bar .custom {
        flex-wrap: wrap;
        justify-content: center;
        padding-top: 7px;
        width: 100%;
    }

    header #top-bar .custom p {
        margin-right: 0px;
    }

    header #top-bar .custom p a {
        padding: 0;
    }

    header #top-bar .custom p a:nth-child(2)::after,
    header #top-bar .linkedinLink,
    header #top-bar .youtubeLink {
        display: none;
    }

    .scroll header {
        padding-top: 10px;
    }

    .scroll header #top-bar {
        display: none !important;
    }

    .scroll header #logo {
        top: 0;
    }

    header #top-navigation .navbar-expand-md {
        display: none;
    }

    #switchInfo .pic {
        min-height: 300px;
    }
}

@media(max-width: 460px) {
    header #navigation ul li.item-218>a {
        background-position: 160px 5px;
    }
}
@media(max-width: 456px) {
#headerBox #bars .bar span.bold {
  font-size: 18px
}
  }
@media(max-width: 430px) {
    .cat-130 #b6 .flex-list li {
        display: block
    }

    .cat-130 #b6 .flex-list li img {
        margin: 30px auto 10px;
        display: block;
    }

    header .px-5 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    header #top-bar {
        width: calc(100% + 30px);
        margin: -10px -15px 10px;
    }

    .com-content-category-blog.container {
        padding-left: 0;
        padding-right: 0;
    }

    #boxen .box .btn-wrap-absolute {
        position: relative;
        bottom: 0;
        left: 0px;
        width: 100%;
        flex-direction: column;
    }

    #boxen .box .border:has(.btn-wrap-absolute) {
        padding-bottom: 30px;
    }
}

@media(max-width: 370px) {
    header #navigation ul li.item-538>a {
        background-position: 200px 10px !important;
    }

    header #logo img,
    .scroll header #logo img {
        max-width: 160px;
    }

    #aside .custom p strong {
        font-size: 20px;
    }
}

@media(max-width: 350px) {

    .h3,
    h3 {
        font-size: 25px;
    }
}

.cat-601 #logo {
    background: url('../img/logo-marco-rossi.jpg') no-repeat;
    width: 200px;
    height: 45px;
    display: block;
}

.cat-601 #logo svg {
    display: none;
}

.cat-601 .noBox #headerBox.full .container {
    width: auto;
}

.cat-601 .noBox #headerBox h1,
.cat-601 .noBox #headerBox h2,
.cat-601 .noBox #headerBox li {
    color: var(--ci);
}

.offset-right-12 {
    margin-right: 100%;
}

.offset-right-11 {
    margin-right: 91.66666667%;
}

.offset-right-10 {
    margin-right: 83.33333333%;
}

.offset-right-9 {
    margin-right: 75%;
}

.offset-right-8 {
    margin-right: 66.66666667%;
}

.offset-right-7 {
    margin-right: 58.33333333%;
}

.offset-right-6 {
    margin-right: 50%;
}

.offset-right-5 {
    margin-right: 41.66666667%;
}

.offset-right-4 {
    margin-right: 33.33333333%;
}

.offset-right-3 {
    margin-right: 25%;
}

.offset-right-2 {
    margin-right: 16.66666667%;
}

.offset-right-1 {
    margin-right: 8.33333333%;
}

.offset-right-0 {
    margin-right: 0;
}

@media (min-width: 576px) {
    .offset-sm-right-12 {
        margin-right: 100%;
    }

    .offset-sm-right-11 {
        margin-right: 91.66666667%;
    }

    .offset-sm-right-10 {
        margin-right: 83.33333333%;
    }

    .offset-sm-right-9 {
        margin-right: 75%;
    }

    .offset-sm-right-8 {
        margin-right: 66.66666667%;
    }

    .offset-sm-right-7 {
        margin-right: 58.33333333%;
    }

    .offset-sm-right-6 {
        margin-right: 50%;
    }

    .offset-sm-right-5 {
        margin-right: 41.66666667%;
    }

    .offset-sm-right-4 {
        margin-right: 33.33333333%;
    }

    .offset-sm-right-3 {
        margin-right: 25%;
    }

    .offset-sm-right-2 {
        margin-right: 16.66666667%;
    }

    .offset-sm-right-1 {
        margin-right: 8.33333333%;
    }

    .offset-sm-right-0 {
        margin-right: 0;
    }
}

@media (min-width: 768px) {
  
    .offset-md-right-12 {
        margin-right: 100%;
    }

    .offset-md-right-11 {
        margin-right: 91.66666667%;
    }

    .offset-md-right-10 {
        margin-right: 83.33333333%;
    }

    .offset-md-right-9 {
        margin-right: 75%;
    }

    .offset-md-right-8 {
        margin-right: 66.66666667%;
    }

    .offset-md-right-7 {
        margin-right: 58.33333333%;
    }

    .offset-md-right-6 {
        margin-right: 50%;
    }

    .offset-md-right-5 {
        margin-right: 41.66666667%;
    }

    .offset-md-right-4 {
        margin-right: 33.33333333%;
    }

    .offset-md-right-3 {
        margin-right: 25%;
    }

    .offset-md-right-2 {
        margin-right: 16.66666667%;
    }

    .offset-md-right-1 {
        margin-right: 8.33333333%;
    }

    .offset-md-right-0 {
        margin-right: 0;
    }
    #headerBox.full .textBox li {
      padding-left: 10%;
      padding-right: 10%;
    }

}

@media (min-width: 992px) {
    .offset-lg-right-12 {
        margin-right: 100%;
    }

    .offset-lg-right-11 {
        margin-right: 91.66666667%;
    }

    .offset-lg-right-10 {
        margin-right: 83.33333333%;
    }

    .offset-lg-right-9 {
        margin-right: 75%;
    }

    .offset-lg-right-8 {
        margin-right: 66.66666667%;
    }

    .offset-lg-right-7 {
        margin-right: 58.33333333%;
    }

    .offset-lg-right-6 {
        margin-right: 50%;
    }

    .offset-lg-right-5 {
        margin-right: 41.66666667%;
    }

    .offset-lg-right-4 {
        margin-right: 33.33333333%;
    }

    .offset-lg-right-3 {
        margin-right: 25%;
    }

    .offset-lg-right-2 {
        margin-right: 16.66666667%;
    }

    .offset-lg-right-1 {
        margin-right: 8.33333333%;
    }

    .offset-lg-right-0 {
        margin-right: 0;
    }
}

@media (min-width: 1200px) {
    .offset-xl-right-12 {
        margin-right: 100%;
    }

    .offset-xl-right-11 {
        margin-right: 91.66666667%;
    }

    .offset-xl-right-10 {
        margin-right: 83.33333333%;
    }

    .offset-xl-right-9 {
        margin-right: 75%;
    }

    .offset-xl-right-8 {
        margin-right: 66.66666667%;
    }

    .offset-xl-right-7 {
        margin-right: 58.33333333%;
    }

    .offset-xl-right-6 {
        margin-right: 50%;
    }

    .offset-xl-right-5 {
        margin-right: 41.66666667%;
    }

    .offset-xl-right-4 {
        margin-right: 33.33333333%;
    }

    .offset-xl-right-3 {
        margin-right: 25%;
    }

    .offset-xl-right-2 {
        margin-right: 16.66666667%;
    }

    .offset-xl-right-1 {
        margin-right: 8.33333333%;
    }

    .offset-xl-right-0 {
        margin-right: 0;
    }
    #headerBox.full .container {
      max-width: 85%;
    }
    .home #headerBox.full .container {
      max-width: 1270px;
    }

    #headerBox.full .textBox ul {
      margin-bottom: 40px;
    }
    #headerBox.full .textBox li {
      padding-left: 5%;
      padding-right: 5%;
    }
}


#headerBox .headline {
    font-size: 30px;
    line-height: 1;
}

.cat-119 .h1 {
    font-family: "robotolight";
    margin-bottom: 30px
}


.cat-119 #headerBox.full .textBox {
    background-color: rgba(255, 255, 255, 0.5);
}

.cat-549 #headerBox .textBox img {
    height: 50px;
    width: auto
}

footer {
    padding: 60px 0 25px;
}

footer #mod-custom224 .d-flex {
    gap: 10px;
    justify-content: flex-end;
    max-width: 155px;
    margin-left: auto;
    margin-right: auto;
}

footer #mod-custom224 div>a,
footer #mod-custom224 .dropdown button {
    flex: 0 0 45px;
    max-width: 45px;
    height: 45px;
    background: #252525;
    color: #fff;
    text-align: center;
    font-size: 23px;
    padding: 7px 0;
}

footer #mod-custom224 .dropdown button {
    display: flex;
    flex-direction: column;
    width: 45px;
    justify-content: center;
    align-items: center;
    border: 0;
    min-width: 10px !important;
}

footer #mod-custom224 .youtube {
    color: #f00;
}

footer #mod-custom224 .linkedin {
    color: #0a66c2;
}

footer #mod-custom224 .reddit {
    color: #FF5700;
}

footer #mod-custom224 .facebook {
    color: #1877F2;
}

footer #mod-custom224 .threads {
    color: #fff;
}

footer #mod-custom224 .instagram .fa-brands {
    background: linear-gradient(45deg, #405DE6, #C13584, #FD1D1D, #FFDC80);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer #mod-custom224 .twitter {
    color: #fff;
}

footer #mod-custom224 .tiktok .fa-brands {
    background: linear-gradient(45deg, #ff0050, #00f2ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

footer #mod-custom224 .facebook:hover,
footer #mod-custom224 .threads:hover,
footer #mod-custom224 .reddit:hover,
footer #mod-custom224 .youtube:hover,
footer #mod-custom224 .linkedin:hover,
footer #mod-custom224 .twitter:hover {
    color: #fff
}

footer #mod-custom224 .instagram:hover .fa-brands,
footer #mod-custom224 .tiktok:hover .fa-brands {
    background: #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: #fff;
}

footer #mod-custom224 .dropdown .dropdown-toggle::after {
    display: inline-block;
    margin-left: 0;
    vertical-align: 0;
}

footer .mod-finder {
    margin-top: 50px;
}

footer .mod-finder button {
    width: 40px;
    min-width: 40px;
    background: transparent;
    border: 0;
    font-size: 1px !important;
    color: var(--grauD);
    border-bottom: 1px solid #fff;
    padding: 0
}

footer .mod-finder button::before {
    content: "\f002";
    font-family: 'FontAwesome';
    font-size: 18px;
    color: #fff;
}

footer .mod-finder input[type="text"] {
    background-color: transparent;
    border-bottom: 1px solid #fff;
    border-radius: 0;
    color: #fff
}

footer .mod-finder input[type="text"]::placeholder {
    font-style: italic;
    font-size: 15px;
}

#ccnewsletter_email_module::placeholder {
    font-style: italic;
    font-size: 15px;
    color: #ccc
}

footer #newsletter {
    flex: 0 0 100%;
    padding-left: 0;
    margin-top: 15px;
}

footer .headline a,
footer .headline span {
    font-size: 20px;
    font-family: 'robotobold';
    display: block;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #fff;
    color: #fff
}

#mod-custom232,
#mod-custom230,
#mod-custom231,
#mod-custom223,
#mod-custom227,
#mod-custom228 {
    margin-top: 80px;
}

#mod-custom236 ul,
#mod-custom229 ul,
#mod-custom223 ul,
#mod-custom230 ul,
#mod-custom231 ul,
#mod-custom232 ul,
#mod-custom227 ul,
#mod-custom228 ul {
    padding-left: 0;
    list-style: none;

}

#mod-custom230 ul a,
#mod-custom231 ul a,
#mod-custom232 ul a,
#mod-custom223 ul a,
#mod-custom227 ul a,
#mod-custom228 ul a {
    font-size: 14px;
    display: block;
    padding: 3px 0;

}

#mod-custom230 ul,
#mod-custom223 ul {
    column-count: 2;
    column-gap: 15px;
}

#mod-custom236 ul,
#mod-custom229 ul {
    display: flex;
    gap: 20px;
    text-align: right;
    justify-content: flex-end;
    margin-top: 22px;

}

footer #themes {
    background: #252525;
    padding: 30px;
    margin: 60px 0px 20px;
}

#mod-custom234 p,
#mod-custom226 p {
    text-align: right;
}

footer .article-tags {
    text-align: right;
}

footer .article-tags .tag,
#mod-custom234 span,
#mod-custom226 span {
    background-color: var(--grauD);
    display: inline-block;
    margin: 4px 2px;
    padding: 4px 8px;
}

footer #copyright {
    text-align: left;
    margin-top: 0;
}

footer #copyright p {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

footer #copyright a {
    display: inline-block;
    height: 70px;
    width: 70px;
    overflow: hidden;
}

footer #copyright a img {
    width: 72px;
    max-width: 72px;
    position: relative;
    left: -1px;
    top: -1px;
}

@media(max-width: 991px) {
    footer #mod-custom224 .d-flex {
        max-width: 100%;
        margin-top: 20px;
        justify-content: flex-start;
        align-items: end;
    }
}

@media(max-width: 768px) {
  #headerBox #bars {
    max-width: 90%
  }
    footer #mod-custom224 .d-flex {
        margin-bottom: 50px;
    }

    #mod-custom230,
    #mod-custom223 {
        margin-top: 50px
    }

    #mod-custom227,
    #mod-custom228 {
        margin-top: 20px;
    }

    #mod-custom230 ul,
    #mod-custom231 ul,
    #mod-custom232 ul,
    #mod-custom229 ul,
    #mod-custom223 ul,
    #mod-custom227 ul,
    #mod-custom228 ul {
        column-count: 2;
        column-gap: 15px;
    }

    #mod-custom225 p {
        text-align: left;
    }

    footer .article-tags,
    #mod-custom234 p,
    #mod-custom226 p {
        text-align: left;
        margin-top: 15px;
    }

    #mod-custom236 ul,
    #mod-custom229 ul {
        justify-content: flex-start;
        margin-top: -8px;
    }

    footer #copyright a {
        position: relative;
        top: 18px;
    }

    #fooerlogo {
        max-width: 300px
    }
  .modul-item.active .flex-active:has(ul:nth-child(2)) ul {
    flex: 0 0 100%;
    max-width: 100%
  }
  .modul-item.active .flex-active ul:nth-child(even) {
    padding-left: 0px;
}
}

@media(max-width: 575px) {
    #headerBox #bars {
    max-width: calc(100% - 45px)
  }
  .fancy #headerBox.full .textBox {
    padding-bottom: 50px;
}
    #themes .container {
        padding: 0
    }
  .home #boxen.tablet3 h2 {
    margin-bottom: 40px
  }
}

@media(max-width: 500px) {
    footer #newsletter {
        margin-bottom: 40px;
    }

    #mod-custom230 ul,
    #mod-custom231 ul,
    #mod-custom232 ul,
    #mod-custom236 ul,
    #mod-custom229 ul,
    #mod-custom223 ul,
    #mod-custom227 ul,
    #mod-custom228 ul {
        column-count: 1;
    }

    #mod-custom236 ul,
    #mod-custom229 ul {
        justify-content: flex-start;
        margin-top: 20px;
        flex-direction: column;
        align-items: flex-start;
    }

    #themes+.container .row {
        flex-direction: column-reverse
    }

    footer #copyright a {
        position: relative;
        top: 0;
    }
  #initial {
    font-size: 20px;
    padding-left: 0;
}
   #initial img {
     display: none
   }
  .workerCount #animateContent {
    padding: 35px 20px 20px;
    height: 250px;
}
}

.field195,
.field87 {
    order: 1
}

#mod-visform27 .visBtnCon,
#mod-visform6 .visBtnCon {
    order: 2;
}

.field684,
.field653 {
    order: 999;
    margin-top: -13px;
}

.field666 {
    margin-top: -16px
}

.fancy #headerBox.full .textBox {
    color: #fff;
    background: linear-gradient(90deg, var(--ci) 40%, var(--blau) 80%);
}

.fancy #headerBox #bars .bar {
    background: #fff;
    color: var(--ci);
}

.fancy #headerBox #bars .bar span {
    font-family: 'robotoregular';
}

.fancy #headerBox #bars .bar span.bold {
    font-family: 'robotoregular';
}

.fancy #headerBox #bars .bar.el-2 span {
    flex: 0 0 calc(100% - 430px);
}

.fancy #headerBox #bars .bar a {
    color: var(--ci);
}

.fancy #headerBox #bars .bar a.around:hover {
    color: #5c5c5c;
}

.fancy #headerBox #bars .bar .fa-chevron-right {
    display: none;
}

.fancy .gradientbg {
    background: linear-gradient(45deg, var(--ci), var(--blau));
    color: #fff;
    padding: 10px;
    margin-bottom: 40px;
}
@media(max-width: 1200px) {
  .home .fancy #headerBox.full .container {
    width: 100%;
    max-width: 100%;
    padding: 0;
  }

}

.tempelcol {
    flex: 0 0 530px;
    width: 530px;
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
    margin-left: auto;
    margin-right: auto;
}
.tempeltextcol {
    flex: 0 0 calc(100% - 530px);
    width: calc(100% - 530px);
    padding-right: calc(var(--bs-gutter-x)* .5);
    padding-left: calc(var(--bs-gutter-x)* .5);
}

#tempelborder {
    border: 1px solid var(--blau);
    border-radius: 20px;
    background: var(--grauH);
    box-shadow: 3px 4px 10px 0px #ccc;
    padding: 25px 40px;
}

#tempelborder>p {
    margin-bottom: 10px;
}

#tempelborder .h3-bluebg {
    background: var(--blau);
    color: #fff;
    margin: 0 -40px;
    padding: 15px;
    font-family: 'robotobold';
    font-size: 20px;
}

#tempel {
    display: grid;
    grid-template-rows: 100px 150px 150px 100px;
    grid-template-columns: repeat(3, 1fr);

    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 27px 10px;
    max-width: 500px;
    margin: 50px auto 0;
}
#tempel:has(.element.rectangle-vertical.open) {
    grid-template-columns: 1fr 1fr 65px;
}
#tempel .element {
    position: relative;
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: transform 0.3s;
    background-color: var(--blau);
    color: #fff;
    box-shadow: 0 0 5px 5px #ccc;
}


#tempel .element .icon {
    font-size: 2em;
    line-height: 1;
    margin-bottom: 10px;
    color: #002f74;
    background-color: #fff;
    padding: 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    margin: 0 auto 30px;
}

#tempel .element .header {
    margin-bottom: 10px;
    font-size: 20px;
}

#tempel .element.rectangle-vertical .header {
    font-family: 'robotobold';
    transform: rotate(-90deg);
    transform-origin: left bottom;
    position: absolute;
    bottom: 30px;
    left: 80%;
    width: 188px;
    text-align: left;
    line-height: 1;
    height: 75px;
    vertical-align: bottom;
    display: inline-flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 1px;
}

#tempel .element .header small {
    font-size: 18px;
    font-family: 'robotolight';
    display: block;
    position: relative;
}

#tempel .element.triangle {
    position: relative;
    width: 100%;
    background: url('../img/triangle1.svg');
    box-shadow: none;
    background-repeat: no-repeat;
    padding: 30px 0;
    background-size: 100%;

    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end:4;

}
#tempel .element.triangle .icon {
  margin-bottom: 0px
}

#tempel .element.rectangle-vertical {
    /*width: 33%;
    width: calc(33% - 20px);*/
    height: 308px;
    position: relative;
    max-width: 90%;
}
#tempel .element.rectangle-vertical.one {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
    margin-left: 10%;
}
#tempel .element.rectangle-vertical.two {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
    margin-left: 5%;
    margin-right: 5%;
}
#tempel .element.rectangle-vertical.three {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 4;
    margin-right: 10%;
}

#tempel:has(.element.rectangle-vertical.one.open) .element.rectangle-vertical.one,
#tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.two,
#tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.three {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 4;
    margin: 0;
}
#tempel:has(.element.rectangle-vertical.one.open) .element.rectangle-vertical.two,
#tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.one,
#tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.one {  
    grid-row-start:2;
    grid-row-end:3;
    grid-column-start: 3;
    grid-column-end: 4;
    height: 150px;
    margin: 0;
}
#tempel:has(.element.rectangle-vertical.one.open) .element.rectangle-vertical.three,
#tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.three,
#tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.two {
    grid-row-start:3 ;
    grid-row-end:4 ;
    grid-column-start:3;
    grid-column-end:4;
    height: 150px;
    margin: -20px 0 0;
}

#tempel .element.rectangle-vertical .icon {
    color: var(--blau)
}
#tempel .element.rectangle-vertical .icon .fa-tachograph-digital {
        font-size: 29px;
        position: relative;
        top: -2px;
        left: -2px;

}


#tempel .element.rectangle-horizontal {
    background: linear-gradient(45deg, var(--ci), var(--blau));
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--paleblue);
    border-radius: 8px;
    margin-top: -33px;

    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 4;
    grid-row-end: 5;
}

#tempel .element.rectangle-horizontal.open {
    margin-top: 0;
}
#tempel .element.rectangle-horizontal .header {
    text-align: left;
    font-size: 20px;
    line-height: 1;
    font-family: 'robotoregular';

}

#tempel .element.rectangle-horizontal .icon {
    margin-right: 20px;
    margin-left: 0;
    margin-bottom: 0;
}

#tempel .extra-text {
    background-color: #fff;
    padding: 10px;
    border: 1px solid #333;
    display: none;
    z-index: 10;
    width: 100%;
    color: #000;text-align: left;
}
#tempel .extra-text a {
    padding: 5px;
    display: block;
    color: #fff;
    background-color: var(--ci);
    text-align: center;
}

#tempel .element.rectangle-vertical.open .header {
    left: 80px;
}



#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) {
    padding: 10px;
    max-width: 100%;
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) .header {
    height: 45px;
    bottom: 20px;
    font-size: 16px;
    width: 120px
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) .header small {
    font-size: 15px;
}

#tempel .element.rectangle-vertical.open .icon {
    margin: 0 30px 0 10px;
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) .icon {
    display: none;
}

#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical.open {
    width: calc(100% - 75px);
    display: inline-flex;
}

#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical.open .extra-text {
    display: block;
    margin: -20px -20px -20px 0px;
    text-align: left;
    padding: 20px;
}

#tempel:has(.element.triangle.open) .element.rectangle-vertical,
#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-vertical {
    height: 100px;
}
#tempel:has(.element.triangle.open) .element.rectangle-vertical {
  margin-top: 10px
}

#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-horizontal.open {
    display: inline-flex;
    flex-wrap: wrap;
    height: auto;
}
#tempel:has(.element.triangle.open) .element.rectangle-vertical .header,
#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-vertical .header {
   display: none;
}

#tempel .element.triangle.open {
    grid-row-end: 3;
}
#tempel:has(.element.triangle.open) .element.rectangle-vertical {
    grid-row-start: 3;
}
#tempel .element.rectangle-horizontal.open {
    grid-row-start: 3;
}

#tempel:has(.element.rectangle-horizontal.open) {
    grid-template-rows: 100px 99px 150px 100px
}
#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-horizontal.open .extra-text {
    display: block;
    flex: 100%;
    order: 1;
    margin: -22px -22px 20px -22px;
    text-align: left;
}
#tempel .element.triangle.open .extra-text {
      margin: -11px -3px -20px 3px;
    width: calc(100% + -9px);
}
#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-horizontal.open .icon {
    order: 2
}

#tempel:has(.element.rectangle-horizontal.open) .element.rectangle-horizontal.open .header {
    order: 3
}

#tempel .element.triangle.open .extra-text {
    max-height: 190px;
    overflow: auto;
}
#tempel .element.rectangle-vertical.open .extra-text {
    max-height: 308px;
    overflow: auto;
}
#tempel .element.rectangle-horizontal.open .extra-text {
    max-height: 190px;
    overflow: auto;
}
#tempelborder:has(.element.rectangle-horizontal.open) {
    padding: 25px 40px 76px 40px;
}

@media(max-width: 991px) {
    .tempeltextcol {
        flex: 0 0 100%;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
        margin-top: 30px;
    }

    .tempeltextcol {
        flex: 0 0 100%;
        width: 100%;
        padding-right: 0;
        padding-left: 0;
    }
}
@media(max-width: 575px) {
  #angebote {
    background-color: #fff
  }
    #tempelborder>p,#tempelborder .h3-bluebg {
       text-align: center;
    }
    #tempel {
        display: block !important;
    }
    #tempel .element.rectangle-vertical .header {
        transform: none !important;
        position: relative !important;
        text-align: left;
        height: auto !important;
        display: block;
        margin-bottom: 10px;
        width: 100% !important;
        bottom: 0 !important;
        left: 0!important;
        text-align: center !important;
       
    }
    #tempel .element.rectangle-vertical {
        height: auto;
        position: relative;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 10px;
        height: auto !important;
        border-radius: 8px;
    }
    #tempel .element.rectangle-horizontal {

        margin-top: 0;
    }
    #tempel .element.triangle {
        padding: 30px 0 5px;
    }
    #tempel .element.triangle.open {
  display: inline-flex;
    flex-wrap: wrap;
    height: auto;
  }
  #tempel .element.triangle.open .extra-text {
    margin: 20px -21px -25px -21px;
    width: calc(100% + 44px);
}
    #tempel .element.triangle.open .extra-text,
    #tempel .element.rectangle-vertical.open .extra-text,
    #tempel .element.rectangle-horizontal.open .extra-text {
        max-height: none;
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical.open {
    width: 100%;
    display: block;
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical.open .extra-text {
    display: block;
    margin: 20px 10px -20px -20px;
    text-align: left;
    padding: 20px;
    width: calc(100% + 40px);
}
#tempel .element.rectangle-vertical .icon {

    margin: 7px auto 11px;
}
#tempel .element.rectangle-vertical.open .icon {
    
    margin-left: auto;
    margin-right: auto;
}
#tempel:has(.element.triangle.open) .element.rectangle-vertical .header, #tempel:has(.element.rectangle-horizontal.open) .element.rectangle-vertical .header,
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) .icon {
    display: block;
}
#tempel:has(.element.rectangle-vertical.one.open) .element.rectangle-vertical.three, #tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.three, #tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.two {
    margin: 0 0 10px !important
}
#tempel:has(.element.rectangle-vertical.open) .element.rectangle-vertical:not(.open) .header {
  font-size: 20px;
}
#tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.two {
    margin: 10px 0 10px !important;
}
#tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.one {
    margin: 10px 0 10px !important;
}
  #tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.three {
    margin: 0 0 10px !important;
}
#tempel .element.triangle {
    background: linear-gradient(45deg, var(--ci), var(--blau));
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border: 1px solid var(--paleblue);
    border-radius: 8px;
    margin-top: -33px;
    margin-bottom: 10px;
    padding: 20px;
}
#tempel .element.triangle .icon {
    margin-right: 20px;
    margin-left: 0;
    margin-bottom: 0;
}
#tempel .element.triangle .header {
    text-align: left;
    font-size: 20px;
    line-height: 1;
    font-family: 'robotoregular';
}
  #tempel:has(.element.triangle.open) .element.rectangle-vertical {
    margin-top: 10px;
}
  #tempel:has(.element.rectangle-vertical.one.open) .element.rectangle-vertical.two, #tempel:has(.element.rectangle-vertical.two.open) .element.rectangle-vertical.one, #tempel:has(.element.rectangle-vertical.three.open) .element.rectangle-vertical.one {
    margin: 10px;
}
}

#mod-finder-searchword242 {
  height: 50px;
}
#mod-custom243 {
    display: flex;
    align-items: center;
}
header #navigation li:hover ul.mod-menu_sub_solution li.item-538>a,
header #navigation li:hover ul.mod-menu_sub_solution li.item-210>a, 
header #navigation li:hover ul.mod-menu_sub_solution li.item-218>a {
  background: transparent !important;
}

header #navigation ul ul li:hover a, 
 header #navigation ul ul li:focus a, 
 header #navigation ul ul li:active a {
    background: transparent !important;
    color: var(--ci) !important;
}
@media(min-width: 1201px) {
    header #navigation ul li:hover>ul.mod-menu_sub_solution::after {
        height: 1px;
        width: calc(100% - 100px);
        background: linear-gradient(90deg, var(--ci), #2da9df);
        content: '';
        position: absolute;
        top: 0px;
        left: 50px;
    }
     header #navigation ul.mod-menu>li>span,
     header #navigation ul.mod-menu>li>a {
        padding: 25px 60px;
    }
     header #navigation ul li.item-204:hover>ul, 
     header #navigation ul li.item-225:hover>ul, 
     header #navigation ul li.item-215:hover>ul, 
     header #navigation ul li.item-108:hover>ul {   
        border: 0;
        padding: 20px;
        top: 53px;
        box-shadow: 5px 11px 10px #00000075
    }
      header #navigation ul li.item-235:hover>ul::after,
      header #navigation ul li.item-204:hover>ul::after,
      header #navigation ul li.item-215:hover>ul::after,
     header #navigation ul li.item-108:hover>ul::after {
        height: 1px;
        width: calc(100% - 40px);
        background: linear-gradient(90deg, var(--ci), #2da9df);
        content: '';
        position: absolute;
        top: 0px;
        left: 20px;
    }
 header #navigation ul ul li a {   
    padding: 6px 20px;
    display: block;
    font-family: 'robotoregular';
}
 li.item-107 {
    position: unset !important;
}
li.item-107 .fa {
    float: right;
    position: relative !important;
    margin-left: -15px;
}
.mod-menu_sub_solution {
    padding: 20px 50px 30px !important;
    flex-wrap: wrap;
    right: 48px !important;
    max-width: 1200px;
    justify-content: space-between;
    top: 113px !important;
     border: 0 !important;
        box-shadow: 5px 11px 10px #00000075
}
.mod-menu_sub_solution ul  {
   display: block !important; 
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
    width: auto !important;
    min-width: 10px !important;
    padding: 0px;
    background: #fff !important;
    border: 0 !important;
}
.mod-menu_sub_solution > li {
    flex: 0 0 30%    
}
header #navigation .mod-menu_sub_solution > li ul li > a {
    text-align: left;
    padding: 4px 20px !important;
    background-color: transparent !important;
    color: var(--ci) !important;
    font-family: 'robotoregular' !important;
}

.mod-menu_sub_solution > li.nav-item-end {
    flex: 0 0 100%;
    text-align: center;  
    margin-top: 20px;
    color: #8e8e8d;

}

.mod-menu_sub_solution .nav-item-headline {
    text-transform: uppercase;
    font-size: 16px;
    display: block;  
    text-align: center; 
    margin-bottom: 20px;
    font-family: 'robotobold' !important;
    position: relative;
}
.mod-menu_sub_solution .nav-item-headline::after {
     height: 1px;
        width: 100%;
        background: linear-gradient(90deg, var(--ci), #2da9df);
        content: '';
        position: absolute;
        bottom: 0px;
        left: 0;
}
.mod-menu_sub_solution > li.nav-item-end span {
    text-transform: uppercase;
    font-size: 16px;
    border-bottom: 1px solid #8e8e8d;
    display: block;  
    text-align: center; 
    font-family: 'robotobold' !important;
    color: #8e8e8d !important;    
    max-width: 490px;
    margin: 0 auto;
}
.mod-menu_sub_solution > li.nav-item-end a {
    display: inline-block !important;
    color: #8e8e8d !important;
}
header #navigation ul ul li.nav-item-end:hover a {
    color: #8e8e8d !important
}
 header #navigation ul ul li.nav-item-end a:hover {
    color: #333 !important
}

header #navigation ul li:hover>ul.mod-menu_sub_solution {
display: flex
}
}

@media(max-width: 1300px) {
.mod-menu_sub_solution {
    max-width: calc(100% - 98px) !important;
}
}
@media(max-width: 1200px) {
  .mod-menu_sub_solution {
    max-width: 100% !important;
}
    .mod-menu_sub_solution > li.nav-item-end {
        display: none !important;
    }
   header #navigation .d-flex {
            height: calc(100% - 150px);
        overflow: auto;
  }
  .mod-menu_sub_solution > li.nav-item-end, .mod-menu_sub_solution .nav-item-headline {
    font-size: 22px;
    font-family: 'robotobold' !important;
    border-bottom: 1px solid var(--ci);
}
  
    #mod-custom243 {
        display: block !important
    }
}

#mod-custom213:has(+ .com-content-article)  #headerBox {
padding-bottom: 15%;
background-color: var(--ci);
}
#mod-custom213:has(+ .com-content-article)  #headerBox picture img {

    object-fit: contain;
}

#terminBox {
  order: 6;
    width: 100%;
    background: var(--ci);
    padding: 30px;
    color: #fff;
    margin-top: 11px;
    display: flex;
    flex-wrap: wrap;
}
#terminBox .visCustomText  p strong {
  font-size: 25px;
}
#terminBox .field547 {
  margin-top: -69px;
}
#terminBox #modvisform205beratungwielbl_0::after,
#terminBox #modvisform205beratungwielbl_1::after,
#terminBox #modvisform205beratungwielbl_0,
#terminBox #modvisform205beratungwielbl_1 {
  color: #fff !important;
}
#terminBox #modvisform205beratungwielbl,
#terminBox #modvisform205uhrzeitlbl{
  display: none !important;
}
.cat-131 #field541 {
  background: transparent;
    color: var(--ci);
    border-color: var(--ci) !important;
}
.cat-131 .visBtnCon:has(#field541) {
  padding: 0 !important;
}
#terminBox .time input[type="radio"]+label {
  background-color: var(--blau) !important;
}
#terminBox .time .visCSSrbinl {
  background-color: transparent !important;
}
#terminBox  input[type="radio"]+label:hover {
    background-color: transparent;
    opacity: 0.8;
}
.terminHead {
  order: 5;
  margin-top: 30px;
}
.terminHead, #terminBox {
  display: none;
}
body:has(.baromether.isfinished) .terminHead {
  display: block;
}
body:has(.baromether.isfinished) #terminBox {
  display: flex;
}
@media(max-width: 575px) {
  #terminBox .field547 {
    margin-top: px;
}
  
}

#vi-lex {
  margin-top: 50px;
  padding: 50px;
  border: 10px solid;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient(to left, var(--ci), var(--blau));
}
}
#vi-lex h2 {
  border-bottom: 1px solid var(--ci);
  padding-bottom: 30px;
}
#vi-lex .input-group {
  flex-direction: column;
  gap: 20px
}
#vi-lex .input-group>.form-control {
  width: 100%;
  border-radius: 0;
}
#vi-lex .btn-grey {
  color: var(--grauD);
  border-color: var(--grauH);
  background: var(--grauH);
  width: 100%
}
.mb-45 {
  margin-bottom: 34px
}