@font-face { font-family:"Weiermair Sans"; src:url("assets/fonts/weiermair-sans.ttf") format("truetype"); font-style:normal; font-weight:300 500; font-display:swap; }
@font-face { font-family:"Weiermair Sans"; src:url("assets/fonts/weiermair-sans-bold.ttf") format("truetype"); font-style:normal; font-weight:600 800; font-display:swap; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #111; color: #fff; font-family:"Weiermair Sans","Helvetica Neue",Helvetica,Arial,sans-serif; }
.screen { position: absolute; top: 50%; left: 50%; width: 1920px; height: 1080px; overflow: hidden; background: #b61117; background: linear-gradient(135deg,#c8171d 0%,#b61117 56%,#8f0c11 100%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-origin: center center; transform-origin: center center; }
.photo-panel { position: absolute; z-index: 1; top: 5%; right: 3.45%; width: 69.2%; height: 90%; overflow: hidden; border-radius: 27.84px; background: #c6151b; }
.photo-slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-transform: scale(1.02); transform: scale(1.02); -webkit-animation: photo-cycle 24s ease-in-out infinite; animation: photo-cycle 24s ease-in-out infinite; }
.slide-one { background-image: url("assets/gardasee-01.jpg"); -webkit-animation-delay: -1.2s; animation-delay: -1.2s; }
.slide-two { background-image: url("assets/gardasee-02.jpg"); -webkit-animation-delay: 6.8s; animation-delay: 6.8s; }
.slide-three { background-image: url("assets/gardasee-03.jpg"); -webkit-animation-delay: 14.8s; animation-delay: 14.8s; }
.photo-shade { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(90deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 24%), linear-gradient(0deg, rgba(0,0,0,.3) 0%, rgba(0,0,0,0) 18%); }
.copy-panel { position: absolute; z-index: 4; top: 0; left: 0; width: 58%; height: 100%; padding: 3.8% 0 4.8% 2.7%; }
.category { display: inline-block; padding: .34em .72em .3em; border: .085em solid #fff; border-radius: 999px; font-size: 31.68px; line-height: 1; font-weight: 400; letter-spacing: 0; }
.headline { margin-top: 118.08px; }
.headline h1 { width: 910px; max-width: 910px; margin: 0; white-space: normal; font-size: 131.52px; line-height: .94; font-weight: 700; letter-spacing: -.045em; }
.headline p { width: 916px; max-width: 916px; margin: 20.16px 0 0; white-space: normal; font-size: 89.28px; line-height: .94; font-weight: 300; letter-spacing: -.04em; }
.headline p.subtitle-single { font-size: 72px; }
.headline p.subtitle-double { line-height: .94; }
.playlist-photo { position: absolute; top: -4%; right: -4%; bottom: -4%; left: -4%; background-position: center center; background-repeat: no-repeat; background-size: cover; -webkit-transform: scale(1.01); transform: scale(1.01); }
.photo-layer { opacity:0; -webkit-transition:opacity .85s ease; transition:opacity .85s ease; }
.photo-layer.visible { opacity:1; }
.no-photo-mark { position:absolute; z-index:1; top:0; right:0; bottom:0; left:0; display:none; place-items:center; padding:18%; background:linear-gradient(135deg,#b81319,#7f1014); }
.no-photo-mark img { width:62%; height:auto; opacity:.82; }
.photo-panel.no-photo .no-photo-mark { display:grid; }
.photo-panel.hidden-panel { display:none; }
.playlist-photo.ken-burns-a { -webkit-animation: ken-burns-a 6.4s linear forwards; animation: ken-burns-a 6.4s linear forwards; }
.playlist-photo.ken-burns-b { -webkit-animation: ken-burns-b 6.4s linear forwards; animation: ken-burns-b 6.4s linear forwards; }
.playlist-enter { opacity: 0; -webkit-transform: translateX(-86.4px); transform: translateX(-86.4px); -webkit-animation: playlist-arrive 1.08s cubic-bezier(.12,.78,.18,1) forwards; animation: playlist-arrive 1.08s cubic-bezier(.12,.78,.18,1) forwards; }
.enter-delay-1 { -webkit-animation-delay: .08s; animation-delay: .08s; }
.enter-delay-2 { -webkit-animation-delay: .22s; animation-delay: .22s; }
.enter-delay-3 { -webkit-animation-delay: .36s; animation-delay: .36s; }
.enter-delay-4 { -webkit-animation-delay: .50s; animation-delay: .50s; }
.playlist-copy.copy-waiting .playlist-enter { -webkit-animation-play-state: paused; animation-play-state: paused; }
.playlist-copy.copy-leaving { -webkit-animation: copy-leave .42s ease-in forwards; animation: copy-leave .42s ease-in forwards; }
.playlist-copy.copy-hidden { visibility: hidden; }
.transition-curtain { position: absolute; z-index: 50; top: 0; right: 0; bottom: 0; left: 0; visibility: hidden; opacity: 0; background: #b61117; background: linear-gradient(135deg,#c8171d 0%,#b61117 56%,#8f0c11 100%); }
.transition-curtain.curtain-in { visibility: visible; -webkit-animation: curtain-in .68s ease-in-out forwards; animation: curtain-in .68s ease-in-out forwards; }
.transition-curtain.curtain-out { visibility: visible; -webkit-animation: curtain-out .68s ease-in-out forwards; animation: curtain-out .68s ease-in-out forwards; }
.travel-date { width: 473.28px; margin-top: 87.36px; }
.travel-date span, .price span { display: block; font-size: 32.64px; line-height: 1.08; font-weight: 300; }
.travel-date strong, .price strong { display: block; margin-top: .35em; white-space: nowrap; font-size: 38.78px; line-height: 1.04; font-weight: 700; }
.travel-date strong em { font-style: normal; }
.travel-date i, .price i { display: inline-block; width: 24px; height: 10.56px; margin: 0 10.56px .14em -36.48px; background: #fff; -webkit-transform: skewX(22deg); transform: skewX(22deg); }
.price { width: 473.28px; margin-top: 45.12px; }
.price b { display: block; margin-top: .3em; white-space: nowrap; font-size: 32.64px; line-height: 1.08; font-weight: 700; }
.price strong { margin-top: .28em; font-size: 46.08px; }
.price strong em { font-style: normal; }
.weiermair-logo { position: absolute; z-index: 5; left: 49.2%; bottom: 1.45%; width: 26%; height: auto; -webkit-filter: drop-shadow(0 2px 5px rgba(0,0,0,.32)); filter: drop-shadow(0 2px 5px rgba(0,0,0,.32)); }
.early-bird-badge { position: absolute; z-index: 6; top: 8%; right: 5.5%; width: 94px; height: 94px; padding: 7px; opacity: 0; border-radius: 50%; background: rgba(255,255,255,.93); box-shadow: 0 3px 10px rgba(0,0,0,.24); -webkit-transform: scale(.86); transform: scale(.86); -webkit-transition: opacity .4s ease, -webkit-transform .5s ease; transition: opacity .4s ease, transform .5s ease; }
.early-bird-badge.visible { opacity: .92; -webkit-transform: scale(1); transform: scale(1); }
.subject-panel { position: absolute; z-index: 3; top: 5%; right: 3.45%; bottom: 5%; left: 2.7%; display: none; overflow: hidden; border-radius: 28px; background: #991117; }
.subject-panel.visible { display: block; }
.subject-image, .subject-overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.subject-image { background-position: center; background-repeat: no-repeat; background-size: cover; -webkit-transform: scale(1.01); transform: scale(1.01); }
.subject-overlay { background: linear-gradient(90deg, rgba(105,0,5,.88) 0%, rgba(105,0,5,.54) 42%, rgba(105,0,5,.06) 72%); }
.subject-copy { position: absolute; left: 5.5%; top: 30%; width: 62%; color: #fff; }
.subject-copy h1 { margin: 0; font-size: 118px; line-height: .95; letter-spacing: -.045em; }
.subject-copy p { margin: 28px 0 0; font-size: 58px; line-height: 1.05; font-weight: 300; }
.subject-panel.subject-slide .subject-copy { -webkit-animation: subject-slide 1.15s cubic-bezier(.12,.78,.18,1) both; animation: subject-slide 1.15s cubic-bezier(.12,.78,.18,1) both; }
.subject-panel.subject-fade .subject-copy { -webkit-animation: subject-fade 1.2s ease both; animation: subject-fade 1.2s ease both; }
.subject-panel.subject-zoom .subject-image { -webkit-animation: subject-zoom 11s linear both; animation: subject-zoom 11s linear both; }
.subject-panel.subject-waiting .subject-copy, .subject-panel.subject-waiting .subject-image { -webkit-animation-play-state: paused; animation-play-state: paused; }
.subject-panel.subject-leaving { -webkit-animation: copy-leave .42s ease-in forwards; animation: copy-leave .42s ease-in forwards; }
.static-subject-active .subject-panel { top:0; right:0; bottom:0; left:0; border-radius:0; background:#c6151b; }
.static-subject-active .subject-image { background-size:contain; -webkit-transform:none; transform:none; }
.static-subject-active .subject-overlay,.static-subject-active .subject-copy,.static-subject-active .weiermair-logo { display:none; }
.neutral-panel { position:absolute; z-index:3; top:0; right:0; bottom:0; left:0; display:none; background:#b61117; background:linear-gradient(135deg,#c8171d 0%,#b61117 56%,#8f0c11 100%); }
.neutral-panel.visible { display:block; }
.neutral-active .weiermair-logo { left:50%; bottom:42%; width:38%; -webkit-transform:translateX(-50%); transform:translateX(-50%); }
.neutral-active .copy-panel,.neutral-active .early-bird-badge { display:none; }
.bus-layout:not(.bus-gallery) .photo-panel { top:7%; right:3.5%; width:45%; height:86%; }
.bus-layout:not(.bus-gallery) .copy-panel { width:57%; padding:4.5% 0 4% 3.5%; }
.bus-layout:not(.bus-gallery) .headline { margin-top: 76px; }
.bus-layout:not(.bus-gallery) .headline h1 { width: 850px; max-width:850px; font-size: 130px; line-height: .92; }
.bus-layout:not(.bus-gallery) .headline p { width: 810px; max-width:810px; margin-top:16px; font-size: 73px; line-height: .95; }
.bus-layout:not(.bus-gallery) .travel-date { margin-top: 62px; }
.bus-layout:not(.bus-gallery) .travel-date span, .bus-layout:not(.bus-gallery) .price span, .bus-layout:not(.bus-gallery) .price b { font-size: 38px; }
.bus-layout:not(.bus-gallery) .travel-date strong { font-size: 47px; }
.bus-layout:not(.bus-gallery) .price { margin-top:34px; }
.bus-layout:not(.bus-gallery) .price strong { font-size: 59px; }
.bus-layout:not(.bus-gallery) .category { font-size: 36px; font-weight: 500; }
.bus-gallery .photo-panel { top:7%; right:2.7%; width:94.6%; height:86%; border-radius:34px; }
.bus-gallery .photo-shade { background:linear-gradient(180deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.30) 14%,rgba(0,0,0,0) 35%); }
.bus-gallery .copy-panel { top:0; bottom:auto; width:100%; height:240px; padding:0; }
.bus-gallery .category, .bus-gallery .headline p, .bus-gallery .travel-date, .bus-gallery .price { display:none; }
.bus-gallery .headline { position:absolute; top:41px; left:5%; width:90%; margin:0; opacity:0; text-align:center; -webkit-animation:bus-title-drop 1.15s cubic-bezier(.12,.82,.18,1) .05s forwards; animation:bus-title-drop 1.15s cubic-bezier(.12,.82,.18,1) .05s forwards; }
.bus-gallery .headline h1 { width:100%; max-width:none; overflow:hidden; margin:0; white-space:nowrap; text-overflow:ellipsis; font-size:88px; line-height:1; text-shadow:0 4px 12px rgba(0,0,0,.48); }
.bus-gallery .weiermair-logo { left:50%; bottom:13px; width:24%; -webkit-transform:translateX(-50%); transform:translateX(-50%); }
.bus-gallery .playlist-photo.ken-burns-a { -webkit-animation-name:bus-ken-burns-a; animation-name:bus-ken-burns-a; }
.bus-gallery .playlist-photo.ken-burns-b { -webkit-animation-name:bus-ken-burns-b; animation-name:bus-ken-burns-b; }
.enter { opacity: 0; -webkit-transform: translateX(-86.4px); transform: translateX(-86.4px); -webkit-animation: arrive 1.18s cubic-bezier(.12,.78,.18,1) forwards; animation: arrive 1.18s cubic-bezier(.12,.78,.18,1) forwards; }
.enter-1 { -webkit-animation-delay: .14s; animation-delay: .14s; }
.enter-2 { -webkit-animation-delay: .32s; animation-delay: .32s; }
.enter-3 { -webkit-animation-delay: .50s; animation-delay: .50s; }
.enter-4 { -webkit-animation-delay: .68s; animation-delay: .68s; }
.enter-5 { -webkit-animation-delay: .86s; animation-delay: .86s; }
@-webkit-keyframes arrive { 0% { opacity: 0; -webkit-transform: translateX(-86.4px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes arrive { 0% { opacity: 0; transform: translateX(-86.4px); } 100% { opacity: 1; transform: translateX(0); } }
@-webkit-keyframes playlist-arrive { 0% { opacity: 0; -webkit-transform: translateX(-86.4px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes playlist-arrive { 0% { opacity: 0; transform: translateX(-86.4px); } 100% { opacity: 1; transform: translateX(0); } }
@-webkit-keyframes copy-leave { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes copy-leave { 0% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes subject-slide { 0% { opacity: 0; -webkit-transform: translateX(-110px); } 100% { opacity: 1; -webkit-transform: translateX(0); } }
@keyframes subject-slide { 0% { opacity: 0; transform: translateX(-110px); } 100% { opacity: 1; transform: translateX(0); } }
@-webkit-keyframes subject-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes subject-fade { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes subject-zoom { 0% { -webkit-transform: scale(1.01); } 100% { -webkit-transform: scale(1.09); } }
@keyframes subject-zoom { 0% { transform: scale(1.01); } 100% { transform: scale(1.09); } }
@-webkit-keyframes curtain-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes curtain-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes curtain-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes curtain-out { 0% { opacity: 1; } 100% { opacity: 0; } }
@-webkit-keyframes ken-burns-a { 0% { -webkit-transform: scale(1.01) translate3d(0,0,0); } 100% { -webkit-transform: scale(1.075) translate3d(-.6%, -.35%, 0); } }
@keyframes ken-burns-a { 0% { transform: scale(1.01) translate3d(0,0,0); } 100% { transform: scale(1.075) translate3d(-.6%, -.35%, 0); } }
@-webkit-keyframes ken-burns-b { 0% { -webkit-transform: scale(1.01) translate3d(-.4%, -.2%, 0); } 100% { -webkit-transform: scale(1.075) translate3d(.45%, .3%, 0); } }
@keyframes ken-burns-b { 0% { transform: scale(1.01) translate3d(-.4%, -.2%, 0); } 100% { transform: scale(1.075) translate3d(.45%, .3%, 0); } }
@-webkit-keyframes bus-title-drop { 0% { opacity:0; -webkit-transform:translateY(-130px); } 38% { opacity:1; } 100% { opacity:1; -webkit-transform:translateY(0); } }
@keyframes bus-title-drop { 0% { opacity:0; transform:translateY(-130px); } 38% { opacity:1; } 100% { opacity:1; transform:translateY(0); } }
@-webkit-keyframes bus-ken-burns-a { 0% { -webkit-transform:scale(1.01) translate3d(0,0,0); } 100% { -webkit-transform:scale(1.038) translate3d(-.25%,-.18%,0); } }
@keyframes bus-ken-burns-a { 0% { transform:scale(1.01) translate3d(0,0,0); } 100% { transform:scale(1.038) translate3d(-.25%,-.18%,0); } }
@-webkit-keyframes bus-ken-burns-b { 0% { -webkit-transform:scale(1.01) translate3d(-.18%,-.1%,0); } 100% { -webkit-transform:scale(1.038) translate3d(.2%,.14%,0); } }
@keyframes bus-ken-burns-b { 0% { transform:scale(1.01) translate3d(-.18%,-.1%,0); } 100% { transform:scale(1.038) translate3d(.2%,.14%,0); } }
@-webkit-keyframes photo-cycle { 0% { opacity: 0; -webkit-transform: scale(1.02); } 5% { opacity: 1; } 33.333% { opacity: 1; -webkit-transform: scale(1.075); } 38.333% { opacity: 0; -webkit-transform: scale(1.085); } 100% { opacity: 0; -webkit-transform: scale(1.02); } }
@keyframes photo-cycle { 0% { opacity: 0; transform: scale(1.02); } 5% { opacity: 1; } 33.333% { opacity: 1; transform: scale(1.075); } 38.333% { opacity: 0; transform: scale(1.085); } 100% { opacity: 0; transform: scale(1.02); } }
@media (prefers-reduced-motion: reduce) { .enter { opacity: 1; -webkit-transform: none; transform: none; -webkit-animation: none; animation: none; } .photo-slide { -webkit-animation: none; animation: none; } .slide-one { opacity: 1; } }