:root {
     --primary: #110450;
     --secondary: #FC0D78;
     --light-blue: #E1EBFF;
     --white: #ffffff;
     --black: #000000;
     --prometo: 'Prometo', sans-serif;
     --zf: 'ZF Sans', sans-serif;

     --bs-gutter-x: 4.5rem;
     --bs-gutter-y: 4.5rem;
 }

/* --- KONTRAST MODE ------------------------------------------------------------------------------------------------ */

:root[data-bs-theme="contrast"] {
    --secondary: #110450;
}

[data-bs-theme="contrast"] .header .header-top-left-nav li a {
    color: var(--primary);
}

[data-bs-theme=contrast] [data-bs-theme-value=contrast] {
    display: none;
}

[data-bs-theme=normal] [data-bs-theme-value=normal] {
    display: none;
}

/* ------------------------------------------------------------------------------------------------------------------ */


 /* Fonts */
 @font-face {
     font-family: 'Prometo';
     src: url('../fonts/Prometo-Regular.woff2') format('woff2'),
         url('../fonts/Prometo-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'Prometo';
     src: url('../fonts/Prometo-Bold.woff2') format('woff2'),
         url('../fonts/Prometo-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }


 @font-face {
     font-family: 'ZF Sans';
     src: url('../fonts/ZFSans-Medium.woff2') format('woff2'),
         url('../fonts/ZFSans-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'ZF Sans';
     src: url('../fonts/ZFSans-Light.woff2') format('woff2'),
         url('../fonts/ZFSans-Light.woff') format('woff');
     font-weight: 300;
     font-style: normal;
     font-display: swap;
 }

 @font-face {
     font-family: 'ZF Sans';
     src: url('../fonts/ZFSans-Bold.woff2') format('woff2'),
         url('../fonts/ZFSans-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
     font-display: swap;
 }


 /********* Global Style Start ***********/
 body {
     font-family: var(--prometo);
     font-weight: 400;
     font-size: 1rem;
     line-height: 1.5;
     color: var(--primary);
     margin: 0;
     padding: 0;
 }

 dl,
 ol,
 ul {
     margin: 0;
     padding: 0
 }

 li {
     list-style: none;
 }

 a {
     transition: all ease-in-out .4s;
     -webkit-transition: all ease-in-out .4s;
     -ms-transition: all ease-in-out .4s;
     -moz-transition: all ease-in-out .4s;
     -o-transition: all ease-in-out .4s;
 }

 a:hover {
     text-decoration: none;
 }

 .container {
     max-width: 1520px;
 }

 .btn {
     padding: 0.5rem 1.375rem;
     font-family: var(--zf);
     font-size: 16px;
     font-weight: 700;
     color: #fff;
     background-color: var(--secondary);
     border: none;
     border-radius: 3.125rem;
     line-height: inherit;
 }

 .btn:hover {
     color: #fff;
     background-color: var(--primary);
 }

 .btn:focus {
     outline: none;
     color: #fff;
     background-color: var(--primary);
 }
 .btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active{
    color:#fff;
    background-color: var(--primary);
    border-color: transparent;
 }
.btn-primary {
    background-color: var(--primary);
}
.btn-primary:hover, .btn-primary:focus{
    background-color: var(--secondary);
}

.btn-secondary {
    background-color: var(--secondary);
}

.btn-secondary:hover,  .btn-secondary:focus{
background-color: var(--primary);
}


 .navigation-mobile {
     overflow: hidden;
 }

 p {
     font-family: var(--prometo);
     font-weight: 400;
 }

h2, .h2{
    font-family: var(--prometo);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.4375rem;
    color: var(--secondary);
}
 /********* Global Style End ***********/

 /********* Header Style Start ***********/
 .header {
     background: var(--white);

 }

 .header .header-top-left-nav,
 .header .header-top-right-nav {
     display: none;
 }

 .header .mobile-top-icon {
     display: flex;
     justify-content: space-between;
     margin: 0.625rem auto 1rem auto;
 }

 .header .mobile-top-icon button {
     background: transparent;
     border: none;
 }

 .header.sticky {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     z-index: 1000;
     margin-bottom: 0;
 }

 .header.sticky .header-top {
     display: none;
 }

 .header .navbar {
     z-index: 9;
     transition: all 0.5s ease-in-out;
 }

 .header .navbar.open {
     align-items: flex-start;
     background: var(--white);
     height: calc(100vh - 120px);
     overflow: auto;
     overflow-x: hidden;
 }

 .header.sticky .header-middle {
     margin: 1rem 0 1rem 0;
 }

 .header-middle .logo {
     max-width: 6.25rem;
 }

 .header .header-middle {
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 .header .header-middle .btn {
     font-size: 0.875rem;
 }

 .header [aria-expanded="false"] .nav-close {
     display: none;
 }

 .header [aria-expanded="true"] .nav-open {
     display: none;
 }

 .header [aria-expanded="true"] img {
     transform: rotate(90deg);
 }

 .header .navbar-nav img {
     margin-left: 0.3rem;
 }

 @media(min-width: 992px) {
     .header {
         margin-bottom: 1.875rem;
     }

     .header-middle .logo {
         max-width: 11.875rem;
     }

     .header-middle .btn {
         font-size: 1rem;
     }

     .header .mobile-top-icon {
         display: none;
     }

     .header-middle .navbar-toggler {
         display: none;
     }

     .header-top {
         display: flex;
         justify-content: space-between;
         align-items: center;
     }

     .header .header-top-left-nav {
         margin: 0;
         padding: 0;
         display: flex;
         gap: 1.688rem;
     }

     .header .header-top-left-nav li {
         list-style: none;

     }

     .header.sticky .navbar {
         position: absolute;
         right: 12.5rem;
         top: -4px;
     }

     .header .header-top-left-nav li a {
         font-family: var(--prometo);
         background: var(--light-blue);
         padding: 0.5rem 1.875rem;
         border-radius: 0 0 1.25rem 1.25rem;
         color: #7978A8;
         font-size: 1.25rem;
         font-weight: normal;
         min-width: 13.125rem;
         display: inline-block;
         text-align: center;
         text-decoration: none;

     }

     .header .header-top-left-nav li a:hover {
         background: var(--secondary);
         color: var(--white);
     }

     .header .header-top-left-nav li.active a {
         background: var(--secondary);
         color: var(--white);
         border-radius: 0 0 1.25rem 1.25rem;
         font-weight: bold;
     }

     .header .header-top-right-nav {
         display: flex;
         gap: 2.5rem;
     }

     .header .header-top-right-nav li {
         list-style: none;
     }

     .header .header-top-right-nav li a,
     .header .header-top-right-nav li button {
         background: transparent;
         border: none;
         font-size: 1rem;
         color: var(--primary);
         font-family: var(--prometo);
         padding: 0;
        text-decoration: none;
     }

     .header .header-top-right-nav li a:hover,
     .header .header-top-right-nav li button:hover {
         color: var(--secondary);
     }

     .header-middle {
         display: flex;
         align-items: center;
         justify-content: space-between;
         margin: 1.875rem 0 1rem 0;
     }

     .header.sticky .header-middle {
         margin: 1.875rem 0 1.875rem 0;
     }
 }

 @media only screen and (min-width: 992px) and (max-width: 1450px) {
     .header .header-top-left-nav li a {
         min-width: auto;
     }

     .header.sticky .navbar {
         right: 10.5rem;
         top: -2px;
     }
 }

 @media only screen and (min-width: 992px) and (max-width: 1270px) {
     .header .header-top-left-nav li a {
         font-size: 1rem;
         padding: 0.5rem 1.5rem;
     }

     .header .header-top-left-nav {
         gap: 1.5rem;
     }

     .header .header-top-right-nav {
         gap: 1.5rem;
     }

     .sticky .header-middle .logo {
         max-width: 5.25rem;
     }

     .navbar .nav-item a {
         font-size: 1.2rem !important;
     }
 }

 @media(min-width:992px) {
     .navbar .nav-item:first-child a {
         padding-left: 0;
     }
 }

 @media (max-width: 1100px) {
     .header .header-top-left-nav li a {
         padding: 0.5rem 1rem;
     }

     .header .header-top-left-nav {
         gap: 0.5rem;
     }

     .header .header-top-right-nav {
         gap: 0.9rem;
     }

 }


 /********* Header Style End ***********/

 /********* Navigation Style Start ***********/
 .navbar .dropdown-toggle::after {
     content: none;
 }

 .navbar .dropdown-menu {
     background: var(--white);
     border: none;
     border-radius: 0;
     padding: 0rem;
 }

 .navbar .nav-item a {
     font-size: 1.313rem;
     color: var(--primary);
 }

 .navbar .navbar-nav .dropdown-menu a {
     font-size: 1.063rem;
 }

 .navbar .navbar-nav .dropdown-menu a:hover {
     background: transparent;
 }

 .navbar .navbar-nav .dropdown-menu a:focus {
     background: transparent;
 }

 .navbar .navbar-nav .dropdown-menu .dropend li {
     list-style: disc;
 }

 .navbar .navbar-nav .dropdown-menu .dropend li a {
     padding-left: 0;
 }

 .navbar .navbar-nav .dropdown-menu .dropend ul {
     margin-left: 2.3rem;
     padding: 0;
     position: static;
 }

 .navbar .navbar-nav .dropdown-menu .dropend .show {
     font-weight: bold;
 }

 .header .mobile-nav {
     display: none;
 }

 .navbar-nav .nav-link.active,
 .navbar-nav .nav-link.show {
     color: var(--primary);
     font-weight: bold;
 }

 @media(min-width: 992px) {
     .navbar .navbar-nav {
         gap: 1rem;
     }

     .navbar-nav .nav-link.active,
     .navbar-nav .nav-link.show {
         font-weight: normal;
     }

     .navbar .dropdown-menu {
         background: var(--light-blue);
         padding: 1rem;
     }

     .navbar .navbar-nav .dropdown-menu a {
         font-size: 1.188rem;
     }
 }

 @media (max-width: 992px) {

     /* .header {
        padding-bottom: 1rem;
    } */
     .header.sticky {
         padding-bottom: 0;
     }

     .header .mobile-nav {
         display: block;
     }

     .header .mobile-nav li a {
         font-family: var(--prometo);
         background: var(--light-blue);
         padding: 0.5rem 1.875rem;
         border-radius: 0 0 1.25rem 1.25rem;
         color: #7978A8;
         font-size: 1.25rem;
         font-weight: normal;
         width: 100%;
         display: inline-block;
         text-align: center;
         text-decoration: none;
         box-shadow: 0px 3px 6px #00000029;
         margin-top: 0.2rem;

     }

     .header .navbar-nav {
         padding-left: 1rem;
     }

     .header .mobile-nav li a:hover {
         background: var(--secondary);
         color: var(--white);
     }

     .header .mobile-nav li.active a {
         background: var(--secondary);
         color: var(--white);
         border-radius: 0 0 1.25rem 1.25rem;
         font-weight: bold;
     }

     .header .header-middle {
         padding-bottom: 1rem;
     }

     .header.sticky .header-middle {
         padding-bottom: 0;
     }
 }

 @media only screen and (min-width: 992px) and (max-width: 1100px) {
     .navbar .navbar-nav {
         gap: 0;
     }

     .navbar .nav-item a {
         font-size: 1rem !important;
     }

     .header .mobile-nav {
         display: none;
     }
 }

 /********* Navigation Style End ***********/

 /********* Widget Style Start ***********/
 .widget {
     position: fixed;
     bottom: 1rem;
     right: 0;
     left: 0;
     z-index: 5;
     display: flex;
     flex-direction: row;
     gap: 0.8rem;
     justify-content: center;
 }

 .widget li a {
     width: 4.688rem;
     height: 4.688rem;
     background: #FFFF67;
     border-radius: 6.25rem;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .widget li a:hover {
     filter: invert(0.1);
 }

 @media(min-width: 992px) {
     .widget {
         left: inherit;
         top: 30%;
         bottom: inherit;
         flex-direction: column;
         justify-content: inherit;
     }
 }

 /********* Widget Style End ***********/


 /********* Footer Style End ***********/
 .footer {
     margin-top: 2.5rem;
     overflow: hidden;
 }

 .footer .footer-top {
     background: var(--secondary);
     position: relative;
     padding-bottom: 5rem;
 }

 .footer .footer-top::after {
     content: '';
     position: absolute;
     top: -1px;
     left: 0;
     width: 100%;
     height: 5rem;
     background: var(--white);
     z-index: 0;
 }

 .footer .footer-top::before {
     content: '';
     position: absolute;
     bottom: -1px;
     left: 0;
     width: 100%;
     height: 3rem;
     background: var(--white);
     z-index: 0;
 }

 .footer .left-img {
     position: relative;
     z-index: 2;
 }

 .footer .footer-right h2 {
     font-family: var(--prometo);
     font-weight: 700;
     color: var(--white);
     margin-bottom: 1rem;
     font-size: 1.875rem;
     margin-top: 1rem;
 }

 .footer .footer-right ul {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .footer .footer-right ul li {
     list-style: none;
     display: flex;
     gap: 10px;
     align-items: center;
 }

 .footer .footer-right ul li a {
     font-size: 1.125rem;
     font-family: var(--zf);
     font-weight: 700;
     color: var(--white);

 }

 .footer .footer-big-arrow {
     max-width: 9.375rem;
     position: absolute;
     bottom: -4.3rem;
     right: 1rem;
 }

 .footer .footer-bottom {
     background: var(--primary);
     color: var(--white);
     margin-top: 2.875rem;
     padding: 1rem 0;
     font-size: 1.125rem;
     font-family: var(--zf);
     font-weight: 700;
 }

 .footer .footer-social {
     display: flex;
     gap: 2rem;
     margin: 1.5rem 0;
 }

 .footer .footer-bottom-nav {
     display: flex;
     justify-content: center;
     flex-direction: column;
     gap: 1rem;
     flex-wrap: wrap;
 }

 .footer .footer-bottom-nav a {
     font-size: 1.125rem;
     font-family: var(--zf);
     font-weight: 700;
     color: var(--white);
     text-decoration: none;
 }

 .footer .footer-bottom-nav a:hover {
     color: var(--secondary);
 }

 @media(min-width: 992px) {
     .footer {
         margin-top: 5rem;
     }

     .footer .footer-top::after {
         height: 3rem;
     }

     .footer .footer-top {
         padding-bottom: 0;
     }

     .footer .footer-big-arrow {
         max-width: 21.125rem;
         bottom: -2.3rem;
         right: 1rem;
     }

     .footer .footer-right h2 {
         margin-top: 0;
     }

     .footer .footer-right {
         padding: 5rem 0;
     }

     .footer .footer-bottom-nav {
         flex-direction: row;
         justify-content: end;
     }

     .footer .footer-social {
         margin: 0;

     }

     .footer .footer-bottom {
         margin-top: 4.875rem;

     }
 }

 @media only screen and (min-width: 992px) and (max-width: 1200px) {
     .footer .footer-right {
         padding: 2rem 0 5rem 0;
     }
 }

 /********* Footer Style End ***********/


 /********* Slider Style Start ***********/
 .hero-slider {
     padding: 2rem 1.5rem 4.688rem 1.5rem;
 }

 @media(min-width:992px) {
     .hero-slider {
         padding-top: 0;
         padding-bottom: 5.3rem;
     }

     .hero-slider .slider-main {
         position: relative;
         z-index: 1;
     }

     .hero-slider .slider-big-arrow {
         display: block;
         max-width: 21.125rem;
         position: absolute;
         bottom: -5.3rem;
         right: 0;
         z-index: 2;
     }
 }

 .hero-slider .title {
     font-size: 2.188rem;
     font-weight: 700;
     line-height: 2.5rem;
     color: var(--primary);
 }

 @media(min-width:992px) {
     .hero-slider .title {
         font-size: 3.125rem;
         line-height: 4.063rem;
     }
 }

 .hero-slider p {
     font-family: var(--zf);
     font-size: 1.313rem;
     font-weight: 300;
     line-height: 1.75rem;
     color: var(--primary);
     margin-top: 2rem;
     margin-bottom: 0;
 }

 @media(min-width:992px) {
     .hero-slider p {
         font-size: 1.563rem;
         line-height: 2rem;
     }
 }

 .hero-slider .swiper-pagination {
     margin-bottom: 0;
     bottom: -3.875rem;
 }

  @media(min-width:992px) {
     .hero-slider .swiper-pagination {
         justify-content: flex-start;
         margin-left: 0;
         margin-right: auto;
         bottom: 0;
         margin-bottom: 2rem;
        right: auto;
        left: 0;
        width: auto;
     }
 }

.hero-slider .swiper-pagination-bullet {
     width: 0.375rem;
     height: 0.375rem;
     margin: 0.375rem;
     border-radius: 0.375rem;
     background-color: #ccc;
     border: 0;
     opacity: 1;
 }

 .hero-slider .swiper-pagination-bullet-active {
     background-color: var(--secondary);
 }

 .hero-slider .btn {
     font-family: var(--zf);
     font-size: 1.125rem;
     font-weight: 700;
     margin-top: 1.563rem;
 }

 @media(min-width:992px) {
     .hero-slider .btn {
         margin-top: 3.125rem;
     }
 }

 .hero-slider .right-image-wrapper {
     width: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     aspect-ratio: 3 / 2;

     position: relative;
     overflow: hidden;
 }


 .hero-slider .right-image-wrapper .img-fluid {
     width: 100%;
     height: 100%;
     object-fit: cover; /* Bild wird den Container vollständig ausfüllen */
     object-position: center; /* Sorgt dafür, dass das Bild zentriert ist */
 }

 @media(min-width:992px) {
     .hero-slider .right-image-wrapper {
         height: 41.5rem;
         aspect-ratio: 2.08 / 1;
     }
 }

 /********* Slider Style Start ***********/


 /* News Widget Slider CSS Start */

.news-widget-wrapper {
    padding-top: 3.4375rem;
    padding-left: 1.625rem;
    padding-right: 1.625rem;
    padding-bottom: 1.875rem;
    position: relative;
}

.news-widget-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 26rem;
    background-color: var(--light-blue);
    z-index: 1;
}

@media(min-width:1024px) {
    .news-widget-wrapper::after {
        height: 30.4375rem;
    }
}

 .news-list-view .container,
.news-widget-wrapper .container {
    position: relative;
    z-index: 2;
}

@media(min-width: 1024px) {
    .news-widget-wrapper {
        padding-top: 4.375rem;
    }
}

.news-list-view .h2,
.news-list-view h2,
.news-widget-wrapper .h2,
.news-widget-wrapper h2 {
    font-family: var(--prometo);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.4375rem;
    color: var(--secondary);
    margin-bottom: 0;
}

.news-widget-wrapper .swiper-slide .card,
.news-list-view .card {
    text-decoration: none;
    border: 0;
    border-radius: 0;
    box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
}

.news-widget-wrapper .swiper-slide .card *,
.news-list-view .card * {
    text-decoration: none !important;
}

.news-widget-wrapper .swiper-slide img,
.news-list-view img {
    aspect-ratio: 1.85 / 1;
    border-radius: 0;
}

.news-list-view .card,
.news-widget-wrapper .card {
    text-align: left;
}

.news-widget-wrapper .card-body {
    padding: 1.25rem 1.25rem 1.5625rem;
}

@media(min-width:1024px) {
    .news-widget-wrapper .card-body {
        padding: 1.25rem 1.5625rem 1.875rem;
    }
}
.news-list-view .card-body {
    padding: 1rem 2rem;
}

@media(min-width:1024px) {
    .news-list-view .card-body {
        padding: 2rem 3rem;
    }
}

.news-subtitle,
.news-list-view .card-body .card-subtitle,
.news-widget-wrapper .card-body .card-subtitle {
    font-family: var(--zf);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.5rem;
    color: var(--secondary);
}

.news-subtitle span,
.news-list-view .card-body .card-subtitle span,
.news-widget-wrapper .card-body .card-subtitle span {
    font-size: 1rem;
    color: #706896;
    font-weight: 300;
}

.news-list-view .card-body .card-title,
.news-widget-wrapper .card-body .card-title {
    font-family: var(--zf);
    font-size: 1.4375rem;
    line-height: 1.75rem;
    margin-top: 1.5625rem;
    color: var(--primary);
    font-weight: 700;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    hyphens: auto;
}

.news-list-view .card-body p,
.news-widget-wrapper .card-body p {
    font-family: var(--zf);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5rem;
    margin-top: 1rem;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display: -webkit-box;
    hyphens: auto;
}

 /* Sichtbarkeit Bild */
 .news-list-view .col-md-3 a {
     width: 100%;
 }

 /* Die Col exakt passend zur Row ausrichten */
 .news-list-view .col-md-3 {
     position: relative;
 }

 /* Image-Container: Nimmt die volle Höhe und Breite der Spalte ein */
 .news-list-view .image-container {
     position: relative;
     width: 100%;
     height: 100%;
     min-height: calc(100% / (16 / 9)); /* 16:9-Verhältnis als Mindesthöhe */
     overflow: hidden;
 }

 /* Bild an die Größe des Containers anpassen */
 .news-list-view .image-container img {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     object-fit: cover; /* Beschneidet und passt das Bild proportional an */
 }

 /* Mobile optimierungen sicherstellen */
 @media (max-width: 768px) {
     .news-list-view .image-container {
         min-height: 180px; /* Sicherstellen, dass ein Mindestmaß auch mobil eingehalten wird */
     }
 }

.news-widget-wrapper .swiper {
    width: 100%;
    height: 100%;
    padding-bottom: 3.125rem;
    padding-top: 2.5rem;
}

.news-widget-wrapper .swiper-slide {
    text-align: center;
    font-size: 1.125rem;
    background: #fff;
    display: flex;
    height: auto;
}

.news-widget-wrapper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media(min-width: 992px) {
    .news-widget-wrapper .swiper-slide img {
        height: 15.875rem;
    }
}
.news-widget-wrapper .swiper-pagination-bullet {
    width: 0.375rem;
    height: 0.375rem;
    margin: 0.375rem;
    background: #CCCCCC;
    border: 1px solid transparent;
    opacity: 1;
}

.news-widget-wrapper .swiper-pagination-bullet-active {
    border: 1px solid var(--secondary);
    width: 0.4375rem;
    height: 0.4375rem;
    background: transparent;
}

 #maincontent ul.f3-widget-paginator li {
     width: fit-content;
 }
 #maincontent ul.f3-widget-paginator li::before {
     display: none;
 }
 #maincontent ul.f3-widget-paginator {
     list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
     display: flex; /* Aktiviert Flexbox für die Liste */
     justify-content: center; /* Zentriert die Liste horizontal */
     gap: 3rem; /* Fügt einen fixen Abstand von 2rem zwischen den Listenelementen hinzu */
     padding: 0; /* Entfernt Standard-Einrückungen */
     margin: 3rem 0; /* Entfernt Standard-Margen */
 }

 #maincontent ul.f3-widget-paginator li {
     display: inline-block; /* Stellt sicher, dass die Elemente nur so breit sind wie ihr Inhalt */
 }
 #maincontent ul.f3-widget-paginator li.current {
     font-weight: 700;
 }
 #maincontent ul.f3-widget-paginator li a {
     text-decoration: none;
 }
 #maincontent ul.f3-widget-paginator li.disabled {
     display: none;
 }

 .news-single .btn.btn-primary {
     border: 2px solid var(--primary);
     background-color: transparent;
     color: var(--primary);
 }

 /* News Widget Slider CSS End */

 /* Suche CSS Start */

 #maincontent ul.tx-indexedsearch-browsebox li {
     width: fit-content;
 }
 #maincontent ul.tx-indexedsearch-browsebox li::before {
     display: none;
 }
 #maincontent ul.tx-indexedsearch-browsebox {
     list-style: none; /* Entfernt die Standard-Aufzählungszeichen */
     display: flex; /* Aktiviert Flexbox für die Liste */
     justify-content: center; /* Zentriert die Liste horizontal */
     gap: 3rem; /* Fügt einen fixen Abstand von 2rem zwischen den Listenelementen hinzu */
     padding: 0; /* Entfernt Standard-Einrückungen */
     margin: 3rem 0; /* Entfernt Standard-Margen */
 }

 #maincontent ul.tx-indexedsearch-browsebox li {
     display: inline-block; /* Stellt sicher, dass die Elemente nur so breit sind wie ihr Inhalt */
 }

 #maincontent ul.tx-indexedsearch-browsebox li.current {
     font-weight: 700;
     color: var(--primary);
 }
 #maincontent ul.tx-indexedsearch-browsebox li a {
     text-decoration: none;
     color: var(--primary);
 }
 #maincontent ul.tx-indexedsearch-browsebox li.disabled {
     display: none;
 }

 .search-result-header a {
     color: inherit;
     text-decoration: none;
 }

 /* Suche CSS End */

 /* Abstände Bild zu Text anpassen */



.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
    margin-bottom: 2rem;
}
.ce-image .ce-gallery { margin-bottom: 0; }
.ce-intext.ce-right .ce-gallery { margin-left: 3rem; }
.ce-intext.ce-left .ce-gallery { margin-right: 3rem; }
.ce-below .ce-gallery { margin-top: 2rem; }

.ce-column { margin-right: 2rem; }
.ce-column:last-child { margin-right: 0; }

 /* Image Caption */

 .figcaption,
 .caption {
     padding: .75rem 0;
 }

/* Input Felder CSS Start */

 input[type="checkbox"] {
    outline:  1px solid #000000;
    border:  0;
     border-radius: 0;
     margin-right: 1rem;
     margin-bottom: 1rem;
 }
 button[type="submit"] {
     margin-top: 1rem;
 }


.form-floating select {
    appearance: none; /* Standard-Pfeil ausblenden */
    -moz-appearance: none; /* Für Firefox */
    -webkit-appearance: none; /* Für Safari */
    background-image: url('../images/select_arrow.svg'); /* Eigene Grafik hier einfügen */
    background-repeat: no-repeat; /* Verhindert Wiederholung */
    background-position: right 10px bottom 8px; /* Pfeil rechts platzieren, alternativ: right 10px center */
    background-size: 16px 16px; /* Größe der Grafik anpassen */
}

 .form-floating select,
 .form-floating input[type="text"],
 .form-floating input[type="email"],
 .form-floating input[type="number"],
 .form-floating input[type="tel"],
 .form-floating input[type="date"],
 .form-floating textarea {
    border: 0;
     border-bottom: 1px solid #000000;
     border-radius: 0;
     color: var(--primary);
     font-weight: 700;
     margin-top: 2rem;
 }
 .form-floating textarea {
    min-height: 150px !important;
 }
 .form-floating > label {
     padding: 1rem 0;
 }
 .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form-control:focus, .form-floating > .form-control:not(:placeholder-shown) {
     padding: 1.925rem 0 .625rem 0;
 }

.form-check {
    padding-top: 1rem;
    padding-left:  0;
}
label, input, textarea, .form-control {
    font-size: clamp(1rem, 5vw, 1.3rem);
}
.form-floating > .form-control-plaintext ~ label, .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label {
    transform: scale(.85) translateY(-1.5rem) translateX(-.15rem);
}
/* Input Felder CSS End */

/* Copyrights CSS Start */

 .copyright-card .image-container {
     width: 100%; /* Passt die Breite an den übergeordneten Container an */
     aspect-ratio: 4 / 3; /* Erzwingt das Seitenverhältnis 4:3 */
     position: relative; /* Positionierung für das enthaltene Bild */
     overflow: hidden; /* Verhindert, dass das Bild die Container-Grenzen überschreitet */
     background: #f0f0f0; /* Optionaler Hintergrund für bessere Sichtbarkeit */
 }

 .copyright-card .image-container img {
     width: 100%; /* Die Breite des Bildes anpassen */
     height: 100%; /* Die Höhe des Bildes anpassen */
     object-fit: cover; /* Cover-Positionierung aktivieren */
     object-position: center; /* Bild mittig positionieren */
     position: absolute; /* Stellt sicher, dass es sich relativ zum Container bewegt */
 }

/* Copyrights CSS End */

/* Teaser CSS Start */
.teaser-wrapper {
    padding-top: 2.125rem;
    padding-bottom: 2.125rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-bottom: 1.875rem;
}

@media(min-width: 1024px) {
    .teaser-wrapper {
        padding-top: 4.0625rem;
        padding-bottom: 4.0625rem;
        margin-bottom: 0;
    }
}

.teaser-main {
    position: relative;
}

.teaser-main::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 10rem;
    width: 100%;
    height: 38.813rem;
    background-color: var(--light-blue);
    z-index: 1;
}

@media(min-width: 1024px) {
    .teaser-main::before {
        height: 19.813rem;
        top: 50%;
        transform: translateY(-50%);
    }
}
.teaser-main .row {
    z-index: 2;
    position: relative;
}

.teaser-info {
    padding: 1.5rem 1.5rem 4.375rem 1.5rem;
    background-color: var(--light-blue);
}

@media(min-width: 992px) {
    .teaser-info {
        padding: 1.5rem;
    }
}

@media(min-width: 1200px) {
    .teaser-info {
        padding: 1.875rem 3.125rem 1.875rem 0;
    }
}

@media(min-width:1366px ) {
    .teaser-info {
        padding: 2.125rem 4.375rem 2.125rem 0;
    }
}

.teaser-info p {
    font-family: var(--zf);
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.5rem;
    margin-top: 1.5rem;
    hyphens: auto;
}

.teaser-info .btn-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2.1875rem;
    align-items: flex-start;
    margin-top: 1.5625rem;
}

@media(min-width: 768px) {
    .teaser-info .btn-wrapper {
        flex-direction: row;
        margin-top: 2.5rem;
    }
}

.teaser-info .btn-wrapper a {
    display: block;
    min-width: 13.125rem;
}
/* Teaser CSS End */


/* Teaser Grid CSS Start */

.teaser-grid-wrapper {
    padding-top: 4.6875rem;
    padding-bottom: 4.6875rem;
    margin-bottom: 4.375rem;
    background-color: var(--light-blue);
    padding-left: 1.375rem;
    padding-right: 1.375rem;
}

@media(min-width: 1200px) {
    .teaser-grid-wrapper {
        margin-bottom: 5.625rem;
    }
}
.teaser-grid-wrapper .teaser-grid-main{
    position: relative;
}
.teaser-grid-wrapper .teaser-grid-item{
    position: relative;
    display: block;
}
.teaser-grid-wrapper a.teaser-grid-item:hover img{
    opacity: 0.9;
}
.teaser-grid-wrapper .img-caption {
    width: 100%;
    height: 5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    padding: 1rem 1rem 0.625rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.76) 51.7%, #FFF 100%);
    display: flex;
    align-items: flex-end;
}
@media(min-width:1200px){
    .teaser-grid-wrapper .img-caption {
        padding: 1rem 1rem 1.375rem;
    }
}
.teaser-grid-wrapper .img-caption h3 {
    font-family: var(--zf);
    font-size: 1.4375rem;
    line-height: 1.75rem;
    color: var(--primary);
    font-weight: 700;
    margin: 0;
    padding-left: 1.5rem;
    position: relative;
}
.teaser-grid-wrapper .img-caption h3::before {
    content: "";
    background-image: url('../images/image-caption-arrow.svg');
    background-repeat: no-repeat;
    width: 1.125rem;
    height: 1.125rem;
    position: absolute;
    left: 0;
    top: 0.313rem;
}

@media(min-width:992px){
    .teaser-grid-wrapper .ratio-1x1{
        aspect-ratio: 1 / 1;
    }
    .teaser-grid-wrapper .ratio-1x1 img{
        height: 100%;
        object-fit: cover;
    }
}

.teaser-grid-wrapper .teaser-grid-big-arrow {
    display: flex;
    width: 10rem;
    height: 2.5rem;
    position: absolute;
    bottom: -6rem;
    right: 0;
}
@media(min-width:1200px){
.teaser-grid-wrapper .teaser-grid-big-arrow {
    width: 20rem;
    height: 5rem;
    bottom: -7.2rem;
}
}
/* Teaser Grid CSS End */


/* Icon Grid CSS Start */
.icon-grid-wrapper {
    padding: 1.875rem 1.5rem;
}

@media(min-width: 1200px ) {
    .icon-grid-wrapper {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
}

.icon-grid-wrapper .icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
    gap: 1.5rem;
    justify-items: start;
    align-items: center;
}

@media(min-width: 992px) {
    .icon-grid-wrapper .icon-grid {
        row-gap: 3rem;
    }
}

@media(min-width: 1200px) {
    .icon-grid-wrapper .icon-grid {
        row-gap: 4rem;
    }
}

.icon-grid-wrapper .icon-grid .item div,
.icon-grid-wrapper .icon-grid .item a {
    display: flex;
    align-items: end;
    gap: 1rem;
    font-family: var(--zf);
    font-size: 1.438rem;
    font-weight: bold;
    color: var(--primary);
    line-height: 1;
    text-decoration: none;
    position: relative;
    padding-right: 1.125rem;
}
.icon-grid-wrapper .icon-grid .item a:hover{
    opacity: 0.7;
}

.icon-grid-wrapper .icon-grid .item a::after,
.icon-grid-wrapper .icon-grid .item div::after {
    content: "";
    background-image: url('../images/icon-grid-arrow.svg');
    background-repeat: no-repeat;
    position: absolute;
    right: 0;
    bottom: 0.625rem;
    width: 0.875rem;
    height: 0.875rem;
}
/* Icon Grid CSS End */


 /* Image Copyright Start */
.image-container {
    position: relative;
}
.copyright-container {
    position: absolute;
    bottom: 7px;
    right: 7px;
    margin-left: 7px;
    background-color: #fff;
    padding: 5px 9px;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.3s ease-in-out;

    font-size: clamp(1rem, 5vw, 1.3rem);
    font-family: "ZF Sans", sans-serif;
    font-weight: 300;
    color: #110450;
    line-height: 1.3;
}
.copyright-container.copyright-container-left {
    left: 7px;
    right: auto;
    margin-right: 7px;
    margin-left: 0;
}

 /* Image Copyright End */

 /* Top links CSS Start */
 .top-links {
     padding-top: 35px;
     padding-bottom: 72px;
     padding-left: 16px;
     padding-right: 16px;
     position: relative;
     overflow: hidden;
 }
 @media (min-width: 1024px) {
     .top-links {
         padding-top: 4.375rem;
         padding-bottom: 40px;
     }
 }
 .top-links .container{
     position: relative;
     z-index: 2;
 }

 .top-links::after {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     width: 100%;
     height: 100%;
     background-color: var(--light-blue);
     z-index: 1;
 }

 @media (min-width: 1024px) {
     .top-links::after {
         height: 21.688rem;
     }
 }

 .top-links .link-block {
     padding: 20px;
     background-color: var(--white);
     box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.1);
     font-family: var(--zf);
     font-size: 23px;
     font-weight: 700;
     line-height: 28px;
     height: 108px;
     display: flex;
     align-items: center;
     position: relative;
     color: var(--primary);
     text-decoration: none;
     width: 100%;
 }

 .top-links .link-block::after {
     content: "";
     background-image: url('../images/icon-grid-arrow.svg');
     background-repeat: no-repeat;
     position: absolute;
     right: 15px;
     top: 15px;
     width: 0.875rem;
     height: 0.875rem;
 }
 .top-links .link-block:hover{
     box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.2);
 }

 /* Top links CSS End */


h1, .h1 {
    font-size: clamp(1.5rem, 7vw, 3.125rem);
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 1rem;
    line-height:1.3;
}
h2, .h2 {
    font-size: clamp(1.2rem, 6vw, 1.875rem);
    font-weight: 600;
    color: var(--secondary);
    margin-top: 2rem;
    line-height:1.3;
}
h3, .h3 {
    font-size: clamp(1.2rem, 5vw, 1.438rem);
    font-weight: 600;
    color: var(--primary);
    line-height:1.3;
}
#maincontent p, #maincontent li, #maincontent ul, #maincontent td  {
    font-size: clamp(1rem, 5vw, 1.3rem);
    font-family: var(--zf);
    font-weight: 300;
    color: var(--primary);
    line-height:1.3;
}
#maincontent li, #maincontent ul {
    padding-bottom: 0.5rem;
}

#maincontent ul{
    list-style: none;
    padding-left: 1.5em;
}

#maincontent ul li {
    position: relative;
    margin-bottom: 0.5em;
}
#maincontent ul li::before {
    content: '';
    position: absolute;
    left: -1.3em;
    top: 0.2em; /* vertikale Ausrichtung */
    width: 1em;
    height: 1em;
    background-image: url('../images/list.svg');
    background-size: contain;
    background-repeat: no-repeat;
}
#maincontent ol li{
    list-style: decimal inside;
}
#maincontent ol li::marker{
    font-weight: bold;
    color: var(--secondary);
    margin-left: 1.5em;
    padding-left: 1.5em;
}

#maincontent p > a:NOT(.btn),
#maincontent li > a:NOT(.btn) {
    text-decoration: underline;
    color: var(--primary);
}
table.contenttable {
    width: 100%;
}

table.contenttable td, table.contenttable  th {
    padding: 10px;
}

table.contenttable  th {
    font-size: clamp(1rem, 5vw, 1.3rem);
    font-family: var(--zf);
    color: var(--primary);
    line-height: 1.3;
}