/* poppins-300 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('../fonts/poppins-v20-latin/poppins-v20-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/poppins-v20-latin/poppins-v20-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/poppins-v20-latin/poppins-v20-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('../fonts/poppins-v20-latin/poppins-v20-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/poppins-v20-latin/poppins-v20-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* caveat-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/caveat-v18-latin/caveat-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

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

html {
    scroll-behavior: initial;
}

html,
body {
    overscroll-behavior: none;
    min-height: 100%;
    height: auto;
}

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

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

img,
svg,
video {
    width: 100%;
    height: auto;
}

a {
    text-decoration: none;
}

strong {
    font-weight: 600;
}

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

:root {
    --unit: 1vw;

    --font-size: 1vw;
    --line-height: 2vw;

    --font-size-supersmall: 0.6vw;
    --line-height-supersmall: 0.6vw;

    --font-size-small: 0.8vw;
    --line-height-small: 1.4vw;

    --font-size-large: 5vw;
    --line-height-large: 6vw;

    --font-size-h1: 2.2vw;
    --line-height-h1: 3.2vw;

    --font-size-h2: 2.2vw;
    --line-height-h2: 3.2vw;

    --font-size-h3: 1.2vw;
    --line-height-h3: 2.0vw;
    
    --black: #111111;
    --grey: #111111;
    --grey-hover: #787878;
    --grey-superlight: #e5e5e5;
    --grey-medium: #f5f5f5;
    --white: #ffffff;
    --yellow: #ffcc00;
    --green: #00ca72;
}

@media (max-width: 1150px) {
    :root {
        --unit: 12px;

        --font-size: 14px;
        --line-height: 24px;

        --font-size-supersmall: 6px;
        --line-height-supersmall: 6px;

        --font-size-small: 10px;
        --line-height-small: 18px;

        --font-size-large: 8vw;
        --line-height-large: 10vw;

        --font-size-h1: 22px;
        --line-height-h1: 34px;

        --font-size-h2: 22px;
        --line-height-h2: 34px;

        --font-size-h3: 18px;
        --line-height-h3: 30px;

        --font-size-logo: 18px;
        --line-height-logo: 18px;
    }
}

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

.komoot {

}

@media (max-width: 1150px) {
    .komoot {
        width: 16px;
    }
}

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

h1,
h2,
h3 {
    font-weight: 600;
}

h1 {
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: var(--line-height-h1);
}

h2 {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
}

h3 {
    font-size: var(--font-size-h3);
    font-weight: 600;
    line-height: var(--line-height-h3);
}

p a {
    color: var(--black);
}

p:nth-child(n+2) {
    margin-top: calc(var(--unit) * 2);
}

.paragraph--overline {
    margin-bottom: calc(var(--unit) * 1);
}

.paragraph--large {
    font-size: var(--font-size-large);
    font-weight: 700;
    line-height: var(--line-height-large);
}

@media (max-width: 1150px) {
    .paragraph--large {
        margin-right: auto;
        margin-left: auto;    
        max-width: 80%;
    }
    
    .paragraph--large br {
        display: none;
    }

    .paragraph--nomobilebreaks br {
        display: none;
    }
}

.paragraph--medium {
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: var(--line-height-h2);
}

.paragraph--small {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--grey);
}

.paragraph--center {
    text-align: center;
}

.paragraph--nomargintop {
    margin-top: 0 !important
}

.handwriting {
    font-family: 'Caveat', cursive;
    font-weight: normal;
}

@media (max-width: 1150px) {
    h1 br,
    h2 br,
    h3 br {
        display: none;
    }

    h2.handwriting {
        line-height: 26px;
    }

    p {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

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

.showonmobile {
    display: none !important;
}

@media (max-width: 1150px) {
    .showonmobile {
        display: flex !important;
    }

    .hideonmobile {
        display: none !important;
    }
}

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

body {
    background-color: var(--white);

    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: var(--font-size);
    line-height: var(--line-height);
    color: var(--black);
}

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

.header {
    z-index: 1000;
    position: fixed;
    top: calc(var(--unit) * 2);
    right: calc(var(--unit) * 2);
    left: calc(var(--unit) * 2);
    height: calc(var(--unit) * 5);
    background-color: var(--white);
    border-radius: calc(var(--unit) * 5);
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transition: transform .3s ease-out;
    /*transition-delay: 1s;*/

    color: var(--black);
}

.header--hidden {
    transform: translate3d(0,calc(-100% - var(--unit) * 2.5),0);
    transition-delay: 0s;
}

.header--content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: inherit;
    padding: 0 calc(var(--unit) * 1.15) 0 calc(var(--unit) * 2.25);
}

.header--left,
.header--right {
    width: 20%;
}

.header--left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
}

.header--center {
    flex: 1;
    
}

.header--right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 1150px) {
    .header {
        top: -1px;
        right: 0;
        left: 0;
        height: auto;
        border-radius: 0;
    }

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

    .header--hidden {
        /*transform: translate3d(0,-100%,0);*/
        transform: none !important;
    }

    .header--content {
        padding: 0 calc(var(--unit) * 2.25);
        height: calc(var(--unit) * 6);
    }

    .header--left {
        /*width: 100%;*/
        width: auto;
    }

    .header--center {
        display: none;
    }

    .header--right {
        flex: 1;
        margin-left: calc(var(--unit) * 1);
        width: auto;
        white-space: nowrap;
    }

    .header--right .book {
        display: none;
    }
}

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

.footer--backgroundgrey {
    background-color: var(--grey-medium);
}

.footer--content {
    padding: calc(var(--unit) * 7) calc(var(--unit) * 10);
}

.footer--columns {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(var(--unit) * 5);
    width: 100%;
}

.footer--column {
    display: flex;
    flex: 1;
}

.footer--column:last-of-type {
    flex: 0;
    align-items: flex-end;
    justify-content: flex-end;

    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
}

@media (max-width: 1150px) {
    .footer--content {
        padding: 15vw 10vw;

        text-align: center;
    }

    .footer--content .navigation--meta {
        justify-content: center;
    }

    .footer--columns {
        display: block;
    }

    .footer--columns br {
        display: block;
    }

    .footer--column {
        display: block;
        width: 100%;
    }

    .footer--column:nth-child(n+2) {
        display: none;
        margin-top: calc(var(--unit) * 2);
    }

    .footer--column:nth-last-child(2),
    .footer--column:last-of-type {
        display: block;
    }

    .footer--column:last-of-type .navigation--meta ul { 
        display: inline-flex;
        gap: 20px;
    }
}

.footer--subline {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    margin-top: calc(var(--unit) * 3);
    width: 100%;

    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    color: var(--grey);
}

.footer--subline p:first-of-type {
    flex: 1;
}

@media (max-width: 1150px) {
    .footer--subline {
        display: block;
    }

    .footer--subline p:first-of-type {
        margin-right: auto;
        margin-left: auto;
        width: 240px;
    }

    .footer--subline p:last-of-type {
        
    }
}

.footer--subline p {
    margin-top: 0 !important;
}

.footer--subline a {
    color: var(--grey);
}

@media (hover: hover) {
    .footer--subline a {
        transition: color .1s ease-out;
    }

    .footer--subline a:hover 
    {
        color: var(--black);
    }
}

.footer--subline i {
    margin: 0 calc(var(--unit) * 0.15);
}

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

.wrapper {
    margin: 0 auto;
}

@media (max-width: 1150px) {
    body:not(.home) .wrapper {
        margin-top: calc(var(--unit) * 6);
    }
}

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

section {
    margin: 10vw 0;
}

.section--paddingtop-big, 
.section--paddingtop {
    margin-top: 0;
    padding-top: 10vw;
}

.section--shortpaddingtop {
    padding-top: calc(var(--unit) * 2);
}

.section--nomargintop {
    margin-top: 0 !important;
}

.section--nomarginbottom {
    margin-bottom: 0 !important;
}

.section--nopaddingbottom {
    padding-bottom: 0 !important;
}

.section--center {
    text-align: center;
}

.section--grey-medium {
    margin: 0 auto;
    padding: 10vw 0;
    background-color: var(--grey-medium);
}

.section--autosize {
    margin: 0;
}

.section--autosize .section--content {
    width: 100%;
}

.section--viewport {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.section--viewport::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(0deg, rgba(17,17,17,0) 0%, rgba(17,17,17,0.5) 100%);
}

.section--viewport .title,
.section--autosize .title {
    position: absolute;
    top: 55%;
    left: 0;
    width: 100%;
    transform: translate3d(0,-50%,0);
    transition: opacity .5s ease-out, transform .5s ease-out;

    color: var(--white);
}

.section--autosize .title {
    top: 50%;
}

.section--viewport .button,
.section--autosize .button {
    justify-content: center;
}

.section--content {
    position: relative;
    margin: 0 auto;
    width: 80vw;
}

@media (min-width: 1151px) {
    .section--paddingtop-big {
        margin-top: 0;
        padding-top: 15vw;
    }
}

@media (max-width: 1150px) {
    .section--viewport .title {
        top: 50%;
    }
}

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

.navigation--mobile {
    display: none;
    background-color: var(--white);
}

.navigation--mobile ul {
    list-style: none;
}

.navigation--mobile ul li a {
    display: flex;
    align-items: center;
    padding: calc(var(--unit) * 1.25) calc(var(--unit) * 2.5) calc(var(--unit) * 1.25) calc(var(--unit) * 2.25);
    border-top: 1px solid var(--grey-superlight);
}

.navigation--mobile ul a {
    color: var(--black);
}

.navigation--mobile ul a i {
    margin-left: auto;
}

.navigation--mobile .special--offer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: calc(var(--unit) * 1.5);
    padding: calc(var(--unit) * 3) calc(var(--unit) * 3);
    border-top: 1px solid var(--grey-superlight);
    text-align: center;
}

.navigation--mobile .special--offer .button {
    margin-top: 0;
    white-space: nowrap;
}

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

.navigation 
{
    display: flex;
    align-items: center;
    justify-content: center;
}

.navigation ul 
{
    list-style: none;
    display: inline-flex;
}

.navigation ul li 
{
    padding: 0 calc(var(--unit) * 1);
}

.navigation ul li a 
{
    color: var(--black);
}

@media (hover: hover) {
    .navigation ul li a {
        transition: color .1s ease-out;
    }

    .navigation ul li a:hover 
    {
        color: var(--grey-hover);
    }
}

.navigation--meta 
{
    justify-content: flex-start;
}

.navigation--meta ul 
{
    display: block;
}

.navigation--meta ul li 
{
    padding: 0;
    border: 0 !important;
}

/* --------------------------------------------- 
    WEATHER
   --------------------------------------------- */

.weather {
    display: none;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--unit) * 0.5);
    margin-left: calc(var(--unit) * 1.25);
    border: 1px solid var(--grey);

    padding: 0 1.25vw;
    height: 2.5vw;
    border-radius: 2vw;

    color: var(--grey);
}

.weather--show {
    display: flex;
}

@media (max-width: 1150px) {
    .weather {
        padding: 0 15px;
        height: 40px;
        border-radius: 40px;
    }
}

/* --------------------------------------------- 
    LOGO
   --------------------------------------------- */

.logo {
    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    font-weight: 600;
}

.logo a {
    position: relative;

    color: var(--black);
}

.logo img {
    width: auto;
    height: calc(var(--unit) * 2);
}

@media (max-width: 1150px) {
    .logo {
        white-space: nowrap;
        font-size: var(--font-size-logo);
        line-height: var(--line-height-logo);
    }
}

.hamburger {
    display: none;
    cursor: pointer;
    margin-left: calc(var(--unit) * 1.5);
    font-size: var(--font-size-h3);
}

@media (max-width: 1150px) {
    .hamburger {
        display: block;
    }
}

.book .button {
    margin-top: 0;
}

/* --------------------------------------------- 
    BUTTON
   --------------------------------------------- */

.button--wrapper {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--unit) * 1);
}

.button {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    font-weight: 500;
}

.button--center {
    justify-content: center;
}

.button:not(first-child) {
    margin-top: 2vw;
}

@media (max-width: 1150px) {
    .button:not(first-child) {
        margin-top: calc(var(--unit) * 3);
    }

    .button--fillwidth-mobile {
        width: 100%;
    }

    .button--fillwidth-mobile .button {
        flex: 1;
    }

    .button--fillwidth-mobile .button .button--link {
        flex: 1;
        justify-content: center;
    }
}

.button--link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 1.75vw;
    height: 3.5vw;
    background-color: var(--black);
    border: 1px solid var(--black);
    border-radius: 2vw;

    color: var(--white);
}

.button--link-inverted {
    background-color: var(--white);
    border-color: transparent;

    color: var(--black);
}

.button--link-outline {
    border-color: var(--black);
}

.button--link-small {
    padding: 0 1.25vw;
    height: 3vw;
    border-radius: 2vw;
}

@media (max-width: 1150px) {
    .button--link {
        padding: 0 25px;
        height: 50px;
        border-radius: 50px;
    }

    .button--link-small {
        padding: 0 20px;
        height: 40px;
        border-radius: 40px;
    }
}

.button--label {
    display: block;
}

@media (hover: hover) {
    .button--link {
        transition: padding .2s ease-out;
    }

    .button--link:hover {
      padding: 0 2.25vw;
    }

    .button--link-small:hover {
        padding: 0 1.75vw;
    }
  }

/* --------------------------------------------- 
    COLUMNS
   --------------------------------------------- */

.columns {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: calc(var(--unit) * 5);
    width: 100%;
}

.columns--smallgap {
    gap: calc(var(--unit) * 2);
}

.columns .column {
    width: 50%;
}

.columns--333333 .column {
    width: 33.33%;
}

.columns--3366 .column:first-of-type {
    width: 29%;
}

.columns--3366 .column:last-of-type {
    flex: 1;
}

.columns--6633 .column:first-of-type {
    flex: 1;
}

.columns--6633 .column:last-of-type {
    width: 29%;    
}

.column--sticky {
    align-self: flex-start;
    position: sticky;
    top: calc(var(--unit) * 10);
}

@media (max-width: 1150px) {
    .columns {
        display: block;
    }

    .columns .column {
        width: 100% !important;
    }

    .columns .column:nth-child(n+2) {
        margin-top: calc(var(--unit) * 2);
    }

    .column--sticky {
        position: static;
        top: auto;
    }

    .columns--largegapmobile.columns .column:nth-child(n+2) {
        margin-top: calc(var(--unit) * 4);
    }
}

/* --------------------------------------------- 
    META
   --------------------------------------------- */

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--unit) * 1.5);
    width: 100%;
}

.meta p,
.meta .button {
    flex: 1 1 40%;
    margin: 0;
}

@media (max-width: 600px) {
    .meta p,
    .meta .button {
        flex: none;
        width: 100%;
    }
}

/* --------------------------------------------- 
    GALLERY
   --------------------------------------------- */

.gallery {
    display: grid;
    grid-gap: calc(var(--unit) * 2);
}

.gallery .gallery--item {
    margin-top: 0 !important;
}

.gallery .gallery--item video {
    overflow: hidden;
    border-radius: calc(var(--unit) * 0.5);
}

.gallery .gallery--item video,
.gallery .gallery--item img {
    object-fit: cover;
    height: 100%;
}


.gallery--type1 {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.gallery--type1 .gallery--item:nth-child(1) {
    grid-column: span 1;
    grid-row: span 2;
}

.gallery--type1 .gallery--item:nth-child(2) {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery--type1 .gallery--item:nth-child(3) {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery--type1 .gallery--item:nth-child(4) {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery--type1 .gallery--item:nth-child(5) {
    grid-column: span 1;
    grid-row: span 2;
}

.gallery--type1 .gallery--item:nth-child(6) {
    grid-column: span 1;
    grid-row: span 1;
}

.gallery--type1 .gallery--item:nth-child(7) {
    grid-column: span 1;
    grid-row: span 1;
}

@media (max-width: 1150px) {
    .gallery--type1 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .gallery--type1 .gallery--item:nth-child(7) {
        display: none;
    }
}

/* --------------------------------------------- 
    STARS
   --------------------------------------------- */

.stars {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 2px;

    color: var(--yellow);
}

.stars span:last-of-type {
    display: block;
    margin-left: calc(var(--unit) * 0.25);
}

/* --------------------------------------------- 
    REVIEWS
   --------------------------------------------- */

.reviews {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: calc(var(--unit) * 2);
    width: 100%;
}

.reviews--right,
.reviews--left {
    width: 50%;
}

@media (max-width: 1150px) {
    .reviews {
        display: block;
        margin-top: calc(var(--unit) * 4);
    }

    .reviews--right,
    .reviews--left {
        width: 100%;
    }

    .reviews--right {
        margin-top: calc(var(--unit) * 2);
    }
}

.reviews--item {
    overflow: hidden;
    padding: calc(var(--unit) * 1.75) calc(var(--unit) * 2);
    border-radius: calc(var(--unit) * 0.5);
    background-color: var(--white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.reviews--item:nth-child(n+2) {
    margin-top: calc(var(--unit) * 2);
}

.reviews--author {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    width: 100%;
}

.reviews--author .name {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: calc(var(--unit) * 0.25);
    flex: 1;
}

.reviews--author .date {
    text-align: right;
    color: var(--grey);
}

/* --------------------------------------------- 
    TEASER
   --------------------------------------------- */

.teaser {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: calc(var(--unit) * 2);
    width: 100%;
}

.teaser:nth-child(n+2) {
    margin-top: calc(var(--unit) * 5);
}

.teaser--item {
    flex: 1;
    overflow: hidden;
    border-radius: calc(var(--unit) * 0.5);
    background-color: var(--white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.teaser--item .image a {
    display: block;
}

@media (hover: hover) {
    .teaser--item:hover {
        transform: translate3d(0,-10px,0);
        box-shadow: 0 20px 30px rgba(0,0,0,0.1);
    }
}

.teaser--text {
    padding: calc(var(--unit) * 2.75) calc(var(--unit) * 3);
}

.teaser--text .stars {
    margin-bottom: calc(var(--unit) * 0.5);
}

.teaser--text p {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--unit) * 1);
    margin: 0 0 calc(var(--unit) * 0.75) 0;

    color: var(--grey);
}

.teaser--text ul {
    list-style: none;
}

.teaser--text ul i {
    margin-right: calc(var(--unit) * 0.25);
}

@media (max-width: 1150px) {
    .teaser {
        display: block;
    }

    .teaser--item {
        width: 100%;
    }

    .teaser--item:nth-child(n+2) {
        margin-top: calc(var(--unit) * 3);
    }
}

/* --------------------------------------------- 
    PRICES
   --------------------------------------------- */

.prices {
    overflow: hidden;
    margin-top: calc(var(--unit) * 2);
    border: 1px solid var(--grey-superlight);
    border-radius: calc(var(--unit) * 0.5);
    background-color: var(--white);
}

.prices table {
    position: relative;
    margin: 0;
    padding: calc(var(--unit) * 3) calc(var(--unit) * 3.25);
    width: 100%;
}

@media (max-width: 1150px) {
    .prices {
        padding-top: calc(var(--unit) * 2);
        border: 0;
        border-top: 1px solid var(--grey-superlight);
        border-radius: 0;

        /*font-size: var(--font-size-small);*/
    }

    .prices table {
        padding: 0;
    }

    .prices table:last-of-type {
        margin-top: calc(var(--unit) * 2);
        padding-top: calc(var(--unit) * 2);
    }
}

.prices table:last-of-type {
    border-top: 1px solid var(--grey-superlight);
}

.prices table thead i {
    margin-right: calc(var(--unit) * 0.5);
}

.prices table tr td:last-of-type  {
    text-align: right;
}
   
/* --------------------------------------------- 
    BENEFITS
   --------------------------------------------- */

.benefits {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: calc(var(--unit) * 2);
    width: 100%;
}

.benefits--item {
    overflow: hidden;
    position: relative;
    padding: calc(var(--unit) * 1.75) calc(var(--unit) * 2);
    width: calc((100% - var(--unit) * 4) / 3);
    background-color: var(--white);
    border-radius: calc(var(--unit) * 0.5);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);

    text-align: center;
}

@media (max-width: 1150px) {
    .benefits {
        gap: calc(var(--unit) * 1);
        margin-top: calc(var(--unit) * 4);
    }

    .benefits--item {
        width: calc((100% - var(--unit) * 2) / 2);
    }
}

.benefits--item .icon {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--grey);
}

.benefits--item .label {
    position: relative;
    margin-top: calc(var(--unit) * 1);

    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

@media (max-width: 1150px) {
    .benefits--item .label br {
        display: none;
    }
}

.benefits--item .label sup {
    position: absolute;
    transform: translate3d(0.2vw,-0.2vw,0);
}

.benefits--item .indicator {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: calc(var(--unit) * 1);
    right: calc(var(--unit) * 1);
    width: calc(var(--unit) * 1.5);
    height: calc(var(--unit) * 1.5);
    border: 1px solid var(--black);
    border-radius: calc(var(--unit) * 1.5);
    background-color: var(--black);

    font-size: var(--font-size-supersmall);
    line-height: var(--line-height-supersmall);
    color: var(--white);
}

.benefits--item .indicator--green {
    display: none;
    border-color: var(--green);
    background-color: var(--green);
}

.benefits--item .indicator--greenoutline {
    border-color: var(--green);
    background: transparent;

    color: var(--green);
}

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

.benefitscompact {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid var(--grey-superlight);
    border-radius: calc(var(--unit) * 0.5);
}

.benefitscompact:nth-child(n+2) {
    margin-top: calc(var(--unit) * 4);
}

.benefitscompact.benefitscompact--large {
    line-height: var(--line-height-small);
}

.benefitscompact.benefitscompact--large .icon {
    width: 20%;
    font-size: var(--font-size-h3);
}

.benefitscompact--item {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2);
    width: 50%;
}

.benefitscompact--item:nth-child(2n+2) {
    border-left: 1px solid var(--grey-superlight);
}

.benefitscompact--item:nth-child(n+3) {
    border-top: 1px solid var(--grey-superlight);
}

.benefitscompact--item .icon {
    width: 15%;
    font-size: var(--font-size-h3);
}

.benefitscompact--item .label {
    flex: 1;
}

@media (max-width: 1150px) {
    .benefitscompact:nth-child(n+2) {
        margin-top: calc(var(--unit) * 2);
    }

    .benefitscompact.benefitscompact--large {
        margin-top: calc(var(--unit) * 4);
    }

    .benefitscompact.benefitscompact--large .icon,
    .benefitscompact--item .icon {
        width: 45px;
    }
}

@media (max-width: 700px) {
    .benefitscompact {
        display: block;
    }

    .benefitscompact--item {
        width: 100%;
    }

    .benefitscompact--item:nth-child(2n+2) {
        border-left: none;
    }

    .benefitscompact--item:nth-child(n+2) {
        border-top: 1px solid var(--grey-superlight);
    }
}

/* --------------------------------------------- 
    TYPEWRITER
   --------------------------------------------- */

.typewriter::after {
    content: "|";
    animation:  none;
}

.typewriter.showanimation::after {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* --------------------------------------------- 
    IMAGE
   --------------------------------------------- */

.video,
.image {
    background-color: var(--grey-superlight);

    line-height: 0;
}

.image--profile {
    overflow: hidden;
    margin-right: auto;
    margin-bottom: calc(var(--unit) * -1);
    margin-left: auto;
    width: calc(var(--unit) * 6);
    border-radius: calc(var(--unit) * 6);
}

.image.image--profile:nth-child(n+2) {
    margin-top: calc(var(--unit) * 3);
}

.video video,
.image img {
    pointer-events: none;
    user-select: none;
}

.video:nth-child(n+2),
.image:nth-child(n+2) {
    margin-top: calc(var(--unit) * 2);
}

.video--rounded,
.image--rounded {
    overflow: hidden;
    border-radius: calc(var(--unit) * 0.5);
}

.video--shadow,
.image--shadow {
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
}

/* --------------------------------------------- 
    VIDEO PLAYER
   --------------------------------------------- */

.player {
    overflow: hidden;
    position: relative;
    width: 100%;
    border-radius: calc(var(--unit) * 0.5);
}

.player::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 60%);
}

.player--initial::after,
.player--initial .controls {
    display: none;
}

.player:not(.player--initial)::after,
.player:not(.player--initial) .controls {
    transition: opacity .2s ease-out;
    opacity: 0;
}

@media (hover: hover) {
    .player:not(.player--initial):hover::after,
    .player:not(.player--initial):hover .controls {
        opacity: 1;
    }
}

@media (hover: none) {
    .player:not(.player--initial):hover .controls {
        opacity: 1;
    }
}

@media (max-width: 1150px) {
    .player:not(.player--initial):hover .controls {
        opacity: 1;
    }
}

.playbutton {
    cursor: pointer;
    display: none;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--unit) * 5);
    height: calc(var(--unit) * 5);
    border-radius: calc(var(--unit) * 5);
    background-color: var(--white);
    transform: translate3d(-50%,-50%,0);
    transition: transform .2s ease-out;

    font-size: var(--font-size-h3);
    color: var(--black);
}

.playbutton i {
    transform: translate3d(calc(var(--unit) * 0.15),0,0);
}

.player--initial .playbutton {
    display: flex;
}

@media (hover: hover) {
    .playbutton:hover {
        transform: translate3d(-50%,-50%,0) scale(1.1);
    }
}

.headline {
    z-index: 100;
    position: absolute;
    bottom: calc(var(--unit) * 4);
    left: calc(var(--unit) * 4);

    color: var(--white);
}

.player:not(.player--initial) .headline {
    opacity: 0;
}

.visitbaska {
    z-index: 100;
    position: absolute;
    top: calc(var(--unit) * 4);
    right: calc(var(--unit) * 4);

    font-weight: 600;
}

.visitbaska a {
    color: var(--white);
}

@media (max-width: 1150px) {
    .headline,
    .visitbaska {
        display: none !important;
    }
}

.controls {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: calc(var(--unit) * 2);
    z-index: 100;
    position: absolute;
    right: calc(var(--unit) * 3);
    bottom: calc(var(--unit) * 3);
    left: calc(var(--unit) * 3);
}

@media (max-width: 1150px) {
    .controls {
        right: calc(var(--unit) * 2);
        bottom: calc(var(--unit) * 2);
        left: calc(var(--unit) * 2);
    }
}

.controls__btn {
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none;
    border: none;
    border-radius: 0;
    background: none;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    width: calc(var(--unit) * 1);
    height: calc(var(--unit) * 1);

    font-size: var(--font-size-h3);
    line-height: var(--line-height-h3);
    color: var(--white);
}

.controls__btn .fa-pause {
    display: none;
}

.controls__btn .fa-play {
    display: inline-block;
}

.controls__btn.play .fa-pause {
    display: inline-block;
}

.controls__btn.play .fa-play {
    display: none;
}

.controls__btn.pause .fa-play {
    display: none;
}

.controls__btn.pause .fa-play {
    display: inline-block;
}

.progress {
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex: 1;
    flex-basis: 100%;
    position: relative;
    height: 5px;
    border-radius: 5px;
    background-color: rgba(255, 255, 255, 0.25);
}

.progress__filled {
    flex: 0;
    flex-basis: 0%;
    width: 50%;
    background: var(--white);
}

.time__elapsed {
    width: calc(var(--unit) * 3);

    text-align: right;
    color: var(--white);
}

/* --------------------------------------------- 
    AVATAR
   --------------------------------------------- */

.avatar {
    overflow: hidden;
    display: block;
    margin: 0 auto calc(var(--unit) * 1) auto;
    width: calc(var(--unit) * 5);
    height: calc(var(--unit) * 5);
    border-radius: calc(var(--unit) * 5);

    line-height: 0;
}