/* Root */
:root {
    --bs-primary: #0a223a;
    --bs-primary-50: #D7E8F7;
    --bs-secondary: #4ac8ee;
    --bs-secondary-50: #D7E8F7;
    --bs-success: #004f2d;

    --bs-primary-rgb: 10, 34, 58;
    --bs-secondary-rgb: 74, 200, 238;
    --bs-success-rgb: 0, 79, 45;

    --bs-card-opacity: 0.5;
    --bs-card-opacity-light: 0.3;

    --bs-gray-50: #F8FAFC;
    --bs-gray-300: #CBD5E0;
    --bs-gray-400: #94A3B7;
    --bs-gray-500: #64748A;
    --bs-gray-600: #475568;
    --bs-gray-700: #334154;

    --bs-mymred: #be2c00;

    --bs-font-sans-serif: 'Open Sans', 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
        'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --bs-font-headline: 'Montserrat', 'Segoe UI', Roboto, 'Helvetica Neue',
        Arial, 'Noto Sans', 'Liberation Sans', sans-serif, 'Apple Color Emoji',
        'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
        'Liberation Mono', 'Courier New', monospace;
    --bs-gradient: linear-gradient(180deg,
            rgba(7,
                30,
                51, 0),
            rgba(14,
                45,
                73, 1));
    --bs-body-font-family: var(--bs-font-sans-serif);
    --bs-body-font-size: 1.175rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.5;
    --bs-body-color: #334154;
    --bs-primary-border-color: #2c455f;
    --bs-body-bg: #ffffff;
    --bs-border-radius: 12px;
    --bs-mini-border-radius: 9px;
}

.primary {
    color: var(--bs-primary);
}

.secondary {
    color: var(--bs-secondary);
}

.lead {
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.lead2 {
    font-size: 1.875rem;
    font-weight: 500;
    color: var(--bs-primary);
    margin-top: 1rem;
}

.ce-gallery img {
    border-radius: var(--bs-border-radius);
}

.ce-above .ce-gallery {
    margin: 0;
}

.text-small {
    font-size: 0.875rem;
}

.mym-red {background-color: var(--bs-mymred);}

@media (max-width: 991.98px) {
    .ce-above .ce-gallery {
        margin-bottom: 2rem;
    }
}

strong {
    font-weight: 600;
}

.border-radius {
    border-radius: var(--bs-border-radius);
}

/* COLOR CLASSES */

.primary-background {
    background: var(--bs-primary);
}

.primary-background a {
    color: var(--bs-secondary);
}

.primary-background p {
    color: var(--bs-white);
}

#page1 h1 {
    hyphens: none;
}

#map {
    height: 600px;
    border-radius: var(--bs-border-radius);
}

.ce-table tbody tr:nth-child(even) td {
    background: var(--bs-gray-50);
    border-top: 1px solid var(--bs-gray-200);
}

.ce-table tbody tr:nth-child(odd) td {
    background: var(--bs-white);
    border-top: 1px solid var(--bs-gray-200);
}

.ce-table tbody tr:first-child td {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.ce-table tbody tr:first-child td:first-child {
    border-top-left-radius: var(--bs-mini-border-radius);
    border-top-right-radius: 0;
    border-top: 1px solid transparent;
}

.ce-table tbody tr:first-child td:last-child {
    border-top-right-radius: var(--bs-mini-border-radius);
    border-top-left-radius: 0;
    border-top: 1px solid transparent;
}

.ce-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: var(--bs-mini-border-radius);
    border-bottom-right-radius: 0;
    border-bottom: 1px solid transparent;
}

.ce-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: var(--bs-mini-border-radius);
    border-bottom-left-radius: 0;
    border-bottom: 1px solid transparent;
}

.ce-table caption {
    margin-top: 1rem;
    font-weight: 700;
}

.ce-table tbody tr td:nth-child(2) {
    text-align: right;
}

.downloads .d-grid a {
    background-color: var(--bs-gray-50);
    color: var(--bs-primary);
    transition: all 0.3s ease;
}

.downloads .d-grid a:hover {
    color: var(--bs-secondary);
    border: 1px solid var(--bs-secondary) !important;
}

.downloads .d-grid a span.icon {
    background-color: var(--bs-gray-50) !important;
    color: var(--bs-secondary);
}

/* HEADER & VIDEO */

.header {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.header-img .overlay {
    top: 0;
    right: 0;
    bottom: inherit;
    left: 0;
    z-index: 100;
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.7) 0%, rgba(var(--bs-primary-rgb), 0.5) 15%, rgba(var(--bs-primary-rgb), 0) 30%);
}

#page1 .header {
    height: 100vh;
}

input[type="search"], #ke_search_sword {
    height: 45px;
    border-top-left-radius: 32px;
    border-bottom-left-radius: 32px;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
}

#ke_search_sword {
   
    position: relative !important;
    top: 0px !important;
    width: 1%!important;
    height: 45px !important;
    padding: 0.5rem 1rem !important;
    margin: 0;
    display: block !important;
}

.search-section .input-group .btn { 
    height: 45px;
}

.video-background {
    position: absolute;
    top: 0;
    left: 50%;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 0;
    max-width: 2900px;
    overflow: hidden;
    transform: translateX(-50%);
    background: url("/fileadmin/admin/bilder/startseite/poster.jpg") no-repeat center center;
    background-size: cover;
}

/* Querformat: Poster soll 100vw x 100vh haben */
@media (orientation: landscape) {
    .video-background {
        background-size: 100vw 100vh;
        background-position: center center;
        /* Horizontal/vertikal ausrichten */
    }
}

/* Hochformat: Höhe 100vh, Breite auto */
@media (orientation: portrait) {
    .video-background {
        background-size: auto 100vh;
        background-position: left center;
        /* z.B. links ausrichten */
    }
}

@media (max-width: 991.98px) {
    .video-background {
        height: 85vh;
    }

    #page1 .header {
        height: 85vh;
    }

    .start-slider {
        height: 100% !important;
    }
}

@media (max-width: 767.98px) {
    .start-slider {
        max-width: 540px;
    }
}

@media (max-width: 575.98px) {
    .swiper-teaser {
        display: none;
    }
}

/* STARTANIM */

.startanim {
    position: absolute;
    inset: 0;
    background: var(--bs-primary);
    scale: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999999;
}

.startanim-logo {
    opacity: 0;
    width: 300px;
    height: auto;
}

/* SWIPER */

.start-slider {
    position: absolute;
    display: flex;
    flex-direction: column;
    inset: 0;
    max-width: 1600px;
    height: 100vh;
    justify-content: flex-end;
    padding-bottom: 2rem;
    overflow: hidden;
}

.start-slider .swiper-wrapper {
    height: max-content;
    overflow: hidden;
}

.start-slider .swiper-slide {
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(12, calc(8.3333% - 6.875px));
    grid-column-gap: 7.5px;
    grid-row-gap: 7.5px;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}

.start-slider .swiper-slide .swiper-slide-txt {
    overflow: hidden;
    grid-column: 1 / 5;
    display: flex;
    flex-direction: column-reverse;
    align-items: self-start;
    justify-content: flex-end;
    font-family: var(--bs-font-headline);
    color: var(--bs-white);
    gap: 2rem;
}

.start-slider .swiper-slide-txt p {
    font-size: 1.2rem;
    text-shadow: 0px 0px 3px rgba(10, 35, 59, 1);
}

.start-slider .swiper-slide-txt .h2 {
    text-shadow: 0px 0px 3px rgba(10, 35, 59, 1);
}

.start-slider .swiper-slide .swiper-content {
    grid-column: 7 / 13;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.start-slider .swiper-teaser {
    display: grid;
    grid-template-columns: repeat(12, calc(8.3333% - 13.875px));
    grid-column-gap: 15px;
    grid-row-gap: 0;
    border-radius: var(--bs-border-radius);
    background: rgba(var(--bs-primary-rgb), var(--bs-card-opacity));
    padding: 1rem;
}

.start-slider .swiper-img {
    grid-column: 1 / 5;
}

.start-slider .swiper-txt {
    grid-column: 5 / 13;
}

.start-slider .swiper-img img {
    border-radius: var(--bs-mini-border-radius);
}

.start-slider .swiper-teaser .swiper-txt {
    margin: 0;
}

.start-slider .swiper-teaser .swiper-txt p {
    line-height: 1.4;
    font-size: 1.125rem;
    text-shadow: 0px 0px 3px rgba(10, 35, 59, 1);
    margin-bottom: 0;
}

.start-slider .swiper-teaser:hover {
    text-decoration: none;
}

.start-slider .swiper-pagination {
    position: relative;
    top: inherit !important;
    left: inherit !important;
    right: inherit !important;
    bottom: inherit !important;
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
    display: flex;
    align-items: end;
    gap: 0.5rem;
    padding-bottom: 2rem;
    height: 100px;
}

.start-slider .swiper-pagination-bullet {
    width: 20px;
    height: 20px;
    background: var(--bs-secondary);
    border-radius: 20px;
    margin: 0 !important;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    position: relative;
}

.start-slider .swiper-pagination-bullet-active {
    height: 40px;
}

.start-slider .swiper-pagination-bullet-active::after {
    content: '';
    width: 5px;
    height: 5px;
    background: var(--bs-primary);
    border-radius: 100%;
    display: block;
    position: absolute;
    top: 7.2px;
    left: 7px;
    opacity: 0.5;
}

.teaser-mymart .swiper-teaser {
    display: flex;
    border-radius: var(--bs-border-radius);
    background: var(--bs-primary);
    padding: 1rem;
    flex-wrap: wrap;
}

.teaser-mymart .swiper-teaser img {
    border-radius: var(--bs-border-radius);
}

.teaser-mymart .swiper-teaser p {
    margin-bottom: 0;
}


/* Hamburger Menu Animation */

.hamburger-toggle span {
    transition: all 0.3s ease;
    transform-origin: center;
}
/* When menu is open (not collapsed) - transform to X */
.navbar-toggler:not(.collapsed) .hamburger-toggle span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 6px);
}

.navbar-toggler:not(.collapsed) .hamburger-toggle span:nth-child(2) {
    opacity: 0;
}

.navbar-toggler:not(.collapsed) .hamburger-toggle span:nth-child(3) {
    transform: rotate(-45deg) translate(8px, -6px);
}

@media (min-width: 1400px) and (max-width: 1649.98px) {
    .start-slider {
        max-width: 1320px;
    }
}

@media (max-width: 1649.98px) {
    .start-slider {
        max-width: 1320px;
    }

    .start-slider .swiper-slide .swiper-content {
        grid-column: 6 / 13;
    }
}

@media (max-width: 1399.98px) {
    .start-slider {
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {
    .start-slider {
        max-width: 960px;
    }
}

@media (max-width: 991.98px) {
    .start-slider {
        height: 80vh;
        max-width: 720px;
    }

    .start-slider .swiper-slide .swiper-slide-txt {
        grid-column: 1 / 13;
        gap: 0;
    }

    .start-slider .swiper-slide .swiper-content {
        grid-column: 1 / 13;
    }
}

@media (max-width: 767.98px) {
    .start-slider {
        max-width: 540px;
    }
}

@media (max-width: 575.98px) {
    .start-slider .swiper-teaser {
        display: none;
    }
}

/* HEADER-BILDER & CAROUSEL-ITEMS */

.header-txt {
    position: absolute;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    inset: 0;
    padding-bottom: 3rem;
    display: flex;
    justify-content: flex-end;
    height: 100%;
    flex-direction: column;
}

.header-txt h1 {
    text-shadow: 0px 0px 3px rgba(10, 35, 59, 1);
    padding-right: calc(1.5rem * .5);
    padding-left: calc(1.5rem * .5);
}

@media (min-width: 1400px) and (max-width: 1649.98px) {
    .header-txt {
        max-width: 1320px;
    }
}

@media (max-width: 1649.98px) {
    .header-txt {
        max-width: 1320px;
    }
}

@media (max-width: 1399.98px) {
    .header-txt {
        max-width: 1140px;
    }
}

@media (max-width: 1199.98px) {
    .header-txt {
        max-width: 960px;
        padding-bottom: 1.275rem;
    }
}

@media (max-width: 991.98px) {
    .header-txt {
        max-width: 720px;
    }
}

@media (max-width: 767.98px) {
    .header-txt {
        max-width: 540px;
        padding-bottom: 1rem;
    }
}

@media (max-width: 575.98px) {
    .header-txt {
        width: 100%;
    }
}

/* BREADCRUMB */

.breadcrumb {
    background-color: var(--bs-gray-50);
    border-radius: var(--bs-border-radius);
    padding: 0.35rem 0.9rem;
    width: max-content;
}

.breadcrumb-item+.breadcrumb-item {
    padding-left: 1rem;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '\f105';
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font-size: 1rem;
    padding-right: 1rem;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-item.active {
    color: var(--bs-primary);
}

.breadcrumb-item a {
    color: var(--bs-body-color);
}

@media (max-width: 767.98px) {

    .breadcrumb-item a,
    .breadcrumb-item.active {
        font-size: 1rem;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        padding-right: 0.75rem;
    }

    .breadcrumb-item+.breadcrumb-item {
        padding-left: 0.75rem;
    }
}

@media (max-width: 575.98px) {
    .breadcrumb {
        display: none;
    }
}

/* KACHEL SWIPER */

.swiper-kachel {
    overflow: visible;
    display: flex;
    flex-direction: column-reverse;
    align-items: end;
    gap: 2rem;
    margin-bottom: 5em;
}

.swiper-kachel .swiper-arrows {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.swiper-prev,
.swiper-next {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-primary);
    color: var(--bs-white);
    border-radius: var(--bs-mini-border-radius);
}

.swiper-prev:hover,
.swiper-next:hover {
    background: var(--bs-secondary);
    color: var(--bs-primary);
}

.swiper-prev i,
.swiper-next i {
    font-size: 1rem;
}

/* FULL BG SECTION STARTSEITE */

.parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 150%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50% -100px;
    z-index: 0;
}

/* .bg-overlay:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-black);
    opacity: 0.2;
    z-index: 1;
} */

.text-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
}

.text-overlay .container {
    font-optical-sizing: auto;
}

.enable .animateType {
    overflow: hidden;
    /* Ensures the content is not revealed until the animation */
    white-space: normal;
    /* Keeps the content on a single line */
    margin: 0 0;
    /* Gives that scrolling effect as the typing happens */
    letter-spacing: normal;
    animation: smoothFadeIn 1.5s ease-out 1 both;
}

.sorglos h2 {
    color: var(--bs-white);
    text-shadow: 0px 0px 3px rgba(10, 35, 59, 1);
}

.hslider .sorglos {
    padding-top: 18rem;
    padding-bottom: 5rem;
}

.hslider .card {
    border: 2px solid var(--bs-white);
    transition: border .3s ease;
}

.hslider .card:hover {
    border: 2px solid var(--bs-secondary);
}

.hslider .card .card-img-overlay i {
    color: var(--bs-white) !important;
    text-decoration: none !important;
    transition: color .3s ease;
}

.hslider .card:hover .card-img-overlay i {
    color: var(--bs-secondary) !important;
}

/* TEASER IMG */
.card {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: ;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: 0;
    --bs-card-border-color: transparent;
    --bs-card-border-radius: var(--bs-border-radius);
    --bs-card-box-shadow: none;
    --bs-card-inner-border-radius: (var(--bs-border-radius));
    --bs-card-cap-padding-y: 0.5rem;
    --bs-card-cap-padding-x: 1rem;
    --bs-card-cap-bg: rgba(var(--bs-body-color-rgb), 0.03);
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-body-bg);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    color: var(--bs-white);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border: none;
    border-radius: var(--bs-border-radius);
}

.card-img {
    position: relative;
}

.card-img .card::after {
    content: '';
    background: unset;
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: var(--bs-border-radius);
}

.card-img .card-img-overlay {
    position: absolute;
    top: inherit;
    right: inherit;
    bottom: 0;
    left: inherit;
    z-index: 99;
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.8) 0%, rgba(var(--bs-primary-rgb), 0.7) 30%, rgba(var(--bs-primary-rgb), 0.6) 60%, rgba(var(--bs-primary-rgb), 0) 100%);
    padding: 1rem 2rem;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    width: 100% !important;
}

.card-img.cy .card-img-overlay {
    position: absolute;
    z-index: 99;
    background: rgba(var(--bs-primary-rgb), 0.4);
    padding: 1rem 2rem;
    border-radius: var(--bs-border-radius);
    width: 100% !important;
    height: 100% !important;
}

.card-img .card-header,
.card .card-header {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.card-img.menu .card-header {
    gap: 0;
}

a:hover .card-img.menu .card-img-overlay {
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 1) 0%, rgba(var(--bs-primary-rgb), 1) 100%) !important;
}

a .card-img .card-header .h5 {
    transition: all 0.3s ease !important;

}

a:hover .card-img .card-header .h5 {
    color: var(--bs-secondary) !important;
    text-decoration: none !important;
}

.swiper-kachel .card-img .card-header,
.swiper-kachel .card .card-header {
    gap: 1rem;
}

.card-img .card-header i {
    font-size: 1.775rem;
}

.card-img .card-img,
.card-img .card-img-top {
    border-radius: var(--bs-border-radius);
}

.card-img::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--bs-border-radius);
    pointer-events: none;
    /*background: rgba(var(--bs-primary-rgb), var(--bs-card-opacity-light));*/
}

.card-img .card-body {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    height: 0;
    opacity: 0;
}

.card {
    background: rgba(var(--bs-primary-rgb), 0.5);
    padding: 1.25rem;
    height: 100%;
    transition: all 0.3s ease;
}

.card:hover {
    background: rgba(var(--bs-primary-rgb), 1);
}

.flex-box .card {
    height: 100% !important;
}

.card .card-img-overlay {
    position: relative;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.card i {
    font-size: 1.5rem;
}

.card .card-header i {
    font-size: 2.575rem;
}

.card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.card .card-body i {
    align-self: end;
}

.card-header {
    background: none !important;
}

.card .card-body .card-text {
    margin-top: 1.275rem;
}

a .card .card-img-overlay,
a .card .card-img-overlay h4,
a .card .card-img-overlay h5,
a .card .card-img-overlay p {
    transition: all 0.3s ease;
}

a .card .card-img-overlay h4 {
    font-size: 1.475rem;
}

@media (max-width: 991.98px) {
    .card-img .card-body {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        height: 100%;
        opacity: 1;
    }
}

/* FLEXBOX */

.flex-box.even>* {
    flex: 1;
}

/* GRIDBOX */

.grid-box.one-items-xxl {
    grid-template-columns: repeat(1, 1fr);
}

.grid-box.two-items-xxl {
    grid-template-columns: repeat(2, 1fr);
}

.grid-box.three-items-xxl {
    grid-template-columns: repeat(3, 1fr);
}

.grid-box.four-items-xxl {
    grid-template-columns: repeat(4, 1fr);
}

.grid-box.five-items-xxl {
    grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 1399.98px) {
    .grid-box.one-items-xl {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-box.two-items-xl {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-box.three-items-xl {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-box.four-items-xl {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-box.five-items-xl {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 1199.98px) {
    .grid-box.one-items-lg {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-box.two-items-lg {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-box.three-items-lg {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-box.four-items-lg {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-box.five-items-lg {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 991.98px) {
    .grid-box.one-items-md {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-box.two-items-md {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-box.three-items-md {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-box.four-items-md {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-box.five-items-md {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 767.98px) {
    .grid-box.one-items-sm {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-box.two-items-sm {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-box.three-items-sm {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-box.four-items-sm {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-box.five-items-sm {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 575.98px) {
    .grid-box.one-items {
        grid-template-columns: repeat(1, 1fr);
    }

    .grid-box.two-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid-box.three-items {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-box.four-items {
        grid-template-columns: repeat(4, 1fr);
    }

    .grid-box.five-items {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* COMPANY */

.company .company-text-grid {
    display: grid;
    grid-template-rows: repeat(2, 1fr);
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    align-items: center;
}

.company .company-person-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* NUMMER */

.number-text p.text {
    hyphens: auto;
}

.number-text.text-big h3 {
    font-size: 3rem;
    font-weight: 600;
}

/* ANSPRECHPARTNER BOX */

.author-box {
    position: relative;
    border-radius: var(--bs-border-radius);
}

.author-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.8) 0%, rgba(var(--bs-primary-rgb), 0.7) 30%, rgba(var(--bs-primary-rgb), 0.6) 60%, rgba(var(--bs-primary-rgb), 0) 100%);
    border-radius: var(--bs-border-radius);
}

.author-con {
    display: flex;
    justify-content: start;
    gap: 1rem;
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    height: 0;
    opacity: 0;
}

.author-con i {
    font-size: 1.5rem;
    color: var(--bs-secondary);
}

.author-box img {
    border-radius: var(--bs-border-radius);
}

.author-heading h5 {
    color: var(--bs-secondary);
}

.author-content p {
    color: var(--bs-white);
}

.author-contact i {
    font-size: 1.875rem;
    transition: 0.3s color ease;
}

.author-contact i:hover {
    color: var(--bs-white);
}

.frame-type-html iframe {
    border-radius: var(--bs-border-radius);
}

@media (max-width: 1199.98px) {
    .company .company-text-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(1, 1fr);
        margin-bottom: 2rem;
    }
}

@media (max-width: 991.98px) {}

@media (max-width: 767.98px) {
    .company .company-person-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575.98px) {
    .company .company-person-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .author-info {
        padding: 1rem;
    }
}

/* TABLE */

.ce-table tr:first-child {
    background-color: var(--bs-secondary);
}

.ce-table tr:first-child td {
    color: var(--bs-primary);
    border: none;
    font-weight: 600;
}

.ce-table tr td {
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-gray-500);
}

.ce-table tr:nth-child(even) td {
    color: var(--bs-body-color);
    border-top: 1px solid var(--bs-gray-500);
}



/* ACCORDION */

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--bs-body-bg);
    --bs-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--bs-secondary);
    --bs-accordion-border-width: var(--bs-border-width);
    --bs-accordion-border-radius: var(--bs-border-radius);
    --bs-accordion-inner-border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width)));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--bs-primary-text-emphasis);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle);
}

.accordion-button {
    font-size: 1.2rem;
    padding: 1.2rem 2rem;
    font-weight: 500;
}

.accordion-button:not(.collapsed) {
    font-weight: 500;
    color: var(--bs-primary);
    background-color: var(--bs-secondary);
    box-shadow: none;
}

.accordion-button::after {
    content: '\2b';
    font: var(--fa-font-solid);
    color: var(--bs-primary);
    background-image: none;
    transform: none;
}

.accordion-button:not(.collapsed)::after {
    content: '\f068';
    font: var(--fa-font-solid);
    background-image: none;
    transform: none;
}

.accordion-body {
    padding: 1.2rem 2rem;
}

/* MODAL */

.modal-container img {
    border-radius: var(--bs-border-radius);
}

.modal-container .video-btn {
    width: 100px;
    height: 100px;
    background: rgba(var(--bs-primary-rgb), var(--bs-card-opacity));
    border-radius: var(--bs-border-radius);
}

.modal-container .video-btn i {
    color: var(--bs-secondary);
    font-size: 2rem;
}

.modal-content {
    border: 5px solid var(--bs-secondary);
}

.modal-header {
    border-bottom: 1px solid var(--bs-secondary);
}

/* TESTIMONIAL */

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

/* FOOTER */

.footer-top {
    align-items: center;
}

.footer-contact-list {
    text-decoration: none;
    list-style: none;
}

.footer-contact-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.footer-contact-item i {
    border-radius: 100%;
    background: var(--bs-secondary);
    color: var(--bs-white);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
}

.footer-contact-item a {
    font-size: 1rem;
    font-family: var(--bs-font-headline);
    color: var(--bs-white);
}

.footer-contact-item a:hover {
    color: var(--bs-secondary)
}

.btn-social:hover {
    color: var(--bs-white);
}

.footer-quicklinks-list {
    text-decoration: none;
    list-style: none;
    display: flex;
    gap: 2rem;
}

.footer-quicklinks-list a {
    font-family: var(--bs-font-headline);
    color: var(--bs-white);
    font-size: 1.3rem;
}

.footer-quicklinks-list a:hover {
    color: var(--bs-secondary);
}

.footer-partner {
    border-top: 1px solid var(--bs-primary-border-color);
    border-bottom: 1px solid var(--bs-primary-border-color);
    padding: 3rem 0 2rem 0;
    margin: 1rem 0rem 2rem 0rem;
    display: grid;
    grid-template-columns: repeat(12, calc(8.3333% - 6.875px));
    grid-column-gap: 7.5px;
    grid-row-gap: 7.5px;
}

.footer-partner-txt {
    grid-column: 1 / 6;
}

.footer-partner-logo {
    grid-column: 6 / 13;
}

.footer-partner ul {
    list-style: none;
    justify-content: end;
}

.footer-imprint p,
.footer-imprint a {
    color: var(--bs-gray-400);
    font-family: var(--bs-font-headline);
    font-size: 0.9rem;
}

.footer-imprint a:hover {
    color: var(--bs-white);
}

.actions {
    bottom: 12px;
    right: 10px;
    z-index: 1002;
}

.actions i {
    font-size: 1.575rem;
    color: var(--bs-secondary);
}

.actions .cookie,
.actions .totop {
    cursor: pointer;
}

.actions .totop {
    display: none;
}

footer .addinfo {
    color: var(--bs-gray-400);
    font-size: .9rem;
}


/* powermail_fieldset */
.powermail_fieldwrap>div {
    position: relative;
}

.tx-powermail .row+.row {
    margin-block-start: 1.875rem;
}

.powermail_fieldset .control-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.powermail_fieldset .powermail-errors-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0.5rem;
    color: var(--bs-danger);
    position: absolute;
    top: -28px;
    left: 17px;
    font-size: .95rem;
}

.powermail_fieldset .powermail_input,
.powermail_fieldset .powermail_textarea {
    width: 100%;
    height: 46px;
    border-radius: 32px;
    padding: 0.5rem 1rem;
    font-size: 1.2rem;
    border: 1px solid var(--bs-gray-200);
    transition: border-color .3s ease, box-shadow .3s ease;
    background-color: var(--bs-gray-100);
}

.powermail_fieldset .powermail_textarea {
    height: auto;
    min-height: 190px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.powermail_fieldset .powermail_input:focus,
.powermail_fieldset .powermail_textarea:focus {
    border-color: var(--bs-secondary);
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    outline: none;
    background-color: var(--bs-white);
}

.powermail_field_error.powermail_input,
.powermail_field_error.powermail_textarea {
    border-color: var(--bs-danger);
}

.powermail_field_error.powermail_input:focus,
.powermail_field_error.powermail_textarea:focus {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
    outline: none;
    background-color: var(--bs-white);
}

.powermail_fieldset input::placeholder,
.powermail_fieldset textarea::placeholder {
    opacity: 0.7;
    font-size: 1.075rem;
}

#c662 .tx-powermail .powermail_fieldset_6 .row:first-child,
#c662 .tx-powermail .powermail_fieldset_6 .row:nth-child(2),
.tx-powermail .powermail_fieldset_6 .row:nth-child(3) {
    margin-block-start: 0 !important;
}

/* Checkbox */
.form-check.powermail_checkwrap {
    padding-left: 17px;
}

.checkbox-wrapper-51 input[type="checkbox"],
.checkbox-wrapper-51 input[type="radio"] {
    visibility: hidden;
    display: none;
}

.checkbox-wrapper-51 .toggle {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transform: translate3d(0, 0, 0);
    font-size: 1.075rem;
}

.checkbox-wrapper-51 .toggle:before {
    content: "";
    position: relative;
    top: 1px;
    left: 1px;
    width: 40px;
    height: 22px;
    display: block;
    background: var(--bs-gray-200);
    border-radius: 12px;
    transition: background 0.2s ease;
    margin-bottom: 1rem;
}

.checkbox-wrapper-51 .toggle span {
    position: absolute;
    top: -1px;
    left: 0;
    width: 24px;
    height: 24px;
    display: block;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(154, 153, 153, 0.75);
    transition: all 0.2s ease;
}

.checkbox-wrapper-51 .toggle span svg {
    margin: 2px 7px 7px 7px;
    fill: none;
}

.checkbox-wrapper-51 .toggle span svg path {
    stroke: var(--bs-gray-300);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 0;
    transition: all 0.5s linear;
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle:before,
.checkbox-wrapper-51 input[type="radio"]:checked+.toggle:before  {
    background: var(--bs-secondary);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle span,
.checkbox-wrapper-51 input[type="radio"]:checked+.toggle span {
    transform: translateX(18px);
}

.checkbox-wrapper-51 input[type="checkbox"]:checked+.toggle span path,
.checkbox-wrapper-51 input[type="radio"]:checked+.toggle span path {
    stroke: #52d66b;
    stroke-dasharray: 25;
    stroke-dashoffset: 25;
}

.image-hover-wrapper {
    position: relative;
}

.image-hover-btn {
    width: 48px;
    height: 48px;
    background: var(--bs-secondary);
    color: var(--bs-white);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* show icon on hover */
.image-hover-wrapper:hover .image-hover-btn {
    opacity: 1;
    pointer-events: auto;
}

/* make inner icon inherit sizing/color */
.image-hover-btn i {
    color: inherit;
    font-size: 1.05rem;
}

/* ensure anchor occupies image area */
.mfp-link {
    display: block;
}

.play-icon-hover i {
    font-size: 5.5rem !important;
    transition: all 0.3s ease !important;
}

.play-icon-hover:hover i {
    font-size: 6.5rem !important;
}

.play-icon-hover i::before {
    background-color: var(--bs-white) !important;
    border-radius: 50% !important;
    border: 3px solid var(--bs-white);
}

.yacht-details {
    border-radius: var(--bs-border-radius, 12px);
    background: rgba(var(--bs-primary-rgb), var(--bs-card-opacity));
    display: flex;
    padding: 16px;
    margin-bottom: 3rem;
}

.yacht-details h3 {

    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    /* 125% */
    color: var(--bs-white) !important;
}

/* -> Ersetzt die vorherige Grid-Implementierung für .yacht-details table/tbody/tr.
   Ziel: tr nebeneinander (Pills), td vertikal gestapelt, kein Abstand zwischen den beiden td. */
.yacht-details table {
    width: 100%;
    max-width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    float: right;
}

.yacht-details tbody {
    margin: 0;
    padding: 0;
}

.yacht-details tr {
    margin: 0;
    padding: 0;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* Zellen-Styling */
.yacht-details td {
    background: var(--bs-primary) !important;
    color: var(--bs-white) !important;
    padding: 0.5rem .8rem;
    font-size: 16px !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(var(-bs-white), 0.3) !important;
    margin: 0;
    line-height: 1;
}

.yacht-details td:first-child {
    text-align: left;
}

.yacht-details tr td:last-child {
    padding-left: .4rem !important;
}

.yacht-details tr:first-child td:first-child {
    border-top-left-radius: var(--bs-mini-border-radius);
    border-top-right-radius: 0;
}

.yacht-details tr:first-child td:last-child {
    border-top-right-radius: var(--bs-mini-border-radius);
    border-top-left-radius: 0;
}

.yacht-details tr:last-child td:first-child {
    border-bottom-left-radius: var(--bs-mini-border-radius);
    border-bottom-right-radius: 0;
    border-bottom: 1px solid transparent !important;
}

.yacht-details tr:last-child td:last-child {
    border-bottom-right-radius: var(--bs-mini-border-radius);
    border-bottom-left-radius: 0;
    border-bottom: 1px solid transparent !important;
}

.yacht-details tr td {
    border-bottom: 1px solid var(--bs-gray-600) !important;
    border-top: 1px solid transparent !important;
}

.inklusive-extras {
    column-count: 2;
    column-gap: 1rem;
    column-fill: balance;
}

.yoo .inklusive-extras {
    column-count: unset;
    column-gap: unset;
    column-fill: unset;
}

/* Sorge, dass nach h4 kein Spaltenumbruch erfolgt (h4 + folgendes ul bleiben zusammen) */
.inklusive-extras>h4 {
    break-after: avoid-column;
    margin: 0 0 .25rem 0;
    page-break-after: avoid;
}

/* Verhindere das Teilen der UL innerhalb einer Spalte */
.inklusive-extras>ul {
    break-inside: avoid-column;
    margin: 0 0 1rem 0;
    padding-left: 1.25rem;
}

.charter .options h3,
.ymo .options h3,
.yoo .options h3,
.frame-type-table h4 {
    margin-bottom: 1rem;
}

.charter .options h4,
.ymo .options h4,
.yoo .options h4,
.frame-type-table h4 {
    margin-bottom: 1.5rem;
}

#saisonpreise .ce-table td:nth-child(2) {
    width: 200px;
}
.charter ul,
.ymo ul, 
.yoo ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2rem;
}
.charter ul li,
.ymo ul li,
.yoo ul li {
    line-height: 32px;
}
.charter ul li:before,
.ymo ul li:before,
.yoo ul li:before
 {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f138";
    color: #4ac8ed;
    margin-right: 9px;
}
.charter ul.powermail-errors-list li:before,
.ymo ul.powermail-errors-list li:before,
.yoo ul.powermail-errors-list li:before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f06a";
    margin-right: 6px;
    color: rgba(var(--bs-danger-rgb), 1)
}

.yacht-daten-block .ce-table tr:first-child, .ymo .ausstattung .ce-table tr:first-child, .yoo .ausstattung .ce-table tr:first-child {background-color: transparent !important;}
.yacht-daten-block .ce-table tbody tr:first-child td,.ymo .ausstattung .ce-table tbody tr:first-child td, .yoo .ausstattung .ce-table tbody tr:first-child td {background: transparent !important;color: var(--bs-body-color) !important; font-weight: 400;}

.ymo .motor-info-longdesc p,.ymo .option-info-longdesc p {margin-bottom: 0 !important;}
#scroll_preis .border-ymo {border-top: 1px solid var(--bs-secondary) !important; border-right: 1px solid var(--bs-secondary) !important; border-left: 0 !important; border-bottom: 0 !important;}
#scroll_preis .text-small {font-size: .925rem !important;}

/* Magnific Popup */
.mfp-iframe-holder .mfp-content {
    max-width: 1600px;
}

/* preis-tabelle */
.preis-tabelle {
    padding: 2rem 1.75rem 1.65rem 1.75rem !important;
    background: rgba(var(--bs-primary-rgb), var(--bs-card-opacity)) !important;
}

.preis-tabelle tr td{
    background-color: var(--bs-primary) !important;
    color: var(--bs-white) !important;
}

.preis-tabelle tr#summation:has(+ tr#summationoff) td {
    background-color: var(--bs-black) !important;
    color: var(--bs-white) !important;
}


.preis-tabelle tr#summationoff td{
    background-color: var(--bs-mymred) !important;
    color: var(--bs-white) !important;
}
/* Scroll-Preis-Leiste am unteren Rand */
/* Basis-Styling für #scroll_preis */
#scroll_preis.animate-on-load {
  animation: scrollPreisShow 360ms ease 150ms forwards;
}
@keyframes scrollPreisShow {
  from { transform: translateX(-110%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* Grid-Mode: alternative Layout für #scroll_preis - benutzt CSS Grid statt inline-flex */
/* --scroll-preis-height: Höhe des Preis-Balkens (kann per JS aktualisiert werden) */
#scroll_preis.grid-mode {
    /* Positionierung beibehalten */
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1050;
    box-sizing: border-box;
    display: grid;
    align-items: center;
    /* grid-template-columns wird responsive gesetzt weiter unten */
    overflow: hidden;
    /* Start außerhalb des Viewports nach links */
    transform: translateX(-120%);
    opacity: 0;
    transition: transform 320ms cubic-bezier(.22,.9,.31,1), opacity 220ms ease;
    /* Default width behaviour: let children / media queries control layout */
    width: 100%;
    max-width: none;
    /* Fallback-Höhe für footer padding (kann per JS präziser gesetzt werden) */
    --scroll-preis-height: 72px;
}

/* Inner wrapper: organisiert die Gruppen als grid container (direkte Grid-Items sind .group).
     Use .inner as the grid container so styles apply predictably (avoid display:contents). */
#scroll_preis.grid-mode .inner {
    display: grid;
    align-items: center;
    width: 100%;
}

/* Default desktop: auto-size columns for content, but limit overall width */
/* sichtbarer Zustand: Bar fährt ins Bild */
#scroll_preis.grid-mode.visible {
    transform: translateX(0);
    opacity: 1;
}

#scroll_preis.grid-mode .group {
    display: flex;
    justify-content: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0.5rem 1rem;
}

#scroll_preis.grid-mode .group:not(:last-child) {
    border-right: 1px solid rgba(var(--bs-white-rgb), 0.3);
}



/* KE search */

#page27 #kesearch_pagebrowser_top, 
#page27 #kesearch_pagebrowser_bottom {
    text-align: center;
    word-wrap: break-word;
    color: var(--bs-primary);
}

#page27 #kesearch_pagebrowser_top .pages_total,
#page27 #kesearch_pagebrowser_bottom .pages_total {
    padding: 8px 0;
    background: #fff;
    margin-bottom: 15px;
}

#page27 #kesearch_pagebrowser_top .pages_total {
    border-bottom: 1px solid rgba(var(--bs-primary-rgb), 0.5);
}

#page27 #kesearch_pagebrowser_bottom .pages_total {
    border-top: 1px solid rgba(var(--bs-primary-rgb), 0.5);
}

#page27 #kesearch_pagebrowser_top div.result_txt,
#page27 #kesearch_pagebrowser_bottom div.result_txt {
    margin: 0 0 5px 0;
}

#page27 #kesearch_pagebrowser_top .kesearch_pagebrowser,
#page27 #kesearch_pagebrowser_bottom .kesearch_pagebrowser {
    margin: 0 auto 0;
}

#page27 #kesearch_pagebrowser_top a,
#page27 #kesearch_pagebrowser_bottom a {
    padding: 3px;
}

#page27 #kesearch_pagebrowser_top a:hover,
#page27 #kesearch_pagebrowser_bottom a:hover {
    cursor: pointer;
}

#page27 #kesearch_pagebrowser_top a.current,
#page27 #kesearch_pagebrowser_bottom a.current {
    font-weight: bold;
    color: var(--bs-secondary);
    text-decoration: none;
}

#page27 #kesearch_pagebrowser_top .browser,
#page27 #kesearch_pagebrowser_bottom .browser {
    border: 1px solid;
}

.kesearch_pagebrowser ul {
    display: inline-flex !important;
    margin-top: .475rem !important;
}
.page-item:not(:first-child) .page-link {
    margin-left: calc(-1 * var(--bs-border-width));
}
.kesearch_pagebrowser .page-link {
    color: var(--bs-primary) !important;
}
.kesearch_pagebrowser ul li a {
    padding: .375rem .75rem !important;
}
.page-link {
    position: relative;
    display: block;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    font-size: var(--bs-pagination-font-size);
    color: var(--bs-pagination-color);
    text-decoration: none;
    background-color: var(--bs-pagination-bg);
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: color .15s 
        ease-in-out, background-color .15s 
        ease-in-out, border-color .15s 
        ease-in-out, box-shadow .15s 
        ease-in-out;
}

.active>.page-link, .page-link.active {
    z-index: 3;
    color: var(--bs-pagination-active-color);
    background-color: var(--bs-secondary);
    border-color: var(--bs-secondary);
}

.tx-kesearch-pi1 #kesearch_results .result-list-item {
    border-bottom: 1px solid var(--bs-gray-200) !important;

}

.tx-kesearch-pi1 #kesearch_results .result-list-item:last-child {
    border-bottom: unset !important;
}

#kesearch_results .result-list-item .result-title {
    font-size: 1.375em !important;
    color: var(--bs-secondary);
}

#kesearch_results .result-list-item .result-number {
    font-weight: 600 !important;
    font-size: 1.175em !important;
    color: var(--bs-primary) !important;
}
.tx-kesearch-pi1 #kesearch_results .result-list-item .add-info {
    margin-top: .5rem !important;
    font-size: .925em !important;
    text-align: end !important;
}
.tx-kesearch-pi1 #kesearch_results .result-list-item .add-info i {
    display: none !important;
} 


.tx-kesearch-pi1 #kesearch_results .result-list-item {
  /* named grid baseline */
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.5rem 1rem;
  align-items: start;
  grid-template-areas:
    "number title icon"
    "number teaser teaser"
    "addinfo addinfo addinfo";
  padding: 1rem 0;
}

/* map DOM elements to grid areas */
.tx-kesearch-pi1 #kesearch_results .result-list-item .result-number { grid-area: number; align-self: start; }
.tx-kesearch-pi1 #kesearch_results .result-list-item .result-title  { grid-area: title; align-self: center; }
.tx-kesearch-pi1 #kesearch_results .result-list-item .teaser_icon   { grid-area: icon; justify-self: end; align-self: start; }
.tx-kesearch-pi1 #kesearch_results .result-list-item .result-teaser { grid-area: teaser; }
.tx-kesearch-pi1 #kesearch_results .result-list-item .add-info     { grid-area: addinfo; justify-self: end; text-align: right; }

/* visual helpers */
.tx-kesearch-pi1 #kesearch_results .result-list-item { width: 100%; }
.tx-kesearch-pi1 #kesearch_results .result-list-item .result-number { font-weight:700; margin-right: .5rem; }

/* Preset: compact - single row if space allows (up to 6 cols behavior) */
.tx-kesearch-pi1 #kesearch_results .result-list-item.result-grid--compact {
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto;
  grid-template-areas: "number title icon";
}

/* Preset: alt - number left, info right, teaser below full width */
.tx-kesearch-pi1 #kesearch_results .result-list-item.result-grid--alt {
  grid-template-columns: 48px 1fr 240px;
  grid-template-rows: auto auto;
  grid-template-areas:
    "number title icon"
    "number teaser addinfo";
}

/* Responsive: mobile stack */
@media (max-width: 767.98px) {
  .tx-kesearch-pi1 #kesearch_results .result-list-item {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    grid-template-areas:
      "title"
      "teaser"
      "addinfo"
      "number";
    gap: .5rem;
  }
  .tx-kesearch-pi1 #kesearch_results .result-list-item .result-number { justify-self: start; }
  .tx-kesearch-pi1 #kesearch_results .result-list-item .add-info { text-align: left; }
}

/* utilities: allow per-item override via data-area attribute */
.tx-kesearch-pi1 #kesearch_results .result-list-item [data-grid-area] {
  grid-area: attr(data-grid-area);
}

/* Desktop (>=1200px): die Items sollen sich an ihrem Inhalt orientieren,
   bis zu einer max-Anzahl Spalten (z.B. 4), und rechts gibt's Platz für die price-box. */
@media (min-width: 1200px) {
  #scroll_preis.grid-mode {
      justify-content: start;
      width: auto;
      min-width: 320px; /* ausreichend für Buttons etc. */
      max-width: 100%;
  }
  /* apply sizing to the inner grid container so .group items become grid items */
  #scroll_preis.grid-mode .inner {
      grid-auto-flow: row; /* fill columns left-to-right, then wrap to next row if more items */
      grid-template-columns: repeat(6, max-content);
  }
}

/* Tighter desktop with many items: allow wrap into multiple rows if needed */
@media (min-width: 1400px) {
    /* for very wide viewports we can favor column-flow on the inner grid */
    #scroll_preis.grid-mode .inner {
        grid-auto-flow: column;
        grid-auto-columns: max-content;
    }
}

/* Tablet / narrow desktop: unter 1200px verteilen wir gleichmäßig */
/* Ziel: <=1199.98px sollen die Items gleichmäßig auf die Breite verteilt sein */
@media (max-width: 1199.98px) {
    #scroll_preis.grid-mode {
        width: 100%;
        left: 0;
        right: 0;
        border-radius: 0;
        /* Grid layout handled by .inner */
    }

    #scroll_preis.grid-mode .inner {
        grid-template-columns: repeat(3, 1fr);
        grid-auto-rows: auto;
        gap: 0.5rem;
    }

    /* Jede Gruppe (Item) zentriert ihren Inhalt */
    #scroll_preis.grid-mode .group {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0.1rem;
    }
}


/* RWL */
@media (max-width: 1649.98px) {
    .hslider .sorglos {padding-top: 12rem;padding-bottom: 6rem;}
    .swiper-kachel {margin-bottom: 3em;}

    #c667 .grid-box {grid-template-columns: repeat(6, minmax(0, 1fr));}
    #c667 .grid-box > a {grid-column: span 2; justify-self: center ;}
    #c667 .grid-box > a:nth-child(1) { grid-column: 2 / span 2; }
    #c667 .grid-box > a:nth-child(2) { grid-column: 4 / span 2; }
}

@media (max-width: 1399.98px) {
    #c69 {display: none;}

    .card-img .card-header,
    .card .card-header {
        gap: 1rem;
    }

    .hslider .sorglos {
        padding-top: 8rem;
        padding-bottom: 4rem;
    }

    .yacht-details {
        margin-bottom: 1.5rem;
    }

    .header-txt {
        padding-bottom: 1.5rem;
    }

    .inklusive-extras {
        column-count: 1;
    }
    #c667 .grid-box {grid-template-columns: repeat(6, minmax(0, 1fr));}
    #c667 .grid-box > a {grid-column: span 2; justify-self: center ;}
    #c667 .grid-box > a:nth-child(1) { grid-column: 2 / span 2; }
    #c667 .grid-box > a:nth-child(2) { grid-column: 4 / span 2; }
}

@media (max-width: 1199.98px) {
    .footer-top {
        flex-direction: column;
        gap: 2rem;
        align-items: self-start;
    }

    .footer-bottom {
        flex-direction: column-reverse;
        gap: 2rem;
    }

    .card-img .card-header,
    .card .card-header {
        gap: .5rem;
    }

    .ce-image .ce-gallery figure.image img {
        margin-bottom: 1rem !important;
    }

    #c69 {
        display: block;
    }

    #c60 {
        display: none;
    }

    .yacht-details {
        display: none;
    }

    .swiper-kachel {
        margin-bottom: 1em;
    }

    .inklusive-extras {
        column-count: 2;
        column-gap: 1rem;
    }
    #scroll_preis.grid-mode .group:nth-child(4) {
        padding-left: .5rem !important;
    }
    /* move footer and actions up by scroll-preis height */
    footer,
    footer.py-5  {
        padding-bottom: calc(12px + var(--scroll-preis-height)) !important;
    }
    .actions {
        bottom: calc(12px + var(--scroll-preis-height));
    }

}

@media (max-width: 991.98px) {
    .footer-contact-list {
        flex-direction: column;
    }

    .footer-contact-item i {
        width: 30px;
        height: 30px;
    }

    #page1 h1 {
        hyphens: auto;
    }

    #c667 .grid-box {grid-template-columns: repeat(2, 1fr);}
    #c667 .grid-box > a {grid-column: unset; justify-self: center;}
    #c667 .grid-box > a:nth-child(1) { grid-column: unset; }
    #c667 .grid-box > a:nth-child(2) { grid-column: unset; }

    .addinfo .vorfracht {margin-top: 0.25rem !important;}
    .teaser-link { color: rgba(var(--bs-white-rgb), 1) !important;  }
}

@media (max-width: 767.98px) {
    .footer-quicklinks-list {
        flex-direction: column;
    }

    .footer-partner {
        grid-row-gap: 2rem;
        margin: 2rem 0rem 3rem 0rem;
    }

    .footer-partner-txt,
    .footer-partner-logo {
        grid-column: 1 / 13;
    }

    .footer-partner ul {
        justify-content: space-between;
    }

    .footer-imprint {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

    .breadcrump-container {
        display: none;
    }

    .play-icon-hover i {
        font-size: 4rem !important;
        transition: all 0.3s ease !important;
    }

    .play-icon-hover:hover i {
        font-size: 5rem !important;
    }
    section.pb-5.pxs-4 > .container > .frame-type-header h2 {padding-top: 1.5rem !important;}

    #scroll_preis.grid-mode .group {
        display: block;
    }
}

@media (max-width: 575.98px) {
    .header-txt h1 {
        margin-bottom: .95rem;
    }

    .swiper-kachel {
        overflow: hidden;
    }

    section .pb-5 {
        padding-bottom: 1.5rem !important;
    }

    .breadcrump-container {
        display: none;
    }

    .pxs-4 {
        padding-top: 1rem !important;
    }

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

    .bg-gray {
        padding-top: 3rem;
    }

    .swiper-kachel {
        margin-bottom: 2em;
    }

    .lead2 {
        font-size: 1.275rem;
    }

    .start-slider {
        padding-bottom: .275rem !important;
    }

    .start-slider .h2 {
        margin-bottom: .5rem !important;
    }

    .start-slider .swiper-slide-txt p {
        margin-bottom: 0 !important;
    }

    .start-slider .swiper-slide .swiper-slide-txt {
        flex-direction: column;
    }

    .start-slider .swiper-wrapper {
        background: linear-gradient(to top, rgba(var(--bs-primary-rgb), 0.6) 0%, rgba(var(--bs-primary-rgb), 0.6) 70%, rgba(var(--bs-primary-rgb), 0.3) 85%, rgba(var(--bs-primary-rgb), 0.01) 100%);
    }

    .play-icon-hover i {
        font-size: 3.5rem !important;
        transition: all 0.3s ease !important;
    }

    .play-icon-hover:hover i {
        font-size: 4.5rem !important;
    }

    #saisonpreise .ce-table td:nth-child(2) {
        width: 200px;
    }
    section.pb-5.pxs-4 > .container > .frame-type-header h2 {padding-top: 0 !important;}
    
    .card-body .card-text {
        font-size: 0.875rem !important;
    }
    .preis-tabelle tr td{
        font-size: 0.875rem !important;
    }
}

/* Optional: kleinere Bildschirme 1 Spalte */
@media (max-width: 767.98px) {
    .inklusive-extras {
        column-count: 1;
    }
}