/*  --------------------------------------------------
    LAYOUT 
    --------------------------------------------------   */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header {
    overflow-x: hidden;
    height: 10rem;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

#headerMediaImage {
    z-index: -1;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding: 0;
    figure {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        img {
            object-fit: cover;
            object-position: center center;
            height: auto;
            width: 100%;
            height: 100%;
            min-height: 10rem;
        }
    }
}

.header .section {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 10rem;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.header .logo {
    margin-right: 1.6rem;
}

.header .logo img {
    object-fit: cover;
    object-position: center center;
    width: auto;
    height: 7rem;
    min-height: 7rem;
}

.header-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.header-content h1 {
    font-size: 2rem;
    font-size: 5vw;
    color: #5ba49b;
    text-shadow: -1px -1px 0 #e9e9e9, 1px -1px 0 #e9e9e9, -1px 1px 0 #e9e9e9, 1px 1px 0 #e9e9e9;
}
.header-content button.booking {
    background: #0C4552;
    background: linear-gradient(90deg,rgba(12, 69, 82, 1) 0%, rgba(91, 164, 155, 1) 120%);
    color: #e9e9e9;
    font-size: 1rem;
    width: auto;
    margin-top: 1rem;
    border: 1px solid #e9e9e9;
    padding: .5rem 3rem;
}
.header-content button.booking a.booking-link {
    display: flex;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #e9e9e9;
}

.header-content button.booking a.booking-link:hover,
.header-content button.booking a.booking-link:active,
.header-content button.booking a.booking-link:visited {
    text-decoration: none;
    color: #e9e9e9;
}

.content-bg {
    position: fixed;
    inset: 0;
    z-index: -10;
    background-image: url('../Images/BgBrasil.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .4;
}

.content {
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 18rem);
    padding: .5rem 0;
    font-size: 1.4rem;
}

.content .section {
    width: 100%;
    max-width: 1200px;
    margin: 2rem;
}

.frame {
    margin: 2rem 0;
}

.frame:first-child {
    margin: 0 0 2rem 0;
}

.footer {
    height: 8rem;
    background-color: #336666;
    color: #fff;
}

.footer .container {
    column-gap: 1.6rem;
    row-gap: .5rem;
}

.footer-social {
    column-gap: 1.4rem;
    row-gap: .5rem
}

.social-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: #fff;
    font-size: 1rem;
    transition: opacity .2s ease;
}

.social-link:hover {
    opacity: .75;
}

.social-icon {
    width: 22px;
    height: 22px;
    display: block;
}

/*  --------------------------------------------------
    LANGUAGE SWITCHER
    --------------------------------------------------   */
.lang-dd {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9999;
}

.lang-dd-summary {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border: none;
    background: #fff;
    cursor: pointer;
}

.lang-dd-summary::-webkit-details-marker { 
    display: none; 
}

.lang-dd-summary::marker { 
    content: ""; 
}

.lang-dd-flag svg { 
    width: 30px; 
    height: 21px; 
    display: block; 
}

.lang-dd-chev { 
    font-size: 1rem; 
}

.lang-dd-menu {
    margin: 0;
    padding: 4px 0;
    list-style: none;
    border: none;
    background: #fff;
}

.lang-dd-item {
    display: block;
    padding: 4px 10px;
    text-decoration: none;
    color: #000;
}

.lang-dd-item:hover { 
    background: #f0f0f0; 
}

.lang-dd-item.is-active { 
    font-weight: 700; 
}

.lang-dd-item.is-disabled {
    color: #888;
}

/*  --------------------------------------------------
      BACK TO TOP BUTTON 
      --------------------------------------------------   */
#btn-back-to-top {
    position: fixed;
    z-index: 100;
    bottom: 20px;
    right: 20px;
    display: none;
    background-color: #0C4552;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
}
#btn-back-to-top::before {
   content: '';
   border-top: 3px solid #ffffff;
   border-left: 3px solid #ffffff;
   width: 20px;
   height: 20px;
   position: absolute;
   top: 19px;
   left: 15px;
   display: block;
   transform: rotate(45deg);
}
@media screen and (min-width:992px) {
      #btn-back-to-top {
            bottom: 50px;
            right: 50px;
      }
}

/*  --------------------------------------------------
    MEDIA   
    --------------------------------------------------   */
.image-embed-item {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 3px;
}

.video-embed-item {
    height: 100%;
}

.ce-column figure.video {
    width: 100%;
}

.ce-column figure.video .video-embed {
    width: 100%;
    aspect-ratio: 16/9;
}
.ce-column figure.video .video-embed iframe {
    width: 100%;
    height: 100%;
}

.ce-gallery .ce-column {
    float: none;
}

.ce-gallery .ce-row .ce-column figure {
    width: 100%;
}

.ce-textpic.d-flex.flex-column.flex-md-row.flex-column-row-reverse .bodytext,
.ce-textpic.d-flex.d-md-block.flex-md-row.flex-column .bodytext {
    padding: 1rem 0 0 0;
}

.ce-textpic.d-flex.flex-column-reverse.flex-md-row-reverse.flex-column-row .bodytext,
.ce-textpic.d-flex.d-md-block.flex-md-row.flex-column-reverse .bodytext {
    padding: 0 0 1rem 0;
}

.video-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
}

.ratio-169 {
    padding-bottom: calc(9/16 * 100%);
    aspect-ratio: 16/9;
}

.ratio-916 {
    padding-bottom: calc(16/9 * 100%);
    aspect-ratio: 9/16;
}


/*  --------------------------------------------------
    SLIDER  
    --------------------------------------------------   */
.carousel {
    width: 100%;
    margin: 0 auto;
}

.carousel-item {
    width: 100%;
    height: 100%;
}

.carousel.layout-1 .carousel-inner,
.carousel.layout-2 .carousel-inner,
.carousel.layout-3 .carousel-inner,
.carousel.layout-4 .carousel-inner {
    aspect-ratio: 16 / 9;
}

.row .carousel.layout-1 .carousel-inner,
.row .carousel.layout-2 .carousel-inner,
.row .carousel.layout-3 .carousel-inner,
.row .carousel.layout-4 .carousel-inner {
    aspect-ratio: 4 / 3;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.frame-layout-3 .ce-image .ce-left {
    display: flex;
    justify-content: flex-start;
}


/*  --------------------------------------------------
      MEDIA QUERIES 
      --------------------------------------------------   */
@media (min-width: 540px) {
    .content {
        min-height: calc(100vh - 15rem);
    }
    .footer {
        height: 5rem
    }
}

@media (min-width: 800px) {
    .header {
        height: 15rem;
    }
    .content {
        display: flex;
        justify-content: center;
        min-height: calc(100vh - 20rem);
        padding: 2rem 0;
    }
    .header .lang-dd-summary {
        gap: 8px;
        padding: 3px 10px;
    }
    .header .lang-dd-flag svg { 
        width: 30px; 
        height: 21px; 
        display: block; 
    }
    .header .lang-dd-chev { 
        font-size: 1.4rem; 
    }
    .header .lang-dd-item {
        padding: 8px 12px;
    }
    #headerMediaImage {
        figure {
            img {
                min-height: 15rem;
            }
        }
    }
    .header .section {
        height: 15rem;
    }
    .header .logo {
        margin-right: 3rem;
    }

    .header .logo img {
        height: 13rem;
        min-height: 13rem;
    }
    .header h1 {
        font-size: 3rem;
    }
    .header-content button.booking {
        font-size: 1.4rem;
        padding: 1rem 4rem;
    }
    .content {
        font-size: 1.4rem;
        padding: 1rem 4rem;
    }
    .content:before {
        top: 15rem;
    }
    .carousel.layout-1 {
        max-width: 100%;
    }

    .carousel.layout-2 {
        max-width: 50%;
    }

    .carousel.layout-3 {
        max-width: 33.33%;
    }

    .carousel.layout-4 {
        max-width: 25%;
    }
    .carousel.layout-1 .carousel-inner {
        aspect-ratio: 16 / 9;
    }

    .row .carousel.layout-1 .carousel-inner {
        aspect-ratio: 4 / 3;
    }

    .carousel.layout-2 .carousel-inner {
        aspect-ratio: 4 / 3;
    }

    .carousel.layout-3 .carousel-inner {
        aspect-ratio: 4 / 3;
    }

    .carousel.layout-4 .carousel-inner {
        aspect-ratio: 4 / 3;
    }
    .ce-textpic.d-flex.flex-column.flex-md-row.flex-column-row-reverse .bodytext,
    .ce-textpic.d-flex.d-md-block.flex-md-row.flex-column .bodytext {
        padding: 0;
    }

    .ce-textpic.d-flex.flex-column-reverse.flex-md-row-reverse.flex-column-row .bodytext,
    .ce-textpic.d-flex.d-md-block.flex-md-row.flex-column-reverse .bodytext {
        padding: 0;
    }
}

@media (min-width: 1200px) {
    .header {
        height: 35rem;
    }
    .content {
        display: flex;
        justify-content: center;
        min-height: calc(100vh - 40rem);
        padding: 2rem 0;
    }
    #headerMediaImage {
        figure {
            img {
                min-height: 35rem;
            }
        }
    }
    .header .section {
        height: 35rem;
        margin: 0;
    }
    .header .logo {
        margin-right: 5rem;
    }

    .header .logo img {
        height: 17rem;
        min-height: 17rem;
    }
    .header h1 {
        font-size: 5rem;
    }
    .header-content button.booking {
        font-size: 1.6rem;
        padding: 1rem 5rem;
        border: 1px solid #ffffff;
    }
    .content:before {
        top: 35rem;
    }
}

/*  --------------------------------------------------
    CUSTOM STYLES
    --------------------------------------------------   */
     /*  --------------------------------------------------
     Tabelle
        --------------------------------------------------   */
    tbody, td, tfoot, th, thead, tr {
    border-color: inherit;
    border-style: none;
    border-width: 0;
}