@charset "UTF-8";

html {
    font-family: 'Ubuntu', sans-serif;
    height: 100%;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

body {
    font-family: 'Ubuntu', sans-serif;
    display: -ms-flexbox;
    display: flex;
    min-height: 100%;
    -ms-flex-direction: column;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

/*** MAIN ***/
#main {
    -ms-flex-positive: 1;
    flex-grow: 1;
    background-color: #f6f6f6;
    padding-top: 6rem;
    overflow: hidden;
}

#main > .container {
    position: relative;
}

#main ul {
    list-style-image: url('/img/icon-list.svg');
    padding-inline-start: 1.125rem;
}

#main li {
    list-style: none;
    background-image: url('../../../image/arrow-right-turkis.svg');
    background-repeat: no-repeat;
    background-position: 0px 10px;
    background-size: 10px;
    padding-inline-start: 1.125rem;
    margin-left: -20px;
}

/*** HEADER ***/
.kachelanimation {
    position: absolute;
    width: 100%;
    right: 10rem;
}
.raute {
    z-index: 90;
    width: 100%;
    height: 1200px;
    position: absolute;
    top: -6rem;
    border-radius: 1rem 0 1rem 0;
    transform: rotate(45deg) skew(-15deg, -15deg) translateX(-50%) translateY(-90%);
    background-color: #006699;
    background: -moz-linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    background: -webkit-linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    background: linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004477', endColorstr='#004477', GradientType=1);
}

.netz {
    z-index: 85;
    top: 2rem;
    right: -10rem;
    position: absolute;
}

.kacheln {
    z-index: 90;
    width: 100%;
    top: -6rem;
    transform: translateX(50%);
    position: absolute;
}

.kacheln .tile-1 {
    top: 3rem;
    left: -1rem;
    width: 40%;
    position: absolute;
}

.kacheln .tile-2 {
    top: 10rem;
    left: 12rem;
    width: 40%;
    position: absolute;
}

.kacheln .tile-3 {
    top: 3rem;
    left: 24rem;
    width: 40%;
    position: absolute;
}

.kacheln .big-tile {
    top: -1rem;
    left: -4rem;
    width: 60%;
    position: absolute;
}	

.shadow-line {
    width: 100%;
    margin-bottom: 1rem;
}

#hero {
    position: relative;
    padding-top: 6rem;
}

.aufmachertext {
    z-index: 99;
    top: 25px;
}

.net {
    height: 360px;
}

.diamond.top {
    position: absolute;
    width: 900px;
    height: 466px;
    left: 0;
    top: -260px;
}

.diamond.bottom {
    position: absolute;
    width: 95%;
    bottom: -6rem;
    left: -33%;
}

.img-tile .img {
    position: relative;
    width: 100%;
    padding-top: 68%;
    overflow: hidden;
    z-index: 10;
}

.img-tile img {
    position: absolute;
    width: 180%;
    left: -41.2%;
    bottom: -41%;
}

.kacheln .box, .img-tile .box {
    position: absolute;
    width: 31%;
    padding-bottom: 31%;
    top: 32%;
    left: 35%;
}

.img-tile .box.small {
    width: 28%;
    padding-bottom: 28%;
    top: 35.5%;
    left: 36%;
}

.kacheln .trans, .img-tile .trans {
    box-shadow: 10px 10px 8px 0 rgba(16, 47, 74, 0.2);
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
    transform: rotate(45deg) skew(-15deg, -15deg);
}

.diamond .box {
    position: absolute;
    width: 100%;
    padding-bottom: 100%;
}

.diamond .trans, .img-tile .trans {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
    transform: rotate(45deg) skew(-15deg, -15deg);
}

.diamond .trans {
    top: -50%;
    border-radius: 1rem 0 1rem 0;
    background-color: #006699;
    background: -moz-linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    background: -webkit-linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    background: linear-gradient(45deg, #004477 0%, #006699 25%, #0077aa 50%, #006699 75%, #004477 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#004477', endColorstr='#004477', GradientType=1);
}

/*** TYPOGRAFIE ***/
#hero h2 {
    font-size: 3rem;
}

h1 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #33AAAA;
}

h2, h3, h4 {
    color: #004477;
    font-weight: bold;
    text-transform: uppercase;
}

h2 {
    font-size: 3rem;
    line-height: 1.2;
    word-wrap: break-word;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

h3 {
    font-size: 1.75rem;
    line-height: 1.2;
}

h4 {
    font-size: 1.5rem;
    line-height: 1.2;
}

h5 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #33AAAA;
}

a, div, li, p {
    font-size: 1.2rem;
}

a, a:hover, a:active {
    text-decoration: none;
}

p, li {
    color: #004477;
}

p {
    margin-bottom: 0.5rem;
}

sub {
    font-size: 50%;
}


/*** BUTTON ***/
button:focus {
    outline: none;
}

a.border:hover,
a.border:active {
    text-decoration: none;
}

.border {
    border: 0.1875rem solid !important;
    padding: 0.5rem;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 0.5rem;
    text-align: center;
}

.border.arrow {
    position: relative;
    min-width: 8rem;
    line-height: 1;
    padding-left: 0.75rem;
    padding-right: 3rem;
    color: #33AAAA;
    border-color: #33AAAA !important;
}

a {
    color: #33AAAA;
    border-color: #33AAAA;
}

a:hover {
    color: white;
    border-color: #33AAAA !important;
}

#newsletter button[type=submit] {
    color: #33AAAA !important;
    border-color: #33AAAA !important;
    background: none !important;
}

#newsletter button[type=submit]:hover {
    color: white !important;
}

#newsletter button[type=submit]:hover:before {
  right: 0;
}

a:hover, a:not( :hover ), button, input,  a {
    transition:  0.08s ease-in;
    overflow:hidden;
    background: none;
    position: relative
}
/*#main a:before, #header a:before, #cta-teaser .button a:before, #newsletter button[type=submit]:before, form button[type=submit]:before {*/
#main a:before, #header a:before, #cta-teaser .button a:before, #newsletter button[type=submit]:before {
    content: "";
    position: absolute;
    background: #33AAAA;
    bottom: 0;
    left: 0;
    right: 100%;
    top: 0;
    z-index: -1;
    -webkit-transition: right 0.18s ease-in;
}

#header a:before {
    background: #88BB55;
}

#main .bg-darkblue a:before, #cta-teaser .button a:before {
    background: #ffffff;
}

#main .slider .carousel-control-next:before, #main .slider .carousel-control-prev:before {
    background-color: transparent !important;
}

#main a:hover:before, #header a:hover:before  {
    right: 0;
}

.arrow::after {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    right: 0.75rem;
    content: ' ';
    background-image: url(/img/arrow-right-turkis.svg);
    background-size: 0.75em 0.75em;
    width: 0.75em;
    height: 0.75em;
}


/*** ALLGEMEIN ***/
.box-shadow {
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.05);
}

 .spacer-image {
    min-height: 450px;
    background: no-repeat center center / cover;
    background-attachment: fixed;
}

.margin-b {
    margin-bottom: 6rem;
}

.margin-c {
    margin-bottom: 2rem;
}

.bg-c-white {
    padding: 2rem 2.5rem 2.5rem 2.5rem;
    background-color: #fff;
}

.bg-c-turkis {
    padding: 2rem 2.5rem 0 2.5rem;
    background-color: #33AAAA;
    color: white;
}

.bg-c-turkis h2 {
    color: #fff;
}

.bg-c-turkis li  {
    background-image: url('../../../image/arrow-right-darkblue.svg') !important;
}

.bg-c-turkis a {
    margin-bottom: 2.5rem;
    color: #fff !important;
    border-color: #fff !important;
}

.bg-c-turkis a:hover {
    color: #33AAAA !important;
}

.bg-c-turkis a:before {
    background-color: #ffffff !important;
}

.bg-darkblue, .bg-c-darkblue {
    padding: 2rem 2.5rem 1rem 2.5rem;
    background-color: #004477;
    color: white;
}

.bg-darkblue p, .bg-darkblue strong, .bg-c-darkblue strong {
    color: #33AAAA;
    height: 30px;
}

.bg-darkblue li, .bg-c-darkblue li, .bg-c-darkblue p {
    color: #fff;
}

.bg-darkblue h2, .bg-c-turkis h2 {
    font-size: 2.45rem;
    color: #fff;
}

.bg-darkblue h3 {
    font-size: 1.5em;
    color: #fff;
    display: block;
}

.bg-c-darkblue h3 {
    color: #fff;
    display: block;
    text-transform: inherit;
}

.bg-darkblue img,  .bg-cyan img {
    filter: invert(50%) sepia(100%) saturate(278%) hue-rotate(131deg) brightness(94%) contrast(94%);
    width: 30%;
    height: 80px;
    padding-top: 0.5rem;
}

.bg-darkblue a {
    color: #fff;
    border-color: #fff;
    display: block;
    margin: 2rem 0 0 0;
}

.bg-darkblue a:hover {
    color: #004477;
    border-color: #fff !important;
}

.bg-c-darkblue a {
    animation: polygons .5s 1 0.2s forwards;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.bg-gradient {
    background-color: #006699;
    background: -moz-radial-gradient(center, ellipse cover, #0077aa 0%, #004477 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #0077aa 0%, #004477 100%);
    background: radial-gradient(ellipse at center, #0077aa 0%, #004477 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0077aa', endColorstr='#004477', GradientType=1);
}

img {
    width: 100%;
    object-fit: contain;
}

.icons img {
    filter: invert(50%) sepia(100%) saturate(278%) hue-rotate(131deg) brightness(94%) contrast(94%);
    width: 30%;
    margin-bottom: 1rem;
}

h1.turkis, p.turkis, span.turkis, strong.turkis {
    color: #33AAAA;
}

#main .col-12.col-md-3.mb-4.text-center.icons p, #main .col-12.col-md-3.mb-3.text-center.icons p,  #main .col-12.col-md-4.mb-4.text-center.icons p {
    font-weight: bold;
}

.text-end {
    text-align: end;
}

.z-index {
    position: relative;
    z-index: 10;
}

.transition {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.border-radius-d {
    border-radius: 1rem 0 1rem 0;
}

.border-radius-d:not(.slider) {
    overflow: hidden;
}

.column-count {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
}


/*** FORM ***/
button {
    color: #fff !important;
    background-color: #004477 !important;
}

button:hover {
    background-color: #33AAAA !important;
}

button:disabled {
    background: rgba(221, 221, 221, 0.47) !important;
    border-color: #2d2d2d !important;
    color: #4c4c4c !important;
}

input.border {
    border: 0.1875rem solid !important;
    color: #004477 !important;
    border-color: #004477 !important;
    border-radius: 0 !important;
    padding: 0.5rem 1.5rem;
    height: 3.08rem;
    line-height: 1;
    text-align: left;
}

input::placeholder {
    color: #004477 !important;
    opacity: .5;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    border-radius: 15px;
    background: #004477;
    cursor: pointer;
    margin-top: -10px;
}

/* All the same stuff for Firefox */
input[type=range]::-moz-range-thumb {
    height: 25px;
    width: 25px;
    border-radius: 15px;
    background: #004477;
    cursor: pointer;
}

/* All the same stuff for IE */
input[type=range]::-ms-thumb {
    height: 25px;
    width: 25px;
    border-radius: 15px;
    background: #004477;
    cursor: pointer;
}

input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #33AAAA;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #33AAAA;
}

input[type=range]::-moz-range-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #33AAAA;
}

input[type=range]::-ms-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #33AAAA;
}

input[type=range]:focus::-ms-fill-lower {
    background: #33AAAA;
}

input[type=range]::-ms-fill-upper {
    background: #33AAAA;
}

input[type=range]:focus::-ms-fill-upper {
    background: #33AAAA;
}

select::-ms-expand {
    display: none;
}

select {
    border-radius: 0;
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    height: 3rem;
    background : url("../../../image/dropdown.png") no-repeat 95% #fff;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
}

label, input[type="checkbox"] {
    cursor: pointer;
}

#w0 form button[type=submit] {
    color: #33AAAA !important;
    border-color: #33AAAA !important;
    background: none !important;
    width:211px;
}

#w0 form button[type=submit] {
    color: #33AAAA !important;
    border-color: #33AAAA !important;
    background: none !important;
}
/*
form button[type=submit]:hover {
    color: white !important;
}
*/
form button[type=submit]:hover:before {
  right: 0;
}

p.grey {
    color: lightgray !important;
    font-size: 1rem;
}

.custom-range {
    height: 1.6rem;
}

.custom-control {
    padding-left: 0.1rem;
}

.custom-control-input:checked~.custom-control-label::before {
    color: white !important;
    background-color: #33AAAA !important;
    border: 2px solid #33AAAA;
    border-radius: 0;
}

.custom-control-input:not(:checked)~.custom-control-label::before {
    border: 3px solid #33AAAA;
    border-radius: 0;
    cursor: pointer;
}

.colocation select::-ms-expand {
    display: none;
}

.colocation select {
    border-color: #004477 !important;
    color: #004477 !important;
    border-radius: 0;
    outline : none;
    overflow : hidden;
    text-indent : 0.01px;
    text-overflow : '';
    height: 3rem;
    background : url("../../../image/dropdown.png") no-repeat 95% #fff;
    -webkit-appearance: none;
       -moz-appearance: none;
        -ms-appearance: none;
         -o-appearance: none;
            appearance: none;
}

/*** CTA-TEASER **/
#cta-teaser {
    position: relative;
    padding-top: 2.75rem;
    padding-bottom: 1.75rem;
    background-color: #88BB55;
    z-index: 20;
}

#cta-teaser h2 {
    color: white !important;
    text-transform: none;
}

#cta-teaser .border {
    display: block;
    border-color: white !important;
    color: white !important;
    width: auto;
    padding: 0.5rem 1rem;
}

#cta-teaser .button .border:hover,
#cta-teaser .button .border:active {
    color: #88BB55 !important;
    background-color: #fff !important;
}

#cta-teaser .show.anim-1 .border {
    -webkit-animation: cta-background .5s 1 .2s ease;
    animation: cta-background .5s 1 0.2s ease;
}

#cta-teaser .show.anim-2 .border {
    -webkit-animation: cta-background .5s 1 .45s ease;
    animation: cta-background .5s 1 0.45s ease;
}

#cta-teaser .show.anim-3 .border {
    -webkit-animation: cta-background .5s 1 .7s ease;
    animation: cta-background .5s 1 .7s ease;
}

#cta-teaser-turkis {
    background-color: #33AAAA;
    position: relative;
    padding: 2rem;
    z-index: 20;
}

#cta-teaser-turkis p {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff !important;
    margin-top: 1rem;
}

#cta-teaser-turkis a {
    color: #fff !important;
    border-color: #fff !important;
    margin: 0.5rem 1rem;
}

#cta-teaser-turkis a::before {
    background: #fff;
}

#cta-teaser-turkis a:hover {
    color: #33AAAA !important;
    content: '';
    background: #fff;
}

.bg-c-turkis a, #cta-teaser-turkis a {
    color: #fff !important;
    border-color: #fff !important;
}


/*** COOKIE CONSENT ***/
.cc-color-override--1787846166.cc-window {
	color: rgb(255, 255, 255) !important;
	background-color: #022f4c !important;
}

.cc-color-override--1787846166 .cc-btn, .cc-color-override--1787846166 .cc-btn:focus {
	color: rgb(255, 255, 255) !important;
	background-color: #33AAAA !important;
}

.cc-color-override--1787846166 .cc-btn:hover {
	color: #004477 !important;
	background-color: rgb(255, 255, 255) !important;
}

.cc-color-override--1787846166 .cc-link, .cc-color-override--1787846166 .cc-link:active, .cc-color-override--1787846166 .cc-link:visited {
	color: #33AAAA !important;
}

/*  

.bg-c-turkis h5.vary {
    color: white;
}

input[type="submit"]:hover {
    cursor: pointer;
}

.bg-c-lightturkis {
    background-color: #66CCCC;
    color: white;
}

.bg-c-blue {
    background-color: #0077AA;
    color: white;
}

.bg-c-green {
    background-color: #88BB55;
    color: white;
}

*/

/* main / icons */
.icon-mail, .icon-phone, .icon-download {
    color: #33AAAA;
    font-weight: bold;
}

.icon-mail::before, .icon-phone::before, .icon-download::before {
    display: inline-block;
    content: ' ';
    background-size: contain;
    background-repeat: no-repeat;
    width: 0.8em;
    height: 0.8em;
    margin-right: 0.5em;
}

.icon-mail::before {
    background-image: url(/img/icon-mail.svg);
    vertical-align: middle;
}

.icon-phone::before {
    background-image: url(/img/icon-phone.svg);
}

.icon-download::before {
    background-image: url(/img/icon-download.svg);
    width: 1.375em;
    height: 1.375em;
    vertical-align: bottom;
}

a.icon-mail:hover, a.icon-mail:active,
a.icon-phone:hover, a.icon-phone:active,
a.icon-download:hover, a.icon-download:active {
    color: #004477;
}


/* main / dokumente */
.dokumente .diamond.top {
    position: absolute;
    width: 63%;
    left: 67%;
    top: -1%;
}

.dokumente .preview {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 66%;
}

.dokumente .preview > div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}

.dokumente .preview img {
    width: 30%;
}

.dokumente .preview .background {
    position: absolute;
    height: 100%;
    object-fit: cover;
}

.dokumente .preview h3 {
    position: relative;
    color: white;
    z-index: 10;
}

.dokumente #file .border:hover {
    background-color: #33AAAA;
    color: white;
}

.dokumente #file .arrow:hover::after {
    background-image: url(/img/arrow-right-white.svg);
}


/* main / impressum, agb */

.impressum h2:first-child, .agb h2:first-child {
    margin-top: 0;
    margin-bottom: 2.5rem;
    font-size: 3rem;
    line-height: 1.2;
}

/* main / datenschutzerklaerung */

.datenschutzerklaerung h2:first-child {
    margin-top: 0;
}

/* main / default-page & default-single */

.default-page h2,
.default-single h2 {
    margin-top: 2.5rem;
    font-size: 2.3rem;
    width: 70%;
}

.default-page h3,
.default-single h3 {
    margin-top: 2.5rem;
    font-size: 1.75rem;
}

.default-page a,
.default-single a {
    color: #33AAAA;
}

.default-page a:hover,
.default-page a:active,
.default-single a:hover,
.default-single a:active {
    color: #004477;
}

.default-single a {
    position: relative;
    padding-right: 1.25rem;
}

.default-single a::after {
    position: absolute;
    content: '';
    background-image: url(/img/arrow-right-turkis.svg);
    background-size: 0.625em 0.625em;
    width: 0.625em;
    height: 0.625em;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.default-single a:hover::after,
.default-single a:active::after {
    background-image: url(/img/arrow-right-blue.svg);
}

.default-single #hero h1 {
    margin-bottom: 2.5rem;
    font-size: 3rem;
    line-height: 1.2;
    color: #004477;
    text-transform: uppercase;
}

/* main / bottom-teaser */

#bottom-teaser > div {
    margin-bottom: 1rem;
}

#bottom-teaser a,
#bottom-teaser .row,
#bottom-teaser .bg-white {
    height: 100%;
}

#bottom-teaser a {
    background-color: white;
}

#bottom-teaser .row > div {
    padding: 2rem 3rem 7rem 3rem;
}

#bottom-teaser .arrow {
    position: absolute;
    bottom: 2rem;
}

#bottom-teaser a:hover .arrow,
#bottom-teaser a:active .arrow {
    background-color: #33AAAA;
    color: white;
}

#bottom-teaser a:hover .arrow::after,
#bottom-teaser a:active .arrow::after {
    background-image: url(/img/arrow-right-white.svg);
}

#bottom-teaser .img-tile {
    position: absolute;
    width: 60%;
    right: -3rem;
    bottom: -4.5rem;
}













/* wpcf7 */

.wpcf7 p {
    margin-bottom: 0;
}

.wpcf7 input::-webkit-input-placeholder,
.wpcf7 textarea::-webkit-input-placeholder {
    color: #3e444c;
    opacity: 0.5;
}

.wpcf7 input::-moz-placeholder,
.wpcf7 textarea::-moz-input-placeholder {
    color: #3e444c;
    opacity: 0.5;
}

.wpcf7 input:-ms-input-placeholder,
.wpcf7 textarea:-ms-input-placeholder {
    color: #3e444c;
    opacity: 0.5;
}

.wpcf7 input:-moz-placeholder,
.wpcf7 textarea:-moz-input-placeholder {
    color: #3e444c;
    opacity: 0.5;
}

.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    color: #3e444c;
    opacity: 0.5;
}

.wpcf7 .required {
    color: #3e444c;
    opacity: 0.5;
    margin: 15px 0;
}

.wpcf7 .wpcf7-list-item {
    margin: 0 0 15px 0;
}

.wpcf7 .wpcf7-list-item label {
    margin: 0;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wpcf7 .wpcf7-list-item label::before {
    position: relative;
    display: inline-block;
    content: ' ';
    height: 1.125em;
    width: 1.125em;
    margin-right: 0.5em;
    margin-bottom: -0.1875em;
    background-color: white;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.05);
}

.wpcf7 .wpcf7-list-item span::before {
    position: absolute;
    display: none;
    content: ' ';
    left: 0.375em;
    margin-top: 0.2em;
    width: 0.4875em;
    height: 0.875em;
    border: solid #004477;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.wpcf7 input:checked ~ span::before {
    display: inline;
}

.wpcf7 [type="checkbox"] {
    position: absolute;
    cursor: pointer;
    height: 0;
    width: 0;
}

.wpcf7 a {
    color: #33AAAA;
}

.wpcf7 a:hover, .wpcf7 a:active {
    color: #004477;
}

.wpcf7 [type="submit"] {
    margin-top: 0.5rem;
    background-color: transparent;
    border-color: #ccc !important;
    color: #ccc;
    outline: none;
}

.wpcf7 [type="submit"]:not([disabled]) {
    border-color: #33AAAA !important;
    color: #33AAAA;
}

.wpcf7 [type="submit"]:not([disabled]):hover {
    background-color: #33AAAA;
    color: white;
}

/* cookie */
#cookie-notice .cn-button {
    background-color: white;
    color: black;
    padding: 0.25rem 0.5rem;
    font-weight: bold;
}

/* lg and smaller */
@media only screen and ( max-width: 1199px ) {
    a, div, h1, li, p, h5.vary {
        font-size: 1.1rem;
    }

    /* main */
    .diamond.bottom {
        width: 105%;
        left: -37%;
    }
    .kacheln .tile-1 {
        top: 6rem;
        left: 4rem;
    }
    .kacheln .tile-2 {
        top: 12rem;
        left: 14rem;
    }
    .kacheln .tile-3 {
        top: 6rem;
    }
    .kacheln .big-tile {
        top: 7rem;
        left: 7rem;
    }
    /* Main / default-page */
    .default-page {
        padding-bottom: 5rem;
    }
    .spacer-image {
        background-attachment: initial;
    }
}

/* md and smaller */
@media only screen and ( max-width: 991px ) {

    a, div, h1, li, p, h5.vary {
        font-size: 1rem;
    }

    /* Main */
    #main {
        padding-top: 5.5rem;
    }

    .diamond.bottom {
        width: 151%;
        left: -62%;
    }
    .kacheln .tile-1 {
        top: 10rem;
        left: 10rem;
    }
    .kacheln .tile-2 {
        top: 15rem;
        left: 18rem;
    }
    .kacheln .tile-3 {
        top: 10rem;
        left: 26rem;
    }
    #hero h2 {
        font-size: 1.8rem;
    }
    h3 {
        font-size: 1.4rem;
    }
    /* Main / default-page */
    .default-page {
        padding-bottom: 4rem;
    }

    /* Main / Bottom-Teaser */
    #bottom-teaser .img-tile {
        bottom: -1rem;
    }
}

/* sm and smaller */
@media only screen and ( max-width: 767px) {
    /* Main */
    .diamond.bottom {
        width: 260%;
        left: -110%;
    }
    .kachelanimation {
        top: -10rem;
        right: 15rem;
    }
    .kacheln .tile-1 {
        top: 13rem;
        left: 14rem;
    }
    .kacheln .tile-2 {
        top: 16rem;
        left: 20rem;
    }
    .kacheln .tile-3 {
        top: 13rem;
    }
    .kacheln .big-tile {
        top: 16rem;
        left: 19rem;
    }
    #hero h2 {
        font-size: 1.5rem;
    }
    .column-count {
        column-count: 1;
    }
    /* Main / default-page */
    .default-page {
        padding-bottom: 3rem;
    }
    /* Main / Bottom-Teaser */
    #bottom-teaser .img-tile {
        width: 45%;
    }
     .spacer-image {
        min-height: 200px;
    }
    .bg-darkblue img {
        width: 50%;
    }
}

@media only screen and ( min-width: 576px) and ( max-width: 737px) {   
    .diamond.top {
       top: -710px;
        left: 15px;
    }
    #hero {
        padding-top: 1rem;
    }
    #hero .pic {
        position: absolute;
        top: -95vH;
        left: 45vH;
        width: 100%;
    }
    .net {
        height: 250px;
    }
}

/* Mobile */
@media only screen and ( max-width: 575px) {
    .diamond.top {
        top: -810px;
        left: -125px;    
    }
    .kachelanimation {
        top: -11rem;
        right: 18rem;
    }
    .kacheln .tile-1 {
        top: 16rem;
        left: 18rem;
    }
    .kacheln .tile-2 {
        top: 18rem;
        left: 21.5rem;
    }
    .kacheln .tile-3 {
        top: 16rem;
        left: 25rem;
    }
    .kacheln .box {
        top: 28%;
    }
    #hero {
        padding-top: 1rem;
    }
    #hero .pic {
        position: absolute;
        top: 5vH;
    }
    .net {
        height: 250px;
    }
    .margin-b {
        margin-bottom: 4rem;
    }
    .shadow-line {
        margin-bottom: 3rem;
    }

    /* Main / default-page */
    .default-page {
        padding-bottom: 2rem;
    }
    
    #cta-teaser-turkis a {
        width: auto;
    }
    .logoabbinder img {
        width: 50%;
    }
}


/* Animation */

.appearing:not(.js-hide), .no-js.appearing {
    animation: appearing 1.3s 1 ease-out;
}

@keyframes appearing {
    0% {
        opacity: 0;
        transform: translate(43px, -25px)
    }

    100% {
        opacity: 1;
        transform: translate(0, 0)
    }
}

.move-in-2 {
    -webkit-animation: moveIn 2s 1 ease-out;
    -moz-animation: moveIn 2s 1 ease-out;
    -ms-animation: moveIn 2s 1 ease-out;
    -o-animation: moveIn 2s 1 ease-out;
    animation: moveIn 2s 1 ease-out;
}

.move-in-2-5 {
    -webkit-animation: moveIn 2.5s 1 ease-out;
    -moz-animation: moveIn 2.5s 1 ease-out;
    -ms-animation: moveIn 2.5s 1 ease-out;
    -o-animation: moveIn 2.5s 1 ease-out;
    animation: moveIn 2.5s 1 ease-out;
}

.move-in-3 {
    -webkit-animation: moveIn 3s 1 ease-out;
    -moz-animation: moveIn 3s 1 ease-out;
    -ms-animation: moveIn 3s 1 ease-out;
    -o-animation: moveIn 3s 1 ease-out;
    animation: moveIn 3s 1 ease-out;
}

@-webkit-keyframes moveIn {
    0% {
        -webkit-transform: translate(300%, -300%);
    }

    100% {
        -webkit-transform: translate(0, 0);
    }
}

@-moz-keyframes moveIn {
    0% {
        -moz-transform: translate(300%, -300%);
    }

    100% {
        -moz-transform: translate(0, 0);
    }
}

@-ms-keyframes moveIn {
    0% {
        -ms-transform: translate(300%, -300%);
    }

    100% {
        -ms-transform: translate(0, 0);
    }
}

@-o-keyframes moveIn {
    0% {
        -o-transform: translate(300%, -300%);
    }

    100% {
        -o-transform: translate(0, 0);
    }
}

@keyframes moveIn {
    0% {
        transform: translate(300%, -300%);
    }

    100% {
        transform: translate(0, 0);
    }
}

.levitate-3 {
    -webkit-animation: levitate 3s infinite ease-in-out;
    -moz-animation: levitate 3s infinite ease-in-out;
    -ms-animation: levitate 3s infinite ease-in-out;
    -o-animation: levitate 3s infinite ease-in-out;
    animation: levitate 3s infinite ease-in-out;
}

.levitate-4 {
    -webkit-animation: levitate 4s infinite ease-in-out;
    -moz-animation: levitate 4s infinite ease-in-out;
    -ms-animation: levitate 4s infinite ease-in-out;
    -o-animation: levitate 4s infinite ease-in-out;
    animation: levitate 4s infinite ease-in-out;
}

.levitate-5 {
    -webkit-animation: levitate 5s infinite ease-in-out;
    -moz-animation: levitate 5s infinite ease-in-out;
    -ms-animation: levitate 5s infinite ease-in-out;
    -o-animation: levitate 5s infinite ease-in-out;
    animation: levitate 5s infinite ease-in-out;
}

@-webkit-keyframes levitate {
    0%, 100% {
        -webkit-transform: translate(0, 0);
    }

    50% {
        -webkit-transform: translate(0, 4%);
    }
}

@-moz-keyframes levitate {
    0%, 100% {
        -moz-transform: translate(0, 0);
    }

    50% {
        -moz-transform: translate(0, 4%);
    }
}

@-ms-keyframes levitate {
    0%, 100% {
        -ms-transform: translate(0, 0);
    }

    50% {
        -ms-transform: translate(0, 4%);
    }
}

@-o-keyframes levitate {
    0%, 100% {
        -o-transform: translate(0, 0);
    }

    50% {
        -o-transform: translate(0, 4%);
    }
}

@keyframes levitate {
    0%, 100% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(0, 4%);
    }
}

.show.anim-1,
.show.anim-2,
.show.anim-3 {
    -webkit-clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.show.anim-1 {
    -webkit-animation: polygons .5s 1 .2s forwards;
    animation: polygons .5s 1 0.2s forwards;
}

.show.anim-2 {
    -webkit-animation: polygons .5s 1 .45s forwards;
    animation: polygons .5s 1 0.45s forwards;
}

.show.anim-3 {
    -webkit-animation: polygons .5s 1 .7s forwards;
    animation: polygons .5s 1 .7s forwards;
}

@-webkit-keyframes polygons {
    33% {
        -webkit-clip-path: polygon(0% 0%, 20% 0%, 50% 100%, 0% 100%);
    }

    66% {
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 50% 100%, 0% 100%);
    }

    100% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@keyframes polygons {
    33% {
        -webkit-clip-path: polygon(0% 0%, 20% 0%, 50% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 20% 0%, 50% 100%, 0% 100%);
    }

    66% {
        -webkit-clip-path: polygon(0% 0%, 80% 0%, 50% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 80% 0%, 50% 100%, 0% 100%);
    }

    100% {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
    }
}

@-webkit-keyframes cta-background {
    0%, 66% {
        background-color: white;
        color: #88BB55;
    }

    100% {
    }
}

@-moz-keyframes cta-background {
    0%, 66% {
        background-color: white;
        color: #88BB55;
    }

    100% {
    }
}

@-ms-keyframes cta-background {
    0%, 66% {
        background-color: white;
        color: #88BB55;
    }

    100% {
    }
}

@-o-keyframes cta-background {
    0%, 66% {
        background-color: white;
        color: #88BB55;
    }

    100% {
    }
}

@keyframes cta-background {
    0%, 66% {
        background-color: white;
        color: #88BB55;
    }

    100% {
    }
}

@-webkit-keyframes product-background {
    0%, 66% {
        background-color: #33AAAA;
        color: #004477;
    }

    100% {
    }
}

@-moz-keyframes product-background {
    0%, 66% {
        background-color: #33AAAA;
        color: #004477;
    }

    100% {
    }
}

@-ms-keyframes product-background {
    0%, 66% {
        background-color: #33AAAA;
        color: #004477;
    }

    100% {
    }
}

@-o-keyframes product-background {
    0%, 66% {
        background-color: #33AAAA;
        color: #004477;
    }

    100% {
    }
}

@keyframes product-background {
    0%, 66% {
        background-color: #33AAAA;
        color: #004477;
    }

    100% {
    }
}

/* js */

.js .js-hide {
    visibility: hidden !important;
}

.carousel-item {
    transition: -webkit-transform 0.5s ease;
    transition: transform 0.5s ease;
    transition: transform 0.5s ease, -webkit-transform 0.5s ease;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
}

.btn-clear {
    display: inline-block;
    background-color: transparent;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: .25rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.checkout button.bordercart:hover {
    background-color: #33AAAA;
}

.checkout.active button.bordercart {
    -webkit-animation: product-background .5s 1 .2s ease;
    animation: product-background .5s 1 0.2s ease;
}

.checkout button.bordercart {
    background-color: #004477;
    display: block;
    border-color: #33AAAA !important;
    padding: 0.25rem 0.75rem;
    color: white;
    margin-bottom: 30px;
    float: right;
}

.checkout.wpcf7 .row div:first-child input {
    border-top-left-radius: 1rem;
}

.confirm .wpcf7 .row input, .confirm .wpcf7 textarea {
    width: 100%;
    padding: 0.5rem 1rem;
    border: none;
    outline: none;
    box-shadow: 0 0 0.625rem rgba(0, 0, 0, 0.05);
}

.confirm #hero {
    position: relative;
    padding-top: 2rem !important;
}

.confirm .help-block-error {
    color: #7e4141;
    font-size: 0.75rem;
    padding-left: 13px;
}

.confirm #hero .help-block {
    color: #7e4141;
    font-size: 0.75rem;
    padding-left: 13px;
}

.confirm #hero ul {
    list-style: none !important;
}

.confirm #hero ul {
    list-style: none !important;
    padding-inline-start: 0rem !important;
}

.confirm #hero .nav-item {
    list-style: none !important;
    width: 50%;
}

.confirm .card {
    margin: 30px 0px;
    padding: 0px 20px !important;
}

.confirm .card-body {
    padding: 0px !important;
}

.summary h2, h3, h4 {
    color: #004477;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 10px;
}

.summary .righttd {
    font-size: 1rem;
    text-align: end;
}

.summary .right {
    padding-right: 1.40rem;
    font-size: 1rem;
    text-align: end;
}

.summary .agb {
    margin: auto !important;
    text-align: start !important;
}

.summary .left {
    padding-left: 1.40rem;
    font-size: 1rem;
    text-align: start;
}

.summary .panel-body {
    font-size: 1rem !important;
    padding-bottom: 2.40rem;
}

.summary .panel-body .col-6 {
    font-size: 1rem !important;
}

.features-boxed {
    color: #313437;
}

.features-boxed p {
    color: #7d8285;
}

.features-boxed h2 {
    font-weight: bold;
    margin-bottom: 40px;
    padding-top: 40px;
    color: inherit;
}

@media (max-width: 767px) {
    .features-boxed h2 {
        margin-bottom: 25px;
        padding-top: 25px;
        font-size: 24px;
    }
}

.features-boxed .intro {
    font-size: 16px;
    max-width: 500px;
    margin: 0 auto;
}

.features-boxed .intro p {
    margin-bottom: 0;
}

.features-boxed .features {
    padding: 50px 0;
}

.features-boxed .item {
    text-align: center;
}

.features-boxed .item .box {
    border-radius: 10px;
    text-align: center;
    padding: 2px;
    margin-bottom: 10px;
}

.features-boxed .item .icon {
    font-size: 60px;
    color: #1485ee;
    margin-top: 20px;
    margin-bottom: 35px;
}

.features-boxed .item .name {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 8px;
    margin-top: 0;
    color: inherit;
}

.features-boxed .item .description {
    font-size: 15px;
    margin-top: 15px;
    margin-bottom: 20px;
}

.payselect .features-boxed img {
    width: 100%;
    object-fit: contain;
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
}

.payselect .features-boxed img:hover {
    width: 100%;
    object-fit: contain;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.payselect .features-boxed img:checked {
    width: 100%;
    object-fit: contain;
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

.form-group .help-block {
    min-width: 256px !important;
    font-size: 1rem;
    color: #7e4141;
}

.mail-chimp .margin-b {
    margin-bottom: 6rem;
    margin-top: 6rem;
}

.mail-chimp h1 {
    color: #FFF;
}

.mail-chimp #hero {
    position: relative;
    padding: 6rem;
}

.testnc .product-item:hover {
    padding: 10px;
    border-color: #eeeeee !important;
    border-style: solid;
    background-color: #FFFFFF;
}

.testnc .product-item {
    border-color: transparent !important;
    border-style: solid;
}

.testnc .product-item .order-btn {
    width: 80%;
    color: #33AAAA;
    text-align: center;
    height: 60px !important;
}

.testnc .product-item .border-btn {
    font-size: 18px;
    color: #33AAAA;
    border-color: #33AAAA !important;
    border-style: solid;
    background-color: #ffffff !important;
    font-weight: bold;
}

.testnc .product-item .border-btn:hover {
    color: #ffffff;
    border-color: #33AAAA !important;
    border-style: solid;
    background-color: #33AAAA !important;
    font-weight: bold;
}

.testnc .product-item .border-btn:hover,
.testnc .product-item .border-btn:active {
    text-decoration: none;
    height: 60px !important;
}

.rechts {
    text-align: right !important;
    float: right !important;
}

.mt-5, .my-5 {
    margin-top: 3rem !important;
}

.justify-content-sm-end {
    -ms-flex-pack: end !important;
    justify-content: flex-end !important;
}

.align-items-center {
    -ms-flex-align: center !important;
    align-items: center !important;
}

.justify-content-center {
    -ms-flex-pack: center !important;
    justify-content: center !important;
}

.flex-wrap {
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
}

.d-flex {
    display: -ms-flexbox !important;
    display: flex !important;
}

.modal .product-item {
    padding: 10px;
    text-align: center;
    min-height: 50px;
    padding: 15px;
}

.modal .product-description {
    text-align: center;
    min-height: 50px;
    padding: 15px;
}

.modal .product-price {
    text-align: center;
    min-height: 50px;
    padding: 15px;
}

.modal .product-item h2 {
    font-size: 20px !important;
    vertical-align: middle;
    text-align: center;
    margin-right: auto;
    margin-left: auto;
}
.modal button{
    color: #33AAAA !important;
}
.modal button:hover{
    color: #ffffff !important;
}
.modal .border-btn:active {
    font-family: 'Ubuntu', sans-serif;
    text-decoration: none;
    height: 60px !important;
}

.modal .border-btn:hover {
    font-family: 'Ubuntu', sans-serif;
    color: #ffffff;
    border-color: #33AAAA !important;
    border-style: solid;
    background-color: #33AAAA !important;
    font-weight: bold;
}

.modal .border-btn {
    font-family: 'Ubuntu', sans-serif;
    font-size: 18px;
    color: #33AAAA!important;
    border-color: #33AAAA !important;
    border-style: solid;
    background-color: #ffffff !important;
    font-weight: bold;
}

.modal {
    font-family: 'Ubuntu', sans-serif;
}

.modal .row p {
    text-align: center !important;
    margin: 1em;
}

.modal .row .col-12 {
    text-align: center !important;
    margin-bottom: 2em;
}

.modal h5 {
    text-align: center !important;
    width: 100%;
}

.site-error {
    padding-bottom: 6rem;
}

#contactform-youraccept[type="checkbox"] {
    display: none;
}

#contactform-youraccept[type="checkbox"] + label::before {
    width: 22px;
    height: 18px;
    background-image: url("/img/unchecked.png");
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#contactform-youraccept[type="checkbox"]:checked + label::before {
    background-image: url("/img/checked.png");
}

#contactform-yourcallback[type="checkbox"] {
    display: none;
}

#contactform-yourcallback[type="checkbox"] + label::before {
    width: 22px;
    height: 18px;
    background-image: url("/img/unchecked.png");
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#contactform-yourcallback[type="checkbox"]:checked + label::before {
    background-image: url("/img/checked.png");
}

#contactform-yourcallback[type="checkbox"] {
    display: none;
}

#contactform-yourcallback[type="checkbox"] + label::before {
    width: 22px;
    height: 18px;
    background-image: url("/img/unchecked.png");
    display: block;
    content: "";
    float: left;
    margin-right: 5px;
}

#contactform-yourcallback[type="checkbox"]:checked + label::before {
    background-image: url("/img/checked.png");
}

.navbar-blulight {
    height: 35px;
    background-color: #88BB55;
}

.bg-blulight {
    height: 35px;
    background-color: #88BB55;
}

.navbar-text {
    height: 35px;
}

.navbar-top .container-top, .navbar-top .container-fluid, .navbar-top .container-sm, .navbar-top .container-md, .navbar-top .container-lg, .navbar-top .container-xl {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.navbar-top .navbar-blulight {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0.0rem 0rem;
}

.col-auto .text-center .nav-item {
    position: relative;
    width: 100%;
    padding-right: 8px !important;
    padding-left: 15px;
}

.bigtextlink {
    color: #004477;
    font-weight: bold;
    text-transform: uppercase;
    padding-top: 10px;
    font-size: 1.75rem;
}

.trianglebackground {
    position: relative !important;
    z-index: 2 !important;
    padding-bottom: 20%;
}

#bottom-teaser {
    position: relative !important;
    z-index: 2 !important;
}

.back-to-top {
    background: #022f4c;
    border: 0.1875rem solid !important;
    border-color: #33AAAA !important;
    color: #33AAAA !important;
    position: fixed;
    bottom: 30px;
    right: 30px;
    padding: 0.3em;
    opacity: 0.5;
    z-index: 100;
}

.produkt-kontakt .bg-c-turkis {
    margin-top: 4rem;
    margin-bottom: 4rem;
    padding: 4rem;
}

.produkt-kontakt h1 {
    font-size: 1.2rem;
    font-weight: bold;
    color: #ffffff;
}

.sumsummary {
    font-size: 1.2rem;
    font-weight: bold;
    color: #212529;
}

.bt-border {
    margin-bottom: 1rem !important;
}

.card-right {
    background-color: #ffffff;
    border-radius: 0 1rem 0 1rem;
    margin: 0 auto;
}

.payicon {
    width: 90px !important;
    text-align: center !important;
}

.table-scrollable {
    width: 100%;
    overflow-y: auto;
    margin: 0 0 1em;
}

.table-scrollable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
}

.table-scrollable::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(0, 0, 0, .3);
}

.infobox {
    color: #930b0b;
}