:root {

    --color-main: #009aa2;
    --color-second: #436d66;
    --color-footer: #d0e9e4;
    --color-font:#4a4a48;
}

body, html {
    font-family: 'Roboto', sans-serif;
    color: var(--color-font);
}

h1 {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 2.5rem;
}

h2 {
    font-weight: 900;
    font-size: 2rem;
    margin-bottom: 2rem;
}

h3 {
    font-weight: 900;
    font-size: 1.4rem;
}

a, a:hover, a:active, a:visited {
    color: var(--color-second);
}

.bg-main, .layout-201 {
    background-color: var(--color-main);
}

.bg-main a, .layout-201 a {
    color: white;
}

.bg-main h1, .layout-201 h1, .bg-main h2, .layout-201 h2, .bg-main > * , .layout-201 > * {
    color: white;
}

.font-second {
    color: var(--color-main);
}


.header-image {
    height: 550px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.header-image h1, .header-image .fs-1 {
    font-size: clamp(3rem, 5vw, 6rem) !important;
    line-height: 1.2 !important;
    color: white;
    opacity: 0.85;
    font-weight: bold;
}

.text-cover {
    position: absolute;
}

.bg-main-layer {
    background-color: var(--color-main);
    width: 100%;
    height: 600px;
}

.bg-white-layer {
    background-color: white;
    width: 100%;
    height: 600px;
}

.wave-layer {
    background-color: white;
    width: 100%;
    height: calc(10vw + 1px);
}

.wave-fluid {
    z-index: -1;
    position: relative;
    padding: 0;
    background-color: var(--color-main);
}

.masked-layer {
    mask-image:
            linear-gradient(white, white), /* Erste Maske: vollständiger Bereich bleibt sichtbar */
            url('wave.svg');               /* Zweite Maske: die Welle definiert, was ausgeblendet wird */
    mask-repeat: no-repeat, no-repeat;
    mask-position: top left, top center;
    mask-size: cover, 100% auto; /* Masken auf den gesamten Bereich skalieren */
    mask-composite: exclude; /* Bereich der Welle wird ausgeschlossen */
    padding-top: 1px;
    margin-top: -10vw;
}

.masked-layer-flip {
    mask-image:
            linear-gradient(white, white), /* Erste Maske: vollständiger Bereich bleibt sichtbar */
            url('wave-flip.svg');               /* Zweite Maske: die Welle definiert, was ausgeblendet wird */
    mask-repeat: no-repeat, no-repeat;
    mask-position: top left, top left;
    mask-size: cover, 100% auto; /* Masken auf den gesamten Bereich skalieren */
    mask-composite: exclude; /* Bereich der Welle wird ausgeschlossen */
    padding-top: 1px;

}

.masked-layer-bottom {
    mask-image:
            linear-gradient(white, white), /* Erste Maske: vollständiger Bereich bleibt sichtbar */
            url('wave-bottom.svg');               /* Zweite Maske: die Welle definiert, was ausgeblendet wird */
    mask-repeat: no-repeat, no-repeat;
    mask-position: top left, 0px 280px;
    mask-size: cover, 100% auto; /* Masken auf den gesamten Bereich skalieren */
    mask-composite: exclude; /* Bereich der Welle wird ausgeschlossen */
    padding-top: 1px;

}

.masked-wave-layer {
    mask-image: url(wave.svg);
    mask-repeat: no-repeat;
    mask-position: 0px calc(-8vw);
    mask-size: cover;

}

.masked-wave-layer-flip {
    mask-image: url(wave-flip.svg);
    mask-repeat: no-repeat;
    mask-position: 0px calc(-8vw);
    mask-size: cover;

}

h2.h-underline {
    font-weight: normal;
    width: 100%;
    border-bottom: 4px solid var(--color-main);
    padding-bottom: 0.5rem;
    color: var(--color-main);
}

.partner-list .row:nth-child(odd) {
    background-color: var(--color-footer);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.list-partner .row:nth-child(even) {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.underline {
    width: 100%;
    border-bottom: 4px solid white;
    padding-bottom: 0.5rem;
}

.layout-201 h2.h-underline {
    border-color: white;
    color: white;
}

.layout-201 {
    color: white;
}

.ce-textpic img {
    border-radius: 25px;
}

.pb-6 {
    padding-bottom: 5rem;
}

.pt-6 {
    padding-top: 5rem;
}

.counter-outer {
    padding: 2rem;
    background-color: rgba(0, 154, 162, 0.5);
    border-radius: 25px;
}

.symbol {
    height: 7rem;
}

.symbol img {

}

.gradient-overlay {
    content: "";
    position: absolute;
    top: 0; /* Positioniert die Ebene am oberen Rand */
    left: 0;
    width: 100%; /* Über die gesamte Breite erstrecken */
    height: 300px;
    background: linear-gradient(to bottom, rgba(0, 154, 162, 1), rgba(0, 154, 162, 0));
    pointer-events: none; /* Verhindert, dass die Ebene klickbar ist */
}

.footernav {
    background-color: var(--color-main);
    color: white;
}

.nav-contact {
    font-size: 1.6rem;
    color: var(--pink) !important;
    font-weight: normal;
    text-decoration: none;
}

ul.navcol > li > a {
    text-decoration: none;
    color: white;
}

.navcol {
    font-size: 1.5rem;
}

.breadcrumb-item, .breadcrumb-item a,.breadcrumb-item.active {
    color: var(--color-font);
}

.btn-primary {
    color: white;
    background-color: var(--color-main);
    border-color: var(--color-font);
}

a.btn-primary , a.btn-primary:hover , a.btn-primary:active , a.btn-primary:visited {
    color: white;
    text-decoration: none;
}

.btn-outline-primary, a.btn-outline-primary:visited {
    color: var(--color-font);
    background-color: white;
    border-color: var(--color-main);
}

a.btn-outline-primary:hover , a.btn-outline-primary:active  {
    color: white;
    background-color: var(--color-main);
    border-color: var(--color-font);
    text-decoration: none;
}

.news-item {
    border-radius: 20px;
}

.news-item img {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}