@import "fonts.css";

.tm-header-overlay .uk-navbar-container {
    background: linear-gradient(rgba(0, 0, 0, 0.47) 0%, rgba(0, 0, 0, 0) 100%);
    border-radius: 11px 11px 0 0;
}

.uk-navbar-container {
    background-color: #f7f7f7;
    margin-bottom: 20px;
    border-radius: 11px;
}

.uk-navbar-container:not(.uk-navbar-transparent) {
    background-color: #f7f7f7;
}



.uk-drop.uk-open {
    max-height: 600px;
    border-radius: 11px;
}


body main:before {
    content: ""; /* Das muss auch hier sein! */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(120vh - 10px);
    background-color: rgba(0,0,0,0.8);
    z-index: 9;
    border-radius: 11px;
    opacity: 0;
    pointer-events: none; /* Wichtig: damit es nicht klickbar ist wenn unsichtbar */
    transition: all 0.3s;
}

body.vd-active main:before {
    opacity: 1;
    pointer-events: auto; /* Jetzt wieder klickbar */
}


.uk-navbar-toggle-icon svg {
    width: 31px;
    height: 31px;
}
.uk-nav-default > li > a {
    border-bottom: solid 3px #fff;
    padding: 12px 0;
}
.uk-nav-default > li:first-child > a {
    border-top: solid 3px #fff;
}
.uk-nav-default > li.uk-active > a {
    background: url(../images/icon_arrow-right-small.svg) no-repeat left center;
    background-size: 20px;
    padding-left: 30px;

}
.home .uk-nav-default > li > a {
    color: #fff;
}

.uk-section,
.uk-section > .uk-position-cover {border-radius: 11px;}

.uk-section:not(:first-child) {margin-top: 20px;}

.uk-tile, .uk-tile-muted {
    border-radius: 11px;
}





.uk-heading-small {
    font-size: clamp(2.2250rem, 1.1285rem + 4.7887vw, 6.8750rem);
    line-height: 1.1;
}
h1, .uk-h1 {
    font-size: clamp(1.8750rem, 0.4225rem + 4.6479vw, 6.0000rem);
}
h2, .uk-h2 {
    font-size: clamp(1.8750rem, 1.1488rem + 2.3239vw, 3.9375rem);
}
h3, .uk-h3 {
    font-size: clamp(1.7500rem, 1.3099rem + 1.4085vw, 3.0000rem);
}
h4, .uk-h4 {
    font-size: clamp(1.5000rem, 1.2359rem + 0.8451vw, 2.2500rem);
}
h5, .uk-h5 {
    font-size: clamp(1.3125rem, 1.1144rem + 0.6338vw, 1.8750rem);
}
h6, .uk-h6 {
    font-size: clamp(1.1250rem, 0.9930rem + 0.4225vw, 1.5000rem);
}

.mw-xl {
    max-width: 86%;
    margin-left: auto;
    margin-right: auto;
}
.uk-section-primary:not(.uk-preserve-color) .uk-breadcrumb>:last-child>*,
.uk-light .uk-breadcrumb>:last-child>* {
    color: #fff;
    font-weight: 600;
}

.vd-small-padding .uk-tile,
.vd-small-padding .uk-padding {
    padding: 75px 50px;
}
.vd-no-padding-tile .uk-tile {
    padding: 60px 50px;
}




.vd-slider-home {}
.vd-slider-home > *  {
    min-height: calc(100vh - 40px);
}
.vd-slider-home .uk-slidenav-container {
    max-width: 1680px;
    width: 100%;
    margin: 0 auto;
    left: 0;
    display: flex;
    justify-content: end;
    bottom: 80px;
    z-index: 9;
}
.vd-slider-home .uk-slideshow > * {
    min-height: calc(100vh - 40px);
    max-height: calc(100vh - 40px);
}

.uk-slidenav svg {
    display: none;
}
.uk-slidenav {
    width: 65px;
    height: 65px;
    transition: all 0.3s;
}
.uk-slidenav-previous {
    background: url(../images/icon_arrow-left.svg) no-repeat center;
}
.uk-slidenav-next {
    background: url(../images/icon_arrow-right.svg) no-repeat center;
}
.uk-slidenav-previous:hover {
    transition: all 0.3s;
    transform: translate(-10px, 0);
}
.uk-slidenav-next:hover {
    transition: all 0.3s;
    transform: translate(10px, 0);
}




.vd-highlight-grid {
    padding-top: 30px;
    padding-bottom: 30px;
}
.vd-highlight-grid .uk-container {
}
.vd-highlight-grid .uk-card {
    padding: var(--vd-padding);
}
.vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(1) .uk-card {
    padding-left: 0;
}
.vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(3) .uk-card {
    padding-right: 0;
}


:root {

    --vd-padding: clamp(10px,
    calc(10px + (100 - 10) * ((100vw - 960px) / (1920 - 960))),
    100px);

}

.vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(1){
    padding-right: 0;
    width: calc((100% - (4 * var(--vd-padding))) / 3 + var(--vd-padding));
}
.vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(2){
    padding-right: 0;
    width: calc((100% - (4 * var(--vd-padding))) / 3 + 2 * var(--vd-padding));
    border-left: 2px solid #fff;
    border-right: 2px solid #fff;
}
.vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(3){
    padding-right: 0;
    width: calc((100% - (4 * var(--vd-padding))) / 3 + var(--vd-padding));
}






.vd-icon-grid .uk-panel {
    padding: var(--vd-padding) 30px;
}





.vd-cta-large {}
.vd-cta-large .el-item a:before,
.vd-cta-small .el-item a.uk-inline-clip:before {
    content: "";
    width: 99px;
    height: 99px;
    background: url(../images/cta-big_bg.svg) no-repeat center;
    position: absolute;
    bottom: 0;
    right: 0;
    display: block;
    z-index: 1;
}
.vd-cta-large .el-item a:after,
.vd-cta-small .el-item a.uk-inline-clip:after {
    content: "";
    width: 63px;
    height: 63px;
    background: url(../images/cta-big_arrow.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    bottom: 1px;
    right: 0;
    display: block;
    z-index: 2;
    transform: rotate(-45deg);
    transition: all 0.3s;
}
.vd-cta-large .el-item a:hover:after,
.vd-cta-small .el-item a.uk-inline-clip:hover:after{
    transform: rotate(0deg);
    transition: all 0.3s;
}

.vd-cta-large a.uk-inline-clip,
.vd-cta-small a.uk-inline-clip {
    border-radius: 11px 11px 0 11px;
}

.vd-cta-small .el-item a.uk-inline-clip:before {
    width: 61px;
    height: 61px;
    background: url(../images/cta-small_bg.svg) no-repeat center;
}
.vd-cta-small .el-item a.uk-inline-clip:after {
    width: 35px;
    height: 35px;
    background: url(../images/cta-small_arrow.svg) no-repeat center;
}




.vd-hide-desc .el-content {
    max-height: 0px;
    opacity: 0;
    transition: max-height 0.6s, opacity 0.7s;
    overflow: hidden;
}
.vd-hide-desc .el-item:hover .el-content {
    max-height: 120px;
    opacity: 1;
    transition: max-height 0.6s, opacity 0.7s;
}


.reisen-teaser-image picture {
}
.reisen-teaser-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 9/10;
}

.reisen-teaser-wrapper {
    padding-bottom: 30px;
}
.reisen-teaser-status {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #83BC43;
    color: #ffffff;
    font-size: 14px;
    padding: 5px 10px 3px;
    border-radius: 4px;
    font-weight: 500;
}
.reisen-teaser-status.status-wenig {
    background-color: #dda32d;
}
.reisen-teaser-status.status-ausgebucht {
    background-color: #BC4343;
}


.vd-content h2 {
 font-size: 48px;
}
.vd-content h3 {
 font-size: 30px;
}



@media (min-width: 960px) {
    .uk-container {
        padding-left: var(--vd-padding);
        padding-right: var(--vd-padding);
    }
}
@media (min-width: 1200px) {
    .uk-padding {
        padding: var(--vd-padding);
    }
}
@media (min-width: 960px) {
    .uk-tile {
        padding-left: var(--vd-padding);
        padding-right: var(--vd-padding);
    }

}


@media (max-width: 1200px) {
    .uk-section-small {
        padding-top: 70px;
        padding-bottom: 70px;
    }
}

@media (max-width: 960px) {
    body {
        border: solid 5px #fff;
    }
    .uk-text-large {
        font-size: 18px;
    }
    .vd-slider-home > *  {
        min-height: calc(100vh - 20px);
    }

    .vd-slider-home .uk-slideshow > * {
        min-height: calc(100vh - 10px);
        max-height: calc(100vh - 10px);
    }
    .vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(1),
    .vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(2),
    .vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(3) {
        width: 100%;
        border-left: 0;
        border-right: 0;
    }
    .vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(2) {
        border-top: 3px solid #fff;
        border-bottom: 3px solid #fff;
    }
    .vd-highlight-grid .uk-width-1-1 .uk-grid > *:nth-of-type(2) > *{
        padding: 40px 0;
    }
    .uk-section:not(:first-child) {
        margin-top: 10px;
    }
    .uk-section-xsmall {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .vd-small-padding .uk-tile, .vd-small-padding .uk-padding,
    .vd-no-padding-tile .uk-tile {
        padding: 30px 20px;
    }
    .vd-reise-detail .uk-container-small {
        padding: 0;
    }

    .uk-button:not(.uk-button-text) {
        font-size: 16px;
        line-height: 39px;
        padding: 0 17px;
    }
    .uk-button-large {
        padding: 0 25px;
        line-height: 49px;
        font-size: 18px;
    }
    .mw-xl {
        max-width: 100%;
    }
    .vd-stars {
        max-width: 40%;
    }
    .vd-stars + * {
        margin-top: 20px;
    }
    .uk-grid {
        margin-left: -10px;
    }
    .uk-grid>* {
        padding-left: 10px;
    }
    *+.uk-grid-margin, .uk-grid+.uk-grid, .uk-grid>.uk-grid-margin {
        margin-top: 10px;
    }


    .vd-bento .uk-container {
        padding: 0;
    }

    .vd-cta-large .el-item a.uk-inline-clip:before {
        width: 61px;
        height: 61px;
        background: url(../images/cta-small_bg-gray.svg) no-repeat center;
        right: -1px;
    }
    .vd-cta-large .el-item a.uk-inline-clip:after {
        width: 35px;
        height: 35px;
        background: url(../images/cta-small_arrow.svg) no-repeat center;
    }



    .vd-hide-desc .el-content {
        display: none;
    }

    .vd-icon-grid .el-title {
        font-size: 17px;
    }


    .vd-disclaimer > * {
        padding-top: 30px;
        padding-bottom: 30px;
    }
    .vd-disclaimer > .uk-container > .uk-grid > *:nth-of-type(1) {}
    .vd-disclaimer > .uk-container > .uk-grid > *:nth-of-type(2) > *{
        border-top: solid 2px #fff;
        border-bottom: solid 2px #fff;
        margin: 30px 0;
        padding: 30px 0;
    }
    .vd-disclaimer > .uk-container > .uk-grid > *:nth-of-type(3) {}
}