#footer {
    background-color: #373737;
    color: #373737;
    position: relative;
    padding: 0 10vw 0;
    margin-top: 20px
}

#footer .links {
    display: flex;
    justify-content: space-evenly;
    position: relative;
    z-index: 1;
    padding-top: 15vw;
    font-size: 20px;
    font-weight: 700
}

#footer .social-links {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
    z-index: 1;
    font-size: 50px;
    transform: scaleY(.7);
    padding-top: 20px;
    padding-bottom: 20px;
    font-weight: 700;
    width: 40vw;
    margin: auto
}

#footer .social-links svg {
    transform: scaleY(calc(1/.7))
}

#footer img {
    position: absolute;
    left: 0;
    bottom: 0
}

@media screen and (orientation:portrait) and (max-width:600px) {
    #footer .social-links {
        width: max-content;
        gap: 4vw
    }

    #footer .links {
        font-size: 4vw;
        font-weight: 300
    }

    #footer .social-links a {
        font-size: 6vw;
        font-weight: 300
    }

    #footer {
        background-color: #373737;
        background-image: url(/img/footer.webp);
        color: #373737;
        position: relative;
        padding: 50vw 10vw 0;
        margin-top: 20px;
        background-position: bottom;
        background-size: 350vw;
        background-repeat: no-repeat
    }

    #footer img {
        display: none
    }

    #footer .links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5vw;
        margin-bottom: 5vw;
        justify-items: center;
        width: 100%
    }
}

#header {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 0 10px;
    height: 149px;
    background: 0 0;
    font-family: brandon-grotesque;
    box-shadow: 0 13px 21px -12px rgba(0, 0, 0, .3);
    z-index: 3
}

#header #header-content {
    display: flex;
    position: relative;
    align-items: center;
    height: 149px
}

#header #header-content svg {
    position: absolute;
    top: 50%;
    left: 40px;
    transform: translateY(-50%)
}

#header #header-content .menu {
    position: absolute;
    display: flex;
    justify-content: space-between;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 1200px
}

#header #header-content .admin {
    position: absolute;
    top: 20px;
    right: 10%
}

#header #header-content>h1:nth-child(2) {
    margin-left: 200px
}

#header a {
    color: var(--beige)
}

#header a:visited {
    color: var(--beige)
}

.header a {
    color: var(--beige)
}

.header a:visited {
    color: var(--beige)
}

#header #header-content h1 {
    margin: 20px;
    font-weight: 400;
    color: var(--beige);
    font-size: 25px
}

#header #header-content .menu h1 {
    padding: 60px 20px;
    margin: 0
}

#header #header-content h1:hover {
    cursor: pointer
}

#header #header-content h1 a.active {
    font-weight: 600
}

@media screen and (max-width:2000px) {
    #header {
        height: fit-content
    }

    #header #header-content .menu h1 {
        padding: 40px 20px;
        margin: 0
    }

    #header #header-content {
        height: 109px;
        align-items: center
    }

    #header #header-content .menu {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
}

@media screen and (max-width:1500px) {
    #header #header-content {
        height: 60px
    }

    #header #header-content .menu h1 {
        font-size: 15px;
        padding: 21px 20px
    }

    #header #header-content .menu {
        max-width: 1200px;
        width: max-content
    }

    #header #header-content svg {
        left: 5px
    }

    #header #header-content>h1:nth-child(2) {
        margin-left: 50px;
        font-size: 15px
    }
}

.header {
    opacity: 0;
    position: fixed;
    top: 149px;
    left: 50%;
    margin-left: 10px;
    transform: translateX(-50%);
    height: 0;
    contain: paint;
    z-index: 1;
    width: 1120px;
    padding: 0 40px;
    background: rgba(0, 0, 0, .4);
    backdrop-filter: blur(5px);
    color: var(--beige);
    box-shadow: rgba(0, 0, 0, .4)0 13px 21px -12px;
    transition: opacity .3s, height .3s
}

@media screen and (max-width:2000px) {
    .header {
        top: 109px
    }
}

@media screen and (max-width:1500px) {
    .header {
        top: 60px;
        width: max-content
    }
}

.header>div {
    display: flex;
    gap: 20px;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between
}

.header h2 {
    color: var(--beige);
    font-weight: 300;
    padding: 20px;
    margin: 0
}

body:has(#header-mobile) #header {
    display: none
}

body:has(#header #header-content h1.axamer-lizum:hover) .header.axamer-lizum,
.header.axamer-lizum:hover {
    opacity: 1;
    height: fit-content
}

body:has(#header #header-content h1.events:hover) .header.events,
.header.events:hover {
    opacity: 1;
    height: fit-content
}

body:has(#header #header-content h1.magazine:hover) .header.magazine,
.header.magazine:hover {
    opacity: 1;
    height: fit-content
}

body:has(#header #header-content h1.gastronomie:hover) .header.gastronomie,
.header.gastronomie:hover {
    opacity: 1;
    height: fit-content
}

body:has(#header #header-content h1.online-shop:hover) .header.online-shop,
.header.online-shop:hover {
    opacity: 1;
    height: fit-content
}

body:has(#header #header-content h1.pr-bereich:hover) .header.pr-bereich,
.header.pr-bereich:hover {
    opacity: 1;
    height: fit-content
}

.burger-mobile {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    padding-top: 20px;
    background-color: initial;
    backdrop-filter: blur(0);
    z-index: 3
}

#header-mobile::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -20%;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-color: var(--turquoise);
    transform: skewX(-5deg)
}

#header-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: rgba(0, 0, 0, .4);
    backdrop-filter: blur(5px);
    transform: translateX(-100%);
    transition: transform .3s
}

a {
    text-decoration: none
}

body:has(#burger-menu:checked) #header-mobile {
    transform: translateX(0)
}

body:has(#burger-menu:checked) #header-mobile #header-content .title .switch {
    transform: translateX(0)
}

#header-mobile #header-content {
    height: 100%;
    width: 100%
}

#header-mobile #header-content .title .switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: var(--beige);
    padding: 5px 0;
    width: 100px;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .3);
    transform: translateX(calc(100vw + 100%));
    transition: transform .3s
}

#header-mobile #header-content .title .switch span {
    font-size: 15px;
    font-weight: 700
}

#header-mobile #header-content .title .switch input {
    opacity: 0;
    width: 0;
    height: 0
}

#header-mobile #header-content .title .slider {
    cursor: pointer;
    width: 50px;
    aspect-ratio: 3/1.57;
    background-image: url(/img/icon/switch_winter.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0
}

#header-mobile #header-content .title input:checked+.slider {
    background-image: url(/img/icon/switch_summer.png)
}

#header-mobile #header-content .title:has(.switch input:checked) .switch span:nth-child(3) {
    display: none
}

#header-mobile #header-content .title:has(.switch input:not(:checked)) .switch span:nth-child(4) {
    display: none
}

#header-mobile #header-content .logo {
    position: absolute;
    top: 80%;
    left: 59%;
    width: 60px;
    aspect-ratio: 1/1;
    background-color: var(--red);
    background-image: url(/img/AxamerLizum_Logo.webp);
    background-repeat: no-repeat;
    background-size: 70%;
    background-position: 50% 75%;
    transform: rotate(16deg);
    transform-origin: bottom left
}

label {
    -webkit-tap-highlight-color: transparent
}

#header-mobile #header-content .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 10px;
    padding-top: 10px
}

#header-mobile #header-content .language {
    text-align: center;
    font-size: 15px;
    margin: 0;
    padding: 10px
}

#header-mobile #header-content .menu {
    height: calc(90% - 62px);
    display: flex;
    flex-direction: column
}

#header-mobile #header-content .menu .header-menu h2 {
    margin: 0;
    font-size: 15px;
    padding: 5px;
    width: fit-content
}

#header-mobile #header-content .menu .header-menu {
    max-height: 0;
    margin-left: 60px;
    transition: max-height .3s;
    contain: paint
}

#header-mobile #header-content .menu h1 .toggle {
    margin-left: 10px;
    padding: 0 5px
}

#header-mobile #header-content .menu h1 .toggle-button {
    display: none
}

#header-mobile #header-content .menu h1:has(.toggle-button:checked)+.header-menu {
    max-height: 600px
}

#header-mobile #header-content .menu h1:has(.toggle-button:checked) .toggle {
    display: none
}

#header-mobile #header-content .menu h1:has(.toggle-button:checked) .toggle.nothing {
    display: inherit
}

#header-mobile #header-content .menu h1:has(.toggle-button:not(:checked)) .toggle.nothing {
    display: none
}

#header-mobile #header-content .tickets {
    background-image: linear-gradient(90deg, var(--light-beige), var(--beige));
    transform: skewX(-5deg);
    width: fit-content;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
    margin: 20px 0
}

#header-mobile #header-content .tickets h1 {
    transform: skewX(5deg);
    padding-right: 60px
}

#header-mobile #header-content h1 {
    margin: 0;
    padding: 5px 15px;
    padding-left: 10px;
    margin-left: 45px;
    font-size: 20px;
    width: fit-content
}

#header-mobile #header-content .menu .title.pr-bereich {
    margin-bottom: 20px
}

#header-mobile #header-content .menu .footer-links {
    font-size: 15px
}

#header-mobile #header-content .menu .footer-links.first {
    margin-top: auto
}

#admin-header {
    margin-bottom: 80px
}

#admin-header a {
    text-decoration: none;
    color: #000
}

#admin-header a:visited {
    color: #000
}

#admin-header .title {
    display: flex;
    align-items: center;
    padding: 10px 40px;
    gap: 80px
}

#admin-header h1 {
    margin: 0;
    font-weight: 100
}

#admin-header .user {
    margin-left: auto;
    margin-right: 160px
}

#admin-header .menu {
    background: var(--turquoise);
    padding: 5px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    position: relative
}

#admin-header .menu .logo {
    position: absolute;
    right: 100px;
    top: -27px;
    width: 80px;
    height: 80px;
    background-color: var(--red);
    background-image: url(/img/AxamerLizum_Logo.webp);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70%;
    transform: rotate(16deg)
}

#admin-header .menu h1 {
    font-size: 25px
}

body:has(#header-mobile) #header {
    display: block
}

#header-mobile {
    display: none
}

#burger-menu {
    display: none
}

label.burger-mobile {
    display: none
}

@media screen and (orientation:portrait) and (max-width:600px) {
    body:has(#header-mobile) #header {
        display: none
    }

    #header-mobile {
        display: block
    }

    #burger-menu {
        display: block
    }

    label.burger-mobile {
        display: block
    }
}

#shop-header {
    margin-bottom: 80px
}

#shop-header a {
    text-decoration: none;
    color: #000
}

#shop-header a:visited {
    color: #000
}

#shop-header .title {
    display: flex;
    align-items: center;
    padding: 10px 40px;
    gap: 80px
}

#shop-header h1 {
    margin: 0;
    font-weight: 100
}

#shop-header .user {
    margin-left: auto;
    margin-right: 160px
}

#shop-header .menu {
    background: var(--turquoise);
    padding: 5px 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
    position: relative
}

#shop-header .menu .logo {
    position: absolute;
    right: 100px;
    top: -27px;
    width: 80px;
    height: 80px;
    background-color: var(--red);
    background-image: url(/img/AxamerLizum_Logo.webp);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 70%;
    transform: rotate(16deg)
}

#shop-header .menu h1 {
    font-size: 25px
}

:root {
    --grey: #373737;
    --light-grey: #858586;
    --grey-grey: #abaaac;
    --beige: #D4C9B4;
    --beige: #D3CAB1;
    --light-beige: #F2ECDC;
    --dark-beige: #D3CAB1;
    --red: #FF361D;
    --turquoise: #D8E4DF;
    --gradient: linear-gradient(80deg, var(--beige), var(--light-beige));
    --inverted-gradient: linear-gradient(90deg, var(--light-beige), var(--dark-beige));
    --background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3)), url("/img/Manuel Kokseder - Axamer Lizum--18_Black+White.webp");
    --background-black-and-white: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.3)), url("/img/Manuel Kokseder - Axamer Lizum--18_Black+White.webp")
}

:nth-child(1) {
    --index: 1
}

:nth-child(2) {
    --index: 2
}

:nth-child(3) {
    --index: 3
}

:nth-child(4) {
    --index: 4
}

:nth-child(5) {
    --index: 5
}

:nth-child(6) {
    --index: 6
}

:nth-child(7) {
    --index: 7
}

:nth-child(8) {
    --index: 8
}

:nth-child(9) {
    --index: 9
}

:nth-child(10) {
    --index: 10
}

:nth-last-child(1) {
    --rev-index: 1
}

:nth-last-child(2) {
    --rev-index: 2
}

:nth-last-child(3) {
    --rev-index: 3
}

:nth-last-child(4) {
    --rev-index: 4
}

:nth-last-child(5) {
    --rev-index: 5
}

:nth-last-child(6) {
    --rev-index: 6
}

:nth-last-child(7) {
    --rev-index: 7
}

:nth-last-child(8) {
    --rev-index: 8
}

:nth-last-child(9) {
    --rev-index: 9
}

:nth-last-child(10) {
    --rev-index: 10
}

p {
    font-size: .9vw;
    line-height: .9vw;
    color: var(--grey)
}

h1 {
    font-weight: 200;
    color: var(--grey)
}

body:not(:has(#tarife)) h1 {
    font-size: 1vw;
}

h2 {
    font-size: 1.2vw;
    font-weight: 200;
    color: var(--grey)
}

.button {
    font-size: .9vw;
    color: var(--grey)
}

button {
    font-size: .9vw;
    color: var(--grey)
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .button {
        font-size: 3vw;
        width: max-content
    }

    button {
        font-size: 3vw;
        width: max-content
    }
}

h1 {
    font-family: inter, arial, sans-serif
}

a,
p,
span,
h2 {
    font-family: inter, arial, sans-serif
}

body {
    padding: 0;
    margin: 0;
    background-color: #fff;
    width: 100%
}

#index .start {
    z-index: 0;
    width: 100%;
    aspect-ratio: 16/9;
    background-image: var(--background);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    position: relative
}

#tarife .start:not(.triple) {
    background-image: var(--background-black-and-white)
}

#eventkalender .start {
    background-image: var(--background-black-and-white)
}

#golden-roof-park .start {
    background-image: var(--background-black-and-white)
}

#gastronomie-index .start {
    background-image: var(--background-black-and-white)
}

#tarife .start:not(.triple) {
    position: absolute;
    aspect-ratio: unset;
    height: 50vw
}

#anreise .start::before {
    background-image: url(/img/Axamer_Lizum_Anreise.webp)
}

#anreise .title p,
#gastronomie-index .title p {
    margin-top: 2vw;
    font-size: 1.2vw;
    line-height: 1.4vw
}

#anreise .filter {
    margin: 1vw 10vw;
    margin-top: 5vw;
    margin-bottom: 2vw;
    padding: 0
}

#anreise .filter-container .filter {
    margin: 1vw 10vw;
    padding: 0
}

#anreise .filter-container .filter:nth-child(2) {
    margin-bottom: 2vw
}

.filter-container.hidden {
    display: none
}

.table-container.hidden {
    display: none
}

#anreise .tarife {
    margin-left: 15vw
}

#anreise .tarife td:nth-child(1) .td_content.first {
    width: 18vw
}

#anreise .tarife td:nth-child(2) {
    width: 0
}

#anreise .tarife td:nth-child(2) .td_content.first {
    width: 1vw;
    left: -1vw;
    position: relative
}

#tarife .start::before {
    content: none
}

#tarife .content {
    padding-top: 0
}

#index .start::before {
    content: "";
    position: absolute;
    top: 149px;
    left: 10%;
    z-index: 0;
    width: 80%;
    aspect-ratio: 16/9;
    background-image: url(/img/foreground.webp?10_11_2025);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

#index .start video {
    position: absolute;
    top: 149px;
    left: 10%;
    z-index: 0;
    width: 80%;
    aspect-ratio: 16/9
}

#index .start video.mobil {
    aspect-ratio: 16/9
}

#index .start video.mobil {
    display: none
}

#index .start video.mobil.landscape {
    top: 60px !important;
    display: block
}

@media screen and (orientation:portrait) and (max-width:600px) {
    #index .start video.mobil {
        display: block
    }

    #index .start video.mobil {
        top: 90px !important;
        aspect-ratio: 9/16
    }

    #index .start video.mobil.landscape {
        top: 5vw !important;
        aspect-ratio: 16/9;
        display: none
    }
}

#index .start::before {
    content: none
}

#index .start .logo,
#header .logo {
    position: absolute;
    top: 20vw;
    left: 10%;
    width: 11%;
    aspect-ratio: 1/1;
    transform-origin: top left;
    transform: rotate(16deg);
    background-color: var(--red)
}

#index .start .logo::before,
#header .logo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1/1;
    transform-origin: center;
    transform: rotate(-16deg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='281.855' height='285.742' viewBox='0 0 281.855 285.742'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Pfad_141' data-name='Pfad 141' d='M0,119.7H281.855V-166.045H0Z' transform='translate(0 166.045)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_61' data-name='Gruppe 61' clip-path='url(%23clip-path)'%3E%3Cg id='Gruppe_50' data-name='Gruppe 50' transform='translate(109.922 102.467)'%3E%3Cpath id='Pfad_130' data-name='Pfad 130' d='M2.886,0C.555,0-3.107,1.738-3.877,6.574s2.124,7.548,5.214,7.548S7.717,8.9,7.521,5.028,5.013,0,2.886,0' transform='translate(4.004)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_51' data-name='Gruppe 51' transform='translate(96.48 118.899)'%3E%3Cpath id='Pfad_131' data-name='Pfad 131' d='M6.495.006C3.576-.24-1.913,2.714-7.134,19.446c-3.338,10.7-2.32,21.382,3.862,21.189,1.165-.038,7.577.843,11.6-21.569C11.036,3.969,8.811.2,6.495.006' transform='translate(9.01 0.008)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_52' data-name='Gruppe 52' transform='translate(47.206 90.922)'%3E%3Cpath id='Pfad_132' data-name='Pfad 132' d='M20.252.134C4.008.749-3.137,2.458-2.944,5.746s5.028,1.16,5.028,14.123S.159,63.2-25.363,88.749a9.159,9.159,0,0,0-2.7,4.839c-.969,2.9,24.738,6,53.149,7.546-1.54,8.123-7.73,32.013,32.857,31.728,27.835-.194,37.116-17.993,36.921-22.247-.122-2.733-.778-4.068-3.862-3.679-3.1.389-19.723,4.065-29.967,3.1s-14.688-2.32-13.524-7.932c26.861.193,68.031-1.359,76.727-2.516s11.986-5.032,14.493-11.029,10.248-27.279,10.248-27.279c.967-3.1-.177-6.55-4.247-4.837-38.276,16.054-61.084,22.829-89.1,23.022C62.584,63.308,67.34,54.81,70.176,46.29,73.4,36.6,71.708,28.377,64.32,27.415,54.289,26.106,41.312,35.963,39.2,46.57c-1.356,6.772,8.312,3.481,11.4,2.129-3.086,5.608-13.139,25.734-14.879,27.477-18.942-.391-33.459-30.413,2.32-67.723C42.673,3.616,40.224.126,37.839-.06,35.325-.253,30.5-.253,20.252.134' transform='translate(28.093 0.186)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_53' data-name='Gruppe 53' transform='translate(144.397 117.459)'%3E%3Cpath id='Pfad_133' data-name='Pfad 133' d='M6.661.244C4.247.1-2.838,3.116-8.319,28.008-12.281,46-2.417,49,1.447,48.809c2.8-.141,11.473-1.119,18.067-11.612C29.182,21.815,32.949-.24,26.375-.338S11.591,18.43,6.95,28.976C10.048,17.561,13.132.629,6.661.244' transform='translate(9.24 0.338)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_54' data-name='Gruppe 54' transform='translate(180.192 116.296)'%3E%3Cpath id='Pfad_134' data-name='Pfad 134' d='M1.951,17.711C-.967,17.424-2.9,12.259-2.692,6.778-2.4-.862,4.946-25.245,18.861-23.789c6.317.657,7.346,6.188,7.83,7.639,3.28-4.066,6.563-8.515,13.717-8.417s7.637,7.064,7.734,10.256S45.052,4.552,37.8,4.552c-5.8,0-3.283-11.8-3.185-14.416-1.361,4.257-9.122,20.7-14.98,21.382-5.8.678-3.869-12.284-3.486-16.734-2.029,4.45-9.27,23.411-14.2,22.927' transform='translate(2.707 24.569)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_55' data-name='Gruppe 55' transform='translate(159.45 101.418)'%3E%3Cpath id='Pfad_135' data-name='Pfad 135' d='M1,2.408A2.651,2.651,0,0,0,3.729,5.292,3.415,3.415,0,0,0,7,1.673,2.657,2.657,0,0,0,4.307-1.151,3.452,3.452,0,0,0,1,2.408m5.1,4.159a3.747,3.747,0,0,1-2.666.967C.6,7.534-1.394,5.523-1.394,2.447a5.938,5.938,0,0,1,1.16-3.54A5.306,5.306,0,0,1,4.213-3.34,4.46,4.46,0,0,1,7.67-1.772l.251-1.335h2.473L8.329,7.283H5.975Z' transform='translate(1.394 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_56' data-name='Gruppe 56' transform='translate(170.003 101.65)'%3E%3Cpath id='Pfad_136' data-name='Pfad 136' d='M2.674,1.37,5.42-1.9H8.335L3.892,3.186l2.843,5.3H3.856L2.133,5.046-.747,8.49H-3.709L.875,3.072-1.807-1.9H1.03Z' transform='translate(3.709 1.901)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_57' data-name='Gruppe 57' transform='translate(181.204 101.418)'%3E%3Cpath id='Pfad_137' data-name='Pfad 137' d='M1.006,2.408A2.649,2.649,0,0,0,3.726,5.292,3.416,3.416,0,0,0,7,1.673,2.659,2.659,0,0,0,4.3-1.151a3.45,3.45,0,0,0-3.3,3.559M6.1,6.567a3.728,3.728,0,0,1-2.659.967C.6,7.534-1.395,5.523-1.395,2.447A5.934,5.934,0,0,1-.239-1.093,5.323,5.323,0,0,1,4.212-3.34,4.44,4.44,0,0,1,7.665-1.772l.251-1.335H10.4L8.323,7.283H5.97Z' transform='translate(1.395 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_58' data-name='Gruppe 58' transform='translate(193.365 101.457)'%3E%3Cpath id='Pfad_138' data-name='Pfad 138' d='M1.677.494A3.882,3.882,0,0,1,4.536-.685,3.423,3.423,0,0,1,7.824,1.058,4.322,4.322,0,0,1,11.283-.685c2.241,0,3.591,1.241,3.591,3.406a12.734,12.734,0,0,1-.344,2.459L13.622,9.9h-2.5l1.067-5.493a6.114,6.114,0,0,0,.134-1.258,1.477,1.477,0,0,0-1.621-1.683c-1.552,0-2.437,1.06-2.843,3.209L6.857,9.9H4.36L5.429,4.405a5.986,5.986,0,0,0,.133-1.258A1.476,1.476,0,0,0,3.937,1.464c-1.561,0-2.418,1.06-2.839,3.209L.031,9.9H-2.327L-.257-.492H1.91Z' transform='translate(2.327 0.685)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_59' data-name='Gruppe 59' transform='translate(211.822 101.378)'%3E%3Cpath id='Pfad_139' data-name='Pfad 139' d='M3.489,1.809A2.675,2.675,0,0,0,.708-.242a3.022,3.022,0,0,0-2.86,2.051ZM.169,8.442A4.841,4.841,0,0,1-4.84,3.413a6.062,6.062,0,0,1,2.034-4.55A5.422,5.422,0,0,1,.9-2.51a4.794,4.794,0,0,1,5.028,5A9.824,9.824,0,0,1,5.812,3.84H-2.4A2.564,2.564,0,0,0,.264,6.161,3.039,3.039,0,0,0,2.8,4.883H5.468a5.456,5.456,0,0,1-5.3,3.559' transform='translate(4.84 2.51)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_60' data-name='Gruppe 60' transform='translate(223.235 101.342)'%3E%3Cpath id='Pfad_140' data-name='Pfad 140' d='M.842.129h2.2L2.775,1.5A4.125,4.125,0,0,1,6.332-.179h.077L5.946,2.259C3.592,2.3,2.8,3.13,2.368,5.28L1.344,10.52H-1.168Z' transform='translate(1.168 0.179)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 120%;
    background-position: 50%
}

#index .start .text {
    position: absolute;
    right: 5%;
    top: calc(50vw * (9/16));
    transform: translateY(-50%);
    text-align: right;
    font-size: 5.2vw;
    line-height: 5.3vw;
    font-weight: 400;
    color: var(--beige);
    margin: 0
}

#index .start:has(.mobil) .text {
    left: 14%;
    right: auto;
    top: 146vw;
    font-size: 15vw !important;
    line-height: 17vw !important;
    font-weight: 400
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .start {
        aspect-ratio: 9/16 !important;
        background-size: cover !important;
        background-position: 75% !important
    }

    .start::before {
        top: 10% !important;
        aspect-ratio: 9/16 !important
    }

    .start .logo {
        position: absolute;
        top: 20vw;
        left: 10%;
        width: 11%;
        aspect-ratio: 1/1;
        transform-origin: top left;
        transform: rotate(16deg);
        background-color: var(--red)
    }

    #index .start .logo {
        top: calc(10% - 15vw);
        left: 50%;
        width: 20.3vw;
        transform-origin: bottom left;
        transform: translateX(-50%)rotate(16deg)
    }

    #index .start .logo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 1/1;
        transform-origin: center;
        transform: rotate(-16deg);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='281.855' height='285.742' viewBox='0 0 281.855 285.742'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Pfad_141' data-name='Pfad 141' d='M0,119.7H281.855V-166.045H0Z' transform='translate(0 166.045)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_61' data-name='Gruppe 61' clip-path='url(%23clip-path)'%3E%3Cg id='Gruppe_50' data-name='Gruppe 50' transform='translate(109.922 102.467)'%3E%3Cpath id='Pfad_130' data-name='Pfad 130' d='M2.886,0C.555,0-3.107,1.738-3.877,6.574s2.124,7.548,5.214,7.548S7.717,8.9,7.521,5.028,5.013,0,2.886,0' transform='translate(4.004)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_51' data-name='Gruppe 51' transform='translate(96.48 118.899)'%3E%3Cpath id='Pfad_131' data-name='Pfad 131' d='M6.495.006C3.576-.24-1.913,2.714-7.134,19.446c-3.338,10.7-2.32,21.382,3.862,21.189,1.165-.038,7.577.843,11.6-21.569C11.036,3.969,8.811.2,6.495.006' transform='translate(9.01 0.008)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_52' data-name='Gruppe 52' transform='translate(47.206 90.922)'%3E%3Cpath id='Pfad_132' data-name='Pfad 132' d='M20.252.134C4.008.749-3.137,2.458-2.944,5.746s5.028,1.16,5.028,14.123S.159,63.2-25.363,88.749a9.159,9.159,0,0,0-2.7,4.839c-.969,2.9,24.738,6,53.149,7.546-1.54,8.123-7.73,32.013,32.857,31.728,27.835-.194,37.116-17.993,36.921-22.247-.122-2.733-.778-4.068-3.862-3.679-3.1.389-19.723,4.065-29.967,3.1s-14.688-2.32-13.524-7.932c26.861.193,68.031-1.359,76.727-2.516s11.986-5.032,14.493-11.029,10.248-27.279,10.248-27.279c.967-3.1-.177-6.55-4.247-4.837-38.276,16.054-61.084,22.829-89.1,23.022C62.584,63.308,67.34,54.81,70.176,46.29,73.4,36.6,71.708,28.377,64.32,27.415,54.289,26.106,41.312,35.963,39.2,46.57c-1.356,6.772,8.312,3.481,11.4,2.129-3.086,5.608-13.139,25.734-14.879,27.477-18.942-.391-33.459-30.413,2.32-67.723C42.673,3.616,40.224.126,37.839-.06,35.325-.253,30.5-.253,20.252.134' transform='translate(28.093 0.186)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_53' data-name='Gruppe 53' transform='translate(144.397 117.459)'%3E%3Cpath id='Pfad_133' data-name='Pfad 133' d='M6.661.244C4.247.1-2.838,3.116-8.319,28.008-12.281,46-2.417,49,1.447,48.809c2.8-.141,11.473-1.119,18.067-11.612C29.182,21.815,32.949-.24,26.375-.338S11.591,18.43,6.95,28.976C10.048,17.561,13.132.629,6.661.244' transform='translate(9.24 0.338)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_54' data-name='Gruppe 54' transform='translate(180.192 116.296)'%3E%3Cpath id='Pfad_134' data-name='Pfad 134' d='M1.951,17.711C-.967,17.424-2.9,12.259-2.692,6.778-2.4-.862,4.946-25.245,18.861-23.789c6.317.657,7.346,6.188,7.83,7.639,3.28-4.066,6.563-8.515,13.717-8.417s7.637,7.064,7.734,10.256S45.052,4.552,37.8,4.552c-5.8,0-3.283-11.8-3.185-14.416-1.361,4.257-9.122,20.7-14.98,21.382-5.8.678-3.869-12.284-3.486-16.734-2.029,4.45-9.27,23.411-14.2,22.927' transform='translate(2.707 24.569)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_55' data-name='Gruppe 55' transform='translate(159.45 101.418)'%3E%3Cpath id='Pfad_135' data-name='Pfad 135' d='M1,2.408A2.651,2.651,0,0,0,3.729,5.292,3.415,3.415,0,0,0,7,1.673,2.657,2.657,0,0,0,4.307-1.151,3.452,3.452,0,0,0,1,2.408m5.1,4.159a3.747,3.747,0,0,1-2.666.967C.6,7.534-1.394,5.523-1.394,2.447a5.938,5.938,0,0,1,1.16-3.54A5.306,5.306,0,0,1,4.213-3.34,4.46,4.46,0,0,1,7.67-1.772l.251-1.335h2.473L8.329,7.283H5.975Z' transform='translate(1.394 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_56' data-name='Gruppe 56' transform='translate(170.003 101.65)'%3E%3Cpath id='Pfad_136' data-name='Pfad 136' d='M2.674,1.37,5.42-1.9H8.335L3.892,3.186l2.843,5.3H3.856L2.133,5.046-.747,8.49H-3.709L.875,3.072-1.807-1.9H1.03Z' transform='translate(3.709 1.901)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_57' data-name='Gruppe 57' transform='translate(181.204 101.418)'%3E%3Cpath id='Pfad_137' data-name='Pfad 137' d='M1.006,2.408A2.649,2.649,0,0,0,3.726,5.292,3.416,3.416,0,0,0,7,1.673,2.659,2.659,0,0,0,4.3-1.151a3.45,3.45,0,0,0-3.3,3.559M6.1,6.567a3.728,3.728,0,0,1-2.659.967C.6,7.534-1.395,5.523-1.395,2.447A5.934,5.934,0,0,1-.239-1.093,5.323,5.323,0,0,1,4.212-3.34,4.44,4.44,0,0,1,7.665-1.772l.251-1.335H10.4L8.323,7.283H5.97Z' transform='translate(1.395 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_58' data-name='Gruppe 58' transform='translate(193.365 101.457)'%3E%3Cpath id='Pfad_138' data-name='Pfad 138' d='M1.677.494A3.882,3.882,0,0,1,4.536-.685,3.423,3.423,0,0,1,7.824,1.058,4.322,4.322,0,0,1,11.283-.685c2.241,0,3.591,1.241,3.591,3.406a12.734,12.734,0,0,1-.344,2.459L13.622,9.9h-2.5l1.067-5.493a6.114,6.114,0,0,0,.134-1.258,1.477,1.477,0,0,0-1.621-1.683c-1.552,0-2.437,1.06-2.843,3.209L6.857,9.9H4.36L5.429,4.405a5.986,5.986,0,0,0,.133-1.258A1.476,1.476,0,0,0,3.937,1.464c-1.561,0-2.418,1.06-2.839,3.209L.031,9.9H-2.327L-.257-.492H1.91Z' transform='translate(2.327 0.685)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_59' data-name='Gruppe 59' transform='translate(211.822 101.378)'%3E%3Cpath id='Pfad_139' data-name='Pfad 139' d='M3.489,1.809A2.675,2.675,0,0,0,.708-.242a3.022,3.022,0,0,0-2.86,2.051ZM.169,8.442A4.841,4.841,0,0,1-4.84,3.413a6.062,6.062,0,0,1,2.034-4.55A5.422,5.422,0,0,1,.9-2.51a4.794,4.794,0,0,1,5.028,5A9.824,9.824,0,0,1,5.812,3.84H-2.4A2.564,2.564,0,0,0,.264,6.161,3.039,3.039,0,0,0,2.8,4.883H5.468a5.456,5.456,0,0,1-5.3,3.559' transform='translate(4.84 2.51)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_60' data-name='Gruppe 60' transform='translate(223.235 101.342)'%3E%3Cpath id='Pfad_140' data-name='Pfad 140' d='M.842.129h2.2L2.775,1.5A4.125,4.125,0,0,1,6.332-.179h.077L5.946,2.259C3.592,2.3,2.8,3.13,2.368,5.28L1.344,10.52H-1.168Z' transform='translate(1.168 0.179)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: 50%
    }

    .start .logo::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        aspect-ratio: 1/1;
        transform-origin: center;
        transform: rotate(-16deg);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='281.855' height='285.742' viewBox='0 0 281.855 285.742'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Cpath id='Pfad_141' data-name='Pfad 141' d='M0,119.7H281.855V-166.045H0Z' transform='translate(0 166.045)' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Gruppe_61' data-name='Gruppe 61' clip-path='url(%23clip-path)'%3E%3Cg id='Gruppe_50' data-name='Gruppe 50' transform='translate(109.922 102.467)'%3E%3Cpath id='Pfad_130' data-name='Pfad 130' d='M2.886,0C.555,0-3.107,1.738-3.877,6.574s2.124,7.548,5.214,7.548S7.717,8.9,7.521,5.028,5.013,0,2.886,0' transform='translate(4.004)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_51' data-name='Gruppe 51' transform='translate(96.48 118.899)'%3E%3Cpath id='Pfad_131' data-name='Pfad 131' d='M6.495.006C3.576-.24-1.913,2.714-7.134,19.446c-3.338,10.7-2.32,21.382,3.862,21.189,1.165-.038,7.577.843,11.6-21.569C11.036,3.969,8.811.2,6.495.006' transform='translate(9.01 0.008)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_52' data-name='Gruppe 52' transform='translate(47.206 90.922)'%3E%3Cpath id='Pfad_132' data-name='Pfad 132' d='M20.252.134C4.008.749-3.137,2.458-2.944,5.746s5.028,1.16,5.028,14.123S.159,63.2-25.363,88.749a9.159,9.159,0,0,0-2.7,4.839c-.969,2.9,24.738,6,53.149,7.546-1.54,8.123-7.73,32.013,32.857,31.728,27.835-.194,37.116-17.993,36.921-22.247-.122-2.733-.778-4.068-3.862-3.679-3.1.389-19.723,4.065-29.967,3.1s-14.688-2.32-13.524-7.932c26.861.193,68.031-1.359,76.727-2.516s11.986-5.032,14.493-11.029,10.248-27.279,10.248-27.279c.967-3.1-.177-6.55-4.247-4.837-38.276,16.054-61.084,22.829-89.1,23.022C62.584,63.308,67.34,54.81,70.176,46.29,73.4,36.6,71.708,28.377,64.32,27.415,54.289,26.106,41.312,35.963,39.2,46.57c-1.356,6.772,8.312,3.481,11.4,2.129-3.086,5.608-13.139,25.734-14.879,27.477-18.942-.391-33.459-30.413,2.32-67.723C42.673,3.616,40.224.126,37.839-.06,35.325-.253,30.5-.253,20.252.134' transform='translate(28.093 0.186)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_53' data-name='Gruppe 53' transform='translate(144.397 117.459)'%3E%3Cpath id='Pfad_133' data-name='Pfad 133' d='M6.661.244C4.247.1-2.838,3.116-8.319,28.008-12.281,46-2.417,49,1.447,48.809c2.8-.141,11.473-1.119,18.067-11.612C29.182,21.815,32.949-.24,26.375-.338S11.591,18.43,6.95,28.976C10.048,17.561,13.132.629,6.661.244' transform='translate(9.24 0.338)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_54' data-name='Gruppe 54' transform='translate(180.192 116.296)'%3E%3Cpath id='Pfad_134' data-name='Pfad 134' d='M1.951,17.711C-.967,17.424-2.9,12.259-2.692,6.778-2.4-.862,4.946-25.245,18.861-23.789c6.317.657,7.346,6.188,7.83,7.639,3.28-4.066,6.563-8.515,13.717-8.417s7.637,7.064,7.734,10.256S45.052,4.552,37.8,4.552c-5.8,0-3.283-11.8-3.185-14.416-1.361,4.257-9.122,20.7-14.98,21.382-5.8.678-3.869-12.284-3.486-16.734-2.029,4.45-9.27,23.411-14.2,22.927' transform='translate(2.707 24.569)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_55' data-name='Gruppe 55' transform='translate(159.45 101.418)'%3E%3Cpath id='Pfad_135' data-name='Pfad 135' d='M1,2.408A2.651,2.651,0,0,0,3.729,5.292,3.415,3.415,0,0,0,7,1.673,2.657,2.657,0,0,0,4.307-1.151,3.452,3.452,0,0,0,1,2.408m5.1,4.159a3.747,3.747,0,0,1-2.666.967C.6,7.534-1.394,5.523-1.394,2.447a5.938,5.938,0,0,1,1.16-3.54A5.306,5.306,0,0,1,4.213-3.34,4.46,4.46,0,0,1,7.67-1.772l.251-1.335h2.473L8.329,7.283H5.975Z' transform='translate(1.394 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_56' data-name='Gruppe 56' transform='translate(170.003 101.65)'%3E%3Cpath id='Pfad_136' data-name='Pfad 136' d='M2.674,1.37,5.42-1.9H8.335L3.892,3.186l2.843,5.3H3.856L2.133,5.046-.747,8.49H-3.709L.875,3.072-1.807-1.9H1.03Z' transform='translate(3.709 1.901)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_57' data-name='Gruppe 57' transform='translate(181.204 101.418)'%3E%3Cpath id='Pfad_137' data-name='Pfad 137' d='M1.006,2.408A2.649,2.649,0,0,0,3.726,5.292,3.416,3.416,0,0,0,7,1.673,2.659,2.659,0,0,0,4.3-1.151a3.45,3.45,0,0,0-3.3,3.559M6.1,6.567a3.728,3.728,0,0,1-2.659.967C.6,7.534-1.395,5.523-1.395,2.447A5.934,5.934,0,0,1-.239-1.093,5.323,5.323,0,0,1,4.212-3.34,4.44,4.44,0,0,1,7.665-1.772l.251-1.335H10.4L8.323,7.283H5.97Z' transform='translate(1.395 3.34)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_58' data-name='Gruppe 58' transform='translate(193.365 101.457)'%3E%3Cpath id='Pfad_138' data-name='Pfad 138' d='M1.677.494A3.882,3.882,0,0,1,4.536-.685,3.423,3.423,0,0,1,7.824,1.058,4.322,4.322,0,0,1,11.283-.685c2.241,0,3.591,1.241,3.591,3.406a12.734,12.734,0,0,1-.344,2.459L13.622,9.9h-2.5l1.067-5.493a6.114,6.114,0,0,0,.134-1.258,1.477,1.477,0,0,0-1.621-1.683c-1.552,0-2.437,1.06-2.843,3.209L6.857,9.9H4.36L5.429,4.405a5.986,5.986,0,0,0,.133-1.258A1.476,1.476,0,0,0,3.937,1.464c-1.561,0-2.418,1.06-2.839,3.209L.031,9.9H-2.327L-.257-.492H1.91Z' transform='translate(2.327 0.685)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_59' data-name='Gruppe 59' transform='translate(211.822 101.378)'%3E%3Cpath id='Pfad_139' data-name='Pfad 139' d='M3.489,1.809A2.675,2.675,0,0,0,.708-.242a3.022,3.022,0,0,0-2.86,2.051ZM.169,8.442A4.841,4.841,0,0,1-4.84,3.413a6.062,6.062,0,0,1,2.034-4.55A5.422,5.422,0,0,1,.9-2.51a4.794,4.794,0,0,1,5.028,5A9.824,9.824,0,0,1,5.812,3.84H-2.4A2.564,2.564,0,0,0,.264,6.161,3.039,3.039,0,0,0,2.8,4.883H5.468a5.456,5.456,0,0,1-5.3,3.559' transform='translate(4.84 2.51)' fill='%23fff'/%3E%3C/g%3E%3Cg id='Gruppe_60' data-name='Gruppe 60' transform='translate(223.235 101.342)'%3E%3Cpath id='Pfad_140' data-name='Pfad 140' d='M.842.129h2.2L2.775,1.5A4.125,4.125,0,0,1,6.332-.179h.077L5.946,2.259C3.592,2.3,2.8,3.13,2.368,5.28L1.344,10.52H-1.168Z' transform='translate(1.168 0.179)' fill='%23fff'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 120%;
        background-position: 50%
    }

    .start .logo {
        top: calc(10% - 15vw);
        left: 50%;
        width: 15vw;
        transform-origin: bottom left;
        transform: translateX(-50%)rotate(16deg)
    }
}

@media screen and (max-width:2000px) {
    #index .start::before {
        top: 109px
    }
}

#index .start .ticket {
    position: absolute;
    top: 75%;
    right: 0;
    height: 5vw;
    width: 14.3%;
    transform: translateY(-50%);
    background-image: linear-gradient(100deg, transparent 12.5%, var(--beige) 13%);
    display: flex;
    justify-content: center;
    align-items: center
}

#index .start .ticket .symbol {
    background-image: url(/img/ski.png);
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat;
    position: absolute;
    top: -.5vw;
    left: 1.8vw;
    width: 2.8vw;
    aspect-ratio: 1/1;
    border-radius: .5vw;
    background-color: #fff;
    box-shadow: -1px 2px 5px rgba(0, 0, 0, .2)
}

p {
    font-weight: 200
}

#index .start .ticket p {
    padding: 0;
    margin: 0;
    text-align: right;
    font-size: 1vw;
    line-height: 1.2vw;
    font-weight: 300
}

.start {
    z-index: -1;
    width: 100%;
    aspect-ratio: 16/6.3;
    background-image: var(--background-black-and-white);
    background-size: 110%;
    background-position: 100% 44%;
    background-repeat: no-repeat
}

.start::before {
    content: "";
    position: absolute;
    top: 149px;
    left: 10%;
    z-index: 0;
    width: 80%;
    aspect-ratio: 16/6.3;
    background-image: url(/img/Soulseil-5070.webp);
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat
}

a button {
    cursor: pointer
}

@media(max-width:2000px) {
    .start::before {
        top: 109px
    }

    .start video {
        top: 109px !important
    }
}

@media(max-width:1500px) {
    .start::before {
        top: 60px;
        aspect-ratio: 16/5
    }

    .start video {
        top: 60px !important
    }
}

.dual-image {
    margin: 5vw 10vw 2vw 19.3vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw;
    height: 25vw
}

.dual-image .image {
    transform: skew(-12deg);
    border: 1px solid var(--beige)
}

.title-box {
    margin: 5vw 10vw;
    position: relative;
    height: 30vw
}

.dual-image+.title-box {
    margin-top: 0
}

.title-box .image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 20vw;
    border: 1px solid var(--beige);
    transform: skew(-12deg)translateX(3vw)
}

.title-box .info {
    position: absolute;
    width: 25vw;
    padding: 2vw;
    right: 0;
    bottom: 2vw;
    contain: paint;
    text-align: right
}

.title-box .info::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    transform: skew(-12deg)translateX(1.2vw);
    background-color: var(--beige)
}

.title-box .info h1 {
    margin: 0;
    margin-bottom: 2vw
}

.title-box .info a {
    text-align: right
}

.title-box .info .button {
    padding: 1vw 2vw;
    border-radius: .5vw;
    background-color: var(--grey);
    color: var(--turquoise)
}

.square-gallery {
    margin: 5vw 10vw
}

#social-wall-index .square-gallery {
    margin: 1vw 10vw
}

#social-wall-index .square-gallery:nth-child(2) {
    margin-top: 5vw
}

#social-wall-index .square-gallery:nth-child(4) {
    margin-bottom: 5vw
}

.square-gallery h1 {
    margin: 2vw 0;
    color: var(--grey);
    font-size: 2vw
}

.square-gallery .table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 20vw 20vw 20vw;
    gap: 1vw
}

.square-gallery.short .table {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 20vw 20vw;
    gap: 1vw
}

.square-gallery .table .large {
    grid-column: span 2;
    grid-row: span 2
}

.square-gallery .table .entry {
    border: 1px solid #000
}

.start.triple .start::before {
    content: none
}

.start.triple.full {
    background: 0 0;
    aspect-ratio: unset
}

.start.triple .table {
    padding-top: 149px;
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-areas: "cell1 cell2" "cell1 cell3";
    grid-gap: 1.5vw;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 15vw 15vw;
    contain: paint
}

.start.triple .table {
    width: 100%
}

@media(max-width:2000px) {
    .start.triple .table {
        padding-top: 109px
    }
}

.start.triple .table .box1 {
    grid-area: cell1;
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 1.5vw);
    left: -4vw
}

.start.triple .table .box1::before {
    content: "";
    display: block;
    position: absolute;
    width: 110%;
    height: 100%;
    transform: skew(12deg);
    background: url(/img/lucajaenichen_axamer_lizum_winter_andi_highres-009281.webp);
    background-position: 50%;
    background-size: 100%;
    filter: brightness(.8)
}

.start.triple .table .box1 h1 {
    font-size: 2vw;
    font-weight: 300;
    margin: 1vw 0
}

.start.triple .table .box1 h2 {
    font-size: 1.5vw;
    font-weight: 200;
    margin: 0
}

.start.triple .table .box1 .box-content {
    transform: skew(12deg);
    position: absolute;
    top: 6vw;
    left: 7vw;
    color: var(--grey)
}

.start.triple .button {
    display: block;
    margin-top: 5vw;
    padding: 1vw 2vw;
    font-size: 1.2vw;
    background-color: var(--beige);
    border-radius: .5vw
}

.start.triple .table .box2 {
    grid-area: cell2;
    position: relative;
    left: -.4vw;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 2.5vw)
}

.start.triple .table .box2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    display: block;
    background: url("/img/Manuel Kokseder - Axamer Lizum--20.webp");
    background-position: 50%;
    background-size: 100%;
    transform: skew(12deg);
    filter: brightness(.8)
}

.start.triple .table .box3 {
    grid-area: cell3;
    position: relative;
    left: -4.4vw;
    transform: skew(-12deg);
    width: calc(100% + 8.5vw);
    contain: paint
}

.start.triple .table .box3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    display: block;
    background: url(/img/the_wild_one.webp);
    background-position: 50%;
    background-size: 100%;
    transform: skew(12deg);
    filter: brightness(.8)
}

.start.triple .table .box2 h1,
.start.triple .table .box3 h1 {
    transform: skew(12deg);
    position: absolute;
    right: 5vw;
    bottom: 0;
    color: var(--light-beige);
    font-size: 2vw;
    margin: 3vw 0;
    font-weight: 300
}

.start.triple .table .box3 h1 {
    top: 0;
    right: 8.5vw
}

.ticket-switch {
    width: 80%;
    margin: auto;
    contain: paint;
    position: relative
}

.box-container {
    margin: 5vw 0;
    display: grid;
    width: 104%;
    position: relative;
    left: -2vw;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2vw
}

#tarife .box-container {
    margin-top: 3vw;
    margin-bottom: 0
}

#partner-index .box-container {
    margin: 1vw 0
}

.content-container {
    width: 100%;
    contain: paint
}

#partner-index .content-container {
    width: 80%
}

.content-container.tall .box-container {
    width: 106%;
    left: -2.3vw
}

#partner-index .content-container .box-container .box {
    border: 1px solid var(--beige)
}

.box-container:has(.multi) {
    width: 106%
}

.box-container .multi {
    display: grid;
    gap: 1vw;
    transform: skew(-12deg)
}

.box-container.switch {
    width: 105%
}

.box-container .box {
    transform: skew(-12deg);
    contain: paint;
    position: relative;
    height: 15vw
}

.ticket-switch .border {
    position: absolute;
    bottom: 0;
    height: 15vw;
    width: .4vw;
    background-color: var(--beige)
}

.ticket-switch .border.left {
    left: 0;
    display: none
}

.ticket-switch .border.right {
    right: 0;
    display: none
}

.ticket-switch:has(a:nth-child(1) .box.active) .border.left {
    display: block
}

.ticket-switch:has(a:nth-child(4) .box.active) .border.right {
    display: block
}

.box-container .box.active {
    height: 14.3vw;
    width: calc(100% - .8vw);
    border: .4vw solid var(--beige)
}

.box-container.switch .box::before {
    opacity: .7;
    transition: opacity .2s
}

.box-container.switch .box:hover::before {
    opacity: 1
}

.box-container.switch .box.active::before {
    opacity: 1
}

.box-container .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    height: 100%;
    width: 120%;
    transform: skew(12deg)
}

#tarife .box-container.first .box::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)skew(12deg);
    width: 60%;
    height: 40%;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat
}

#tarife .box-container a:nth-child(1) .box::before {
    background-image: url(/img/csm_FTT_Web_Winter-Counter_Kappl-Marz2019_f7999d400c.webp);
    background-size: cover;
    background-position: 50%
}

#tarife .box-container:not(.switch) a:nth-child(1) .box::before {
    background-size: 82%;
    background-position-y: bottom;
    background-position-x: 84%
}

#tarife .box-container.first a:nth-child(1) .box::after {
    background-image: url(/img/freizeitticket_logo.svg)
}

#tarife .box-container a:nth-child(2) .box::before {
    background-image: url("/img/STUBAIER_GLETSCHER_PISTE_3663_ret01_AI Kopie.webp");
    background-size: 95%;
    background-position: 50% 40%
}

#tarife .box-container.first a:nth-child(2) .box::after {
    background-image: url(/img/spc_logo.svg)
}

#tarife .box-container a:nth-child(3) .box::before {
    background-image: url(/img/SCT_Webseite_1500x800.6729b3db.webp);
    background-size: cover;
    background-position: 50%
}

#tarife .box-container.first a:nth-child(3) .box::after {
    background-image: url(/img/snowcardtirol_logo.png)
}

#tarife .box-container a:nth-child(4) .box::before {
    background-image: url("/img/true (4).webp");
    background-size: cover;
    background-position: 50%
}

#tarife .box-container:not(.switch) a:nth-child(4) .box::before {
    background-size: 83%;
    background-position: 14% 98%
}

#tarife .box-container.first a:nth-child(4) .box::after {
    background-image: url(/img/isp_logo.png)
}

#tarife .ticket-switch .box-container a:nth-child(4) .box::before {
    background-image: url("/img/Manuel Kokseder - Axamer Lizum--39.webp");
    background-size: cover;
    background-position: 50%
}

.box-container .multi .box {
    transform: translateX(-1px)
}

.box-container .box .border {
    position: absolute;
    top: 0;
    left: 2vw;
    height: 100%;
    width: 1px;
    background-color: var(--beige);
    transform: skew(12deg)
}

.box-container .box .link {
    position: absolute;
    top: auto;
    left: auto;
    bottom: 1vw;
    right: 1vw;
    padding: .5vw;
    padding-right: 1vw;
    text-align: right;
    width: 10vw;
    height: unset;
    background: 0 0;
    box-shadow: none
}

.box-container a:nth-child(4) .box .link {
    right: 2vw
}

.box-container .box .link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: skew(-12deg);
    background: var(--inverted-gradient);
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2);
    z-index: -1
}

.box-container .multi .box .border {
    left: 1.1vw
}

.content-container.tall .box-container .box .border {
    left: 2.3vw
}

.box-container .multi .box:nth-child(2) .border {
    left: 3vw
}

.box-container .box .border.right {
    position: absolute;
    top: 0;
    left: auto;
    right: 1.1vw
}

.box-container .multi .box .border.right {
    right: 3.7vw
}

.content-container.tall .box-container .box .border.right {
    left: auto;
    right: 2.4vw
}

.box-container .multi .box:nth-child(2) .border.right {
    left: auto;
    right: 1.7vw
}

.box-container .box .box-content {
    height: 100%;
    width: 100%;
    transform: skew(12deg)translateX(-10%)
}

.box-container .box .box-content h1 {
    padding: 7vw 2vw 1vw 0;
    margin: 0;
    font-size: 1.2vw;
    text-align: right
}

.content-container.tall .box .box-content h1 {
    padding: 15vw 4vw 4vw 0
}

.triplet-box-1 {
    width: 90%;
    margin: 5vw auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: 20vw;
    gap: 2vw
}

.triplet-box-1-container {
    background-color: var(--grey);
    padding: 1px
}

.triplet-box-1 .box1 {
    border: 1px solid var(--beige);
    transform: skew(-12deg);
    position: relative
}

.triplet-box-1.dark .box1 {
    background-color: #fff;
    border: none
}

.triplet-box-1 .box1 h1 {
    position: absolute;
    margin: 0;
    top: 1vw;
    left: -8%;
    transform: skew(12deg);
    color: var(--turquoise)
}

.triplet-box-1.dark .box1 h1 {
    top: -2vw;
    font-size: 3vw
}

.triplet-box-1 .box2 {
    position: relative;
    contain: paint;
    width: calc(100% + 2vw);
    height: calc(100% + 2px);
    left: -2vw
}

.triplet-box-1.dark .box2 {
    height: 100%
}

.triplet-box-1 .box2 .box {
    position: absolute;
    top: 0;
    left: 2.2vw;
    height: calc(100% - 2px);
    width: 100%;
    border: 1px solid var(--beige);
    transform: skew(-12deg)
}

.triplet-box-1.dark .box2 .box {
    height: 100%;
    background-color: var(--light-grey);
    border: none
}

.triplet-box-1.dark .box2 .box-content {
    height: 100%;
    width: fit-content;
    margin-left: auto;
    padding-right: 4vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1vw;
    transform: skew(12deg)
}

.triplet-box-1.dark .box2 h1 {
    color: var(--turquoise);
    text-align: right;
    margin: 0;
    font-size: 1.2vw
}

.triplet-box-1.dark .box2 h2 {
    color: var(--turquoise);
    text-align: right;
    margin: 0;
    font-size: .8vw;
    font-weight: 400
}

.triplet-box-1 .box2 .border {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background-color: var(--beige)
}

.triplet-box-1.dark .box2 .border {
    display: none
}

.triplet-box-1 .box3 {
    display: flex;
    flex-direction: column;
    justify-content: center
}

.triplet-box-1 .box3 h1 {
    margin: 0;
    margin-bottom: 1vw
}

.triplet-box-1 .box3 h2 {
    margin: 0;
    margin-bottom: 5vw;
    font-weight: 400;
    font-size: 1.2vw
}

.triplet-box-1.dark .box3 h1,
.triplet-box-1.dark .box3 h2 {
    color: var(--beige)
}

.triplet-box-1 .box3 .button {
    padding: 1vw 2vw;
    border-radius: .5vw;
    background-color: var(--beige);
    text-align: center;
    width: fit-content;
    color: var(--grey)
}

.triplet-box-1 .box3 .button:visited {
    color: var(--grey)
}

.data-container {
    display: grid;
    grid-template-columns: 31vw 12vw 23vw 23vw 4vw;
    width: 100%;
    contain: paint
}

.data-container .data {
    height: fit-content;
    padding: .8vw;
    padding-right: 2.4vw;
    z-index: var(--rev-index);
    position: relative
}

.data-container .data.info {
    width: 31.8vw;
    background-image: linear-gradient(110deg, var(--light-beige), var(--beige) 32.7vw, transparent 32.7vw)
}

.data-container .data.webcam {
    width: 12.7vw;
    background-image: linear-gradient(110deg, var(--light-beige), var(--beige) 14.7vw, transparent 14.7vw);
    height: 8.7vw
}

.data-container .data .prev {
    position: absolute;
    right: 1vw;
    top: 5vw;
    font-size: 1vw
}

.data-container .data .next {
    position: absolute;
    top: 5vw;
    right: 3vw;
    font-size: 1vw
}

.data-container .data .prev a,
.data-container .data .next a {
    font-weight: 900
}

.data-container .data .prev a:hover,
.data-container .data .next a:hover {
    cursor: pointer
}

@keyframes webcamIn {
    0% {
        opacity: 0;
        left: 100%
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1;
        left: 50%
    }
}

@keyframes webcamOut {
    0% {
        opacity: 1;
        left: 50%
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 0;
        left: 100%
    }
}

@keyframes webcamIn2 {
    0% {
        opacity: 0;
        left: 0%
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 1;
        left: 50%
    }
}

@keyframes webcamOut2 {
    0% {
        opacity: 1;
        left: 50%
    }

    50% {
        opacity: 0
    }

    100% {
        opacity: 0;
        left: 0%
    }
}

.data-container .data.webcam .entry {
    position: absolute;
    top: .8vw;
    transform: translateX(calc(-50% - .8vw));
    display: none;
    left: 50%;
    animation-timing-function: ease-in;
    animation-duration: .3s;
    animation-delay: 0;
    animation-fill-mode: both
}

.data-container .data.webcam .entry.active {
    display: block;
    animation-name: webcamIn
}

.data-container .data.webcam .entry.gone {
    display: block;
    animation-name: webcamOut
}

.data-container .data.webcam .entry.gone2 {
    display: block;
    animation-name: webcamOut2
}

.data-container .data.webcam .entry.active2 {
    display: block;
    animation-name: webcamIn2
}

.data-container .data.weather {
    width: 23.8vw;
    background-image: linear-gradient(110deg, var(--light-beige), var(--beige) 25.4vw, transparent 25.4vw);
    height: 8.7vw
}

.data-container .data.snow {
    width: 30vw;
    background-image: linear-gradient(110deg, var(--light-beige), var(--beige));
    height: 8.7vw
}

.data-container .data.snow {
    width: 43vw;
    background-image: linear-gradient(110deg, var(--light-beige), var(--beige));
    height: 8.7vw
}

.data-container .data.snow .info-container {
    width: 80%
}

.data-container .data.snow .info .image {
    margin-top: 1vw;
    width: 2.5vw;
    height: 2.5vw;
    background: url(/img/lawine.png);
    background-size: contain;
    z-index: -1
}

.data-container .data h1 {
    font-size: .8vw;
    font-weight: 400;
    margin: .2vw
}

.data-container .data h1 span {
    font-size: 1.6vw
}

.data-container .data .icon-title {
    display: flex;
    align-items: center;
    gap: 1.6vw
}

.data-container .data .icon-title svg {
    padding: .4vw;
    background: #fff;
    border-radius: .4vw;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .2)
}

.data-container .data .icon-title a,
.data-container .data .icon-title a:visited {
    color: var(--grey)
}

.data-container .data .icon {
    padding: .4vw;
    background: #fff;
    border-radius: .4vw;
    box-shadow: 1px 2px 5px rgba(0, 0, 0, .2);
    position: absolute;
    top: .8vw;
    right: 0
}

.data-container .data .info-container {
    display: flex;
    justify-content: space-evenly
}

.data-container .data .info-container .info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.data-container .data .info-container .info svg {
    width: 2.5vw;
    height: 2.5vw
}

.data-container .data.snow .info-container .info svg {
    height: 2.4vw
}

.data-container .data.snow .info-container .info h1 {
    font-size: .8vw
}

.data-container .data .info-container .info:nth-child(3) h1 {
    margin-top: .6vw
}

.data-container .data.webcam .title h1 {
    text-align: center;
    margin-left: 2vw;
    margin-top: .8vw
}

.data-container .data.data.webcam .info h1 {
    white-space: nowrap;
    margin-left: 2vw;
    text-align: center
}

.data-container .data.data.webcam .info h1:nth-child(1) {
    font-size: .8vw
}

.data-container .data.data.webcam .info h1:nth-child(2) {
    font-size: .7vw
}

.data-container .data.data.webcam .info h1:nth-child(3) {
    font-size: .7vw
}

.data-container .data.data.webcam .info h1:nth-child(4) {
    font-size: 2vw
}

.data-container .data.weather .title {
    margin-left: 4.7vw;
    margin-top: .8vw
}

.data-container .data.data.weather .day {
    font-size: 1vw;
    margin-top: .4vw;
    text-align: center;
    position: relative;
    right: 1vw
}

.data-container .data.weather .entry-container {
    display: flex;
    margin-top: .4vw;
    padding: 0 .8vw;
    justify-content: space-evenly;
    gap: 1vw;
    position: relative;
    right: 1vw
}

.data-container .data.weather .entry-container .entry {
    display: flex;
    align-items: center;
    flex-direction: column
}

.data-container .data.snow .title {
    margin-left: 4.7vw;
    margin-top: .8vw
}

.data-container .data.snow .info-container .info h1 {
    font-size: .65vw;
    text-align: center
}

.data-container .data.snow .info-container .info h1:nth-child(3) {
    margin-top: 0;
    font-size: 1vw
}

.data-container .data.snow .info-container .info:nth-child(3) h1:nth-child(2) {
    margin-top: .2vw;
    margin-bottom: 0
}

.data-container .data.snow .info-container .info:nth-child(4) h1:nth-child(2) {
    margin-bottom: 0
}

.data-container .data.snow .info-container .info:nth-child(4) h1:nth-child(3) {
    margin-top: 0;
    margin-bottom: 0;
    font-size: .65vw
}

.data-container .data.snow .info-container .info:nth-child(4) h1:nth-child(4) {
    margin-top: 0;
    font-size: 1vw
}

.data-container .data.snow .info-container .info:nth-child(3) h1:nth-child(4) {
    margin-top: 0;
    font-size: 1vw
}

.content {
    padding-top: 5vw;
    contain: paint
}

.content .title {
    padding: 0 10%
}

.content .title h1 {
    font-size: 4vw;
    line-height: 4vw;
    color: var(--beige);
    font-weight: 400 !important;
    margin: 0 0 .5vw
}

.content .title h2 {
    font-weight: 400 !important
}

.content .title.image {
    width: 100%;
    padding-top: 0 !important;
    position: relative
}

.content .title.image.mobil {
    display: none
}

.content .title.image .image {
    margin-left: auto;
    height: 25vw;
    width: 40vw;
    transform: skew(-12deg);
    contain: paint;
    position: relative
}

.content .title.image .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -15%;
    width: 100%;
    height: 100%;
    background-image: url(/img/lucajaenichen_axamer_lizum_winter_andi_highres-009120.webp);
    background-size: cover;
    background-position: 50%;
    transform: skew(12deg);
    filter: brightness(.8)
}

#anreise .title.image {
    margin-top: 6vw
}

#anreise .title.image .image {
    width: 56vw;
    height: 32vw
}

#anreise .title.image .image::before {
    background-image: url("/img/Postbus am PP.webp");
    background-position-x: 85%
}

#anreise .title.image .info {
    top: -3vw;
    right: 18vw;
    bottom: auto;
    transform: skew(0);
    padding: 1vw 8vw .5vw 3.5vw
}

#anreise .title.image .info::before {
    transform: skew(-12deg)
}

#anreise .title.image .info h1 {
    color: var(--grey);
    font-size: 1.7vw;
    line-height: 2.5vw;
    transform: skew(0)translateX(.5vw);
    text-align: right
}

#anreise .title.image .info p {
    transform: skew(0);
    font-size: .8vw;
    font-weight: 300;
    line-height: 1vw;
    margin-top: 0;
    text-align: right
}

#anreise .title.image h1.text {
    line-height: 2vw;
    top: 2vw;
    color: var(--grey);
    font-size: 2vw;
    left: 10vw
}

#anreise .title.image p.text {
    font-size: 1.5vw;
    line-height: 1.8vw;
    right: 55%;
    top: 30%
}

#anreise .buttons {
    position: absolute;
    display: flex;
    flex-direction: column;
    bottom: 5vw;
    width: 30vw;
    left: 10%
}

#anreise .buttons .button {
    border: none;
    background-color: var(--beige);
    border-radius: .5vw;
    height: auto;
    padding: 1.1vw 0;
    text-align: center;
    margin-bottom: 1vw;
    font-size: .9vw !important;
    color: #707070
}

#anreise .buttons .button.white {
    border: .2vw solid var(--beige);
    background-color: #fff;
    color: #707070
}

.google {
    width: 90%;
    margin: auto;
    margin-bottom: 5vw
}

.google h1 {
    font-size: 2vw;
    font-weight: 300;
    margin-top: 5vw;
    margin-bottom: 3vw
}

.google .google-container {
    transform: skew(-12deg);
    padding: 1vw 5vw;
    width: calc(95% - 10vw);
    margin: auto;
    height: 35vw;
    background-color: var(--turquoise)
}

.google .google-container .google-map {
    transform: skew(12deg);
    width: 100%;
    height: 100%;
    background: #000
}

.google .google-container .button {
    background: var(--inverted-gradient);
    position: absolute;
    right: 0;
    top: 2vw;
    padding: 2vw 4vw
}

.google .google-container .button h1 {
    transform: skew(12deg);
    font-size: 1.5vw;
    margin: 0
}

#tarife .filter {
    margin-bottom: 0
}

#tarife .filter.switch {
    padding-top: 1vw;
    margin-bottom: 3vw;
    gap: 0
}

.filter.switch.reverse .filter-entry h1 {
    text-align: end
}

.filter.switch.day .filter-entry h1 {
    text-align: center
}

#tarife .filter.switch .filter-entry {
    width: 8.6vw
}

.filter-entry:hover {
    cursor: pointer
}

#tarife .filter h1 {
    display: block;
    text-align: right;
    margin-bottom: .1vw;
    padding-right: 2vw;
    font-weight: 300;
    text-align: center
}

#tarife .filter span {
    font-size: .7vw;
    display: block;
    text-align: right;
    margin-bottom: .1vw;
    padding-right: 2vw;
    font-weight: 200
}

.content .title.image .info {
    position: absolute;
    bottom: 2vw;
    right: 52vw;
    transform: skew(-12deg)
}

.content .title.image .info::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: var(--gradient)
}

#anreise .content .title.image .info::before {
    background: var(--inverted-gradient);
    background-size: 92% 100%
}

.content .title.image .info p {
    transform: skew(12deg);
    text-align: center
}

.content .title.image .text {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    left: 10%;
    right: 45%
}

body:not(:has(#header-mobile)):not(:has(#anreise)) .content .title.image .text {
    line-height: 1.1vw
}

#anreise .content .title.image h1.text {
    line-height: 2.2vw;
    font-weight: 200 !important;
    font-size: 1.7vw
}

#anreise .content .title.image .p.text {
    line-height: 1.8vw
}

.content .title:nth-child(n+2) {
    padding-top: 10vw
}

.content .title h2 {
    font-size: 2vw;
    line-height: 2vw;
    color: var(--grey);
    margin: 0
}

.link {
    background-image: url(/img/right.png);
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px;
    background-color: var(--beige);
    border-radius: 10px;
    z-index: 1;
    border: none;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2)
}

.custom.splide.berichte {
    height: 24vw
}

.splide-container {
    width: 20vw;
    margin: auto;
    contain: paint
}

.custom.splide.berichte.weather {
    width: 13vw;
    height: 7vw;
    margin: auto
}

.custom.splide .splide__track {
    overflow: visible
}

.custom.splide::before {
    content: "";
    position: absolute;
    left: -5vw;
    width: 5vw;
    height: 120%;
    top: -20%;
    background: linear-gradient(90deg, var(--grey) 2vw, transparent);
    z-index: 1
}

.custom.splide.berichte::before {
    background: linear-gradient(90deg, white 2vw, transparent)
}

.dark .custom.splide.berichte::before {
    background: linear-gradient(90deg, var(--grey) 2vw, transparent)
}

.custom.splide::after {
    content: "";
    position: absolute;
    right: -5vw;
    width: 5vw;
    height: 120%;
    top: -20%;
    background: linear-gradient(270deg, var(--grey) 2vw, transparent)
}

.custom.splide.berichte::after {
    background: linear-gradient(270deg, white 2vw, transparent)
}

.dark .custom.splide.berichte::after {
    background: linear-gradient(270deg, var(--grey) 2vw, transparent)
}

.custom.splide__arrow {
    width: 2.5vw;
    height: 2.5vw;
    border-radius: .25vw;
    background-color: var(--beige);
    opacity: 1
}

.custom.splide.berichte.weather::before {
    background: linear-gradient(90deg, #ebe5d4 3vw, transparent);
    width: 5vw;
    height: 100%;
    top: 0
}

.custom.splide.berichte.weather::after {
    background: linear-gradient(270deg, #d6cbb8 3vw, transparent);
    width: 5vw;
    height: 100%;
    top: 0
}

.custom.splide.berichte.weather .custom.splide__arrow {
    background-color: unset;
    padding: 0;
    height: auto;
    width: auto
}

.custom.splide.berichte.weather .custom.splide__arrow span {
    font-size: 1vw;
    font-weight: 700
}

.custom.splide__arrow:disabled {
    opacity: 0
}

.custom.splide__arrow.splide__arrow--prev {
    left: -2.5vw
}

.custom.splide__arrow.splide__arrow--next {
    right: -2.5vw
}

.custom.splide__arrow.splide__arrow--prev i {
    width: 100%;
    height: 100%;
    background-image: url(/img/left.png);
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat
}

.custom.splide__arrow.splide__arrow--next i {
    width: 100%;
    height: 100%;
    background-image: url(/img/right.png);
    background-size: 80%;
    background-position: 50%;
    background-repeat: no-repeat
}

.content .title.alt-font h1 {
    font-family: inter;
    letter-spacing: 1.5px
}

.content .title.alt-font h2 {
    font-family: inter;
    letter-spacing: .5px
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .content .title h1 {
        font-size: 30px;
        line-height: 30px
    }

    .content .title h2 {
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 25px
    }
}

.slider {
    margin: 5vw 0;
    padding: 10vw 5vw 5vw;
    position: relative
}

#index .slider {
    padding-top: 0
}

.slider.full {
    margin: auto;
    margin-top: 50px;
    padding: 0;
    width: 90%
}

#index .slider.full .slider-content {
    width: 100%
}

.slider.full .slider-content .image {
    width: 90%;
    aspect-ratio: 3/2;
    height: auto
}

#eventkalender .slider .slider-content .image {
    aspect-ratio: 1/1
}

.slider.full .slider-content .image::after {
    width: 120%;
    left: -10%;
    height: 100%
}

#index .slider .slider-content,
#eventkalender .slider .slider-content,
#newsletter-index .slider .slider-content {
    width: 24vw
}

#index .slider .splide__slide:nth-child(1) .slider-content .image::after {
    background-image: url(/img/lucajaenichen_axamer_lizum_winter_andi_webres-009041.webp)
}

#index .slider .splide__slide:nth-child(2) .slider-content .image::after {
    background-image: url(/img/©framesbycorradini_68.webp)
}

#index .slider .splide__slide:nth-child(3) .slider-content .image::after {
    background-image: url(/img/Axamer_Lizum_Anreise_Startseite.webp)
}

#index .slider .splide__slide:nth-child(4) .slider-content .image::after {
    background-image: url("/img/Hoadl Haus 2.webp")
}

#index .slider .splide__slide:nth-child(5) .slider-content .image::after {
    background-image: url("/img/Hoadl Haus 2.webp")
}

#index .slider.hotels .splide__slide:nth-child(1) .slider-content .image::after {
    background-image: url(/img/sunnalm.webp)
}

#index .slider.hotels .splide__slide:nth-child(2) .slider-content .image::after {
    background-image: url(/img/axamer-lizum-bergbahn-skigebiet-gastronommie-lizum-1600.webp)
}

#index .slider.hotels .splide__slide:nth-child(3) .slider-content .image::after {
    background-image: url(/img/dohlennest-axamer-lizum.webp)
}

#index .slider.hotels .splide__slide:nth-child(4) .slider-content .image::after {
    background-image: url(/img/Bild-Olympia-Pfeffermühle.webp)
}

#index .slider.hotels .splide__slide:nth-child(5) .slider-content .image::after {
    background-image: url(/img/lizumalm.webp)
}

#index .slider.hotels .splide__slide:nth-child(6) .slider-content .image::after {
    background-image: url(/img/thumbnail_IMG_1712.webp)
}

#index .slider.hotels .splide__slide:nth-child(7) .slider-content .image::after {
    background-image: url(/img/D-1044-schafalm-axamer-lizum-winter-1.webp)
}

.slider.dark {
    background-color: var(--grey)
}

.slider h1.golden {
    position: absolute;
    top: 20px;
    color: var(--beige)
}

.slider h1.black {
    position: absolute;
    top: 20px;
    color: var(--grey)
}

a:hover {
    cursor: pointer
}

a {
    color: var(--grey)
}

.slider .slider-content {
    margin: 0 1vw
}

.slider .slider-content .image {
    position: relative;
    left: 2vw;
    width: 100%;
    aspect-ratio: 3/2;
    transform: skew(-12deg);
    contain: paint;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .2)
}

.slider .slider-content .image::after {
    content: "";
    position: absolute;
    left: -10%;
    width: 120%;
    height: 100%;
    background-image: url(/img/tickets.webp);
    background-size: cover;
    background-position: 50%;
    transform: skew(12deg)
}

.slider .slider-content:nth-child(2) .image:after {
    background-image: url(/img/the_wild_one.webp);
    background-position: 100%
}

.slider .slider-content:nth-child(n+3) .image:after {
    background-image: None;
    background-color: var(--beige);
    background-position: 100%
}

.slider .slider-content h1 {
    font-size: 2vw;
    line-height: 2vw;
    font-weight: 400;
    color: var(--grey)
}

.slider.dark .slider-content h1 {
    color: var(--turquoise)
}

.slider.alt-font .slider-content h1 {
    font-family: inter
}

.slider.alt-font .slider-content p {
    font-family: inter
}

.slider.alt-font .slider-content button {
    font-family: inter
}

.slider .slider-content button {
    background: var(--beige);
    padding: .5vw;
    font-weight: 300;
    border: none;
    border-radius: .5vw;
    width: 12vw
}

.slider.full {
    margin-bottom: 20vw
}

.slider.full .slider-content button {
    left: auto;
    right: 0
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .slider {
        padding-top: 60px;
        margin-bottom: 10vw
    }

    .slider .slider-content button {
        width: 36vw
    }

    .slider .slider-content .skiticket button {
        width: 36vw;
        padding: 2vw 0;
        border-radius: 1vw
    }

    #index .slider.full .slider-content .image::after {
        background-image: url(/img/lucajaenichen_axamer_lizum_winter_andi_highres-009281.webp)
    }

    #index .slider .splide__slide:nth-child(1) .slider-content .image::after {
        background-image: url(/img/©framesbycorradini_68.webp)
    }

    #index .slider .splide__slide:nth-child(2) .slider-content .image::after {
        background-image: url(/img/Axamer_Lizum_Anreise_Startseite.webp)
    }

    #index .slider .splide__slide:nth-child(3) .slider-content .image::after {
        background-image: url("/img/Hoadl Haus 2.webp")
    }

    #index .slider .splide__slide:nth-child(4) .slider-content .image::after {
        background-image: url(/img/lucajaenichen_axamer_lizum_winter_andi_webres-009041.webp)
    }
}

.content .triplet-box {
    margin-top: 5vw;
    margin-bottom: 5vw;
    position: relative;
    padding-left: calc(50% - 40vw)
}

.content .triplet-box .background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-45%);
    width: 50%;
    height: 25vw;
    background-color: var(--turquoise)
}

#index .content .triplet-box .box1 {
    position: relative
}

#index .content .triplet-box .box1 .image {
    position: relative;
    left: 4vw;
    transform: skew(-12deg);
    width: 50vw;
    height: 30vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

#index .content .triplet-box .box1 .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    transform: skew(12deg);
    width: 120%;
    height: 100%;
    background-image: url(/img/wild.webp);
    background-size: cover;
    background-position: 50%;
    filter: brightness(.75)
}

#index .content .triplet-box .box1 h1 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3vw;
    font-weight: 400;
    margin: 4vw 0 0;
    color: var(--turquoise)
}

#index .content .triplet-box .box2 {
    position: absolute;
    left: calc(50% + 14.5vw);
    top: 0;
    height: 14.5vw;
    width: 25vw
}

#index .content .triplet-box .box2 .text-box {
    position: absolute;
    right: 3vw;
    top: 1vw;
    transform: skew(-12deg);
    width: 19.5vw;
    height: 13.5vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

#index .content .triplet-box .box2 .text-box::before {
    content: "";
    position: absolute;
    right: -10%;
    transform: skew(12deg);
    width: 120%;
    height: 100%;
    background: var(--inverted-gradient)
}

#index .content .triplet-box .box2 .image {
    position: absolute;
    right: 1vw;
    top: 0;
    transform: skew(-12deg);
    width: 16vw;
    height: 10vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

#index .content .triplet-box .box2 .image::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 0;
    transform: skew(12deg);
    width: 120%;
    height: 100%;
    background-image: url("/img/Manuel Kokseder - Axamer Lizum--21.webp");
    background-size: 100%;
    background-position: 50%
}

#index .content .triplet-box .box2 span {
    position: absolute;
    right: 5vw;
    bottom: 1vw;
    font-weight: 300;
    font-size: 1.2vw
}

#index .content .triplet-box .box3 {
    position: absolute;
    left: calc(50% + 11.5vw);
    bottom: 0;
    height: 14.5vw;
    width: 25vw
}

#index .content .triplet-box .box3 .text-box {
    position: absolute;
    right: 3vw;
    top: 1vw;
    transform: skew(-12deg);
    width: 19.5vw;
    height: 13.5vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

#index .content .triplet-box .box3 .text-box::before {
    content: "";
    position: absolute;
    right: -10%;
    transform: skew(12deg);
    width: 120%;
    height: 100%;
    background: var(--inverted-gradient)
}

#index .content .triplet-box .box3 .image {
    position: absolute;
    right: 1vw;
    top: 0;
    transform: skew(-12deg);
    width: 16vw;
    height: 10vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

#index .content .triplet-box .box3 .image::before {
    content: "";
    position: absolute;
    right: -10%;
    top: 0;
    transform: skew(12deg);
    width: 120%;
    height: 100%;
    background-image: url("/img/Manuel Kokseder - Axamer Lizum--27.webp");
    background-size: 100%;
    background-position: 50%
}

#index .content .triplet-box .box3 span {
    position: absolute;
    right: 5vw;
    bottom: 1vw;
    font-weight: 300;
    font-size: 1.2vw
}

.content .dual-box.goldenroof {
    background-image: linear-gradient(102deg, var(--turquoise) 44vw, transparent 44vw), url("/img/Manuel Kokseder - Axamer Lizum-.webp");
    background-size: auto, 54%;
    background-position-x: 0, -16%
}

.content .dual-box.hoadl {
    background-image: linear-gradient(102deg, var(--turquoise) 46vw, transparent 46vw), url(/img/hoadl-haus.webp);
    background-size: auto, 50%;
    background-position-x: 0, 1%
}

.content .dual-box {
    position: relative;
    margin: 5vw 10%;
    background-image: linear-gradient(102deg, var(--turquoise) 640px, transparent 640px), url(/img/background.webp);
    background-size: cover;
    background-position: top, center;
    margin-bottom: 80px
}

.content .dual-box .text-box {
    padding: 2vw 2vw 8vw
}

.content .dual-box.large .text-box {
    padding: 2vw 2vw 8vw
}

.content .dual-box .text-box h1 {
    line-height: 4vw;
    font-size: 4vw;
    font-weight: 400;
    margin-bottom: 2vw;
    margin-top: 0;
    color: var(--beige)
}

.content .dual-box .text {
    position: absolute;
    top: 0;
    right: -5vw;
    line-height: 4.1vw;
    font-weight: 400;
    text-align: right;
    color: var(--turquoise);
    font-size: 4vw
}

.content .dual-box span {
    font-size: .9vw;
    width: 50%;
    display: block
}

.content .dual-box .link {
    position: absolute;
    width: 3vw;
    height: 3vw;
    bottom: 10%;
    left: 45%
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .content .dual-box {
        background-image: url(/img/background.webp);
        margin: 0;
        height: 70vw
    }

    .content .dual-box.goldenroof {
        background-size: cover;
        margin-top: 25vw;
        margin-bottom: 40vw;
        background-image: url("/img/Manuel Kokseder - Axamer Lizum-.webp")
    }

    .content .dual-box.goldenroof.hoadl {
        margin-top: 25vw;
        margin-bottom: 40vw;
        background-image: url(/img/hoadl-haus.webp);
        background-position: bottom
    }

    .content .dual-box.goldenroof.hoadl {
        margin-bottom: 65vw
    }

    .content .dual-box .text-box {
        position: absolute;
        width: 100%;
        top: calc(100% - 20vw);
        background: linear-gradient(102deg, var(--turquoise) 90vw, transparent 90vw);
        padding: 10px
    }

    .content .dual-box .text-box h1 {
        font-size: 25px
    }

    .content .dual-box .text-box span {
        display: none
    }

    .content .dual-box .text {
        right: 20px;
        top: -60px;
        bottom: 0;
        font-size: 30px
    }

    .content .dual-box.hoadl .text {
        right: 20px;
        top: -40px;
        bottom: 0;
        font-size: 30px
    }

    p {
        font-size: 3vw;
        line-height: 4vw
    }

    h1 {
        font-size: 6vw !important;
        line-height: 7vw !important
    }

    .content .dual-box .text-box p {
        width: 74vw
    }

    .content .dual-box .link {
        height: 9vw;
        width: 9vw;
        background-size: 60%;
        left: 78vw
    }

    .custom.splide.berichte {
        height: 80vw;
        margin-top: 10vw;
        margin-bottom: 10vw
    }

    .slider.first .custom.splide.berichte {
        height: 50vw
    }

    #index .slider .slider-content,
    #eventkalender .slider .slider-content,
    #newsletter-index .slider .slider-content {
        width: 54vw;
        margin: 0 3vw
    }

    .custom.splide.berichte.custom .splide__arrow {
        width: 9vw;
        height: 9vw;
        border-radius: 2vw
    }

    .box-container.first .custom.splide.berichte.custom .splide__arrow.splide__arrow--prev {
        left: 4.5vw
    }

    .box-container.first .custom.splide.berichte.custom .splide__arrow.splide__arrow--next {
        right: 4.5vw
    }

    .custom.splide::before {
        width: 15vw;
        height: 135%
    }

    .custom.splide::after {
        width: 15vw;
        height: 135%
    }
}

.triplet-box-2 {
    margin: 5vw 10vw;
    position: relative;
    height: 30vw;
    contain: paint
}

.grey {
    background-color: var(--grey);
    padding: .1px 0
}

.triplet-box-2 .left {
    position: absolute;
    top: 0;
    left: -3.3vw;
    width: 50%;
    height: 100%;
    transform: skew(-12deg);
    contain: paint
}

.triplet-box-2 .left::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    transform: skew(12deg);
    background: url(/img/IMG_9411.webp);
    filter: brightness(.5)
}

.triplet-box-2 .left h1 {
    position: absolute;
    left: 8.1vw;
    bottom: 3vw;
    transform: skew(12deg);
    margin: 0;
    color: var(--turquoise);
    font-weight: 400
}

.triplet-box-2 .right {
    margin-left: auto;
    width: 53%;
    height: 100%;
    position: relative
}

.triplet-box-2 .right .upper {
    position: absolute;
    top: 0;
    right: 0;
    padding-left: 3vw;
    width: 35.5vw;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2vw
}

.triplet-box-2 .right .upper h1 {
    font-size: 1.2vw;
    margin: 0;
    margin-bottom: .5vw
}

.triplet-box-2 .right .upper h2 {
    font-size: .8vw;
    font-weight: 400;
    margin: 0
}

.triplet-box-2 .right .upper::before {
    content: "";
    position: absolute;
    z-index: -1;
    transform: skew(-12deg);
    top: 0;
    right: 1.7vw;
    width: 100%;
    height: 100%;
    background: var(--inverted-gradient)
}

.triplet-box-2 .right .lower {
    position: absolute;
    bottom: .5vw;
    right: 0;
    width: 100%;
    height: 100%
}

.triplet-box-2 .right .lower .multi {
    position: absolute;
    left: 0;
    bottom: 6vw
}

.triplet-box-2 .right .lower h1 {
    margin: 0;
    margin-bottom: .5vw;
    font-weight: 400
}

.grey .triplet-box-2 .right .lower h1 {
    color: var(--turquoise)
}

.grey .triplet-box-2 .right .lower h2 {
    color: var(--turquoise)
}

.triplet-box-2 .right .lower h2 {
    font-size: .8vw;
    font-weight: 400;
    margin: 0
}

.grey .triplet-box-2 .right .lower {
    color: var(--turquoise)
}

.triplet-box-2 .right .lower .button {
    padding: .5vw 2vw;
    border-radius: .5vw;
    background: var(--beige);
    color: #000;
    position: absolute;
    bottom: .5vw;
    right: 0
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .upper::before {
    right: 2.3vw;
    width: 98%
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .upper h1 {
    font-size: 1.7vw;
    font-weight: 300
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .left::before {
    background-position: 63% 44%;
    background-size: 90%
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .left {
    width: 60%
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right {
    width: 43%
}

.triplet-box-2 .right .upper::before {
    right: 2.3vw;
    width: 98%
}

.triplet-box-2 .right .upper h1 {
    font-size: 1.7vw;
    font-weight: 300
}

.triplet-box-2 .left::before {
    background-position: 63% 44%;
    background-size: 90%
}

.triplet-box-2 .left {
    width: 60%
}

.triplet-box-2 .right {
    width: 43%
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .upper {
    width: 27.5vw;
    height: 70%
}

.triplet-box-2 .right .upper {
    width: 27.5vw
}

.triplet-box-2 .right .upper h1 {
    margin-bottom: 0
}

.triplet-box-2 .left h1 {
    font-size: 2.3vw;
    left: 8.5vw;
    bottom: 3.3vw
}

.triplet-box-2 .right .lower .multi {
    left: .4vw
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .left h1 {
    font-size: 2.8vw;
    font-weight: 400;
    left: 6.1vw;
    bottom: 12vw
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .lower .button {
    background-image: url(/img/right.png);
    padding: .5vw;
    background-position: 50%;
    background-size: 80%;
    background-repeat: no-repeat;
    width: 1.5vw;
    height: 1.5vw;
    position: relative
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .lower .button span {
    display: none
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .lower .multi {
    display: flex;
    align-items: center;
    gap: 2vw
}

body:not(:has(#header-mobile)) #tarife .triplet-box-2 .right .lower .multi {
    bottom: 1vw
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .triplet-box-2 {
        margin: 5vw 0;
        margin-bottom: 10vw;
        position: relative;
        height: 130vw;
        contain: none
    }

    .triplet-box-2 .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80vw;
        transform: skew(0);
        contain: paint
    }

    .triplet-box-2 .left::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        transform: skew(0);
        background: url(/img/IMG_9411.webp);
        background-position: 50%;
        background-size: cover;
        filter: brightness(.5)
    }

    .triplet-box-2 .left h1 {
        position: absolute;
        left: 8vw;
        bottom: 50%;
        transform: skew(0)translateY(50%);
        margin: 0;
        color: var(--turquoise);
        font-size: 5vw !important;
        font-weight: 400
    }

    .triplet-box-2 .right {
        margin-left: auto;
        width: 53%;
        height: 100%;
        position: relative
    }

    .triplet-box-2 .right .upper {
        position: absolute;
        top: auto;
        bottom: 10vw;
        right: -15vw;
        padding-left: 10vw;
        width: 64vw;
        height: 70vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 4vw;
        z-index: 1
    }

    .triplet-box-2 .right .upper::before {
        content: "";
        position: absolute;
        z-index: -1;
        transform: skew(-12deg);
        top: 0;
        right: 1.7vw;
        width: 100%;
        height: 100%;
        background: var(--inverted-gradient);
        box-shadow: 2px 2px 5px rgba(0, 0, 0, .3)
    }

    .triplet-box-2 .right .upper h2 {
        font-size: 3vw;
        width: 30vw;
        font-weight: 400;
        margin: 0
    }

    #tarife .triplet-box-2 .right .lower .button button {
        display: inline
    }

    #index .triplet-box-2 .right .lower .button {
        bottom: 4vw;
        right: 33vw;
        z-index: 1
    }

    .triplet-box-2 .right .lower {
        position: absolute;
        bottom: .5vw;
        right: 0;
        width: 100%;
        height: 100%
    }

    .triplet-box-2 .right .lower .multi {
        position: absolute;
        left: 0;
        bottom: 6vw;
        display: none
    }

    #tarife .triplet-box-2 .right .lower .multi {
        display: flex
    }

    #tarife .triplet-box-2 .right .lower .button {
        height: auto;
        bottom: -2vw;
        right: -30vw
    }

    #tarife .triplet-box-2 .right .lower .multi h1 {
        display: none
    }

    .triplet-box-2 .right .lower .button {
        padding: 2.5vw 4vw;
        border-radius: 1.5vw;
        background: var(--beige);
        color: #000;
        position: absolute;
        bottom: -7vw;
        right: 3vw;
        font-size: 5vw;
        width: max-content
    }
}

.green {
    background: var(--grey);
    position: relative;
    padding: 7vw 0 5vw
}

.green.bright {
    background-color: unset
}

#golden-roof-park .start::before {
    background-image: url(/img/GOTIT_Axamer-Lizum_17_MG_0815.webp);
    background-position-y: 40%
}

#golden-roof-park .title.image .image::before {
    background-image: url(/img/GOTIT_Axamer-Lizum_17_MG_0922.webp)
}

#golden-roof-park .background:has(.multibox) {
    background: linear-gradient(var(--turquoise) 30vw, transparent 30vw);
    padding-top: 20vw;
    position: relative;
    top: -20vw;
    z-index: -1;
    padding-bottom: 0;
    margin-bottom: -20vw
}

#golden-roof-park .slider {
    contain: paint
}

#golden-roof-park .slider-content {
    width: 28vw
}

#golden-roof-park .custom.splide {
    height: 26vw
}

#golden-roof-park .slider-content h1 {
    font-weight: 300
}

#golden-roof-park .slider-content h1 span {
    font-size: 1.2vw
}

#golden-roof-park .multibox .multibox-entry .img {
    transform: skew(-12deg);
    width: 100%;
    height: 20vw;
    contain: paint;
    position: relative;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1)
}

#golden-roof-park .multibox a:nth-child(1) .multibox-entry .img::before {
    background-image: url(/img/2021_GOTiT_Axamer-Lizum_Image_print-8930.webp)
}

#golden-roof-park .multibox a:nth-child(2) .multibox-entry .img::before {
    background-image: url(/img/2021_GOTiT_Golden-Roof_Funpark-5489.webp)
}

#golden-roof-park .multibox a:nth-child(3) .multibox-entry .img::before {
    background-image: url(/img/2021_GOTiT_Axamer-Lizum_Image_print-2-2.webp)
}

#golden-roof-park .multibox a:nth-child(4) .multibox-entry .img::before {
    background-image: url(/img/winterbilder-96.webp)
}

#golden-roof-park .slider.dark .splide__slide:nth-child(1) .image::after {
    background-image: url(/img/IMG_1821.webp)
}

#golden-roof-park .slider.dark .splide__slide:nth-child(2) .image::after {
    background-image: url(/img/IMG_1713.webp)
}

#golden-roof-park .slider.dark .splide__slide:nth-child(3) .image::after {
    background-image: url("/img/IMG_2095 2.webp")
}

#golden-roof-park .slider.dark .splide__slide:nth-child(4) .image::after {
    background-image: url("/img/IMG_2133 2.webp")
}

#golden-roof-park .slider.dark .splide__slide:nth-child(5) .image::after {
    background-image: url("/img/IMG_1937 2.webp")
}

#golden-roof-park .slider {
    padding: 6vw 5vw 5vw
}

body:not(:has(#header-mobile)) #golden-roof-park .content .title.image .info p {
    padding: 0 7vw
}

#tarife .green {
    margin-top: 5vw
}

.green .right {
    width: 30vw;
    padding: 0 2vw 2vw 15vw;
    transform: skew(-12deg);
    position: relative;
    margin-left: auto;
    margin-right: 10%;
    contain: paint
}

.green .right::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--inverted-gradient);
    z-index: -1
}

.green .right .table {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2vw 12%;
    gap: 1vw;
    transform: skew(12deg)
}

.green .right .table .row {
    display: flex;
    flex-direction: column;
    align-items: center
}

.green .right .table .row h1 {
    margin-bottom: 0;
    font-weight: 400;
    font-size: 1.7vw
}

.green .right .table .row span {
    font-weight: 400;
    font-family: inter, sans-serif;
    font-size: .9vw
}

.green .right p {
    transform: skew(12deg);
    font-size: .85vw
}

.green .right .green-logo {
    transform: skew(12deg);
    position: absolute;
    bottom: 3vw;
    left: 1vw;
    height: 5vw
}

.green .left {
    position: absolute;
    top: 4vw;
    left: 10vw
}

.green .left .title {
    position: absolute;
    top: -1vw;
    left: -3vw;
    color: var(--turquoise);
    padding: 0;
    width: 16vw;
    font-family: inter, sans-serif
}

.green .left .image-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 20vw;
    contain: paint;
    z-index: 1
}

.green .left .image-container .image {
    position: absolute;
    top: 0;
    left: -10%;
    width: 100%;
    height: 100%;
    contain: paint;
    transform: skew(-12deg)
}

.green .left .image-container .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: url(/img/Zirbe.webp);
    background-size: cover;
    background-position: 50%
}

body:not(:has(#header-mobile)) #golden-roof-park .green .right {
    padding: 0 2vw 2vw 25vw
}

body:not(:has(#header-mobile)) #golden-roof-park .green .left .image-container {
    height: 27vw
}

body:not(:has(#header-mobile)) #golden-roof-park .green .left .image-container .image::before {
    background-size: 85%;
    filter: brightness(.8);
    background-position-y: 28%;
    background-position-x: 88%;
    transform: skew(12deg)
}

body:not(:has(#header-mobile)) #golden-roof-park .green .left .title {
    top: -4.6vw;
    left: -4vw
}

body:not(:has(#header-mobile)) #golden-roof-park .green .right p {
    font-size: 1.2vw;
    line-height: 1.2vw
}

.green .title {
    position: absolute;
    top: 0;
    left: -7vw;
    font-size: 3vw;
    line-height: 3vw;
    color: #d8e4df;
    z-index: 1
}

.green .parted-box {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 5vw;
    position: relative;
    left: 5vw
}

.green .parted-box .part1 {
    background: url(/img/ticket.png);
    background-size: cover;
    background-position: 50%;
    mask-image: linear-gradient(110deg, white 41vw, transparent 41vw);
    filter: brightness(.7)
}

.green .parted-box .part2 {
    background: var(--beige);
    mask-image: linear-gradient(110deg, transparent 8vw, white 8vw);
    position: relative;
    left: -8vw
}

.green .parted-box .part2 .table {
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 2vw 20% 2vw 30%;
    gap: 1vw
}

.green .parted-box .part2 .table .row {
    display: flex;
    flex-direction: column;
    align-items: center
}

.green .parted-box .part2 .table .row h1 {
    margin-bottom: 0
}

.green .parted-box .part2 p {
    margin-left: 7vw;
    width: 34vw
}

#interactive-map+#footer {
    margin-top: 0
}

.green .link {
    position: absolute;
    bottom: 7vw;
    left: auto;
    right: 2.5vw
}

#golden-roof-park .green .left .image-container .image::before {
    background-image: url("/img/golden-roofpark (1).webp");
    background-position-y: 28%
}

#golden-roof-park .multibox .multibox-entry .img::before {
    left: -15%;
    width: 130%
}

#dialog {
    border: none;
    background: var(--grey);
    color: var(--beige);
    padding: 0 2vw
}

#dialog.hoadl-cam,
#dialog.birgitz-cam,
#dialog.golden-cam {
    padding: 0
}

dialog::backdrop {
    opacity: .8;
    background: var(--grey)
}

#meinung-formular,
#kontakt-formular {
    width: 80vw
}

#meinung-formular,
#kontakt-formular .form-title {
    margin-top: 2vw
}

body:not(:has(#header-mobile)) #meinung-formular .form-title p,
body:not(:has(#header-mobile)) #kontakt-formular .form-title p {
    line-height: 1.2vw
}

#meinung-formular button,
#kontakt-formular button {
    align-self: center;
    margin-bottom: 2vw
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .green {
        margin-top: 25vw;
        margin-bottom: 30vw;
        padding-top: 70vw;
        padding-bottom: 20vw;
        background: linear-gradient(78deg, transparent 28vw, var(--grey) 28vw)
    }

    .green .left {
        position: absolute;
        top: 19vw;
        left: 0;
        width: 100%
    }

    .green .left .image-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 60vw;
        contain: paint;
        z-index: 1
    }

    .green .left .image-container .image {
        position: absolute;
        top: 0;
        left: 0;
        width: 104%;
        height: 100%;
        contain: paint;
        transform: skew(0)
    }

    .green .left .image-container .image::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10%;
        width: 120%;
        height: 100%;
        background: url(/img/Zirbe.webp);
        background-size: cover;
        background-position: 50%
    }

    .green .right .table .row span {
        font-size: 3vw
    }

    .green .right .green-logo path {
        fill: var(--beige)
    }

    .green .right .green-logo {
        right: 5vw;
        transform: skew(0);
        position: absolute;
        bottom: 150vw;
        left: auto;
        height: 10vw;
        width: auto
    }

    .green .left .title {
        position: absolute;
        top: -26vw;
        left: 5vw;
        color: var(--turquoise);
        padding: 0;
        width: 40vw;
        font-size: 7vw;
        line-height: 7vw;
        font-weight: 300;
        font-family: inter, sans-serif
    }

    .green .right {
        width: calc(100% - 10vw);
        height: 85vw;
        padding: 7vw 5vw 6vw;
        transform: skew(0);
        position: relative;
        margin-left: auto;
        margin-right: 10%;
        contain: none
    }

    .green .right::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--inverted-gradient);
        z-index: -1
    }

    .green .right .table {
        display: grid;
        grid-template-columns: 50% 50%;
        padding: 2vw 12%;
        gap: 1vw;
        transform: skew(0)
    }

    .green .right .table .row {
        display: flex;
        flex-direction: column;
        align-items: center
    }

    .green .right p {
        transform: skew(0);
        font-size: 3vw
    }

    .green .link {
        position: absolute;
        bottom: 3vw;
        left: auto;
        right: 2.5vw
    }

    .green .title {
        font-size: 20px;
        line-height: 20px;
        font-weight: 100
    }

    .green .parted-box {
        grid-template-columns: 100%;
        grid-template-rows: 160px 530px;
        padding: 0;
        left: 0;
        gap: 10px
    }

    .green .parted-box .part1 {
        width: 100%;
        padding: 0;
        left: 0;
        mask-image: linear-gradient(98deg, white 95vw, transparent 95.2vw)
    }

    .green .parted-box .part2 {
        width: 100%;
        left: 0;
        mask-image: linear-gradient(98deg, white 89vw, transparent 89.2vw)
    }

    .green .parted-box .part2 .table {
        display: grid;
        grid-template-columns: 50%;
        padding: 20px;
        gap: 10px
    }

    .green .parted-box .part2 .table .row {
        align-items: flex-start
    }

    .green .parted-box .part2 p {
        width: 60vw
    }
}

.quad-grid {
    margin-bottom: 5vw;
}

.quad-grid h1 {
    font-weight: 400;
    color: var(--beige);
    margin: 5vw 0 5vw 10%;
    font-size: 3.2vw
}

.quad-grid .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 18vw 14vw;
    gap: 2vw;
    padding: 0 10%
}

.quad-grid.single .grid-container {
    grid-template-rows: 18vw
}

.quad-grid .grid-container .grid-content {
    display: flex;
    align-items: center;
    background-image: linear-gradient(90deg, var(--turquoise) 50%, transparent 50%), url(/img/the_wild_one.webp);
    mask-image: linear-gradient(102deg, white 90%, black 90%);
    mask-mode: luminance;
    padding: 0;
    background-size: 100%, 75%;
    background-repeat: no-repeat;
    background-position: 50%
}

.quad-grid .grid-container .grid-content:nth-child(1) {
    background-image: linear-gradient(90deg, var(--turquoise) 50%, transparent 50%), url("/img/Hoadl Haus 2.webp");
    background-position-x: 200%;
    background-position-y: 18%
}

.quad-grid .grid-container .grid-content:nth-child(2) {
    background-image: linear-gradient(90deg, var(--turquoise) 50%, transparent 50%), url(/img/Axamer_Lizum_Anreise_Startseite.webp);
    background-position-x: 100%
}

.quad-grid .grid-container .grid-content:nth-child(3) {
    background-image: linear-gradient(90deg, var(--turquoise) 50%, transparent 50%), url("/img/Manuel Kokseder - Axamer Lizum--52.webp");
    background-position-x: 88%
}

.quad-grid .grid-container .grid-content:nth-child(4) {
    background-image: linear-gradient(90deg, var(--turquoise) 50%, transparent 50%), url("/img/Manuel Kokseder - Axamer Lizum-2-10.webp");
    background-position-x: 100%
}

.quad-grid .grid-container .grid-content h1 {
    margin: 0;
    font-size: 2vw;
    color: var(--grey)
}

.quad-grid .grid-container .grid-content {
    background: none;
    background-image: unset !important;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.quad-grid .grid-container .grid-content .left {
    background: var(--turquoise);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quad-grid .grid-container .grid-content .right {
    contain: paint;
    width: 100%;
    height: 100%;
}

.quad-grid .grid-container .grid-content .right .image {
    transform: skew(-12deg);
    width: 100%;
    height: 100%;
    left: -10%;
    contain: paint;
    position: relative;
}

.quad-grid .grid-container .grid-content .right .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    background-image: url("/img/Hoadl Haus 2.webp");
    background-size: cover;
    background-position: center;
    transform: skew(12deg);
}

.quad-grid .grid-container .grid-content:nth-child(2) .right .image::before {
    background-image: url(/img/Axamer_Lizum_Anreise_Startseite.webp);
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .quad-grid h1 {
        margin: 60px 20px 40px;
        font-size: 30px
    }

    .quad-grid .grid-container {
        grid-template-rows: 30vw 30vw !important;
        grid-template-columns: 1fr;
        gap: 10vw;
    }

    .quad-grid .grid-container .grid-content {
        padding: 0 20px;
        background-size: 100% 100% !important;
    }

    .quad-grid .grid-container .grid-content h1 {
        font-size: 5vw !important
    }

    .quad-grid .grid-container .grid-content:nth-child(2) {
        background-size: contain
    }

    .quad-grid .grid-container .grid-content:nth-child(3) {
        background-size: contain
    }

    .quad-grid .grid-container .grid-content:nth-child(4) {
        background-size: contain
    }
}


#axamer-lizum-index .anchor,
#gastronomie-index .anchor {
    position: relative;
    top: -160px
}

@media screen and (max-width:2000px) {

    #axamer-lizum-index .anchor,
    #gastronomie-index .anchor {
        position: relative;
        top: -120px
    }
}

@media screen and (max-width:1500px) {

    #axamer-lizum-index .anchor,
    #gastronomie-index .anchor {
        position: relative;
        top: -70px
    }
}

.double-box {
    display: flex;
    gap: 2vw;
    margin-bottom: 2vw
}

#axamer-lizum-index .double-box:nth-child(3) {
    position: relative;
    left: 2vw
}

#axamer-lizum-index .double-box:nth-child(4) {
    position: relative;
    left: -3vw
}

.tarife:nth-child(1) {
    margin-bottom: 2vw
}

.tarife {
    border-collapse: collapse;
    margin-left: auto;
    margin-bottom: .3vw;
    margin-right: 5vw
}

.tarife+.seperator {
    margin: 2vw 0;
    margin-right: 6vw;
    margin-left: 16.3vw;
    height: 2px;
    background-color: var(--beige)
}

.tarife td:has(.first) {
    width: 10vw
}

.tarife td:nth-child(1) .td_content.first {
    border-right: none;
    transform: skew(0);
    position: relative;
    z-index: 1
}

.tarife td:nth-child(2) .td_content.td_content.first {
    border-left: none;
    transform: skew(-12deg)scaleX(1.1)
}

.tarife .td_content.first {
    justify-content: start;
    padding-left: 2vw
}

.tarife td {
    width: 11vw;
    margin: 0;
    position: relative;
    --index-switch: max(0, calc(var(--index) - 3));
    left: calc(-.25vw * var(--index-switch))
}

.tarife:nth-child(1) td {
    left: calc(-.25vw * var(--index))
}

.tarife td.seperator {
    width: 2vw;
    border: none;
    opacity: 0
}

.table-2 {
    margin-top: 2vw;
    width: 90%;
    position: relative;
    contain: paint
}

.table-2 .tarife td.seperator {
    width: 1vw;
    border: none;
    opacity: 0
}

.table-2 .tarife.full td:nth-child(1) .td_content.first {
    width: 32.4vw
}

.table-2 .tarife.full td:nth-child(1) .td_content.first span {
    width: 32.4vw
}

.table-2 .tarife:nth-child(1) {
    margin-right: 15.05vw
}

.table-2 .tarife:nth-child(2) {
    margin-right: 16.2vw
}

.table-2 .tarife:nth-child(2) td:nth-child(1) .td_content {
    padding-right: 4.8vw
}

.table-2 .tarife:nth-child(3) {
    margin-right: 17vw
}

.table-2 .tarife:nth-child(3) td:nth-child(1) .td_content {
    padding-right: 4vw
}

.table-2 .tarife:nth-child(4) {
    margin-right: 17.8vw
}

.table-2 .tarife:nth-child(4) td:nth-child(1) .td_content {
    padding-right: 3.2vw
}

.table-2 .tarife:nth-child(5) {
    margin-right: 18.6vw
}

.table-2 .tarife:nth-child(5) td:nth-child(1) .td_content {
    padding-right: 2.4vw
}

.table-2 .tarife:nth-child(6) {
    margin-right: 20.7vw
}

.table-2 .tarife:nth-child(6) td:nth-child(1) .td_content {
    padding-right: .3vw
}

.table-2 .table-right {
    position: absolute;
    top: 0;
    right: -3vw;
    width: 20vw;
    height: calc(100% - .3vw);
    background-color: var(--light-beige);
    transform: skew(-12deg);
    display: flex;
    justify-content: center;
    align-items: center
}

.table-2 .table-right h1 {
    transform: skew(12deg);
    text-align: center;
    margin-right: 3vw;
    font-size: 1.5vw;
    font-weight: 300
}

.tarife td .td_content {
    transform: skew(-12deg);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60px;
    border-style: solid;
    border-width: .15vw;
    border-color: var(--grey);
    background-color: #fff
}

.tarife:not(.first):nth-child(odd) td .td_content {
    border-color: var(--beige);
    background-color: var(--light-beige)
}

.tarife td .td_content h1,
.tarife td .td_content span {
    font-size: 1vw;
    font-family: inter;
    text-align: center;
    font-weight: 300
}

.tarife td .td_content h1 span {
    color: var(--beige);
    font-weight: 200
}

.tarife td .td_content span {
    text-align: left;
    width: max-content
}

.tarife td .td_content.first {
    width: 8vw
}

.tarife td .td_content.first span {
    width: 14vw;
    display: inline-block
}

.tarife td .td_content span span {
    font-size: .7vw;
    text-align: left
}

.tarife td .td_content:not(.first) span,
.tarife td .td_content:not(.first) h1 {
    transform: skew(12deg)
}

.double-box .box {
    contain: paint;
    transform: skew(-12deg);
    background-color: var(--beige);
    width: 40vw;
    height: 22vw;
    box-shadow: -2px 2px 5px 5px rgba(0, 0, 0, .1)
}

.double-box .box.birgitz::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 13vw;
    background-image: url(https://live-image.panomax.com/cams/3901/thumbnail.jpg);
    background-size: cover
}

.double-box .box.lizum::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 13vw;
    background-image: url(https://wtvpict.feratel.com/picture/37/5510.jpeg?design=v5&dcsdesign=feratel4);
    background-size: cover
}

.double-box .box.hoadl::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 13vw;
    background-image: url(https://live-image.panomax.com/cams/3904/thumbnail.jpg);
    background-size: cover
}

.double-box .box.golden::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 40vw;
    height: 13vw;
    background-image: url(https://wtvpict.feratel.com/picture/37/5511.jpeg?design=v5&dcsdesign=feratel4);
    background-size: cover
}

.double-box .box-content {
    transform: skew(12deg);
    display: flex;
    flex-direction: column
}

.double-box .box-content h1 {
    margin-top: 14vw;
    color: var(--grey)
}

#admin-index {
    background-color: #373737;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 60px;
    min-height: 275px
}

#admin-index a {
    text-decoration: none;
    color: var(--grey)
}

#admin-index a:visited {
    color: var(--grey)
}

#admin-events a {
    text-decoration: none;
    color: var(--grey)
}

#admin-events a:visited {
    color: var(--grey)
}

#admin-index .login {
    position: relative;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px
}

#admin-index .login .img {
    position: absolute;
    background-color: var(--red);
    background-image: url(/img/AxamerLizum_Logo.webp);
    background-repeat: no-repeat;
    background-size: 80%;
    background-position: 50%;
    height: 50px;
    width: 50px;
    transform: rotate(16deg);
    top: -20px;
    left: -20px
}

#admin-index .login label {
    display: inline-block;
    width: 100px;
    font-family: inter, arial, sans-serif;
    margin-bottom: 15px
}

#admin-index .login input {
    font-family: inter, arial, sans-serif;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bdbdbd
}

#admin-index .login button {
    font-family: inter, arial, sans-serif;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: none;
    background-color: var(--red);
    color: #fff
}

#admin-events {
    display: flex;
    justify-content: center
}

#admin-events table {
    font-family: inter, arial, sans-serif;
    border-collapse: collapse
}

#admin-events table thead {
    background-color: var(--grey);
    color: #fff
}

#admin-events table td {
    padding: 10px
}

#admin-event {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px
}

#admin-event .event-detail {
    padding: 20px;
    background-color: var(--beige);
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, .3)
}

#admin-event .event-detail label {
    display: inline-block;
    width: 150px;
    font-family: inter, arial, sans-serif;
    margin-bottom: 15px
}

#admin-event .event-detail div:nth-child(2) label {
    vertical-align: top
}

#admin-event .event-detail input {
    font-family: inter, arial, sans-serif;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bdbdbd;
    width: 300px
}

#admin-event .event-detail textarea {
    font-family: inter, arial, sans-serif;
    padding: 5px;
    border-radius: 5px;
    border: 1px solid #bdbdbd;
    width: 300px
}

#admin-event .event-detail button {
    font-family: inter, arial, sans-serif;
    width: 100%;
    padding: 5px;
    border-radius: 5px;
    border: none;
    background-color: var(--red);
    color: #fff;
    margin-bottom: 10px
}

#admin-event .event-detail button:nth-child(8) {
    background-color: var(--grey)
}

.products {
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 80px
}

.products .product {
    transform: skewX(-15deg);
    contain: paint;
    height: 24rem;
    position: relative;
    background-color: #fff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, 5%);
    width: 100%;
    max-width: 24rem
}

.products .product>a>div {
    transform: skewX(15deg);
    width: 140%;
    height: 100%;
    position: absolute;
    left: -15%;
    top: 0;
    display: flex;
    flex-direction: column
}

.products .product .image-section {
    position: relative;
    width: 100%;
    height: calc((100%/3) * 2);
    contain: paint
}

.products .product .image-section .parallelogram-image {
    width: 100%;
    aspect-ratio: 1/1;
    transform: translateY(-2%)
}

.products .product .text-section {
    width: 100%;
    height: calc(100%/3);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #f9fafb
}

.products .product .text-section .title-field {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: .5rem;
    padding-left: 10%
}

.products .product .text-section .text-field {
    color: #4b5563;
    font-size: .875rem;
    line-height: 1.5;
    flex-grow: 1;
    contain: paint;
    padding-left: 10%
}

#shop-index .shop-start {
    position: relative;
    height: 500px
}

#shop-index .shop-start .box1 {
    position: absolute;
    left: 66px;
    top: 20px;
    width: 900px;
    height: 420px;
    transform: skew(-12deg)
}

#shop-index .shop-start .box1::before {
    content: "";
    display: block;
    width: 900px;
    height: 420px;
    background: url(/img/background.webp);
    background-position: 50%;
    background-size: 100%
}

#shop-index .shop-start .box2 {
    position: absolute;
    right: 40px;
    top: 20px;
    width: 815px;
    height: 210px;
    transform: skew(-12deg)
}

#shop-index .shop-start .box2::before {
    content: "";
    display: block;
    width: 815px;
    height: 210px;
    background: url(/img/shop.webp);
    background-position: 50%;
    background-size: 100%
}

#shop-index .shop-start .box3 {
    position: absolute;
    right: 85px;
    top: 250px;
    width: 818px;
    height: 190px;
    transform: skew(-12deg)
}

#shop-index .shop-start .box3::before {
    content: "";
    display: block;
    width: 818px;
    height: 190px;
    background: url(/img/tickets.webp);
    background-position: 50%;
    background-size: 100%
}

#shop-detail .product-table {
    display: grid;
    padding: 20px;
    grid-template-columns: 50% 50%;
    gap: 20px
}

#shop-detail .product-table .column {
    width: 100%
}

#shop-detail .product-table .column:nth-child(2) {
    width: calc(100% - 80px);
    padding: 40px
}

#shop-detail .colors {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-template-rows: 50px;
    gap: 10px
}

#shop-detail .color {
    background-color: #000;
    border: #000 1px solid
}

#shop-detail .color:nth-child(2) {
    background-color: #fff;
    border: var(--beige)2px solid
}

#shop-detail .sizes {
    margin-top: 40px;
    display: grid;
    width: 100%;
    padding-right: 20px;
    width: calc(100% - 20px);
    grid-template-columns: 100px 100px 100px 100px 100px 100px;
    grid-template-rows: 50px;
    gap: 10px
}

#shop-detail .size {
    background: 0 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: #000 2px solid
}

#shop-detail .buttons {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    flex-direction: column
}

#shop-detail .button {
    padding: 20px;
    text-align: center;
    border-radius: 20px;
    background: var(--beige)
}

#shop-detail .button:nth-child(2) {
    background: 0 0;
    border: var(--beige)4px solid
}

#shop-detail .title {
    padding-left: 20px
}

.edit {
    display: none;
    vertical-align: top
}

h1:hover .edit,
h2:hover .edit {
    display: inline
}

.edit:hover {
    cursor: pointer
}

#edit-form {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

#edit-form form {
    padding: 20px;
    background: #fff;
    border-radius: 10px
}

#edit-form form label {
    display: inline-block;
    width: 100px
}

#edit-form form input {
    display: inline-block;
    width: 200px
}

#edit-form form div {
    margin: 10px
}

#edit-form form div:nth-child(4) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

#edit-form form button {
    width: 100%
}

form button {
    font-weight: 300 !important
}

.livestream-box {
    width: 80%;
    margin: 5vw auto;
    height: 40vw;
    position: relative
}

.livestream-box .image {
    position: relative;
    width: 80%;
    height: 100%;
    transform: skew(-12deg);
    contain: paint
}

.livestream-box.alt .image {
    left: 20%
}

.livestream-box .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -8%;
    width: 116%;
    height: 100%;
    transform: skew(12deg);
    background-color: #000
}

.livestream-box .info {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: 7vw;
    display: grid;
    grid-template-columns: 8vw 8vw;
    padding: 2vw;
    grid-template-rows: auto auto auto;
    gap: 1vw
}

.livestream-box.alt .info {
    left: 0;
    right: auto
}

.livestream-box .info::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: -2vw;
    width: 100%;
    height: 100%;
    transform: skew(-12deg);
    background: var(--beige)
}

.livestream-box .info .entry {
    margin: 0;
    position: relative
}

.livestream-box .info .wide {
    grid-column: span 2
}

.livestream-box .info .weather::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3vw;
    height: 160%;
    aspect-ratio: 1/1;
    background: url('data:image/svg+xml;charset=UTF-8,<svg class="icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1.509vw" height="1.509vw" viewBox="0 0 38 38"><image id="Bild_6" data-name="Bild 6" width="38" height="38" xlink:href="data:image/png;base64,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"/></svg>');
    background-size: contain
}

.deine-meinung {
    background-color: var(--grey);
    padding: 1vw;
    height: 30vw;
    position: relative
}

.deine-meinung .image {
    position: absolute;
    left: 10vw;
    height: calc(100% - 2vw);
    width: 50%;
    transform: skew(-12deg);
    contain: paint
}

.deine-meinung .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -4vw;
    width: 120%;
    height: 100%;
    transform: skew(12deg);
    background: url(/img/lucajaenichen_axamer_lizum_winter_andi_webres-009044.webp);
    background-position: 50%;
    background-size: cover
}

.deine-meinung .text h1 {
    font-weight: 400;
    color: var(--beige);
    font-size: 2vw
}

.deine-meinung .text p {
    color: var(--turquoise);
    font-size: 1.2vw;
    line-height: 1.5vw
}

.deine-meinung .text {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    right: 0;
    height: calc(100% - 2vw);
    width: calc(50% - 15vw);
    color: #fff
}

.deine-meinung .button {
    margin-top: 2vw;
    padding: .5vw 2vw;
    border-radius: .5vw;
    background: var(--beige);
    width: fit-content;
    color: var(--grey)
}

.deine-meinung .button:visited {
    color: var(--grey)
}

.tarife-table {
    width: 85%;
    margin-left: 15%
}

#eventkalender .tarife-table {
    width: max-content;
    margin: auto
}

#eventkalender .tarife-table .row .col {
    width: 24vw
}

#eventkalender .tarife-table .row .col:nth-child(1) .col-content h1 {
    text-align: left;
    width: -webkit-fill-available;
    margin-left: 2vw
}

#eventkalender .tarife-table .row .col:nth-child(1) .col-content h2 {
    text-align: left;
    width: -webkit-fill-available;
    margin-left: 2vw
}

#anreise .tarife-table {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%
}

.tarife-table .seperator {
    width: 100%;
    background-color: var(--beige);
    height: 1px;
    margin: 2vw 0
}

.tarife-table br {
    line-height: .5vw
}

.tarife-table.right {
    width: fit-content;
    margin-left: auto;
    margin-right: 5%
}

.table-container.alt {
    width: max-content;
    margin: auto
}

.table-container.alt .tarife-table {
    margin-right: 0
}

.tarife-table.right.alt {
    margin-right: 0
}

.tarife-table .row {
    display: flex
}

.tarife-table.right .row {
    justify-content: flex-end
}

.tarife-table .row .col {
    margin-right: 0;
    contain: paint;
    width: 12vw
}

.tarife-table.closed .row .col:not(.seperated) {
    margin-right: -1.1vw
}

.tarife-table:not(.head) .row .col.first {
    border-left: .1vw solid var(--beige);
    width: 18vw
}

.table-container.long .tarife-table .row .col {
    width: 18vw
}

.table-container.long .tarife-table:not(.head) .row .col.first {
    width: 24vw
}

.tarife-table.full .row .col {
    width: 40.9vw !important;
    margin-right: -1.1vw
}

.tarife-table .row .col-content {
    display: flex;
    flex-direction: column;
    left: .5vw;
    width: calc(100% - 1vw);
    position: relative;
    align-items: center;
    height: 3vw;
    justify-content: center
}

.tarife-table .row .col.first .col-content {
    left: -.5vw;
    width: calc(100% - 2vw);
    align-items: start;
    padding-left: 2vw
}

.tarife-table .row .col-content::before {
    content: "";
    left: 0;
    top: 0;
    width: 100%;
    height: calc(100% - .2vw);
    position: absolute;
    border: .1vw solid var(--beige);
    background-color: var(--light-beige);
    transform: skew(-12deg);
    z-index: -1
}

.tarife-table.head .row .col-content::before {
    border: .1vw solid var(--beige) !important
}

.tarife-table.head .row .col .col-content h2 {
    color: var(--grey-grey)
}

.tarife-table:nth-child(odd) .row .col-content::before {
    border: .1vw solid #000;
    background-color: #fff
}

.tarife-table:nth-child(odd) .row .col.first {
    border-left: .1vw solid #000
}

.tarife-table .row .col .col-content h1 {
    font-size: 1vw;
    line-height: 1vw;
    margin: 0
}

.tarife-table .row .col .col-content h2 {
    font-size: 1vw;
    line-height: 1vw;
    color: var(--beige);
    margin: 0
}

.tarife-table .row .col .col-content p {
    font-size: .7vw;
    line-height: .7vw;
    margin: 0
}

.tarife-table .row .col .col-content p.small {
    font-size: .5vw;
    line-height: .5vw
}

.show-mobile {
    display: none !important
}

#webcam .map-container .map {
    position: relative
}

#webcam .map-container .map::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

#webcam .map-container .map:hover {
    cursor: pointer
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .show-mobile {
        display: block !important
    }

    .deine-meinung {
        background-color: var(--grey);
        padding: 1vw;
        height: 84vw;
        margin-top: 20vw;
        position: relative
    }

    .deine-meinung .image {
        position: absolute;
        top: -20vw;
        left: 8vw;
        height: 38vw;
        width: 85%;
        transform: skew(-12deg);
        contain: paint;
        box-shadow: -1px -1px 4px rgba(0, 0, 0, .1)
    }

    .deine-meinung .text {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-content: center;
        top: 20vw;
        left: 5vw;
        height: auto;
        width: 90%;
        color: #fff
    }

    .deine-meinung .text p {
        font-size: 3vw;
        line-height: 3.5vw
    }

    .deine-meinung .button {
        margin-top: 5vw;
        padding: 2vw 3vw;
        border-radius: 1.5vw;
        background: var(--beige);
        width: fit-content;
        color: #000;
        align-self: center
    }

    .quad-grid {
        margin-bottom: 10vw
    }

    .quad-grid .grid-container {
        gap: 10px;
        padding: 0 10% 0 0
    }

    .quad-grid .grid-container .grid-content:nth-child(3) {
        background-position-x: 100%
    }

    .content .title {
        padding: 0 5%
    }

    .content .title.image {
        display: none
    }

    .content .title.image.mobil {
        display: block
    }

    .content .title.image,
    #anreise .title.image {
        position: relative;
        width: 90%;
        margin: 0 5%;
        padding: 0 !important
    }

    .content .title.image .text,
    #anreise .title.image .text {
        position: initial;
        transform: none;
        margin: 6vw 0
    }

    .content .title.image .image,
    #anreise .title.image .image {
        position: relative;
        height: 70vw;
        width: 80vw;
        right: -17vw
    }

    .content .title.image .info,
    #anreise .title.image .info {
        position: absolute;
        width: 34vw;
        top: 70vw;
        bottom: auto
    }

    #anreise .title.image .image {
        position: relative;
        height: 70vw;
        width: 90vw;
        right: -17vw
    }

    #anreise .title.image .info {
        top: 4vw;
        right: 26vw;
        padding-top: 3vw
    }

    #anreise .title.image .info h1 {
        font-size: 4vw !important;
        line-height: 4vw !important
    }

    #anreise .title.image .info p {
        font-size: 2vw;
        line-height: 2vw
    }

    #anreise .title.image p.text {
        font-size: 3vw;
        line-height: 3.5vw
    }

    #anreise .content .title.image .info::before {
        background: var(--inverted-gradient);
        background-size: 100%
    }

    #anreise .buttons {
        width: 60vw;
        position: initial;
        margin: auto
    }

    #anreise .buttons .button {
        width: 100%;
        padding: 3vw;
        font-size: 2.5vw !important
    }

    #anreise .title.image {
        margin-top: 10vw !important;
        margin-bottom: 12vw !important
    }

    .google .google-container .button h1 {
        font-size: 2vw !important;
        line-height: 2vw !important
    }

    .content .triplet-box {
        padding: 0
    }

    #index .content .triplet-box .box1 .image {
        width: 100%;
        transform: none;
        left: 0;
        height: 70vw
    }

    #index .content .triplet-box .box1 .image::before {
        transform: none
    }

    #index .content .triplet-box .box1 h1 {
        top: auto;
        left: 5vw;
        bottom: 100%;
        transform: translateY(50%);
        margin: 0
    }

    .content .triplet-box .background {
        top: 85vw;
        transform: none;
        left: 0;
        width: 100%;
        height: 65vw
    }

    #index .content .triplet-box .box2 {
        position: relative;
        left: 19vw;
        width: 70vw;
        height: 40vw;
        margin-top: 5vw
    }

    #index .content .triplet-box .box2 .text-box {
        width: 100%;
        left: 0;
        right: auto;
        height: 100%
    }

    #index .content .triplet-box .box2 .image {
        width: 55vw;
        right: -6vw;
        top: -1vw;
        height: 30vw
    }

    #index .content .triplet-box .box2 span {
        position: absolute;
        right: 9vw;
        bottom: 2vw;
        font-weight: 700;
        font-size: 5vw
    }

    #index .content .triplet-box .box3 {
        position: relative;
        left: 10vw;
        width: 70vw;
        height: 40vw;
        margin-top: 5vw
    }

    #index .content .triplet-box .box3 .text-box {
        width: 100%;
        left: 0;
        right: auto;
        height: 100%
    }

    #index .content .triplet-box .box3 .image {
        width: 55vw;
        right: -6vw;
        top: -1vw;
        height: 30vw
    }

    #index .content .triplet-box .box3 span {
        position: absolute;
        right: 9vw;
        bottom: 2vw;
        font-weight: 700;
        font-size: 5vw
    }

    #webcam .map-container {
        height: 100vw !important;
        width: 100% !important;
        left: -12vw !important
    }

    #webcam .map-container.alt {
        left: auto !important
    }

    #webcam .map-container .map-frame {
        left: 2% !important
    }

    #webcam .map-container.alt .map-frame {
        left: auto !important;
        right: 2% !important
    }

    .multibox.four {
        display: grid;
        width: 90%;
        grid-template-columns: 40vw 40vw;
        grid-template-rows: 40vw 40vw;
        gap: 4vw
    }

    .multibox.four a {
        width: 100% !important;
        height: 100%
    }

    .multibox.four .multibox-entry {
        width: 100%;
        height: 100% !important
    }

    .multibox.four .multibox-entry .img {
        width: 100%;
        height: 100% !important;
        left: 3vw
    }

    .multibox.four .multibox-entry .img::before {
        left: -4vw;
        width: 125%
    }

    #golden-roof-park .background:has(.multibox) {
        background: linear-gradient(var(--turquoise) 85vw, transparent 85vw)
    }

    #golden-roof-park .slider {
        padding: 16vw 5vw 5vw
    }

    #golden-roof-park .custom.splide {
        height: 90vw;
        padding-left: 5vw
    }

    #golden-roof-park .custom.splide::before {
        height: 110%;
        top: -5%
    }

    #golden-roof-park .custom.splide::after {
        height: 110%;
        top: -5%
    }

    #golden-roof-park .slider {
        padding: 16vw 5vw 5vw;
        contain: paint
    }

    #golden-roof-park .slider-content {
        margin: 0 4vw;
        width: 56vw
    }

    #golden-roof-park .slider-content .image {
        aspect-ratio: 5/6
    }

    #golden-roof-park .slider .slider-content .image::after {
        left: -20%;
        width: 140%
    }

    #golden-roof-park .slider-content h1 span {
        font-size: 3vw
    }

    .green .right .table .row span {
        text-align: center
    }

    #anreise .title p {
        font-size: 3vw;
        line-height: 3.5vw
    }

    .filter {
        margin: 3vw 5vw !important;
        width: 90% !important
    }

    #anreise .filter-entry.full {
        width: 44vw
    }

    .filter-entry {
        height: 6vw;
        text-align: center
    }

    .filter-entry h1 {
        font-size: 3vw !important;
        margin: 0
    }

    .tarife-table {
        width: 95%;
        margin-left: 5%
    }

    .tarife-table br {
        line-height: 1vw
    }

    .tarife-table .row .col-content {
        height: 9vw
    }

    #eventkalender .tarife-table .row .col {
        width: 45vw
    }

    #eventkalender .tarife-table .row .col .col-content h1 {
        font-size: 3vw !important;
        line-height: 3vw !important
    }

    #eventkalender .tarife-table .row .col .col-content h2 {
        font-size: 3vw !important;
        line-height: 3vw !important
    }

    .tarife-table .row .col.first {
        width: 28vw
    }

    .tarife-table .row .col-content::before {
        height: calc(100% - .6vw);
        border-width: .2vw
    }

    .tarife-table .row .col .col-content h1 {
        font-size: 2vw !important;
        line-height: 2vw !important
    }

    .tarife-table .row .col-content {
        left: .8vw;
        width: calc(100% - 2.3vw)
    }

    .tarife-table .row .col.first .col-content {
        left: -1.5vw
    }

    .tarife-table .row .col .col-content h2 {
        font-size: 2vw !important;
        line-height: 2vw !important
    }

    .tarife-table .row .col .col-content p {
        font-size: 1.5vw !important;
        line-height: 1.5vw !important
    }

    #anreise .table-container {
        overflow-x: scroll
    }

    #anreise .table-container::after {
        content: "";
        position: absolute;
        left: auto;
        right: 0;
        top: 0;
        width: 5vw;
        height: 100%;
        background: url(/img/next.png), linear-gradient(90deg, transparent, white 2vw)
    }

    #anreise .table-container::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 5vw;
        height: 100%;
        z-index: 1;
        background: linear-gradient(270deg, transparent, white 2vw)
    }

    #anreise .table-container br {
        line-height: 1vw !important
    }

    #anreise .tarife-table,
    #tarife .tarife-table {
        width: auto;
        padding-right: 5%;
        margin-left: 5%;
        margin-right: 0
    }

    #anreise .tarife-table .row,
    #tarife .tarife-table .row {
        width: max-content;
        padding-right: 10vw
    }

    #anreise .tarife-table .row .col:not(.first),
    #tarife .tarife-table .row .col:not(.first) {
        margin-right: -2.3vw
    }

    #anreise .tarife-table .row .col .col-content h1,
    #tarife .tarife-table .row .col .col-content h1 {
        font-size: 2.5vw !important;
        line-height: 2.5vw !important
    }

    #anreise .tarife-table .row .col,
    #tarife .tarife-table .row .col {
        width: 24vw
    }

    #anreise .tarife-table:not(.head) .row .col.first,
    #tarife .tarife-table:not(.head) .row .col.first {
        width: 35vw
    }

    #anreise .tarife-table .row .col,
    #tarife .tarife-table .row .col {
        border-width: .4vw !important
    }

    #anreise .tarife-table .row .col .col-content::before,
    #tarife .tarife-table .row .col .col-content::before {
        border-width: .4vw !important
    }

    #anreise .tarife-table .row .col.first .col-content,
    #tarife .tarife-table .row .col.first .col-content {
        width: calc(100% - 4vw);
        padding-left: 4vw
    }

    .not-mobile {
        display: none !important
    }

    #index .sub-title {
        margin: 50vw 5vw 5vw
    }
}

body:has(#header-mobile) #index {
    width: 100%;
    contain: paint
}

body:has(#header-mobile) #index .content {
    padding-top: 15vw
}

.info-banner {
    position: relative;
    height: 16vw
}

.info-banner.tall {
    height: 25vw;
    top: -1px;
}

.info-banner .info-container-1 {
    display: flex;
    top: 0;
    left: 0;
    width: 52vw;
    height: 100%;
    position: absolute
}

.info-banner .info-container-1.weather {
    padding-left: 2vw
}

.info-banner .info-container-2 {
    position: relative
}

.info-banner .info-container-2 .container {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr
}

.info-banner .info-container-2 .info svg {
    width: 5vw
}

.info-banner .slider__ {
    width: 50vw;
    display: flex;
    align-self: center
}

.info-banner .slider__ .info {
    display: flex;
    flex-direction: column;
    align-items: center
}

.info-banner .slider__ .info svg {
    width: 5vw;
    aspect-ratio: 1/1
}

.info-banner .slider__ .info h1 {
    margin: .5vw
}

.info-banner .info {
    z-index: 1;
    width: 100%
}

.info-banner .info svg {
    width: 10vw;
    aspect-ratio: 1/1
}

.info-banner .info h1 {
    font-size: 2.4vw !important;
    line-height: 2.4vw !important;
    text-align: center;
    width: fit-content
}

.info-banner .info-container-2 {
    display: flex;
    top: 0;
    left: auto;
    right: 0;
    width: 44vw;
    height: 100%;
    position: absolute
}

.info-banner .info-container-1 .background,
.info-banner .info-container-2 .background {
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 100%;
    background: var(--inverted-gradient);
    transform: skew(-12deg);
    box-shadow: 0 2px 3px rgba(0, 0, 0, .2)
}

.info-banner.tall .info-container-1 {
    width: 61vw;
    z-index: 0;
    padding-top: 3vw;
    padding-left: 4vw
}

.info-banner .info-container-2.webcam {
    top: 57%;
    height: 68%;
    width: 22vw;
    transform: translateY(-50%)
}

.info-banner .info-container-2.webcam .background {
    background: var(--gradient)
}

.info-banner .info-container-1.lifte h1.title {
    position: absolute;
    top: 1vw;
    font-size: 3vw !important;
    margin: 0
}

.info-banner .info-container-1.lifte .info {
    position: relative
}

.info-banner .info-container-1.lifte .info svg {
    position: absolute;
    top: 5vw;
    left: 0
}

.info-banner .info-container-1.lifte .info h1.lower {
    position: absolute;
    bottom: 1vw;
    left: 1vw
}

.info-banner .info-container-1.lifte .info h1.right {
    position: absolute;
    bottom: 8vw;
    left: 11vw
}

.info-banner .info-container-1.lifte .info h1.right span {
    font-size: 3vw !important
}

.info-banner .info-container-2.webcam svg {
    width: 8vw;
    height: 8vw;
    z-index: 1;
    padding: 2vw;
    background-color: #fff;
    border-radius: 3vw;
    box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, .2);
    position: relative;
    right: 8vw;
    top: 2.4vw
}

.info-banner .info-container-2.webcam h1 {
    margin: 0;
    font-size: 3vw !important;
    z-index: 1;
    align-self: center;
    position: relative;
    right: 6vw
}

.info-banner .info .image {
    width: 5vw;
    height: 5vw;
    background: url(/img/lawine.png);
    background-size: contain;
    margin-bottom: 0;
    z-index: -1
}

.info-banner .info .image.lwg_1 {
    background-image: url(/img/lwg_1.webp);
}
.info-banner .info .image.lwg_2 {
    background-image: url(/img/lwg_2.webp);
}
.info-banner .info .image.lwg_3 {
    background-image: url(/img/lwg_3.webp);
}
.info-banner .info .image.lwg_4,
.info-banner .info .image.lwg_5 {
    background-image: url(/img/lwg_4.webp);
}

.ski-ticket {
    position: absolute;
    right: 0;
    text-align: right;
    top: 72%;
    padding: 6vw 4vw 6vw 11vw
}

.ski-ticket::before {
    content: "";
    background: var(--gradient);
    position: absolute;
    top: 0;
    left: 0;
    width: 109%;
    height: 100%;
    transform: skew(-12deg);
    z-index: 0
}

.ski-ticket h1 {
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: 5vw !important;
    line-height: 5.5vw !important
}

#index .sub-title {
    margin: 5vw 10vw
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .slider.hotels .custom.splide.berichte {
        height: 43vw;
        margin-top: 10vw;
        margin-bottom: 20vw
    }
}

#eventkalender .start::before {
    background-image: url(/img/©framesbycorradini_86.webp)
}

#eventkalender .table {
    padding-top: 5vw;
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-areas: "cell1 cell2" "cell1 cell3";
    grid-gap: 1vw;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 17vw 17vw;
    contain: paint
}

#eventkalender .table .box1 {
    grid-area: cell1;
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 2vw);
    left: -4vw
}

#eventkalender .table .box1::before {
    content: "";
    display: block;
    width: 106%;
    height: 100%;
    position: absolute;
    transform: skew(12deg);
    background: url(/img/©framesbycorradini_57.webp);
    filter: brightness(.5);
    background-position-x: 95%;
    background-position-y: 60%;
    background-size: 95%
}

#eventkalender .table .box1 .box-content {
    transform: skew(12deg);
    position: absolute;
    top: 4vw;
    left: 5vw;
    color: var(--light-beige)
}

#eventkalender .table .box1 .box-content h1 {
    font-size: 2vw;
    font-weight: 400;
    color: var(--light-beige)
}

#eventkalender .table .box1 .box-content button {
    padding: .6vw 2vw;
    border: none;
    border-radius: .5vw;
    background-color: var(--beige);
    margin-top: 6vw
}

#eventkalender .table .box2 {
    grid-area: cell2;
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 2vw)
}

#eventkalender .table .box2::before {
    content: "";
    position: absolute;
    top: 0;
    left: -5%;
    width: 105%;
    height: 100%;
    transform: skew(12deg);
    display: block;
    background: url(/img/IMG_6764.webp);
    filter: brightness(.8);
    background-position: 50% -73%;
    background-size: 100%
}

#eventkalender .table .box3 {
    grid-area: cell3;
    position: relative;
    left: -3.7vw;
    transform: skew(-12deg);
    width: calc(100% + 9vw);
    contain: paint
}

#eventkalender .table .box3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2vw;
    width: 100%;
    height: 100%;
    display: block;
    background: url(/img/Picture-031.webp);
    filter: brightness(.8);
    background-position: 50%;
    background-size: 100%
}

#eventkalender .table .box2 h1,
#eventkalender .table .box3 h1 {
    transform: skew(12deg);
    position: absolute;
    right: 5vw;
    bottom: 0;
    color: var(--light-beige);
    font-weight: 400;
    text-align: right;
    font-size: 1.6vw
}

#eventkalender .table .box2 h1 {
    bottom: 9vw
}

#eventkalender .table .box3 h1 {
    right: 6.5vw;
    bottom: 1vw
}

.eventkalender {
    border-collapse: separate;
    border-spacing: 2vw 0;
    margin: 1vw auto 0
}

.eventkalender.first {
    margin-top: 4vw
}

.eventkalender td:has(.first) {
    width: 8vw
}

.eventkalender td:nth-child(1):has(.first) {
    z-index: 1
}

.eventkalender td:has(.last) {
    width: 10vw
}

.eventkalender td {
    width: 27vw;
    margin: 0;
    position: relative;
    --index-switch: max(0, calc(var(--index) - 3));
    left: calc(-.25vw * var(--index-switch))
}

.eventkalender td.seperator {
    width: 2vw;
    border: none;
    opacity: 0
}

.eventkalender+.seperator h1 {
    font-size: .8vw;
    font-weight: 300;
    padding-bottom: .5vw
}

.eventkalender td .td_content {
    transform: skew(-12deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 3vw;
    border-style: solid;
    border-width: .15vw;
    border-color: var(--beige);
    background-color: #fff
}

.eventkalender td .td_content.last {
    background: 0 0 !important;
    border: none !important;
    gap: .1vw;
    width: 90%;
    margin-left: auto
}

.eventkalender td .td_content.last>div {
    background-image: url(/img/right.png), var(--inverted-gradient);
    background-repeat: no-repeat;
    background-position: 95%, 0;
    background-size: 14%, cover;
    padding: .3vw 1vw;
    width: 100%
}

.eventkalender td .td_content.last>div:hover {
    cursor: pointer
}

.eventkalender td .td_content.last>div h1 {
    font-size: .6vw
}

.eventkalender td .td_content.last h1 {
    font-size: .7vw
}

.eventkalender.even td .td_content {
    background-color: var(--light-beige)
}

.eventkalender td:nth-child(1) .td_content.first {
    border-right: none;
    transform: skew(0)translateX(2vw);
    align-items: start;
    padding-left: 1vw;
    width: 17vw
}

.eventkalender td .td_content.first h1,
.eventkalender td .td_content.first h2 {
    width: max-content
}

.eventkalender td:nth-child(2) .td_content.first {
    border-left: none;
    transform: skew(-12deg)scaleX(1.1)
}

.eventkalender td .td_content h1,
.eventkalender td .td_content h2 {
    font-family: inter;
    text-align: left;
    transform: skew(12deg);
    font-size: 1.2vw;
    font-weight: 300;
    margin: 0
}

.eventkalender:not(.first) td .td_content h1,
.eventkalender:not(.first) td .td_content h2 {
    font-size: .8vw;
    font-weight: 300
}

.eventkalender td .td_content.first h1,
.eventkalender td .td_content.first h2 {
    transform: skew(0)
}

.eventkalender td .td_content h2 {
    font-size: 1vw;
    font-weight: 100
}

#eventkalender .seperator {
    width: 80vw;
    margin: .5vw auto;
    position: relative
}

#eventkalender .seperator::after {
    content: "";
    position: absolute;
    top: auto;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--beige)
}

#eventkalender .seperator.transparent::after {
    background: 0 0
}

.button.big {
    display: block;
    text-align: center;
    width: 70%;
    padding: 4vw;
    background: var(--inverted-gradient);
    color: var(--grey);
    margin: 10vw auto 4vw;
    border-radius: 2vw
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .start.triple.full {
        height: 168vw
    }

    #eventkalender .table,
    .start.triple.full .table {
        grid-template-areas: "cell1 cell1" "cell1 cell1" "cell2 cell3";
        grid-gap: 4.8vw;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 20vw 20vw 30vw
    }

    .start.triple.full .table {
        grid-template-rows: 80vw 20vw 30vw
    }

    #eventkalender .table .box1,
    .start.triple.full .table .box1 {
        left: -19vw
    }

    #eventkalender .table .box1::before,
    .start.triple.full .table .box1::before {
        background-position-y: 56%;
        background-size: 90%
    }

    #eventkalender .table .box1 .box-content {
        left: 19vw
    }

    .start.triple.full .table .box1 .box-content {
        left: 14vw
    }

    #eventkalender .table .box2,
    .start.triple.full .table .box2 {
        width: 100%;
        left: -4vw
    }

    #eventkalender .table .box2::before,
    .start.triple.full .table .box2::before {
        background-position: 50% -88%;
        left: 3%
    }

    #eventkalender .table .box2 h1,
    .start.triple.full .table .box2 h1 {
        bottom: 17.2vw;
        right: 20vw;
        text-align: left
    }

    #eventkalender .table .box3,
    .start.triple.full .table .box3 {
        width: 122%
    }

    #eventkalender .table h1,
    .start.triple.full .table h1 {
        font-size: 3vw !important;
        line-height: 3.5vw !important
    }

    #tarife .start:not(.triple) {
        position: absolute;
        aspect-ratio: unset;
        height: 197vw;
        background-size: cover
    }

    .start.triple.full .table .box1::before {
        background-position-y: 55%;
        background-position-x: 40%;
        background-size: 149%;
        width: 112%
    }

    #eventkalender .table .box2::before {
        background-position: 50% 60%
    }

    .start.triple.full .table .box2::before {
        background-position: 50% 0
    }

    #eventkalender .seperator.first {
        margin-top: -12vw
    }

    #eventkalender .seperator h1 {
        margin-top: 9vw
    }

    #tarife .box-container {
        display: flex
    }

    #tarife .box-container .box {
        height: 30vw;
        width: 50vw;
        margin-right: 3vw
    }

    #tarife .custom.splide.berichte {
        height: 30vw;
        margin-top: 4vw;
        margin-bottom: 10vw
    }

    #tarife .box-container.first a:nth-child(1) .box::after {
        background-image: url(/img/freizeitticket_logo.svg)
    }

    #tarife .box-container:not(.switch) li:nth-child(1) .box::before {
        background-image: url(/img/csm_FTT_Web_Winter-Counter_Kappl-Marz2019_f7999d400c.webp);
        background-size: cover;
        background-position: 50%
    }

    #tarife .box-container:not(.switch) li:nth-child(2) .box::after {
        background-image: url(/img/spc_logo.svg)
    }

    #tarife .box-container:not(.switch) li:nth-child(2) .box::before {
        background-image: url("/img/STUBAIER_GLETSCHER_PISTE_3663_ret01_AI Kopie.webp");
        background-size: 95%;
        background-position: 50% 40%
    }

    #tarife .box-container:not(.switch) li:nth-child(3) .box::after {
        background-image: url(/img/snowcardtirol_logo.png)
    }

    #tarife .box-container:not(.switch) li:nth-child(3) .box::before {
        background-image: url(/img/SCT_Webseite_1500x800.6729b3db.webp);
        background-size: cover;
        background-position: 50%
    }

    #tarife .box-container:not(.switch) li:nth-child(4) .box::after {
        background-image: url(/img/isp_logo.png)
    }

    #tarife .box-container:not(.switch) li:nth-child(4) .box::before {
        background-image: url("/img/true (4).webp");
        background-size: cover;
        background-position: 50%
    }

    #tarife .table-container {
        overflow-x: scroll
    }

    #tarife .tarife-table .row {
        width: max-content;
        padding-right: 10vw
    }

    #tarife .table-container:not(.jk):not(.jk_vvk) .tarife-table.head .col:nth-child(1) {
        margin-left: 36vw
    }

    #tarife .filter.switch .filter-entry {
        width: 30vw
    }

    #tarife .box-container .box .link {
        width: 20vw !important
    }

    #tarife .ticket-switch {
        width: 100%
    }

    #tarife .ticket-switch .box-container {
        display: grid;
        grid-template-columns: 1fr 1fr
    }

    #tarife .table-container.alt {
        width: auto;
        margin: 0
    }

    #tarife .filter.saison {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 10vw 10vw
    }

    #tarife .filter.saison .filter-entry {
        width: 90%;
        height: 90%
    }

    .button.big {
        display: block;
        text-align: center;
        width: 70%;
        padding: 4vw;
        background: var(--inverted-gradient);
        color: var(--grey);
        margin: 10vw auto 4vw;
        border-radius: 2vw
    }

    #tarife .box-container.switch .box::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)skew(12deg);
        width: 60%;
        height: 40%;
        background-position: 50%;
        background-size: contain;
        background-repeat: no-repeat
    }

    .start.triple.full .table .box2 h1 {
        width: 100%;
        left: 28%
    }

    .start.triple.full .table .box1 h1,
    .start.triple.full .table .box2 h1,
    .start.triple.full .table .box3 h1 {
        font-size: 4.5vw !important;
        line-height: 5vw !important
    }

    #tarife .box-container.switch a:nth-child(1) .box::after {
        background-image: url(/img/freizeitticket_logo.svg)
    }

    #tarife .box-container.switch a:nth-child(2) .box::after {
        background-image: url(/img/spc_logo.svg)
    }

    #tarife .box-container.switch a:nth-child(3) .box::after {
        background-image: url(/img/snowcardtirol_logo.png)
    }

    #tarife .box-container.switch a:nth-child(4) .box::after {
        background-image: url(/img/isp_logo.png)
    }

    .start.triple .table .box2 h1,
    .start.triple .table .box3 h1 {
        top: 0;
        right: 8.5vw
    }

    p.small {
        display: none
    }
}

.social-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 20vw 20vw 20vw;
    gap: 2vw;
    margin: 5vw
}

.social-grid .photo {
    background-color: gray
}

.magazine-start {
    background-image: url(/img/background.webp);
    padding-top: 149px;
    padding-bottom: 100px;
    position: relative
}

@media(max-width:2000px) {
    .magazine-start {
        padding-top: 109px
    }
}

.magazine-start .background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: brightness(.5)
}

.magazine-start .table {
    width: 80vw;
    margin: auto;
    display: grid;
    grid-template-areas: "cell1 cell2" "cell1 cell3";
    grid-gap: 1vw;
    grid-template-columns: 2fr 1fr;
    grid-template-rows: 12vw 12vw;
    contain: paint
}

.magazine-start .box1 {
    grid-area: cell1;
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 1.5vw);
    left: -3vw
}

.magazine-start .box1::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(/img/background.webp);
    background-position: 50%;
    background-size: 100%
}

.magazine-start .box2 {
    grid-area: cell2;
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    width: calc(100% + 2vw)
}

.magazine-start .box2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: url(/img/shop.webp);
    background-position: 50%;
    background-size: 100%
}

.magazine-start .box3 {
    grid-area: cell3;
    position: relative;
    left: -2.7vw;
    transform: skew(-12deg);
    width: calc(100% + 6.5vw);
    contain: paint
}

.magazine-start .box3::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2vw;
    width: 100%;
    height: 100%;
    display: block;
    background: url(/img/shop.webp);
    background-position: 50%;
    background-size: 100%
}

.newsletter {
    display: grid;
    width: 80vw;
    height: 33vw;
    grid-template-areas: "title image" "info image";
    grid-template-columns: 50% 50%;
    grid-template-rows: 40% 60%;
    margin: auto;
    contain: paint;
    padding: 1vw 0;
    margin-top: 5vw
}

.newsletter:nth-child(2) {
    grid-template-areas: "image title" "image info"
}

.newsletter .title {
    grid-area: title
}

.newsletter .title h1 {
    font-size: 2vw;
    font-weight: 800;
    letter-spacing: 2;
    color: var(--grey)
}

.newsletter:nth-child(2) .title h1 {
    text-align: right
}

.newsletter .title p {
    color: var(--grey);
    margin: 0;
    margin-left: 6vw;
    font-size: 1.3vw;
    line-height: 1.9vw
}

.newsletter:nth-child(2) .title p {
    margin-left: 0
}

.newsletter .image {
    grid-area: image;
    position: relative
}

.newsletter .image .image {
    position: relative;
    transform: skew(-12deg);
    contain: paint;
    height: 100%;
    width: 100%;
    left: 6vw
}

.newsletter:nth-child(2) .image .image {
    left: -4vw
}

.newsletter .image .image::before {
    content: "";
    position: relative;
    display: block;
    height: 100%;
    width: 120%;
    left: -4vw;
    transform: skew(12deg);
    background-image: url(/img/background.webp);
    background-size: cover
}

.newsletter .image .banner {
    position: absolute;
    left: 1vw;
    top: -1vw;
    padding: 1vw;
    z-index: 1
}

.newsletter:nth-child(2) .image .banner {
    left: calc(100% - 9vw);
    top: -1vw
}

.newsletter .image .banner h1 {
    margin: 0
}

.newsletter .image .banner p {
    margin: 0
}

.newsletter .image .banner::before {
    content: "";
    position: absolute;
    display: block;
    z-index: -1;
    top: 0;
    left: -10%;
    width: 120%;
    height: 100%;
    background: var(--beige);
    transform: skew(-12deg);
    box-shadow: -2px 2px 3px 1px rgba(0, 0, 0, .1)
}

.newsletter .info::before {
    content: "";
    display: block;
    background: var(--beige);
    transform: skew(-12deg);
    position: absolute;
    width: 100%;
    height: 100%;
    box-shadow: -1px 2px 3px 2px rgba(0, 0, 0, .1);
    z-index: -1
}

.newsletter .info {
    position: relative;
    grid-area: info;
    display: grid;
    height: calc(100% - 4vw);
    grid-template-areas: "cell1 cell2 cell3" "cell4 cell5 cell6" "cell7 cell8 cell9";
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 33% 33% 33%;
    padding: 2vw 0 2vw 3vw;
    align-items: center;
    left: 3vw
}

.newsletter:nth-child(2) .info {
    left: -4vw
}

.newsletter .info .date {
    grid-area: cell1
}

.newsletter .info .button {
    grid-area: cell3;
    background: var(--grey);
    color: var(--beige);
    text-align: center;
    font-family: inter;
    padding: .8vw;
    font-size: 1vw;
    border-radius: .4vw
}

.newsletter .info .time-start {
    grid-area: cell4
}

.newsletter .info .time-end {
    grid-area: cell5
}

.newsletter .info .price1 {
    grid-area: cell7
}

.newsletter .info .price2 {
    grid-area: cell9
}

.newsletter .info .text-block h1 {
    margin: 0;
    font-weight: 800;
    font-size: 1.7vw;
    letter-spacing: 2
}

.newsletter .info .text-block p {
    margin: 0;
    font-weight: 700;
    font-size: 1.2vw;
    letter-spacing: 2
}

#newsletter-index .content .more-events {
    margin-top: 5vw
}

#newsletter-index .content .more-events .title h1 {
    font-size: 2vw;
    line-height: 2vw;
    color: var(--grey);
    letter-spacing: 1;
    transform: scaleX(1.4);
    transform-origin: left;
    margin: 0;
    margin: 0 9vw
}

#newsletter-index .content .more-events .title p {
    font-size: 1.6vw;
    margin: 0 9vw 1vw
}

#newsletter-index .content .more-events .events {
    display: flex;
    gap: 1vw;
    width: 80vw;
    margin: auto
}

#newsletter-index .content .more-events .events .event {
    transform: skew(-12deg);
    position: relative;
    padding: 2vw 4vw;
    contain: paint
}

#newsletter-index .content .more-events .events .event::before {
    content: "";
    transform: skew(12deg);
    position: absolute;
    width: 112%;
    height: 100%;
    left: -6%;
    top: 0;
    background: url(/img/background.webp);
    background-size: cover;
    z-index: -1;
    filter: brightness(.5)
}

#newsletter-index .content .more-events .events .event h1 {
    margin: 0;
    font-size: 6vw;
    color: #fff
}

.magazin {
    display: grid;
    align-items: center;
    grid-template-areas: "cell1 cell2";
    grid-template-columns: 4fr 5fr;
    grid-template-rows: 30vw;
    width: 80vw;
    margin: auto;
    margin-top: 5vw
}

.magazin.alt {
    grid-template-areas: "cell2 cell1";
    grid-template-columns: 5fr 4fr
}

.magazin.alt.pr {
    grid-template-areas: "cell2 cell1" "cell3 cell3"
}

.magazin.pr {
    grid-template-areas: "cell1 cell2" "cell3 cell3"
}

.magazin.pr .gallery {
    grid-area: cell3;
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 10px;
    top: -50%
}

.magazin.pr .gallery .gallery-entry {
    height: 240px;
    border: 2px solid #000
}

.magazin.pr .gallery .gallery-entry.first {
    grid-column: span 5;
    border: none
}

.magazin .title {
    grid-area: cell1
}

.magazin.pr .title {
    align-self: baseline;
    margin-top: 80px
}

.magazin .title h1 {
    font-size: 2vw;
    line-height: 2vw;
    color: var(--grey);
    letter-spacing: 1;
    transform: scaleX(1.4);
    transform-origin: left;
    margin: 0
}

.magazin .title p {
    font-size: 1.6vw;
    margin: 0
}

.magazin .image {
    grid-area: cell2;
    height: 100%;
    position: relative
}

.magazin .image .image-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    contain: paint
}

.magazin .image .image-container .image {
    position: absolute;
    top: 0;
    left: 4vw;
    height: 100%;
    width: 100%;
    contain: paint;
    transform: skew(-12deg)
}

.magazin.alt .image .image-container .image {
    left: -4vw
}

.magazin .image .image-container .image::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: -4vw;
    height: 100%;
    width: 100%;
    transform: skew(12deg);
    background: url(/img/background.webp);
    background-size: cover;
    filter: brightness(.5)
}

.magazin.alt .image .image-container .image::before {
    left: 4vw
}

.magazin .image .text {
    position: absolute;
    top: 2vw;
    left: auto;
    right: -2vw;
    z-index: 1
}

.magazin.alt .image .text {
    top: auto;
    bottom: 2vw;
    left: -2vw;
    right: auto
}

.magazin .image .text h1 {
    font-size: 2.5vw;
    line-height: 2.2vw;
    color: var(--turquoise);
    text-align: right
}

.magazin.alt .image .text h1 {
    text-align: left
}

@media screen and (orientation:portrait) and (max-width:600px) {
    .newsletter {
        height: 70vw;
        width: 95%
    }

    .newsletter .title h1 {
        font-size: 4vw !important;
        line-height: 4vw !important
    }

    .newsletter .title p {
        font-size: 3vw;
        line-height: 3vw
    }

    .newsletter .image {
        width: 110%;
        right: 10%
    }

    .newsletter .image .image {
        height: 95%
    }

    .newsletter .info {
        padding: 4vw 0 4vw 6vw;
        grid-template-areas: "cell1 cell3" "cell4 cell5" "cell7 cell9";
        grid-template-columns: 50% 50%;
        z-index: 1;
        height: calc(100% - 15vw);
        top: 7vw;
        width: 90%;
        padding-right: 10%
    }

    .newsletter .info::before {
        left: 3%
    }

    .newsletter .image .banner h1 {
        font-size: 3vw !important;
        line-height: 3vw !important
    }

    .newsletter .image .banner p {
        font-size: 2vw !important;
        line-height: 2vw !important
    }

    .newsletter .info .text-block h1 {
        font-size: 3vw !important;
        line-height: 3.5vw !important
    }

    .newsletter .info .text-block p {
        font-size: 2vw !important;
        line-height: 2vw !important
    }

    .newsletter .image .banner {
        left: 10vw
    }

    .newsletter .info .button {
        font-size: 2vw
    }
}

#gastronomie-index .start::before {
    background-image: url("/img/Manuel Kokseder - Axamer Lizum--58.webp")
}

#gastronomie-index .title p {
    margin-top: 2vw;
    font-size: .9vw
}

#gastronomie .content .title h1,
#greenpass-detail .title h1 {
    text-transform: uppercase
}

#gastronomie .text,
#greenpass-detail .text,
#partner-detail .content>.text {
    margin: 5vw 10vw
}

#hotel-gastro-index .start.triple .table,
#partner-index .start.triple .table {
    width: 80%
}

.filter {
    padding-top: 5vw;
    width: 80%;
    margin: auto;
    display: flex;
    gap: 1vw
}

#partner-index .filter {
    margin-bottom: 5vw
}

.filter-entry {
    position: relative;
    padding: .5 1vw
}

.filter-entry.full {
    width: 20vw
}

.filter-entry::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: skew(-12deg);
    border: solid 1px var(--beige)
}

.filter-entry.active::before {
    background: var(--inverted-gradient)
}

#anreise .filter h1 {
    font-size: 1vw;
    text-align: center;
}

.dual-box-alt {
    margin-top: 5vw;
    margin-bottom: 5vw;
    position: relative;
    padding-left: 10%
}

.dual-box-alt .background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-45%);
    width: 50%;
    height: 24vw;
    background-color: var(--turquoise)
}

.dual-box-alt.alt .background {
    left: 0
}

.dual-box-alt .box1 {
    z-index: 1;
    position: relative
}

.dual-box-alt .box1 .image {
    position: relative;
    left: 3vw;
    transform: skew(-12deg);
    width: 51vw;
    height: 30vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2)
}

.dual-box-alt.alt .box1 .image {
    left: 35%
}

.dual-box-alt .box1 .image::before {
    content: "";
    position: absolute;
    top: 0;
    left: -3.5vw;
    transform: skew(12deg);
    width: 58vw;
    height: 30vw;
    background-image: url(/img/wild.webp);
    background-size: 100%;
    background-position: 50%;
    filter: brightness(.75)
}

.dual-box-alt .box1 .image.hoadl::before {
    background-image: url("/img/Hoadl Haus 2.webp")
}

.dual-box-alt .box1 .image.schirmbar::before {
    background-image: url("/img/hoadl-haus (6).webp")
}

.dual-box-alt .box1 .image.sunalm::before {
    background-image: url(/img/sunnalm.webp)
}

.dual-box-alt .box1 .image.dohlennest::before {
    background-image: url(/img/dohlennest-axamer-lizum.webp)
}

.dual-box-alt .box1 .image.lizum-1600::before {
    background-image: url(/img/lizum-1600-2_restored.webp)
}

.dual-box-alt .box1 .image.lizum-alm::before {
    background-image: url(/img/lizumalm.webp)
}

.dual-box-alt .box1 .image.pfeffermühle::before {
    background-image: url(/img/Bild-Olympia-Pfeffermühle.webp)
}

.dual-box-alt .box1 .image.pleisenhuette::before {
    background-image: url(/img/thumbnail_IMG_1712.webp)
}

.dual-box-alt .box1 .image.schafalm::before {
    background-image: url(/img/D-1044-schafalm-axamer-lizum-winter-1.webp)
}

.dual-box-alt .box1 h1 {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 3vw;
    font-weight: 300;
    margin: 1vw 0 0;
    color: var(--turquoise)
}

.dual-box-alt.alt .box1 h1 {
    top: auto;
    left: auto;
    bottom: 1vw;
    right: 4vw;
    text-align: right
}

.dual-box-alt .box2 {
    position: absolute;
    left: 60.5%;
    height: 24.5vw;
    width: 30vw;
    top: 0
}

.dual-box-alt.alt .box2 {
    left: 16vw
}

.dual-box-alt .box2 .text-box {
    position: absolute;
    right: 3vw;
    top: 1vw;
    transform: skew(-12deg);
    width: 20vw;
    height: 24.5vw;
    contain: paint;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, .2);
    padding-left: 10vw
}

.dual-box-alt.alt .box2 .text-box {
    width: 24vw;
    padding-left: 6vw
}

.dual-box-alt.alt .box2 .text-box::before {
    left: -2.7vw;
    right: auto;
    width: 36vw
}

.dual-box-alt .box2 .text-box::before {
    content: "";
    position: absolute;
    right: -2.7vw;
    transform: skew(12deg);
    width: 30vw;
    height: 24.5vw;
    background: var(--inverted-gradient)
}

.dual-box-alt .box2 .text-box .text {
    position: relative;
    transform: skew(12deg);
    z-index: 1;
    width: 16vw;
    top: 2vw
}

.dual-box-alt .box2 .text-box .text h1 {
    font-size: 1.6vw;
    font-weight: 300;
    color: var(--grey)
}

.dual-box-alt .box2 .text-box .text p {
    font-size: .9vw;
    line-height: 1.2vw;
    color: var(--grey)
}

#gastronomie-index .dual-box-alt .box2 .text-box .text {
    left: .7vw
}

#gastronomie-index .dual-box-alt .box2 .text-box .text p {
    line-height: 1.2vw
}

.dual-box-alt .next {
    z-index: 1;
    position: absolute;
    bottom: 2.4vw;
    left: 86%
}

.dual-box-alt.alt .next {
    left: 14%
}

#gastronomie-index .triplet-box-2 .left::before {
    background-image: url(/img/Picture-031.webp);
    filter: none
}

#gastronomie-index .quad-grid .grid-container .grid-content:nth-child(1) .right .image::before {
    background-image: url(/img/lucajaenichen_axamer_lizum_winter_andi_highres-009120.webp);
}

@media screen and (orientation:portrait) and (max-width:600px) {
    form input,
    form textarea {
        width: 100%;
    }

    .dual-box-alt {
        margin-top: 10vw;
        margin-bottom: 10vw;
        position: relative;
        padding-left: 10%
    }

    .dual-box-alt .box1 {
        z-index: 1;
        position: relative
    }

    .dual-box-alt .box1 .image {
        box-shadow: none;
        width: 100vw;
        height: 50vw
    }

    .dual-box-alt.alt .box1 .image {
        left: -25%
    }

    .dual-box-alt .box1 .image::before {
        content: "";
        position: absolute;
        top: 0;
        left: -10%;
        transform: skew(12deg);
        width: 110%;
        height: 100%;
        background-image: url(/img/wild.webp);
        background-size: 100%;
        background-position: 50%;
        filter: brightness(.75)
    }

    .dual-box-alt.alt .box1 .image::before {
        left: 0
    }

    .dual-box-alt .box2 {
        position: relative;
        left: -12%;
        height: auto
    }

    .dual-box-alt .box2 .text-box {
        position: relative;
        width: 90%;
        top: 0;
        left: -8%;
        height: auto;
        padding-bottom: 10vw;
        padding: 6vw;
        width: 85vw;
        left: -8vw
    }

    .dual-box-alt.alt .box2 .text-box {
        position: relative;
        width: 90%;
        top: 0;
        left: -8%;
        height: auto;
        padding-bottom: 10vw;
        padding: 6vw;
        width: 85vw;
        left: -8vw
    }

    .dual-box-alt .box2 .text-box::before {
        content: "";
        position: absolute;
        right: auto;
        top: 0;
        left: -10%;
        transform: skew(12deg);
        width: 120%;
        height: 100%;
        background: var(--inverted-gradient)
    }

    .dual-box-alt.alt .box2 .text-box::before {
        left: -7.7vw;
        right: auto;
        width: 100%
    }

    .dual-box-alt .box2 .text-box .text {
        width: 90%;
        margin-left: 10%
    }

    .dual-box-alt .box2 .text-box .text p {
        font-size: 3vw;
        line-height: 3.5vw
    }

    #gastronomie-index .dual-box-alt.alt .box2 .text-box .text {
        left: 0;
        margin-left: 0;
        margin-right: 2vw
    }

    #gastronomie-index .dual-box-alt .box2 .text-box .text p {
        line-height: 3.5vw
    }

    .dual-box-alt .background {
        height: 90vw
    }

    .dual-box-alt .next {
        z-index: 1;
        position: absolute;
        bottom: 13.5vw;
        left: 80%
    }

    .dual-box-alt.alt .next {
        left: 7%
    }

    #gastronomie-index .title p {
        font-size: 3vw;
        line-height: 3.5vw
    }
}

#partner-index .content-container {
    margin: 0 10vw;
    contain: paint
}

.map-container {
    margin: 5vw 0;
    width: 74vw;
    height: 40vw;
    position: relative
}

@media screen and (orientation: portrait) and (max-width: 600px) {
    #interactive-map .map-container {
        margin: 15vw 0;
        width: 100%;
        height: 60vw;
    }
}

.map-container.alt {
    margin-left: auto
}

.map-container .map {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    contain: paint
}

#webcam .map-container {
    width: 90%;
    transform: skew(-12deg);
    left: -5%
}

#webcam .map-container.alt {
    left: auto;
    right: -5%
}

#webcam .map-container .map-frame {
    left: -5%;
    width: 110%;
    transform: skew(12deg)
}

#webcam .map-container.alt .map-frame {
    left: auto;
    right: -5%
}

.map-container.alt .map {
    left: auto;
    right: -5%
}

.map-container .map-frame {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1
}

.map-container.alt .map-frame {
    right: 0
}

#interactive-map .map-container .title {
    position: absolute;
    top: 0;
    right: 5%;
    padding: 0;
    margin: 0;
    font-size: 2vw;
    color: var(--turquoise);
    transform: translateY(-50%)
}

#interactive-map .map-container.alt .title {
    top: auto;
    left: 5%;
    right: auto;
    bottom: 0;
    transform: translateY(50%)
}

.map-container .controls {
    position: absolute;
    right: 3%;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 1vw
}

.map-container.alt .controls {
    top: 0;
    left: 3%;
    right: auto;
    bottom: auto
}

.map-container .controls h1 {
    text-align: center;
    background: var(--beige);
    padding: .5vw 1vw;
    border-radius: .5vw;
    margin: 0;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1)
}

#interactive-map .background,
#webcam .background {
    position: relative
}

#interactive-map .background::before,
#webcam .background::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: calc(100% + 30vw);
    width: 100%;
    background-color: var(--turquoise);
    z-index: -2
}

#interactive-map .title,
#webcam .title {
    color: var(--beige)
}

.multibox {
    width: 80%;
    margin: auto;
    display: flex;
    gap: 1vw
}

.multibox.dark {
    padding: 2vw 10vw;
    width: 100%;
    background-color: var(--grey);
    color: var(--beige)
}

.multibox.slider {
    display: block;
    padding: 0;
    margin: 5vw auto
}

.multibox.slider .multibox-entry {
    width: 15vw;
    margin: 0 1vw
}

.multibox.slider .custom.splide.berichte::before {
    left: -10vw
}

.multibox.slider .custom.splide.berichte::after {
    right: -10vw
}

.multibox.slider .custom.splide__arrow.splide__arrow--pre {
    left: -7.5vw
}

.multibox.slider .custom.splide__arrow.splide__arrow--next {
    right: -7.5vw
}

#hotel-gastro-index .multibox {
    margin: 5vw auto
}

#hotel-gastro-index .multibox .button {
    position: relative;
    font-size: 1.4vw;
    left: -1vw;
    padding: .5vw 2vw;
    background: var(--beige);
    border-radius: .5vw
}

.multibox.three .multibox-entry {
    width: 33%
}

.multibox.multibox.three a {
    display: inline-block;
    width: 33%
}

.multibox.two .multibox-entry {
    width: 50%
}

.multibox.two a {
    display: inline-block;
    width: 50%
}

.multibox.two .multibox-entry .img::before {
    left: -2vw
}

.multibox.four .multibox-entry {
    width: 25%
}

.multibox.four a {
    display: inline-block;
    width: 25%
}

.multibox.five .multibox-entry {
    width: 20%
}

.multibox.multibox.five a {
    display: inline-block;
    width: 20%
}

.multibox a,
.multibox a:visited {
    color: var(--grey)
}

.multibox a .multibox-entry {
    width: 100% !important
}

.multibox .multibox-entry .img {
    transform: skew(-12deg);
    width: 100%;
    height: 10vw;
    contain: paint;
    position: relative;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1)
}

.multibox.tall .multibox-entry .img {
    height: 20vw
}

.multibox .multibox-entry .img::before {
    content: "";
    position: absolute;
    left: -1vw;
    width: 120%;
    height: 100%;
    background: url(/img/wild.webp);
    background-size: cover;
    background-position: 50%;
    transition: transform .2s;
    transform: skew(12deg)
}

.multibox.tall .multibox-entry .img::before {
    left: -2.5vw;
    width: 130%
}

.multibox .multibox-entry .img:hover::before {
    transform: scale(1.1)skew(12deg)
}

.multibox .multibox-entry h1 {
    position: relative;
    font-size: 1.4vw;
    left: -1vw
}

#interactive-map .multibox a:nth-child(1) .multibox-entry .img::before {
    background-image: url(https://live-image.panomax.com/cams/3904/thumbnail.jpg)
}

#interactive-map .multibox a:nth-child(2) .multibox-entry .img::before {
    background-image: url(https://live-image.panomax.com/cams/3901/thumbnail.jpg)
}

#interactive-map .multibox a:nth-child(3) .multibox-entry .img::before {
    background-image: url(https://wtvpict.feratel.com/picture/37/5511.jpeg?design=v5&dcsdesign=feratel4)
}

#interactive-map .multibox a:nth-child(4) .multibox-entry .img::before {
    background-image: url(https://wtvpict.feratel.com/picture/37/5510.jpeg?design=v5&dcsdesign=feratel4)
}

#webcam .multibox a:nth-child(1) .multibox-entry .img::before {
    background-image: url(https://live-image.panomax.com/cams/3904/thumbnail.jpg)
}

#webcam .multibox a:nth-child(2) .multibox-entry .img::before {
    background-image: url(https://live-image.panomax.com/cams/3901/thumbnail.jpg)
}

#jobs .multibox.three {
    margin: 5vw auto
}

#jobs .multibox.three .multibox-entry h1 {
    font-size: 2.4vw;
    margin-top: .5vw
}

#jobs .multibox.three .multibox-entry .img {
    height: 15vw
}

#jobs .description {
    width: 90%;
    margin-left: auto;
    padding-top: 5vw;
    position: relative;
    margin-bottom: 5vw
}

#jobs .description p {
    max-width: 60%;
    font-size: 1.2vw;
    line-height: 2vw
}

#jobs .description .key-facts {
    position: absolute;
    top: 5vw;
    right: 0;
    padding: 1.5vw 3vw;
    display: flex;
    flex-direction: column;
    gap: .5vw
}

#jobs .description .key-facts h1 {
    margin-top: 0;
    text-align: right
}

#jobs .description .key-facts p {
    text-align: right
}

#jobs .description .key-facts::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 110%;
    height: 100%;
    transform: skew(-12deg);
    background-color: var(--beige);
    z-index: -1
}

form .form-title {
    margin-top: 3vw;
    grid-column: span 2
}

form:not(.login) {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2vw
}

form h1 {
    font-size: 1.2vw
}

form h1 span {
    font-weight: 100
}

form .hidden {
    display: none
}

form label {
    font-size: 14px;
    font-family: inter, arial, sans-serif
}

form .radio+label {
    border: 1px solid var(--beige);
    border-radius: 4px;
    padding: 8px;
    color: gray;
    background: #fff
}

form input:checked+label {
    background-color: var(--light-beige)
}

form.submitted .radio:invalid +label,
form.submitted input:invalid,
form.submitted textarea:invalid {
    border-color: red;
}

form input,
form textarea {
    outline: none !important;
    border: 1px solid var(--beige);
    border-radius: 4px;
    padding: 8px;
    font-family: inter, arial, sans-serif
}

form .textarea {
    outline: none !important;
    border: 1px solid var(--beige);
    border-radius: 4px;
    padding: 8px;
    font-family: inter, arial, sans-serif;
    width: 95%
}

form textarea {
    resize: none;
    height: 135px
}

form .part {
    display: flex;
    flex-direction: column;
    gap: 5px
}

form .dual-input {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    width: 100%
}

form .dual-input.short {
    grid-template-columns: 4fr 1fr
}

form .anrede {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 1fr auto;
    gap: 5px
}

form .erreichbarkeit {
    display: grid;
    grid-template-columns: 45% 10% 45%;
    gap: 5px
}

#greenpass-formular .anrede {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 5fr;
    gap: 5px
}

#greenpass-formular .erreichbarkeit {
    grid-template-columns: 100%
}

#meinung-formular,
#kontakt-formular {
    display: flex;
    flex-direction: column
}

#meinung-formular .anrede,
#kontakt-formular .anrede {
    display: grid;
    grid-template-columns: 2fr 2fr 2fr 10fr;
    gap: 5px
}

#meinung-formular .erreichbarkeit,
#kontakt-formular .erreichbarkeit {
    grid-template-columns: 100%
}

#greenpass-formular .textarea {
    border: none;
    position: relative
}

#greenpass-formular textarea {
    border: none;
    width: 97.5%;
    margin: 0 .5vw
}

#greenpass-formular .textarea::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--beige);
    transform: skew(-12deg)
}

form #telefon {
    width: calc(100% - 9px)
}

form button {
    justify-self: center;
    grid-column: span 2;
    width: 60%;
    padding: 16px;
    background-color: var(--light-beige);
    border: 1px solid var(--beige);
    border-radius: 16px;
    font-family: inter, arial, sans-serif;
    font-weight: 700;
    font-size: 20px
}

#greenpass .title+p {
    width: 80%;
    margin: 4vw auto;
    font-size: 1.2vw
}

#greenpass .box1 {
    width: 80%;
    margin: 4vw auto;
    position: relative;
    height: 35vw;
    contain: paint
}

#greenpass .box1>h1 {
    position: absolute;
    top: 0;
    left: 0
}

#greenpass .box1>p {
    position: absolute;
    top: 4vw;
    left: 4vw;
    width: 30vw;
    font-size: 1.2vw;
    line-height: 1.8vw
}

#greenpass .box1 .numbers {
    position: absolute;
    top: 16vw;
    left: 4vw;
    width: 30vw;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    padding: 2vw 2vw 2vw 1vw
}

#greenpass .box1 .numbers::before {
    content: "";
    position: absolute;
    top: 0;
    left: -2vw;
    height: 100%;
    width: 100%;
    background-color: var(--beige);
    transform: skew(-12deg);
    z-index: -1;
    box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, .1)
}

#greenpass .box1 .numbers .number h1 {
    margin: 0
}

#greenpass .box1 .numbers .number h2 {
    margin: 0;
    font-size: .8vw
}

#greenpass .box1 .numbers .number.full {
    grid-column: span 2
}

#greenpass .box1 .img {
    position: absolute;
    top: 0;
    right: -10%;
    height: 100%;
    width: 66%;
    contain: paint;
    transform: skew(-12deg);
    z-index: -2
}

#greenpass .box1 .img::after {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    width: 100%;
    height: 100%;
    transform: skew(12deg);
    background-image: url(/img/shop.webp)
}

.skewed-gallery-box {
    width: 80%;
    margin: 5vw auto;
    display: grid;
    grid-template-columns: 1fr 1fr
}

.skewed-gallery-box .skewed-gallery {
    display: grid;
    grid-template-rows: 20vw 20vw;
    gap: .5vw;
    contain: paint
}

.skewed-gallery-box .skewed-gallery .container {
    display: grid;
    gap: .5vw;
    transform: translateX(-2.2vw)
}

.skewed-gallery-box.alt .skewed-gallery .container {
    transform: translateX(2.2vw)
}

.skewed-gallery-box .skewed-gallery .container.upper {
    grid-template-columns: 18vw 22vw
}

.skewed-gallery-box.alt .skewed-gallery .container.upper {
    transform: translateX(6.6vw);
    grid-template-columns: 18vw 17.7vw
}

.skewed-gallery-box .skewed-gallery .container.lower {
    grid-template-columns: 18vw 17.7vw
}

.skewed-gallery-box.alt .skewed-gallery .container.lower {
    grid-template-columns: 18vw 22vw
}

.skewed-gallery-box.alt .text {
    margin: 0 5vw
}

.skewed-gallery-box .skewed-gallery .img {
    transform: skew(-12deg);
    position: relative;
    contain: paint
}

.skewed-gallery-box .skewed-gallery .img::before {
    content: "";
    position: absolute;
    left: -12%;
    width: 125%;
    height: 100%;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .1), transparent), url(/img/wild.webp);
    background-size: cover;
    background-position: 50%;
    transform: skew(12deg)
}

.skewed-gallery-box .text {
    align-self: center
}

.skewed-gallery-box .text p {
    font-size: 1.2vw
}

.project-slider {
    background-color: var(--grey);
    margin: 5vw 0;
    padding: 10vw 5vw 5vw;
    position: relative
}

.project-slider::-webkit-scrollbar {
    display: none
}

.project-slider>h1 {
    position: absolute;
    top: 1vw;
    left: 5vw;
    color: var(--turquoise)
}

#greenpass .slider {
    margin-bottom: 0
}

#greenpass .projects {
    background-color: var(--grey);
    display: flex;
    flex-direction: column;
    padding-bottom: 0
}

#greenpass .projects>h1 {
    color: var(--turquoise);
    font-size: 4vw;
    margin-top: 0;
    padding-top: 5%;
    margin-left: 5%;
    margin-bottom: 5vw
}

#greenpass .projects .project {
    width: 80%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5vw;
    margin-bottom: 6vw
}

#greenpass .projects .project:last-child {
    margin-bottom: 5vw
}

.project-slider .splide {
    height: 16vw
}

#greenpass .projects .project .left,
.project-slider .project {
    display: grid;
    grid-template-rows: 12vw 2vw;
    gap: .5vw
}

.project-slider .project {
    width: 40vw;
    margin: 0 3vw
}

#greenpass .projects .project .left .upper,
.project-slider .project .upper {
    position: relative
}

#greenpass .projects .project .left .upper .id,
.project-slider .project .upper .id {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    color: var(--beige);
    font-size: 1.2vw
}

#greenpass .projects .project .left .upper .box,
.project-slider .project .upper .box {
    display: flex;
    flex-direction: column;
    gap: 1vw;
    margin-left: 4vw;
    padding: 1vw 2vw;
    position: relative
}

#greenpass .projects .project .left .upper .box::before,
.project-slider .project .upper .box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    border: 1px solid var(--beige);
    transform: skew(-12deg)
}

#greenpass .projects .project .left .upper .box h1,
.project-slider .project .upper .box h1 {
    color: var(--turquoise);
    font-size: 1.2vw;
    margin: 0
}

#greenpass .projects .project .left .upper .box h2,
.project-slider .project .upper .box h2 {
    color: var(--turquoise);
    font-size: 1vw;
    font-weight: 400;
    margin: 0
}

#greenpass .projects .project .left .upper .box .inner-box,
.project-slider .project .upper .box .inner-box {
    position: absolute;
    right: 0;
    top: -15%;
    height: 80%;
    width: 45%;
    transform: skew(-12deg);
    contain: paint
}

#greenpass .projects .project .left .upper .box .inner-box::before,
.project-slider .project .upper .box .inner-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10%;
    height: 100%;
    width: 120%;
    background: url(/img/shop.webp);
    background-size: cover;
    background-position: 50%;
    filter: brightness(.8);
    transform: skew(12deg)
}

#greenpass .projects .project .left .lower,
.project-slider .project .lower {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr 2fr;
    gap: .5vw;
    align-items: center;
    border: 1px solid var(--beige)
}

#greenpass .projects .project .left .lower .block,
.project-slider .project .lower .block {
    border: 1px solid var(--turquoise);
    transform: skew(-12deg);
    height: 1.5vw
}

#greenpass .projects .project._1 .left .lower .block:nth-child(2) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._2 .left .lower .block:nth-child(2),
#greenpass .projects .project._2 .left .lower .block:nth-child(3) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._3 .left .lower .block:nth-child(2),
#greenpass .projects .project._3 .left .lower .block:nth-child(3),
#greenpass .projects .project._3 .left .lower .block:nth-child(4) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._4 .left .lower .block:nth-child(2),
#greenpass .projects .project._4 .left .lower .block:nth-child(3),
#greenpass .projects .project._4 .left .lower .block:nth-child(4),
#greenpass .projects .project._4 .left .lower .block:nth-child(5) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._5 .left .lower .block:nth-child(2),
#greenpass .projects .project._5 .left .lower .block:nth-child(3),
#greenpass .projects .project._5 .left .lower .block:nth-child(4),
#greenpass .projects .project._5 .left .lower .block:nth-child(5),
#greenpass .projects .project._5 .left .lower .block:nth-child(6) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._6 .left .lower .block:nth-child(2),
#greenpass .projects .project._6 .left .lower .block:nth-child(3),
#greenpass .projects .project._6 .left .lower .block:nth-child(4),
#greenpass .projects .project._6 .left .lower .block:nth-child(5),
#greenpass .projects .project._6 .left .lower .block:nth-child(6),
#greenpass .projects .project._6 .left .lower .block:nth-child(7) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._7 .left .lower .block:nth-child(2),
#greenpass .projects .project._7 .left .lower .block:nth-child(3),
#greenpass .projects .project._7 .left .lower .block:nth-child(4),
#greenpass .projects .project._7 .left .lower .block:nth-child(5),
#greenpass .projects .project._7 .left .lower .block:nth-child(6),
#greenpass .projects .project._7 .left .lower .block:nth-child(7),
#greenpass .projects .project._7 .left .lower .block:nth-child(8) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._8 .left .lower .block:nth-child(2),
#greenpass .projects .project._8 .left .lower .block:nth-child(3),
#greenpass .projects .project._8 .left .lower .block:nth-child(4),
#greenpass .projects .project._8 .left .lower .block:nth-child(5),
#greenpass .projects .project._8 .left .lower .block:nth-child(6),
#greenpass .projects .project._8 .left .lower .block:nth-child(7),
#greenpass .projects .project._8 .left .lower .block:nth-child(8),
#greenpass .projects .project._8 .left .lower .block:nth-child(9) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._9 .left .lower .block:nth-child(2),
#greenpass .projects .project._9 .left .lower .block:nth-child(3),
#greenpass .projects .project._9 .left .lower .block:nth-child(4),
#greenpass .projects .project._9 .left .lower .block:nth-child(5),
#greenpass .projects .project._9 .left .lower .block:nth-child(6),
#greenpass .projects .project._9 .left .lower .block:nth-child(7),
#greenpass .projects .project._9 .left .lower .block:nth-child(8),
#greenpass .projects .project._9 .left .lower .block:nth-child(9),
#greenpass .projects .project._9 .left .lower .block:nth-child(10) {
    background-color: var(--turquoise)
}

#greenpass .projects .project._10 .left .lower .block:nth-child(2),
#greenpass .projects .project._10 .left .lower .block:nth-child(3),
#greenpass .projects .project._10 .left .lower .block:nth-child(4),
#greenpass .projects .project._10 .left .lower .block:nth-child(5),
#greenpass .projects .project._10 .left .lower .block:nth-child(6),
#greenpass .projects .project._10 .left .lower .block:nth-child(7),
#greenpass .projects .project._10 .left .lower .block:nth-child(8),
#greenpass .projects .project._10 .left .lower .block:nth-child(9),
#greenpass .projects .project._10 .left .lower .block:nth-child(10),
#greenpass .projects .project._10 .left .lower .block:nth-child(11) {
    background-color: var(--turquoise)
}

#greenpass .projects .left .lower .percent {
    color: var(--turquoise)
}

#greenpass .project .right {
    padding: 0 5vw;
    display: flex;
    flex-direction: column;
    gap: .5vw
}

#greenpass .project .right .button {
    padding: .5vw;
    border-radius: .5vw;
    font-family: inter, arial, sans-serif;
    font-size: 1vw;
    text-align: center;
    background-color: var(--beige);
    color: var(--grey)
}

#greenpass .project .right .button.transparent {
    background-color: initial;
    border: 2px solid var(--beige);
    color: var(--beige)
}

#greenpass .project .right .button.white {
    background-color: var(--turquoise)
}

#greenpass .project .right p {
    color: var(--beige);
    border: 1px solid var(--beige);
    padding: .5vw;
    border-radius: .5vw
}

#greenpass .slider {
    background-color: var(--turquoise);
    padding-bottom: 5vw
}

#greenpass .slider::after {
    background: linear-gradient(90deg, var(--turquoise) 0, transparent 80px, transparent calc(100vw - 160px), var(--turquoise) calc(100vw - 70px))
}

#greenpass .slider>h1 {
    position: absolute;
    top: .4vw;
    left: 10%;
    font-size: 3vw;
    color: var(--beige)
}

#greenpass-detail .slider>h1 {
    position: absolute;
    top: .4vw;
    left: 10%;
    font-size: 3vw;
    color: var(--beige)
}

#greenpass+#footer {
    margin-top: 0
}


@media screen and (orientation: portrait) and (max-width: 600px) {
    .multibox.two.tall {
        flex-direction: column;
    }
    .multibox.two .multibox-entry {
        width: 100%;
    }

    .multibox.two a {
        display: inline-block;
        width: 100%;
    }

    .multibox.two .multibox-entry .img {
        height: 50vw;
    }

    .multibox.two .multibox-entry .img::before {
        left: -5.5vw
    }
}

@media screen and (max-width: 1200px) {
    .data-container .data.weather .entry-container .entry svg {
        width: 2.5vw;
        height: 2.5vw;
    }

    .data-container .data.weather .entry-container .entry * {
        margin: 0;
    }
}

#cookie {
    position: fixed;
    bottom: 0;
    z-index: 2;
    width: 90%;
    left: 5%;
    right: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#cookie::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    transform: skew(-12deg);
    background-color: white;
    z-index: -1;
    box-shadow: 2px 2px 12px 0px rgba(0, 0, 0, 0.2);
}

#cookie h1 {
    margin-top: 2vw;
}

#cookie .link {
    background: var(--beige);
    padding: 1vw 3vw;
    width: auto;
    height: auto;
    margin: 1vw;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
    #cookie {
        width: calc(90% - 20vw);
        padding: 10vw;
    }

    #cookie .link {
        padding: 5vw 15vw;
        z-index: 2 !important;
    }

    #cookie h1 {
        font-size: 4vw !important;
    }
}