html {
    scroll-behavior: smooth;
}

body {
    background-color: #fff;
    margin: 0 auto;
}

.wow:first-child {
    visibility: hidden;
}

.row{
    margin-left:0;
    margin-right:0;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    src: url("../Fonts/Inter-Variable.ttf") format("truetype");
}

.col-md-6 img, .col-md-4 img{
    width:100%;
    height:auto;
}

/* TYPOGRAFIE */
h1,
h2,
h3,
h4,
h5,
p,
strong,
b,
em,
a,
li h1,
h2,
h3,
h4 {
    font-family: "Inter";
    font-weight: 400;
}

/* Colors */

:root {
    --zl-darkblue: #00223d;
    --zl-blue: #00325b;
    --zl-lightblue: #008cad;
    --zl-green: #2fc1a8;
    --zl-text-grey: #3f3f3f;
}

h2 {
    font-size: 1.4em;
    font-weight: 400;
    color: var(--zl-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.leistung-container h3 {
    font-size: 2.5em;
}

h3 {
    font-size: 4.5em;
    font-weight: 600;
    color: var(--zl-blue);
    margin-bottom: 1rem;
    text-transform: none;
    letter-spacing: 0;
}

header h1 {
    font-size: 1.4em;
    font-weight: 400;
    color: var(--zl-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    width:80%;
}

header h2 {
    font-size: 4.5em;
    font-weight: 600;
    color: var(--zl-blue);
    margin-bottom: 2.5rem;
    text-transform: none;
    letter-spacing: 0;
    width:80%;
}

header a{
    color:var(--zl-green);
    font-size:1.1em;
}

span.subline {
    font-size: 1.4em;
    font-weight: 400;
    color: var(--zl-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.3rem;
}

h3 {
}

h4 {
}

h5 {
}

a {
transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}
a:hover{
        color: var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}
a.button:hover {
        padding-left: 0.5em;
        color: var(--zl-green);
    gap: 2em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}
a.button.secondary:hover {
    color: var(--zl-lightblue);
}

a.button {
        font-family: "Inter";
    font-size: 1.3em;
    font-weight: 600;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--zl-blue);
    display: flex;
    gap: 1em;
    align-items: baseline;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
    cursor: pointer;
}

a.button i {
        color: var(--zl-green);
    font-size: 1em;
    background-color: transparent;
    position: relative;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}
a.button.secondary i {
    color: var(--zl-lightblue);
}

a.button:hover i{
        color: white;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    position: relative;
}
a.button i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4em;
    background-color: var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    z-index: 0;
    padding: 0;
}
a.button:hover i:after {
    content: "\f324";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--zl-green);
    padding: 0.8em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);

}
a.button.secondary i:after {
    background-color: var(--zl-lightblue);
}

a.button.secondary:hover i:after {
    background-color: var(--zl-lightblue);
}

p {
    color: var(--zl-text-grey);
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 400;
}

b {
}

i {
}

strong {
    font-family: "Inter";
    font-weight: 600;
    font-size: 1.3em;
color:var(--zl-blue);
}

em {
}
.buttonbox {
    display: flex;
    gap: 4em;
    margin-top: 3em;
}
button {
    font-family: "Inter";
    font-size: 1.3em;
    font-weight: 600;
    padding: 0;
    border: 0;
    background-color: transparent;
    color: var(--zl-blue);
    display: flex;
    gap: 1em;
    align-items: baseline;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
    cursor: pointer;
}

button i {
    color: var(--zl-green);
    font-size: 1em;
    background-color: transparent;
    position: relative;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

button.secondary i {
    color: var(--zl-lightblue);
}
button:hover {
    padding-left: 0.5em;
    gap: 2em;
    color: var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

button.secondary:hover {
    color: var(--zl-lightblue);
}

button:hover i {
    color: white;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    position: relative;
}

button i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 4em;
    background-color: var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    z-index: 0;
    padding: 0;
}

button.secondary i:after {
    background-color: var(--zl-lightblue);
}

button.secondary:hover i:after {
    background-color: var(--zl-lightblue);
}
button:hover i:after {
    content: "\f324";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--zl-green);
    padding: 0.8em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

section.darkblue button {
    color: white;
}

/* LIST */

ol {
}

ul {
    padding: 0;
    padding-left: 0em;
    margin: 0;
}

ul li {
    color: white;
    font-family: "Inter";
    font-size: 1.1em;
    list-style: none;
}
ul li:before {
    content: "•";
    margin-right: 1rem;
    color: var(--zl-lightblue);
}

/* TAGS */

nav {
    padding: 1em 2em;
    display: flex;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.nav_white {
    background-color: white;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.logo {
    width: 12em;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.nav_white .logo {
    width: 9em;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}
.icons {
    position: absolute;
    top: 43%;
    right: 10em;
    transform: translate(-50%, -50%);
    display: flex;
    gap: 1em;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.icons.top {
    top:0.95em;
    right: 4.5em;
    transform: translate(0%, 0%);
    position: fixed;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    z-index: 999;
}

.icons.top i {
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.icons.top .secondary {
    opacity: 0;
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.icons .secondary {
    background-color: var(--zl-lightblue);
    transition: 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.nav_white .icons {
    top: 0%;
}
.icon i {
    font-size: 1.5em;
    color: white;
    border-radius: 80px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    position: absolute;
    z-index: 2;
}
.icon {
    position: relative;
    width: 4em;
    height: 4em;
}

.icons.top .icon span {
    width: 41px;
    height: 41px;
}

.icons.top .icon i {
    font-size: 1.2em;
}

.icon:hover span {
    width: 5em;
    height: 5em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

.icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 4em;
    height: 4em;
    border-radius: 6em;
    background-color: var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}
/* MOBILE MENU */
.navigation {
    display: flex;
    align-items: center;
}

#menuToggle {
    display: block;
    position: relative;
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
    top:8px;
}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 40px;
    height: 1px;
    margin-bottom: 10px;
    position: relative;
    background: #1f3984;
    border-radius: 3px;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1),
        background 0.4s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span {
    opacity: 1;
    transform: rotate(45deg) translate(-5px, -1px);
    background-color: var(--zl-green);
}

#menuToggle input:checked ~ span:nth-last-child(2) {
    transform: rotate(-45deg) translate(-7px, 5px);
    background-color: var(--zl-green);
}

#menu {
    position: fixed;
    width: 100%;
    height: calc(100vh - 6em);
    left: 0px;
    top: 6em;
    text-align: center;
    background: white;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    opacity: 0;
    transform: translateY(100vh);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
    transition: 0.4s;
    z-index: 1;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 10em;
}

.nav_white #menu{
    top:5em;
    height: calc(100vh - 5em);
}

#menu li {
    padding: 10px 0;
    font-family: "Inter";
    font-weight: 400;
    font-style: normal;
    font-size: 2.5em;
    transition: 0.4s;
    position: relative;
    display: inline-block;
    color: var(--zl-blue);
    margin-left: 2rem;
    margin-right: 2rem;
}

#menu li.has-children {
    padding-right: 2rem;
}

#menu li:hover {
}
#menu li:hover a {
}

#menu a {
    color: var(--zl-blue);
    text-decoration: none;
}

#menu a:hover {
}

#menuToggle input:checked ~ ul {
    opacity: 1;
    transition: 0.4s;
    transform: translateY(0px);
}

.has-children {
    position: relative;
    cursor:pointer;
}
.has-children > a {
  pointer-events: none;
  cursor: default;
}
.has-children .mobile-dropdown-icon {
    color: white;
    text-align: center;
    transition: 0.5s ease-in-out;
    z-index: 999;
    cursor: pointer;
    margin-left: 0.5em;
    display: inline-block;
    padding: 1rem;
    border-radius: 11rem;
    background-color: var(--zl-blue);
}

.has-children:hover .mobile-dropdown-icon, .mobile-dropdown-icon:hover{
    transition: 0.5s ease-in-out;
    color:var(--zl-green);
}

.mobile-dropdown {
    display: none;
    padding: 0px;
    list-style: none;
    margin-top: 11px;
    position: absolute;
}

#menu .mobile-dropdown li {
    font-size: 1.5rem;
    list-style: none;
    display: block;
    text-align: left;
}

.show {
    display: block !important;
}

.switch {
}

header {
    width: 100%;
    padding: 10em;
    padding-left:14em;
    padding-right:14em;
    margin-top: 10em;


}

    .icon{
        cursor:pointer;
    }

    .icons.top .jump{
        opacity:0;
transform: scale(0);
width:0px;
    }

header .text-caption {
    width: 70%;
}

header .textcaption p{
    color:white;
}

header .textcaption a{
    font-size:1em;
    color:var(--zl-green)
}

.content {
    padding: 10rem;
    padding-left: 14rem;
    padding-right: 14rem;
    margin: 0px auto;
}

.row > * {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.teamheader .row > *{
    padding:0 !important;
}


.teamheader .teamimage{
    margin-right:2rem;
}
.bildbox img {
    width: 100%;
    height: auto;
}
#kontaktformular-42 .row > * , #kontaktformular-57 .row > *{
    padding: 0 !important;
}
.bildbox {
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: 0px 0px 8em var(--zl-green);
    aspect-ratio: 1 / 1;
}

/* COL */
.col-flex-right{
    display:flex;
    justify-content: flex-end;
}

/* SECTIONS */

section.lightgrey {
    background-color: #eee;
}

section.darkblue {
    background-color: var(--zl-blue);
    position: relative;
}

section.darkblue p,
section.darkblue a,
section.darkblue h3 {
    color: white;
}
.swiper-gradient {
    position: absolute;
    height: 100%;
    top: 0;
    background-color: var(--zl-blue);
    width: 20%;
    z-index: 9;
}

.swiper-gradient.left {
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 50, 91, 1) 0%,
        rgba(0, 50, 91, 0) 100%
    );
}

.swiper-gradient.right {
    right: 0;
    background: linear-gradient(
        90deg,
        rgba(0, 50, 91, 0) 0%,
        rgba(0, 50, 91, 1) 100%
    );
}
.swiper-slide {
    background-color: transparent;
    box-shadow: 0px 0px 3em transparent;
    border-radius: 2em;
    width: 40%;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
}

.swiper-slide-active {
    background-color: var(--zl-darkblue);
    box-shadow: 0px 0px 8em var(--zl-green);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
}
.swiper-wrapper {
    padding-top: 4em;
    padding-bottom: 4em;
    margin-top: 5em;
    margin-bottom: 5em;
}

.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    display: flex;
    gap: 0.5em;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 80%;
    position: relative;
}

.swiper-controls {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5em;
    width: 40%;
    align-items: center;
    justify-content: space-between;
    z-index: 9;
}

.swiper-pagination-bullet {
    background-color: white;
    opacity: 0.5;
    width: 25%;
    height: 4px;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
    border-radius: 0;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 50%;
    height: 4px;
    background-color: var(--zl-green);
    border-radius: 0;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
}

.swiper-pagination-fraction {
    color: white;
    width: auto;
}
.leistung-container {
    padding: 3em;
    width: 100%;
    height: 100%;
    transform: scale(0.8);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
}

.swiper-slide-active .leistung-container {
    padding: 3em;
    width: 100%;
    transform: scale(1);
    transition: 0.4s cubic-bezier(0.77, 0.03, 0, 1.25);
}

.swiper-button-next,
.swiper-button-prev {
    position: relative;
    top: unset;
    left: unset;
    bottom: unset;
    right: unset;
    margin-top: 0;
}

.swiper-button-next:after {
    content: "\f324";
    font-size: 1.3em;
    font-family: "Font Awesome 5 Pro";
    color: var(--zl-green);
}
.swiper-button-prev:after {
    content: "\f323";
    font-size: 1.3em;
    font-family: "Font Awesome 5 Pro";
    color: var(--zl-green);
}

.leistung-container .buttonbox {
    flex-direction: row-reverse;
}

.leistung-container .buttonbox button {
    color: white;
}

/* TEXT 2 Spaltig */
section.textspalten strong {
    display: block;
    margin-bottom: 1rem;
}

section.textspalten .buttonbox {
    flex-direction: row-reverse;
}

/* INHALTSELEMENTE CD */
.textbox-image {
    padding: 8em 16em;
    height: fit-content;
    .col-md-4{
        padding-left:1em;
    }

    .text-content {

        li {
            color: #3f3f3f;
        }

        .detail {
            display: flex;
            flex-direction: column;
            gap: 1em;
            margin-top:1.5em;

            .icon {
                width: 4em;
                height: 4em;
                background-color: var(--zl-green);
                border-radius: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                &.icon-2 {
                    background-color: var(--zl-lightblue);
                }

                &.icon-3 {
                    background-color: #00325b;
                }

                i {
                    color: white;
                    font-size: 2em;
                }
            }
        }
    }

    .team-image {
        overflow: hidden;
        border-radius: 2rem;
        width:100%;
        position:relative;

        img {
            max-width: 100%;
            height: auto;
            object-fit: cover;

        }
                img.hover{
            position:absolute;
            top:0;
            left:0;
max-width: 100%;
            height: auto;
            object-fit: cover;
            opacity:0;
            transition:0.4s ease-in-out;
        }
    }

    .team-image:hover{
                img.hover{
            opacity:1;
            transition:0.4s ease-in-out;
        }
    }
}

.image-cards {
    padding: 8em 14em;

    .cards {
        margin-top: 4rem;
        display: flex;
        /* justify-content: space-between; */
        gap:2rem;

        .image-card {
            width: 24%;
            display: flex;
            flex-direction: column;
            color: white;

            .image-container {
                width: 100%;
                border-radius: 2rem;
                overflow: hidden;
                margin-bottom: 1rem;

                img {
                    width: 100%;
                    height: auto;
                    object-fit: cover;
                }
            }

            em {
                color: var(--zl-green);
            }

            i {
                margin-right: 1rem;
            }
        }
    }
}

.hover-cards .image-container{
    aspect-ratio: 1 / 1.2;
}
.hover-cards .image-card{
        position:relative;
}
.hover-cards h4 {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    background-color: var(--zl-darkblue);
    width: 100%;
    padding: 1.5rem;
    border-top-right-radius: 2rem;
    border-top-left-radius: 2rem;
    text-align:center;
    transition:0.5s ease-in-out;
} 
.hover-cards .detail-liste {
    position: absolute;
    top: 4rem;
    left: 0;
    display: block;
    background-color: var(--zl-darkblue);
    width: 100%;
    padding: 1.5rem;
    opacity:0;
    transition:0.5s ease-in-out;
}
.hover-cards img{
    transition:0.5s ease-in-out;
}
.hover-cards .image-card:hover img{
    transform:scale(1.2);
    transition:0.5s ease-in-out;
}
.hover-cards .image-card:hover .detail-liste{
    opacity:1;
}

.hover-cards .image-card:hover h4{
    color:var(--zl-green);
    transition:0.5s ease-in-out;
}

.icon-card-grid {
    padding: 8em 14em;

    .icon-cards {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1%;
        row-gap: 1rem;
        margin-top: 4rem;

        .icon-card {
            display: flex;
            flex-direction: column;
            background-color: #00223d;
            border-radius: 0.5em;
            color: var(--zl-green);
            padding: 2rem;
            width: 49.5%;
            position:relative;
            overflow:hidden;
.teasercontent{
    position:absolute;
    top:2em;
    left:2em;
    opacity:1;
    transition:0.4s ease-in-out;
}
            span{
                font-size: 1.4em;
    font-weight: 500;
    color: var(--zl-green);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display:block;
    margin-bottom:0.5rem;
            }

            h4 {
                color: white;
                font-size: 2em;
                width:70%;
                font-weight:600;
            }

            i {
position:absolute;
bottom:20px;
right:20px;
font-size:6em;
transition:0.4s ease-in-out;
            }
            .hovercontent{
    display:block;
    opacity:0;
    transition:0.4s ease-in-out;
            width:80%;
}
        }

        .icon-card:hover{

.hovercontent{
    display:block;
    opacity:1;
        transition:0.4s ease-in-out;
        width:80%;
}

.teasercontent{
    opacity:0;
    transition:0.4s ease-in-out;
}
            i {
position:absolute;
bottom:30px;
right:30px;
transform:scale(2);
opacity:0.4;
transition:0.4s ease-in-out;
            }

        }

        &.list {
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 1rem;

            .icon-card {
                flex-direction: row;
                width: 100%;
                justify-content: space-between;

                .card-text {
                    display: flex;
                    flex-direction: column;
                    gap: 1rem;
                }

                i {
                    margin-top: 0;
                }
            }
        }
    }
}

.text-details {
    padding: 8em 16em;

    .content-box {
        display: flex;
        align-items:center;

        .text-content {
            width: 50%;

            h3 {
                margin-bottom: 2.5rem;
            }
        }

        .details {
            width:80%;

            .detail-box {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 1em;
                row-gap: 4rem;

                .detail {
                    display: flex;
                    flex-direction: column;
                    width: calc(50% - 1em);
                    /* align-items: center;
                    text-align: center; */
                    gap: 1rem;

                    .icon {
                        width: 4em;
                        height: 4em;
                        background-color: var(--zl-green);
                        border-radius: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        &.icon-2 {
                            background-color: var(--zl-lightblue);
                        }

                        &.icon-3 {
                            background-color: #00325b;
                        }

                        &.icon-4 {
                            background-color: #00223d;
                        }

                        i {
                            color: white;
                            font-size: 2em;
                        }
                    }
                }
            }
        }

        .image-box{
            width:50%;

            img{
                width:100%;
                height:auto;
                border-radius:2rem;
            }
        }

        &.vertical {
            flex-direction: column;

            .text-content,
            .details {
                width: 100%;
            }

            .detail-box {
                gap: unset;
                justify-content: space-between;

                .detail {
                    width: unset;
                    max-width: 24%;
                }
            }
        }
    }
}

.textbox-grid {
    padding: 8em 16em;

    .grid {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1%;
        row-gap: 1rem;
        margin-top: 4rem;

        .textbox {
            display: flex;
            align-items: center;
            width: 49.5%;
            background-color: #00223d;
            border-radius: 1rem;
            color: white;
            padding: 2em;

            .number {
                margin: 0 2rem;
                color: var(--zl-green);
                font-size: 4rem;
                font-weight: bold;
            }

            .text {
                display: flex;
                flex-direction: column;
                gap: 0.5rem;

                strong {
                    color: var(--zl-green);
                }
            }
        }

        &.three-cols {
            gap: 2%;
            row-gap: 1rem;

            .textbox {
                width: 32%;
            }
        }
    }
}

.text-image-grid {
    padding: 8em 16em;
    display: flex;
    justify-content: space-between;

    .images {
        width: 50%;
        display: flex;
        flex-wrap: wrap;
        gap: 20%;

        .image {
            width: 40%;
            height:140px;
            display: flex;
            align-items: center;

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

.image-tiles {
    padding: 8em 16em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .tiles {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        gap: 1.33%;
        row-gap: 1rem;
        margin-top: 4rem;

        .tile {
            border-radius: 1rem;
            width: 24%;
            aspect-ratio: 1/1;
            overflow: hidden;
            position: relative;

            img {
                max-height: 100%;
                max-width: 100%;
                object-fit: cover;
                opacity: 40%;
            }

            span {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: white;
                font-size: 1.5rem;
                font-weight: bold;
                width: 80%;
                text-align: center;
            }
        }
    }
}

.textbox-chart {
    padding: 8em 16em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .textbox-content {
        display: flex;

        .boxes {
            flex: 1;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 1rem;

            .textbox {
                display: flex;
                align-items: center;
                gap: 1rem;
                background-color: #00223d;
                border-radius: 1rem;
                color: var(--zl-green);
                padding: 1.5rem 3rem;
                font-size: 1.5rem;
                font-weight: bold;

                i {
                    font-size: 2rem;
                }
            }
        }

        .chart {
            flex: 2;
            display: flex;
            justify-content: center;
            align-items: center;

            i {
                width: 100%;
                color: var(--zl-green);
                text-align: center;
                font-size: 7rem;
            }
        }
    }
}

.slider-header{
    text-align:center;
    /* padding-top:8rem; */
}

.teamheader{
    margin-top: 8em;
    padding:8em 14em;
    display:flex;
    background-color:var(--zl-blue);

.teamimage{
    position:relative;


    img{
        width:100%; height:auto;    border-radius: 2rem;
    box-shadow: 0px 0px 8em rgba(47,193,168,0.5);


    }
        img.hover{
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:auto;
        opacity:0;
        transition:0.4s ease-in-out;
    }

}

    .teamimage:hover{

        img.hover {
            opacity:1;
        transition:0.4s ease-in-out;
    }
    }
}

/* CONTACT FORM */
.overlay{
    background-color: rgba(0, 0, 0, 0.2);
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index:99;
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);

    .contact{
    background-color:var(--zl-darkblue);
    width:50%;
    border-radius:1em;
    padding:2em;
    position:relative;

    button:hover i:after {
    content: '\58';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--zl-green);
    padding: 0.8em;
    padding-left:0.9em;
    padding-right:0.9em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

    nav.form-navigation{
    position:relative;
    padding:0;
    display:flex;
    justify-content: end;
    
.submit{

    .btn {
    padding:unset;
    margin:unset;

}
    button{
        color:white;
        background-color:transparent;
        border:unset;
        font-size:1.2em;
        font-weight:600;
    }
    button:after{
        content: '\f0e0';
            font-family: 'Font Awesome 6 Pro';
        font-weight:300;
        color:var(--zl-green);
        display:inline-block;
        margin-left:1em;
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }

    button:hover{
        color:var(--zl-green);
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }

    button:hover:after{
        margin-left:1.2em;
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }
}

    }
        nav.form-navigation.nav_white{
        background-color:transparent;
    }

    button.close{
    position:absolute;
    top:2em;
    right:2em;
}

h3 {
    font-size:2.5em;
    color:white;
}

.form-control{
    border-radius:1em;
    border:none;
    outline:none;
    padding:0.5em;
}

.form-control::placeholder{
    font-family:"Inter";
    font-weight:400;
    font-size:1.1em;
    padding-left:0.5em;
}

.form-group{
    margin-bottom:1em;
}
span.required{
        font-family: "Inter";
    font-weight: 600;
    color: var(--zl-green);
}
textarea{
    min-height:120px;
}
.form-label{
    color:white;
    font-family:"Inter";
    font-weight:500;
}
.form-text {
    margin-top: .25rem;
    font-size: 1em;
    color: white;
    font-family: "Inter";
}

select option{
    padding:0.5rem;
        font-family:"Inter";
    font-weight:400;
    font-size:1.1em;
    padding-left:0.5em;
}
.form-check{
    padding:0;
    margin-top:1.5rem;

    span{
        padding-left:0.5rem;
        font-family:"Inter";
        font-size:1.2em;
        font-weight:600;
        color:var(--zl-green);
    }
}
.row{
    margin:unset;
    gap:1em;
    justify-content:space-between;
}
.row > * {
    padding:unset;
    width:calc(50% - 1em);
}
}


}
    .overlay.hidden{
        display:none;
    }
.overlay.show{
        display:flex !important;
    }


    #kontaktformular-42, #kontaktformular-57{
        padding:8em 14em;

    background-color: var(--zl-blue);

    button:hover i:after {
    content: '\58';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: var(--zl-green);
    padding: 0.8em;
    padding-left:0.9em;
    padding-right:0.9em;
    transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
}

    nav.form-navigation{
    position:relative;
    padding:0;
    display:flex;
    justify-content: end;
    
.submit{

    .btn {
    padding:unset;
    margin:unset;

}
    button{
        color:white;
        background-color:transparent;
        border:unset;
        font-size:1.2em;
        font-weight:600;
    }
    button:after{
        content: '\f0e0';
            font-family: 'Font Awesome 6 Pro';
        font-weight:300;
        color:var(--zl-green);
        display:inline-block;
        margin-left:1em;
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }

    button:hover{
        color:var(--zl-green);
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }

    button:hover:after{
        margin-left:1.2em;
        transition: 0.4s cubic-bezier(0.77, 0.03, 0.13, 1.58);
    }
}

    }
        nav.form-navigation.nav_white{
        background-color:transparent;
    }

    button.close{
    position:absolute;
    top:2em;
    right:2em;
}

h3 {
    font-size:2.5em;
    color:white;
}

.form-control{
    border-radius:1em;
    border:none;
    outline:none;
    padding:0.5em;
}

.form-control::placeholder{
    font-family:"Inter";
    font-weight:400;
    font-size:1.1em;
    padding-left:0.5em;
}

.form-group{
    margin-bottom:1em;
}
span.required{
        font-family: "Inter";
    font-weight: 600;
    color: var(--zl-green);
}
textarea{
    min-height:120px;
}
.form-label{
    color:white;
    font-family:"Inter";
    font-weight:500;
}
.form-text {
    margin-top: .25rem;
    font-size: 1em;
    color: white;
    font-family: "Inter";
}

select option{
    padding:0.5rem;
        font-family:"Inter";
    font-weight:400;
    font-size:1.1em;
    padding-left:0.5em;
}
.form-check{
    padding:0;
    margin-top:1.5rem;

    span{
        padding-left:0.5rem;
        font-family:"Inter";
        font-size:1.2em;
        font-weight:600;
        color:var(--zl-green);
    }
}
.row{
    margin:unset;
    gap:1em;
    justify-content:space-between;
}
.row > * {
    padding:unset;
    width:calc(50% - 1em);
}

    }



/* AKKORDION */

.accordion{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
    row-gap:1rem;
    margin-top:4rem;
}

.accordion-item{    
background-color:transparent;
width:calc(50% - 2rem);
}
.accordion-body{
        background-color: var(--zl-darkblue);
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
.accordion-button{
    background-color: var(--zl-darkblue);
    color:var(--zl-green);
    border-top-left-radius:2rem !important;
    border-top-right-radius:2rem !important;
}

button.accordion-button:hover{
    padding-left:1.5rem;
}
.accordion-item{
    border-radius:2rem !important;
    border:none !important;
}
.accordion-button::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button:not(.collapsed)::after{
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
.accordion-button strong{
    color:var(--zl-green);
}
.accordion-button.collapsed{
    border-radius:2rem !important;
}
.accordion-button:not(.collapsed){
    background-color:var(--zl-darkblue);
}
/* FOOTER */

footer {

    ul li{
            padding: 0;
    list-style: none;
    display: inline-block;
        margin-right:2rem;
    }
ul li:before{
    content: "•";
    margin-right: 1rem;
    color: var(--zl-lightblue);
    font-size:2rem;
}
}

a{
    color:var(--zl-text-grey);
text-decoration:none;
    font-family: "Inter";
    font-size: 1.3em;
    font-weight: 500;
}

footer .content {
    padding: 5rem;
    padding-left: 14rem;
    padding-right: 14rem;
}

footer ul {
    margin: 0;
    padding: 0;
}

footer.darkblue{
    color:white;
    background-color:var(--zl-darkblue);

    a{
        color:white;
    }
}


footer h2,
footer h3,
footer h4,
footer h5,
footer p,
footer a,
footer em,
footer strong {
}

.mobile-dropdown-icon{
    cursor:pointer;
}
.detail strong{
    font-size:inherit !important;
    font-weight:800;
}
/* MEDIA QUERIES */

@media only screen and (max-width: 1650px) {
#menu li {
    font-size: 1.5em;
}

#menu .mobile-dropdown li{
    font-size:1rem;
    margin-left:0;
    margin-right:0;
}
    .icons{
        right:0rem;
    }
    .content{
        padding:8em 6em;
    }
    header, .teamheader{
        padding:10em 6em;
    }
    .icon-card-grid{
        padding:8em 6em;
    }
    
    .textbox-grid{
        padding:8em 6em;
    }
    .text-details{
        padding:8em 6em;
    }
       .slider-header {
    /* padding-top: 6rem; */
}
    .text-image-grid{
        padding:8em 6em;
    }
    .textbox-image{
        padding:8em 6em;
    }
    .image-cards{
        padding:8em 6em;
    }
         #kontaktformular-42, #kontaktformular-57{
        padding:8em 6em;
    }
    footer .content{
        padding:5em 6em;
    }
    header h2 {
        font-size: 3.5em;
        line-height: 4rem;
        margin-bottom: 1.5rem;
        width:70%;
    }
    header p{
        width:70%;
    }
    .buttonbox{
        margin-top:2rem;
    }
    h3{
        font-size:3.5em;
    }

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

    .hover-cards .image-container{
    aspect-ratio: 1 / 1;
}

.hover-cards{
    flex-wrap:wrap;
}

.hover-cards .image-card{
    padding-bottom:0px;
        width:47% !important;
}
.test{}

    .buttonbox {
        gap: 1rem;
        flex-wrap: wrap;
    }

    .swiper-slide, .swiper-controls{
        width:55%;
    }
    .swiper-gradient.left, .swiper-gradient.right{
        display:none;
    }
}
@media only screen and (max-width: 1380px) {

    .nav_white #menu {
    top: 4.5em;
}

    .has-children .mobile-dropdown-icon {
    padding: 0.5rem;
}

        .overlay .contact {
        width: 90% !important;
    }


    #menu li {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.has-children .mobile-dropdown-icon {
    margin-left: 0em;
}
    .swiper-slide-active {
    box-shadow: 0px 0px 4em var(--zl-green);
}

.bildbox {
    box-shadow: 0px 0px 4em var(--zl-green);
}

.contact .col-md-4{
    padding:2rem;
}

.swiper-wrapper {
    padding-top: 5em;
    margin-top: 0em;
    margin-bottom: 3em;
}

                .number {
                margin: 0 1rem !important;
                font-size: 2.5rem !important;
            }

                .detail-box {
                display: flex;
                flex-wrap: wrap;
                width: 100%;
                gap: 1em;
                row-gap: 2rem;
                justify-content: space-between;
            }
                            .detail {
                    width: calc(50% - 3em);
                }
                        .details {
            width: 90% !important;
        }

        .fact-icons .detail{
            width:100% !important;
        }

    section.textspalten{
        .col-md-6{
            width:100%;
        }
        .col-md-3{
            width:50%;
        }
    }
    .icons.top {
    top: 0.4em;
}
    .icons{
        top:40%;
    }
        .content{
        padding:4em 3em;
    }
    header, .teamheader{
        padding:6em 3em;
    }
    .icon-card-grid{
        padding:4em 3em;
    }
    .textbox-grid{
        padding:4em 3em;
    }
    .text-details{
        padding:4em 3em;
    }
    .text-image-grid{
        padding:4em 3em;
    }
    .textbox-image{
        padding:4em 3em;
    }

       .slider-header {
    padding-top: 4rem;
}
    .image-cards{
        padding:4em 3em;
    }
    footer .content{
        padding:2em 3em;
    }

       #kontaktformular-42, #kontaktformular-57{
        padding:4em 3em;
    }

    .grid, .icon-cards{
        margin-top:2em !important;
    }
    header h2{
        font-size: 2.5rem;
        line-height: 3rem;
        margin-bottom: 1rem;
    }
    header h1, span.subline{
        font-size:1.2em;
        line-height:1.4rem;
    }
        h3{
        font-size:2.5em
    }
    h2{
        font-size:1.2em;
    }
     .icon-card span{
        font-size:1.2em !important;
    }
    .leistung-container h3, .icon-card h4{
        font-size:1.8em !important;
    }
     a{
        font-size:1em;
    }
    h4{
        font-size:1.2em;
    }
    p{
        font-size:1em;
        line-height:1.5rem;
    }
}
@media only screen and (max-width: 1080px) {
.accordion-item{    
width:100%;
}

        .three-cols {
            gap: 2% !important;
            row-gap: 1rem !important;
        }
                    .textbox {
                width: 49% !important;
            }

        .text-content {
            width: 60% !important;
        }
                .image-box {
            width: 40% !important;
        }

        .text-content.team{
        width: 66.66666667% !important;
        }


.icons{
        transform: translate(0);
        top: 6.5rem;
        right: 2em;
        gap: 0.5rem;
}
.icon{
    width:3em;
    height:3em;
}
.icon span{
    width:3em;
    height:3em;
}

header h1, header h2, header p{
    width:100%;
}
            .content{
        padding:3em 2em;
    }
    header, .teamheader{
        padding:4em 4em;
    }
    #kontaktformular-42, #kontaktformular-57{
        padding:3em 2em;
    }
    .icon-card-grid{
        padding:3em 4em;
    }
    .textbox-grid{
        padding:3em 4em;
    }
       .slider-header {
    padding-top: 3rem;
}
    .text-details{
        padding:3em 4em;
    }
    .text-image-grid{
        padding:3em 2em;
    }
    .textbox-image{
        padding:3em 2em;
    }
    .image-cards{
        padding:3em 4em;
    }
    footer .content{
        padding:3em 3em;
    }
    .navigation-desktop {
        display: none;
    }

    .icons.top{
        top:0.95rem;
        right: 4.5rem;
    }
    .navigation {
        top: 31px;
        right: 30px;
        transition: 0.4s;
    }


    .nav_white .navigation {
    }

    .content {
        width: 100%;
        padding: 35px;
    }

    nav {
    }

    .nav_white .logo {
    }

    .nav_white {
    }

        .swiper-slide, .swiper-controls{
        width:65%;
    }

            .icon-card{
                width:100% !important;
            }

            .col-md-4.fact-icons{
                width:50% !important;
                margin-top:0;
            }
            .fact-icons .detail{
                margin-top:0;
            }


}
@media only screen and (max-width: 991px) {
}
@media only screen and (max-width: 767px) {
    .hover-cards .image-card{
    padding-bottom:0px;
        width:100% !important;
}
    .teamheader .teamimage{
    margin-right:0rem;
}
        .text-content.team{
        width: 100% !important;
        }
    .row > * {
    padding-left: 0rem !important;
    padding-right: 0rem !important;
}
.teamheader .teamimage {
    padding-right: 0rem;

}

    .team-image {
        width: 70% !important;
        aspect-ratio: 1 / 1;
            margin-bottom:2rem;
    }

.slider-header {
    padding-top: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: left;
}
                .teasercontent {
                top: 1.5em !important;
                left: 1.5em !important;
            }
              .number {
                margin: 0 0.5rem !important;
                font-size: 1.5rem !important;
            }

    .textteaser .text-center{
        text-align: left !important;
    }
        .text-image-grid {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start !important;
        }
            
            .images {
        width: 100% !important;
        justify-content:space-between;
        gap:10% !important;
    }
                    .image {
            width: 25% !important;
        }


            .image {
            width: 25% !important;
        }

    .content-box {
        display: flex;
        align-items: start;
        flex-direction: column;
    }
            .text-content {
            width: 100% !important;
        }
                .image-box {
            display:none;
        }
            .detail-box {

                row-gap: 2rem !important;
            }
                .details{
            width:100%;
        }

        .detail p{
            width:80%;
        }
.mobile-dropdown {
    position:relative;
}
        .leistung-container h3, .icon-card h4 {
        font-size: 1.5em !important;
    }

    nav{
        padding:1em 1.5em;
    }

    #menu {
    align-items:start;
    justify-content: center;
    padding-bottom: 10em;
    flex-direction: column;
    text-align: left;
    padding-left: 2em;
}

#menu li {
    font-size: 1.5em;
    position: relative;
    display: block;
margin:0;
}


.teamheader.darkblue{
    background: linear-gradient(300deg, rgba(0, 163, 150, 1) 0%, rgba(0, 50, 91, 1) 100%);
}
        section.darkblue {
        background: linear-gradient(300deg, rgba(0, 163, 150, 1) 0%, rgba(0, 50, 91, 1) 100%);
}
    .swiper-slide-active, .bildbox {
        box-shadow:none;
    }

        section.textspalten{
        .col-md-6{
            width:100%;
        }
        .col-md-3{
            width:100%;
        }
    }

    .swiper-wrapper {
    padding-top: 1em;
    padding-bottom: 1em;
    margin-top: 0em;
    margin-bottom: 4em;
}
.swiper-slide-active .leistung-container, .icon-card {
    padding: 1.5em !important;
}

.bildbox{
        aspect-ratio: 2 / 1.5;
            border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}

.bildbox img {
    transform: translateY(-2em);
}
.contact .col-md-8{
    padding:1.5em !important;
    background-color:var(--zl-darkblue);
    border-bottom-right-radius:2rem;
    border-bottom-left-radius:2rem;
}
.teamimage img{
    box-shadow:none !important;
    border-bottom-right-radius:0px !important;
    border-bottom-left-radius:0px !important;
}
.teamheader .textcaption{
        background-color: var(--zl-darkblue);
    padding: 1.5em;
    border-bottom-right-radius: 2rem;
    border-bottom-left-radius: 2rem;
}
    .row > * {
padding-left:0;
padding-right:0;
}
.icons{
    
    top:6.5em;
    right:1.5em;
    left:unset;
    z-index:99;


}

    .buttonbox {
        margin-top: 2rem;
        flex-direction: column;
        gap: 1em;
    }
                .content{
        padding:4em 1.5em;
    }
    header{
        padding:4em 1.5em;
    }

    #kontaktformular-42, #kontaktformular-57{
        padding:4em 1.5em;
    }
    .icon-card-grid{
        padding:4em 1.5em;
    }

       .slider-header {
    padding-top: 4rem;
}

    .textbox-grid{
        padding:4em 1.5em;
    }

    .teamheader{
      padding:4em 1.5em;  
    }
    .text-details{
        padding:4em 1.5em;
    }
    .text-image-grid{
        padding:4em 1.5em;
    }
    .textbox-image{
        padding:4em 1.5em;
    }
    .image-cards{
        padding:4em 1.5em;
    }
    footer .content{
        padding:4em 1.5em;
    }

        .swiper-slide, .swiper-controls{
        width:90%;
        height:0px;
        transition:0.4s ease-in-out;
    }

    .swiper-slide-active{
        height:100% !important;
        transition:0.4s ease-in-out;
    }
    .swiper-pagination-bullets.swiper-pagination-horizontal{
        width:60%;
    }
footer .logo{
    width:9em;
    margin-bottom:1rem;
}
footer .text-center{
    text-align:left !important;
}
footer ul li{
    display:block;
}

            .cards {
                margin-top:2rem !important;
        flex-wrap: wrap;
        gap: 1rem;
    }

        .image-card {
            width: calc(50% - 0.5rem) !important;
            background-color:var(--zl-darkblue);
            border-radius:2rem;
            padding-bottom:1.5rem;
        }

        .image-card h4, .image-card span{
            display:block;
            padding-left:1.5rem;
            padding-right:1.5rem;
        }
        .image-container{
            border-bottom-right-radius:0 !important;
            border-bottom-left-radius:0 !important;
        }

            .hover-cards .image-container {
        border-bottom-right-radius: 2rem !important;
        border-bottom-left-radius: 2rem !important;
        margin-bottom:0px !important;
    }




    .contact .col-md-4 {
        padding: 0rem;
    }

    .team-order-1{
        order:1;
    }
    .team-order-2{
        order:2;
    }
}

@media only screen and (max-width:600px){
    .image-container{
                aspect-ratio: 2 / 1.5;
    }

    .image-container img{
        transform:translateY(-2rem);
    }
            .image-card {
            width: 100% !important;
            background-color:var(--zl-darkblue);
            border-radius:2rem;
            padding-bottom:1.5rem;
        }
}
@media only screen and (max-width: 500px) {

        #menu {
        padding-left: 1.5rem;
    }
    #menu li.has-children {
    padding-right: 1rem;
}

    .contact{
        padding:1rem !important;
    }
    .form-text{
        font-size:0.8rem !important;
    }
            textarea{
                min-height:80px !important;
            }
                    .form-control{
                        padding-top:0.25rem !important;
                        padding-bottom:0.25rem !important;
                    }
                            .form-group {
            margin-bottom: 0.75rem !important;
        }

                .detail-box {
                row-gap: 1rem !important;
            }
                            .detail {
                    width: 100% !important;
                }
                                 .detail .icon {
                        width: 2em !important;
                        height: 2em !important;}
                        .detail .icon i{
                            font-size:1em !important;
                        }
                                    .fact-icons .detail .icon{
                width:3em !important;
                height:3em !important;
            }
            .fact-icons .detail .icon i{
                font-size:1.5rem !important;
            }
        .textbox {
        width: 100% !important;
    }    
        .col-md-4.fact-icons {
        width: 100% !important;
        margin-top: 0;
    }
    .textbox {
position:relative;
            padding: 1.5em !important;
        }
                .number {
                position: absolute;
                top: -11px;
                right: -7px;
                z-index: 9;
                background-color: var(--zl-green);
                border-radius: 100%;
                width: 2.5em;
                height: 2.5em;
                margin: 0 !important;
                color: white !important;
                text-align: center;
                font-size: 1em !important;
                padding: 0.5rem;
            }
.text strong{
    font-size:1rem;
}
        .details {
        width: 100% !important;
    }

        .image {
        width: 45% !important;
    }
                .swiper-slide, .swiper-controls{
        width:calc(100% - 3em);
    }

    h2, header h1, span.subline, .icon-card span{
        font-size:1rem !important;
line-height:1.5rem !important;
    }
h3, header h2{
            font-size: 1.8rem !important; 
        line-height: 2.2rem !important;
        margin-bottom: 1rem !important;
}
a.button, button {
    font-size: 1.1em;
    gap: 0.75em;
}

        .detail p {
        width: 100%;
    }

}