/* Editbox-Classes _______________________________________________________________ */ .t4 { } .t6 { } .default-link { } /* Basic ____________________________________________________ */ body, html { height: 100%; } body, table, input, select, textarea { color: #000000; font-family: Arial, Helvetica, sans-serif; font-size: 1em; line-height: 1.375em; } body { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } table { border: 0px; border-collapse: collapse; } table td, form { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } a, .link { cursor: pointer; text-decoration: none; transition: opacity 500ms; } a:hover, .no-mobile-device .link:hover { opacity: 0.7; } img { border: 0px; vertical-align: middle; } video { vertical-align: middle; } p { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } /* __________________________________________________________________ End */ /* Default _______________________________________________________________ */ @media all { body, table, input, select, textarea { color: var(--bgweb-text-color, #000000); font-family: var(--default-font-family, Arial, Helvetica, sans-serif); font-size: var(--default-font-size, 1em); line-height: var(--default-line-height, 1.45em); font-weight: var(--default-font-weight, normal); font-style: var(--default-font-style, normal); } address { font-style: normal; } hr { display: none; } h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; text-decoration: none; font-size: var(--default-font-size, 1em); line-height: var(--default-line-height, 1.45em); font-weight: var(--default-font-weight, normal); } .t1large, .t1large a { font-size: var(--t1large-font-size); line-height: var(--t1large-line-height); font-family: var(--t1large-font-family); font-weight: var(--t1large-font-weight, normal); font-style: var(--t1large-font-style, normal); letter-spacing: var(--t1large-letter-spacing, 0px); text-transform: var(--t1large-text-transform, none); } .t1, .t1 a { font-size: var(--t1-font-size); line-height: var(--t1-line-height); font-family: var(--t1-font-family); font-weight: var(--t1-font-weight, normal); font-style: var(--t1-font-style, normal); letter-spacing: var(--t1-letter-spacing, 0px); text-transform: var(--t1-text-transform, none); } .t2, .t2 a { font-size: var(--t2-font-size); line-height: var(--t2-line-height); font-family: var(--t2-font-family); font-weight: var(--t2-font-weight, normal); font-style: var(--t2-font-style, normal); letter-spacing: var(--t2-letter-spacing, 0px); text-transform: var(--t2-text-transform, none); } .t3, .t3 a { font-size: var(--t3-font-size); line-height: var(--t3-line-height); font-family: var(--t3-font-family); font-weight: var(--t3-font-weight, normal); font-style: var(--t3-font-style, normal); letter-spacing: var(--t3-letter-spacing, 0px); text-transform: var(--t3-text-transform, none); } .t4, .t4 a { font-size: var(--t4-font-size); line-height: var(--t4-line-height); font-family: var(--t4-font-family); font-weight: var(--t4-font-weight, normal); font-style: var(--t4-font-style, normal); letter-spacing: var(--t4-letter-spacing, 0px); text-transform: var(--t4-text-transform, none); } .t5, .t5 a { font-size: var(--t5-font-size); line-height: var(--t5-line-height); font-family: var(--t5-font-family); font-weight: var(--t5-font-weight, normal); font-style: var(--t5-font-style, normal); letter-spacing: var(--t5-letter-spacing, 0px); text-transform: var(--t5-text-transform, none); } .t6, .t6 a { font-size: var(--t6-font-size); line-height: var(--t6-line-height); font-family: var(--t6-font-family); font-weight: var(--t6-font-weight, normal); font-style: var(--t6-font-style, normal); letter-spacing: var(--t6-letter-spacing, 0px); text-transform: var(--t6-text-transform, none); } .medium { font-size: var(--medium-font-size); line-height: var(--medium-line-height); } .small { font-size: var(--small-font-size); line-height: var(--small-line-height); } a, .link { font-size: inherit; line-height: inherit; font-style: inherit; color: inherit; text-transform: inherit; font-weight: inherit; } a.text-link, .text-link a, .link.text-link, .text-link .link { color: var(--default-link-text-color); font-weight: var(--default-link-font-weight); transition: color 500ms; } a.default-link, .default-link a, .link.default-link, .default-link .link { font-size: var(--default-link-font-size); line-height: var(--default-link-line-height); font-family: var(--default-link-font-family); font-weight: var(--default-link-font-weight, normal); font-style: var(--default-link-font-style, normal); letter-spacing: var(--default-link-letter-spacing, 0px); text-transform: var(--default-link-text-transform, none); color: var(--default-link-text-color); transition: color 500ms; } .no-mobile-device a.text-link:hover, .no-mobile-device .text-link a:hover, .no-mobile-device .link.text-link:hover, .no-mobile-device .text-link .link:hover, .no-mobile-device a.default-link:hover, .no-mobile-device .default-link a:hover, .no-mobile-device .link.default-link:hover, .no-mobile-device .default-link .link:hover { color: var(--default-link-hover-text-color); opacity: 1; } a.button1 { display: inline-block; background-color: var(--bgweb-button1-bg-color); color: var(--bgweb-button1-text-color); padding: 19px 40px; border-radius: var(--button-border-radius); border: var(--button-outline-width) solid var(--bgweb-button1-border-color); font-size: var(--default-link-font-size); line-height: 1em; font-family: var(--default-link-font-family); font-weight: var(--default-link-font-weight, normal); font-style: var(--default-link-font-style, normal); text-indent: var(--default-link-letter-spacing); letter-spacing: var(--default-link-letter-spacing); text-transform: var(--default-link-text-transform); transition: .5s ease; } a.button1.buttonmini { padding: 17px 22px; } .no-mobile-device a.button1:hover { background-color: var(--bgweb-button1-hover-bg-color); color: var(--bgweb-button1-hover-text-color); opacity: 1; } a.button1 svg.icon { fill: var(--bgweb-button1-text-color); color: var(--bgweb-button1-text-color); } a.button2 { display: inline-block; background-color: var(--bgweb-button2-bg-color); color: var(--bgweb-button2-text-color); padding: 19px 40px; border-radius: var(--button-border-radius); border: var(--button-outline-width) solid var(--bgweb-button2-border-color); font-size: var(--default-link-font-size); line-height: 1em; font-family: var(--default-link-font-family); font-weight: var(--default-link-font-weight, normal); font-style: var(--default-link-font-style, normal); text-indent: var(--default-link-letter-spacing); letter-spacing: var(--default-link-letter-spacing); text-transform: var(--default-link-text-transform); transition: .5s ease; } .bggallery a.button2 { background-color: var(--bggallery-button2-bg-color); border: var(--button-outline-width) solid var(--bggallery-button2-border-color); } .no-mobile-device a.button2:hover { background-color: var(--bgweb-button2-hover-bg-color); color: var(--bgweb-button2-hover-text-color); opacity: 1; } .no-mobile-device .bggallery a.button2:hover { background-color: var(--bggallery-button2-hover-bg-color); } a.button2 svg.icon { fill: var(--bgweb-button2-text-color); color: var(--bgweb-button2-text-color); } a.button3 { display: inline-block; background-color: var(--bgweb-button3-bg-color); color: var(--bgweb-button3-text-color); padding: 19px 40px; border-radius: var(--button-border-radius); border: var(--button-outline-width) solid var(--bgweb-button3-border-color); font-size: var(--default-link-font-size); line-height: 1em; font-family: var(--default-link-font-family); font-weight: var(--default-link-font-weight, normal); font-style: var(--default-link-font-style, normal); text-indent: var(--default-link-letter-spacing); letter-spacing: var(--default-link-letter-spacing); text-transform: var(--default-link-text-transform); transition: .5s ease; } .no-mobile-device a.button3:hover { background-color: var(--bgweb-button3-hover-bg-color); color: var(--bgweb-button3-hover-text-color); opacity: 1; } a.button3 svg.icon { fill: var(--bgweb-button3-text-color); color: var(--bgweb-button3-text-color); } .bgweb { background-color: var(--bgweb-bg-color, #FFFFFF); color: var(--bgweb-text-color, #000000); } .bgweb .t1large, .bgweb .t1, .bgweb .t3, .bgweb .t4, .bgweb .t5 { color: #404041; } .bgweb2 { background-color: var(--bgweb2-bg-color, #FFFFFF); color: var(--bgweb2-text-color, #000000); } .bgweb2 .t1large, .bgweb2 .t1, .bgweb2 .t3, .bgweb2 .t4, .bgweb2 .t5 { color: #404041; } .bgweb3 { position: relative; } .bgweb3 > div { position: relative; z-index: 2; } .bgweb3 > .bg2 { background-color: var(--bgweb2-bg-color, #FFFFFF); color: var(--bgweb2-text-color, #000000); position: absolute; top: 0px; left: 0px; width: 100%; height: 50%; z-index: 1; } .bgweb3 > .bg3 { background-color: var(--bgmobilemenu-bg-color); color: var(--bgmobilemenu-text-color); fill: var(--bgmobilemenu-text-color); background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 232px 233px; position: absolute; top: 0px; left: 0px; width: 100%; height: 660px; z-index: 1; } .bg-radial-gradient { background: transparent; background-image: url('/images/design/bgs/bggradient.png'); background-repeat: no-repeat; background-size: 100% 100%; color: #FFFFFF; background-position: center center; } .bggallery { background-color: transparent; color: #FFFFFF; } .bggallery .t1large, .bggallery .t1, .bggallery .t3, .bggallery .t4, .bggallery .t5, .bggallery .link.default-link { color: #FFFFFF; } .bggallery .link.default-link { transition: opacity 500ms; } .bggallery svg { color: #FFFFFF; fill: #FFFFFF; } .no-mobile-device .bggallery .link.default-link:hover { color: #FFFFFF; opacity: .7; } .bgusp { background-color: var(--bgmobilemenu-bg-color); color: var(--bgmobilemenu-text-color); fill: var(--bgmobilemenu-text-color); background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 232px 233px; } .bgusp .t1large, .bgusp .t1, .bgusp .t3, .bgusp .t4, .bgusp .t5, .bgusp .t6, .bgusp a.text-link, .bgusp .text-link a, .bgusp .link.text-link, .bgusp .text-link .link, .bgusp a.default-link, .bgusp .default-link a, .bgusp .link.default-link, .bgusp .default-link .link { color: #FFFFFF; transition: opacity 500ms; } .no-mobile-device .bgusp a.text-link:hover, .no-mobile-device .bgusp .text-link a:hover, .no-mobile-device .bgusp .link.text-link:hover, .no-mobile-device .bgusp .text-link .link:hover, .no-mobile-device .bgusp a.default-link:hover, .no-mobile-device .bgusp .default-link a:hover, .no-mobile-device .bgusp .link.default-link:hover, .no-mobile-device .bgusp .default-link .link:hover { color: #FFFFFF; opacity: 0.7; } .bgmenu { background-color: var(--bgmenu-bg-color); color: var(--bgmenu-text-color); } .bgmobilemenu { background-color: var(--bgmobilemenu-bg-color); color: var(--bgmobilemenu-text-color); fill: var(--bgmobilemenu-text-color); background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 232px 233px; } .bgfooter { background-color: var(--bgmobilemenu-bg-color); color: var(--bgmobilemenu-text-color); fill: var(--bgmobilemenu-text-color); background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 232px 233px; } .bgfooter .t1large, .bgfooter .t1, .bgfooter .t3, .bgfooter .t4, .bgfooter .t5, .bgfooter .t6, .bgfooter a.default-link { color: #FFFFFF; transition: .5s ease; } .no-mobile-device .bgfooter a.default-link:hover { color: #FFFFFF; opacity: .7; } ul { padding-inline-start: 18px; margin-block-start: 0px; margin-block-end: 0px; } ul li { margin-top: 10px; } ul li:after, ul li:before, ul li svg { display: none; } .pointsv1 { display: flex; align-items: center; justify-content: flex-start; margin-bottom: 15px; } .pointsv1 div span { display: block; width: 12px; height: 12px; background-color: transparent; border: 1px solid #FFFFFF; transition: background-color 500ms; border-radius: 6px; box-sizing: border-box; cursor: pointer; } .pointsv1 div.active span { background-color: #FFFFFF; } .pointsv1 div + div { margin-left: 10px; } .pointsv2 { display: flex; align-items: center; justify-content: center; margin-top: 45px; } .pointsv2 div { margin: 0px 5px; } .pointsv2 div span { display: block; width: 12px; height: 12px; background-color: transparent; border: 1px solid var(--bgweb-text-color); transition: background-color 500ms; border-radius: 6px; box-sizing: border-box; cursor: pointer; } .pointsv2 div.active span { background-color: var(--bgweb-text-color); } .bgcookies { background-color: var(--bgweb2-bg-color); color: var(--bgweb2-text-color); } .bgcookiesicon { background-color: #c1cc00; color: #FFFFFF; } } @media (max-width: 1700px) { body, table, input, select, textarea, h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-size: var(--default-mobile-font-size, 1em); line-height: var(--default-mobile-line-height, 1.45em); } .t1large, .t1large a { font-size: var(--t1large-mobile-font-size); line-height: var(--t1large-mobile-line-height); } .t1, .t1 a { font-size: var(--t1-mobile-font-size); line-height: var(--t1-mobile-line-height); } .t2, .t2 a { font-size: var(--t2-mobile-font-size); line-height: var(--t2-mobile-line-height); } .t3, .t3 a { font-size: var(--t3-mobile-font-size); line-height: var(--t3-mobile-line-height); } .t4, .t4 a { font-size: var(--t4-mobile-font-size); line-height: var(--t4-mobile-line-height); } .t5, .t5 a { font-size: var(--t5-mobile-font-size); line-height: var(--t5-mobile-line-height); } .t6, .t6 a { font-size: var(--t6-mobile-font-size); line-height: var(--t6-mobile-line-height); } .medium { font-size: var(--medium-mobile-font-size); line-height: var(--medium-mobile-line-height); } .small { font-size: var(--small-mobile-font-size); line-height: var(--small-mobile-line-height); } a.default-link, .default-link a, .link.default-link, .default-link .link { font-size: var(--default-link-mobile-font-size); line-height: var(--default-link-mobile-line-height); } a.button1 { padding: calc(13px + (19 - 13) * ((100vw - 414px) / (1700 - 414)))calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); font-size: var(--default-link-mobile-font-size); } a.button1.buttonmini { padding: calc(7px + (17 - 7) * ((100vw - 414px) / (1700 - 414)))calc(12px + (22 - 12) * ((100vw - 414px) / (1700 - 414))); } a.button2 { padding: calc(13px + (19 - 13) * ((100vw - 414px) / (1700 - 414)))calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); font-size: var(--default-link-mobile-font-size); } a.button3 { padding: calc(13px + (19 - 13) * ((100vw - 414px) / (1700 - 414)))calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); font-size: var(--default-link-mobile-font-size); } .bgweb3 > .bg3 { height: calc(250px + (660 - 250) * ((100vw - 414px) / (1700 - 414))); } .pointsv1 div span { width: calc(8px + (12 - 8) * ((100vw - 414px) / (1700 - 414))); height: calc(8px + (12 - 8) * ((100vw - 414px) / (1700 - 414))); border-radius: calc(4px + (6 - 4) * ((100vw - 414px) / (1700 - 414))); } .pointsv1 div + div { margin-left: calc(8px + (10 - 8) * ((100vw - 414px) / (1700 - 414)));} .pointsv2 { margin-top: calc(25px + (45 - 25) * ((100vw - 414px) / (1700 - 414))); } .pointsv2 div { margin: 0px calc(4px + (5 - 4) * ((100vw - 414px) / (1700 - 414))); } .pointsv2 div span { width: calc(8px + (12 - 8) * ((100vw - 414px) / (1700 - 414))); height: calc(8px + (12 - 8) * ((100vw - 414px) / (1700 - 414))); border-radius: calc(4px + (6 - 4) * ((100vw - 414px) / (1700 - 414))); } } /* Formelements _______________________________________________________ */ @media all { form { margin: 0px 0px 0px 0px; } form div.row { clear: both; margin: 0px; } form label.label { width: 47.368421%; float: left; display: inline; margin: 8px 1.315789% 0px 0px; padding: 0px 0px 0px 0px; } form label.ort { display: none; } form label.pflichtfeld { font-weight: bold; } form textarea:focus, form input:focus { border: 0px; outline: 0px; } form div.inputfield input, form div.calendarfield input { width: 100%; height: 34px; line-height: 34px; background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); border: 1px solid var(--bgweb-form-border-color); padding: 0px 0px 0px 0px; text-indent: 8px; position: relative; z-index: 2; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; } .bgweb2 div.inputfield input, .bgweb2 div.calendarfield input { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); border: 1px solid var(--bgweb2-form-border-color); } .bgbar div.inputfield input, .bgbar div.calendarfield input { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); border: 1px solid var(--bgbar-form-border-color); } form div.row.requiredinfobox div.requiredinfotext { text-align: right; margin-right: 6px; } form div.row.input div.inputfield, form div.row.calendar div.calendarfield { width: 51.315789%; float: left; display: inline; padding: 0px; position: relative; color: #888888; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; } form div.row.input div.inputfield.plz { width: 15.789474%; } form div.row.input div.inputfield.ort { width: 34.210526%; margin: 0px 0px 0px 1.315789%; } form div.row.input div.disabled input { background-color: #FFFFFF; } form div.row.calendar div.calendarfield a.kalenderopener { width: 21px; height: 19px; position: absolute; right: 10px; top: 8px; z-index: 2; } form div.selectfield span.field { width: 100%; height: 100%; background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); border: 1px solid var(--bgweb-form-border-color); line-height: 34px; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; } .bgweb2 div.selectfield span.field { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); border: 1px solid var(--bgweb2-form-border-color); } .bgbar div.selectfield span.field { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); border: 1px solid var(--bgbar-form-border-color); } .bgbar .bgweb div.selectfield span.field { background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); border: 1px solid var(--bgweb-form-border-color); } form div.selectfield span.field span.selecticon { position: absolute; right: 28px; top: 24px; } form div.selectfield span.field span.selecticon.selecticonsvg { top: 12px; } form div.selectfield span.field span.selecticon.selecticonsvg svg { width: 15px; height: 15px; } form div.selectfield span.field span.selecticon div, form div.selectfield span.field span.selecticon svg { position: absolute !important; left: 0px !important; top: 0px !important; } form div.selectfield span.field span.selecticon:before { content: ''; position: absolute; z-index: 1; background-color: var(--bgweb-form-text-color); top: -6px; left: 0px; width: 12px; height: 2px; display: block; transform: rotate(45deg); } form div.selectfield span.field span.selecticon:after { content: ''; position: absolute; z-index: 1; background-color: var(--bgweb-form-text-color); top: -6px; left: 8px; width: 12px; height: 2px; display: block; transform: rotate(-45deg); } .bgweb2 div.selectfield span.field span.selecticon:before, .bgweb2 div.selectfield span.field span.selecticon:after { background-color: var(--bgweb2-form-text-color); } .bgbar div.selectfield span.field span.selecticon:before, .bgbar div.selectfield span.field span.selecticon:after { background-color: var(--bgbar-form-text-color); } .bgbar .bgweb div.selectfield span.field span.selecticon:before, .bgbar .bgweb div.selectfield span.field span.selecticon:after { background-color: var(--bgweb-form-text-color); } form div.selectfield span.field span.selecticon.selecticonsvg:before { content: ''; position: static; background: transparent; top: auto; left: auto; width: auto; height: auto; transform: none; } form div.selectfield span.field span.selecticon.selecticonsvg:after { content: ''; position: static; background: transparent; top: auto; left: auto; width: auto; height: auto; transform: none; } form div.selectfield select { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border: 0px; opacity: 0.0; z-index: 2; } form div.selectfield span.select { display: block; height: 100%; margin: 0px 24px 0px 8px; position: relative; overflow: hidden; white-space: nowrap; } form div.selectfield span.field div.okicon, form div.selectfield span.field div.erroricon { right: 20px; } form div.row.select div.selectfield { width: 51.315789%; height: 38px; line-height: 34px; float: left; display: inline; padding: 2px 2px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; } form textarea.textarea { background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); border: 1px solid var(--bgweb-form-border-color); padding: 0px 0px 0px 0px; } .bgweb2 textarea.textarea { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color);border: 1px solid var(--bgweb2-form-border-color); } .bgbar textarea.textarea { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color);border: 1px solid var(--bgbar-form-border-color); } form div.row div.textarea { width: 51.315789%; display: inline; float: left; padding: 2px 2px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; } form div.row div.textarea textarea { width: 100%; float: left; display: inline; margin: 0px 0px 0px 0px; padding: 4px 8px 4px 8px; height: 4.333em; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; -webkit-appearance: none; } form div.checkboxfield input { position: relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 1em; height: 1em; z-index: 2; opacity: 0.0; } form div.checkboxfield span { position: absolute; left: 0px; top: 0px; display: block; width: 1em; height: 1em; font-size: 1em; line-height: 1px; z-index: 1; } form div.checkboxfield svg { position: absolute; left: 0px; top: 0px; display: block; width: 1em; height: 1em; font-size: 1em; line-height: 1px; z-index: 1; } form div.row.checkbox label.label { margin-top: 0px; } form div.row.checkbox div.checkboxfield { float: left; display: inline; margin: 2px 0px 0px 2px; position: relative; } form div.row.checkbox div.checkboxfield div.erroricon { position: absolute; right: -24px; top: -2px; margin-top: 0px; } form div.row.checkbox div.checkboxfield div.formtextV1 { top: -33px; left: -8px; z-index: 3; } form div.row.checkbox div.checkboxfield div.formtextV2, form div.row.checkbox div.checkboxfield div.formtextV5, form div.row.checkbox div.checkboxfield div.formtextV6 { top: -3px; } form div.row.checkbox div.checkboxfield div.formtextV3, form div.row.checkbox div.checkboxfield div.formtextV4 { width: 200px; } form div.row.checkbox div.checkboxfield div.okicon { position: absolute; right: -24px; top: -1px; margin-top: 0px; } form div.row.checkbox div.checkboxfield div.okicon * { position: relative; } form div.row.checkbox label.extralabel { float: left; margin: 1px 0px 0px 4px; width: auto; } form div.row.checkbox div.error + label.extralabel { margin: 0px 0px 0px 28px; } form div.radiofield input { position: relative; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; width: 100%; height: 100%; z-index: 2; opacity: 0.0; } form div.radiofield span { position: absolute; left: 0px; top: 0px; display: block; width: 100%; height: 100%; font-size: 1px; line-height: 1px; z-index: 1; } form div.radiofield svg { position: absolute; left: 0px; top: 0px; display: block; width: 1em; height: 1em; font-size: 1em; line-height: 1px; z-index: 1; } form div.radiofield span svg { width: 100%; height: 100%; font-size: 1px; } form div.row.radio label.label { margin-top: 0px; } form div.row.radio div.radiofield { width: 16px; height: 16px; float: left; display: inline; margin: 3px 0px 0px 0px; position: relative; } form div.row.radio div.radiofield div.erroricon { position: absolute; right: -28px; top: -2px; margin-top: 0px; } form div.row.radio div.radiofield div.formtextV1 { top: -34px; left: -9px; z-index: 3; } form div.row.radio div.radiofield div.formtextV2, form div.row.radio div.radiofield div.formtextV5, form div.row.radio div.radiofield div.formtextV6 { top: -3px; } form div.row.radio label.extralabel { float: left; margin: 0px 0px 0px 4px; width: auto; } form div.row.radio div.error + label.extralabel { margin: 0px 0px 0px 28px; } form div.uploadfield iframe { width: 128px; height: 128px; position: absolute; right: 0px; top: 0px; opacity: 0.0; z-index: 3; } form div.uploadfield div.status { position: absolute; left: -5px; top: 1px; width: 30px; height: 28px; overflow: hidden; } form div.uploadfield div.status0 { position: absolute; left: 1px; top: 1px; width: 30px; height: 28px; overflow: hidden; } form div.uploadfield div.status1 { position: absolute; left: 1px; top: 1px; width: 30px; height: 28px; overflow: hidden; } form div.uploadfield div.status2 { position: absolute; left: 1px; top: 1px; width: 30px; height: 28px; overflow: hidden; } form div.uploadfield div.status3 { position: absolute; left: 1px; top: 1px; width: 30px; height: 28px; overflow: hidden; } form div.uploadfield div.button { width: 100%; height: 100%; } form div.row.upload { } form div.row.upload div.uploadfield { width: 51.315789%; height: 32px; float: left; display: inline; padding: 2px 2px; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; } form div.row.upload div.uploadfieldcontainer { float: left; display: inline; width: 100%; height: 100%; line-height: 2.000000em; background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); border: 1px solid var(--bgweb-form-border-color); padding: 0px 0px 0px 0px; text-indent: 3px; position: relative; z-index: 2; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 0px; border-radius: 0px; } .bgweb2 div.row.upload div.uploadfieldcontainer { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); border: 1px solid var(--bgweb2-form-border-color); } .bgbar div.row.upload div.uploadfieldcontainer { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); border: 1px solid var(--bgbar-form-border-color); } form div.uploadfieldcontainer div.uploadbutton { background: transparent; position: absolute; right: -1px; top: 1px; width: 30px; height: 28px; overflow: hidden; z-index: 2; cursor: pointer; } form div.uploadfieldcontainer div.uploadname { position: absolute; left: -30px; top: 0px; text-indent: 55px; width: 100%; height: 100%; display: block; overflow: hidden; line-height: 27px; } form div .error { background: transparent; } form div .errorV1, form div .errorV2 { background-color: #f4c4cf; } form div .errorV1 input, form div .errorV1 textarea, form div .errorV2 input, form div .errorV2 textarea, form div .errorV7 input, form div .errorV7 textarea { border-color: #d5889a; color: #d5889a; } form div .errorV4 input, form div .errorV4 textarea, form div .errorV5 span.field, form div .errorV5 input, form div .errorV5 textarea { border-color: #eaa9a4; color: #d5889a; } form div .errorV6 span.field, form div .errorV6 input, form div .errorV6 textarea { color: #555555; border-color: #f3c7c3; background-color: #f3c7c3; } form div div.erroricon { display: none; } form div .error div.erroricon { display: block; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 2; } form div .calendarfield.error div.erroricon { right: 34px; } form div .error div.erroricon * { position: relative; } form div .error div.erroricon div { width: 18px; height: 18px; line-height: 1px; } form div .error div.erroricon svg { fill: #D93D5F; width: 18px; } form div .error div.formtextV1 { color: #FFFFFF; position: absolute; left: 0px; top: -32px; padding: 0px 10px 0px 10px; font-size: 11px; line-height: 25px; height: 25px; white-space: nowrap; background: #c62649; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e14668), color-stop(100%,#c62649)); background: -webkit-linear-gradient(top, #e14668 0%,#c62649 100%); background: -o-linear-gradient(top, #e14668 0%,#c62649 100%); background: -ms-linear-gradient(top, #e14668 0%,#c62649 100%); background: linear-gradient(to bottom, #e14668 0%,#c62649 100%); -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; z-index: 2; } form div .error div.formtextV1 div { position: absolute; left: 7px; bottom: -5px; width: 15px; height: 8px; line-height: 1px; } form div .error div.formtextV1 div:before { content: ''; position: absolute; left: 0px; bottom: 0px; width: 0px; height: 0px; border-style: solid; border-width: 6px 6px 0 6px; border-color: #CA2B4D transparent transparent transparent; } form div .ok input, form div .ok textarea { color: inherit; } form div .ok div.okicon { position: absolute; right: 3px; top: 50%; margin-top: -10px; padding: 0px 5px 0px 3px; z-index: 2; } form div .calendarfield.ok div.okicon { right: 34px; } form div .ok div.okicon * { position: relative; } form div .ok div.okicon div { width: 20px; height: 20px; line-height: 1px; position: relative; } form div .ok div.okicon div svg { width: 100%; height: 100%; fill: #0F870F; } form div .okV6 div.okicon { right: -40px; top: 50%; width: 18px; height: 24px; padding: 0px 0px 0px 0px; line-height: 1px; background-color: #0C7054; } form div .okV6 div.okicon:before { content: ''; position: absolute; left: -11px; bottom: 0px; width: 0px; height: 0px; border-style: solid; border-width: 12px 12px 12px 0px; border-color: transparent #0C7054 transparent transparent; } form div .okV6 div.okicon svg { fill: #FFFFFF; width: 15px; height: 15px; margin-top: 5px; margin-left: 0px; } form div.formspace { clear: both; height: 34px; overflow: hidden; text-indent: -100px; } footer form a.senden { display: flex; align-items: center; padding: 0px 15px; font-size: 15px; line-height: 19px; text-transform: uppercase; letter-spacing: 1.5px; font-weight: 600; background-color: var(--bgweb-button3-bg-color); } form a.senden.clicked { position: relative; } form a.senden.clicked span { opacity: 0.5; } form a.senden.clicked span.spinner { color: #000000; font-size: 2px; z-index: 10; position: absolute; left: 50%; top: 50%; width: 24px; height: 24px; margin: -12px 0px 0px -12px; opacity: 1.0; animation: spin 1.6s linear infinite; -webkit-animation: spin 1.6s linear infinite; -moz-animation: spin 1.6s linear infinite; } form a.senden.clicked span.spinner svg { width: 100%; height: 100%; opacity: 0.5; } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media (max-width: 530px) { form label.label { width: 100%; margin: 0px 0px 0.333333em 0px; } form div.row.input div.inputfield, form div.row.calendar div.calendarfield, form div.row div.textarea, form div.row.select div.selectfield { width: 100%; padding: 0.125em 0.416667% 0.125em 0.416667%; margin: 0px 0px 0.333333em 0px; } form div.row.input div.inputfield.plz { width: 33.333333%; } form div.row.input div.inputfield.ort { width: 62.500000%; margin: 0px 0px 0px 2.083333%; } } /* Calendar ______________________________________________________________ */ @media all { div.kalendercontainer { z-index: 100; } div.kalender { background-color: #FFFFFF; border: solid 1px #AAAAAA; width: 240px; position: absolute; border-radius: 4px; z-index: 80; } div.kalender a.prev { position: absolute; left: 5px; top: 5px; background: url(/images/units/inlineapi/kalender-date-prev.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; z-index: 90; } div.kalender a.prev:hover { background: url(/images/units/inlineapi/kalender-date-prev-hover.png) no-repeat center center; left: 4px; top: 4px; border: solid 1px #999999; border-radius: 4px; } div.kalender a.next { position: absolute; right: 5px; top: 5px; background: url(/images/units/inlineapi/kalender-date-next.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; z-index: 90; } div.kalender a.next:hover { background: url(/images/units/inlineapi/kalender-date-next-hover.png) no-repeat center center; right: 4px; top: 4px; border: solid 1px #999999; border-radius: 4px; } div.kalender a.calendarclose { position: absolute; right: -8px; top: -8px; width: 17px; height: 17px; cursor: pointer; text-decoration: none; background: url(/images/units/inlineapi/kalender-close.png) no-repeat 0px 0px; overflow: hidden; text-indent: -100px; } div.kalender div.kalenderbox { float: left; display: inline; padding: 0px 0px 10px 0px; width: 240px; } div.kalender div.kalenderbox b { background: url(/images/units/inlineapi/kalender-date.png) repeat-x center center #CCCCCC; border: solid 1px #AAAAAA; color: #222222; font-size: 13px; line-height: 25px; display: block; margin: 2px 2px 2px 2px; padding: 2px 0px 2px 0px; border-radius: 4px; text-align: center; } div.kalender div.kalenderbox table { margin: 0px 0px 0px 10px; float: left; display: inline; width: 217px; } div.kalender div.kalenderbox table th { color: #3C3C3C; text-align: center; width: 31px; height: 31px; padding: 0px 0px 0px 0px; font-size: 16px; } div.kalender div.kalenderbox table td { border: 0px; color: #FFFFFF; text-align: center; width: 31px; height: 31px; padding: 0px 0px 0px 0px; font-size: 16px; } div.kalender div.kalenderbox table td a { background: url(/images/units/inlineapi/kalender-td-default.png) repeat-x center center #E6E6E6; border: solid 1px #D3D3D3; color: #555555; line-height: 27px; display: block; margin: 2px 0px 0px 2px; width: 27px; height: 27px; text-decoration: none; } div.kalender div.kalenderbox table td a:hover { background: url(/images/units/inlineapi/kalender-td-hover.png) repeat-x center center #DADADA; border: solid 1px #999999; color: #212121; } div.kalender div.kalenderbox table td span { background: url(/images/units/inlineapi/kalender-td-default.png) repeat-x center center #E6E6E6; border: solid 1px #D3D3D3; color: #555555; opacity: 0.35; line-height: 27px; display: block; margin: 2px 0px 0px 2px; width: 27px; height: 27px; text-decoration: none; } div.kalender div.kalenderbox table td.today { color: #785547; } div.kalender div.kalenderbox table td.today a { background: #FFFFFF; border: solid 1px #D3D3D3; color: #363636; } div.kalender div.kalenderbox table td a.selectstart { background: #50742F; color: #FFFFFF; border: 2px solid #345F0D; border-right: none; width: auto; height: 25px; line-height: 25px; opacity: 1.0; } div.kalender div.kalenderbox table td a.selected { background: #A9BF00; color: #FFFFFF; border-top: 2px solid #345F0D; border-bottom: 2px solid #345F0D; height: 26px; line-height: 26px; opacity: 1.0; } div.kalender div.kalenderbox table td a.selectend { background: url(/images/units/inlineapi/date-delete.png) no-repeat right top #50742F; color: #FFFFFF; border: 2px solid #345F0D; border-left: none; width: auto; height: 26px; line-height: 26px; opacity: 1.0; } div.kalender div.kalenderbox table td div.kalenderopen { float: left; position: relative; width: 0px; height: 0px; } div.kalender a.prev { position: absolute; left: 30px; top: 5px; background: url(/images/units/inlineapi/kalender-date-prev.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; } div.kalender a.prev:hover { background: url(/images/units/inlineapi/kalender-date-prev-hover.png) no-repeat center center; left: 29px; top: 4px; border: solid 1px #999999; border-radius: 4px; } div.kalender a.next { position: absolute; right: 30px; top: 5px; background: url(/images/units/inlineapi/kalender-date-next.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; } div.kalender a.next:hover { background: url(/images/units/inlineapi/kalender-date-next-hover.png) no-repeat center center; right: 29px; top: 4px; border: solid 1px #999999; border-radius: 4px; } div.kalender a.prevyear { position: absolute; left: 5px; top: 5px; background: url(/images/units/inlineapi/kalender-year-prev.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; } div.kalender a.prevyear:hover { background: url(/images/units/inlineapi/kalender-year-prev-hover.png) no-repeat center center; left: 4px; top: 4px; border: solid 1px #999999; border-radius: 4px; } div.kalender a.nextyear { position: absolute; right: 5px; top: 5px; background: url(/images/units/inlineapi/kalender-year-next.png) no-repeat center center; display: block; width: 24px; height: 24px; text-decoration: none; cursor: pointer; text-indent: -50px; overflow: hidden; } div.kalender a.nextyear:hover { background: url(/images/units/inlineapi/kalender-year-next-hover.png) no-repeat center center; right: 4px; top: 4px; border: solid 1px #999999; border-radius: 4px; } form div.row.calendar.calendarinline { width: 100%; margin: 0px 0px 0px 0px; } form div.row.calendar.calendarinline div.calendarfield { padding: 0px; } form div.row.calendarinline div.calendarfield input { display: none; } form div.row.calendarinline div.calendarfield:before { content: none; } div.calendarinlinecontainer { width: 100%; clear: none; display: block; border: 0px; position: relative; background: transparent; } div.calendarinlinecontainer div.calendarinline { width: 100%; padding: 0px 0px 0px 0px; border: 0px; position: relative; background: transparent; } div.calendarinlinecontainer div.calendarinlinebox { position: relative; background: transparent; margin-left: -4px; margin-right: -4px; border: 0; } div.calendarinlinecontainer div.calendarinlinebox br.clear { display: none; } div.calendarinlinecontainer div.calendarinlinebox table { border-spacing: 4px; border-collapse: separate; } div.calendarinlinecontainer div.calendarinlinebox table th { height: 47px; border: 1px solid var(--bglist-border-color); padding: 0px 0px 0px 0px; text-align: center; background-color: var(--bghighlight-bg-color); color: var(--bghighlight-text-color); } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table th { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); border: 1px solid var(--bgweb2-border-color); } .bgbar div.calendarinlinecontainer div.calendarinlinebox table th { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); border: 1px solid var(--bgweb2-border-color); } div.calendarinlinecontainer div.calendarinlinebox table td { width: 14.285%; height: 47px; padding: 0px 0px 0px 0px; text-align: center; margin: 4px 4px 4px 4px; background-color: var(--bgweb-form-bg-color); } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); } .bgbar div.calendarinlinecontainer div.calendarinlinebox table td { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); } div.calendarinlinecontainer div.calendarinlinebox table td.today { background-color: var(--bghighlight-bg-color); color: var(--bghighlight-text-color); position: relative; } div.calendarinlinecontainer div.calendarinlinebox table td.today a { color: var(--bghighlight-text-color); z-index: 5; position: relative; } div.calendarinlinecontainer div.calendarinlinebox table td.today:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: #FFFFFF; opacity: 0.2; z-index: 2; } div.calendarinlinecontainer div.calendarinlinebox table td span, div.calendarinlinecontainer div.calendarinlinebox table td a { display: block; width: 100%; height: 100%; line-height: 47px; font-size: 16px; color: var(--bglist-text-color); border: 1px solid var(--bgweb-border-color); } div.calendarinlinecontainer div.calendarinlinebox table td span { opacity: 0.3; } div.calendarinlinecontainer div.calendarinlinebox table td a.selectstart, div.calendarinlinecontainer div.calendarinlinebox table td a.selected, div.calendarinlinecontainer div.calendarinlinebox table td a.selectend, .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td a.selectstart, .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td a.selected, .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td a.selectend { position: relative; background-color: #888822; color: #FFFFFF; } div.calendarinlinecontainer div.calendarinlinebox table td a.selectend:before { content: '\2716'; position: absolute; right: -5px; top: -5px; width: 20px; height: 20px; line-height: 20px; font-size: 11px; -webkit-border-radius: 50%; border-radius: 50%; background: var(--bghighlight-bg-color); color: var(--bghighlight-text-color); } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td span, .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td a { color: var(--bgweb2-text-color); position: relative; z-index: 5; border: 1px solid var(--bgweb2-border-color); } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td.today { background-color: var(--bghighlight-bg-color); color: var(--bghighlight-text-color); position: relative; } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td.today a { color: var(--bghighlight-text-color); z-index: 5; position: relative; } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox table td.today:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; background: #FFFFFF; opacity: 0.2; z-index: 2; -moz-box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 4px 500px rgba(0, 0, 0, 0.25); box-shadow: 4px 4px 5px 0px rgba(0, 0, 0, 0.2), inset 0px 0px 4px 500px rgba(0, 0, 0, 0.25); } div.calendarinlinecontainer div.calendarinlinebox b { display: block; text-align: center; margin: 0px 4px 0px 4px; height: 90px; font-size: 18px; line-height: 90px; background-color: var(--bgweb-form-bg-color); color: var(--bgweb-form-text-color); font-weight: normal; border: 1px solid var(--bgweb-form-border-color); } .bgweb2 div.calendarinlinecontainer div.calendarinlinebox b { background-color: var(--bgweb2-form-bg-color); color: var(--bgweb2-form-text-color); border: 1px solid var(--bgweb2-form-border-color); } .bgbar div.calendarinlinecontainer div.calendarinlinebox b { background-color: var(--bgbar-form-bg-color); color: var(--bgbar-form-text-color); border: 1px solid var(--bgbar-form-border-color); } div.calendarinlinecontainer a.prev { position: absolute; left: 3px; top: 11px; width: 13.5%; height: 68px; line-height: 68px; text-align: center; border-right: 1px solid var(--bgweb-border-color); z-index: 5; color: var(--bgweb-text-color); } .bgweb2 div.calendarinlinecontainer a.prev { border-right: 1px solid var(--bgweb2-border-color); color: var(--bgweb2-text-color); } div.calendarinlinecontainer a.next { position: absolute; right: 3px; top: 11px; width: 13.5%; height: 68px; line-height: 68px; text-align: center; border-left: 1px solid var(--bgweb-border-color); z-index: 5; color: var(--bgweb-text-color); } .bgweb2 div.calendarinlinecontainer a.next { border-left: 1px solid var(--bgweb2-border-color); color: var(--bgweb2-text-color); } div.calendarinlinecontainer a.prev:hover, div.calendarinlinecontainer a.next:hover { opacity: 0.5; } } /* VideoOverlay ______________________________________________________________ */ @media all { .video-overlay { position: fixed; left: 0; top: 0; background-color: #000; width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; z-index: 10; } .video-overlay video { width: 80%; } .video-overlay svg { fill: #fff; position: absolute; width: 30px; height: 30px; top: 30px; right: 30px; cursor: pointer;} } @media (max-width: 620px) { .video-overlay svg { right: 25px; } } /* LightGallery ______________________________________________________________ */ @media all { .lightGallery div.lightgalleryhover svg { display: none; } [data-lightgallery=true] .lightGallery { position: relative; cursor: pointer; overflow: hidden; } [data-lightgallery=true] .lightGallery picture { overflow: hidden; } [data-lightgallery=true] .lightGallery div.lightgalleryhover { display: none; } .lg-actions .lg-next, .lg-actions .lg-prev { background-color: rgba(0, 0, 0, 0.45); border-radius: 0px; cursor: pointer; display: block; margin-top: -10px; padding: 8px 10px 9px; position: absolute; top: 50%; z-index: 1080; border: none; outline: none; } .lg-actions .lg-next svg, .lg-actions .lg-prev svg { fill: #999999; width: 30px; height: 30px; } .lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled { pointer-events: none; opacity: 0.5; } .no-mobile-device .lg-actions .lg-next:hover svg, .no-mobile-device .lg-actions .lg-prev:hover svg { fill: #FFFFFF; } .lg-actions .lg-next { right: 20px; } .lg-actions .lg-prev { left: 20px; } } @keyframes lg-right-end { 0% { left: 0; } 50% { left: -30px; } 100% { left: 0; }} @keyframes lg-left-end { 0% { left: 0; } 50% { left: 30px; } 100% { left: 0; }} @media all { .lg-outer.lg-right-end .lg-object { animation: lg-right-end 0.3s; position: relative; } .lg-outer.lg-left-end .lg-object { animation: lg-left-end 0.3s; position: relative; } .lg-object .spaceTopBottom { margin-top: 0px; margin-bottom: 0px; } .lg-toolbar { z-index: 1082; position: absolute; left: 0; top: 0; width: 100%; background-color: rgba(0, 0, 0, 0.45); } .lg-toolbar .lg-icon { cursor: pointer; float: right; height: 47px; line-height: 27px; padding: 10px 0; text-align: center; width: 40px; outline: medium none; } .lg-toolbar .lg-icon svg { fill: #999999; transition: fill 0.2s linear; width: 20px; height: 20px; } .no-mobile-device .lg-toolbar .lg-icon:hover svg { fill: #FFFFFF; } .lg-sub-html { background-color: rgba(0, 0, 0, 0.45); bottom: 0; color: #EEEEEE; font-size: 16px; left: 0; padding: 10px 40px; position: fixed; right: 0; text-align: center; z-index: 1080; } .lg-sub-html h4 { margin: 0; font-size: 13px; font-weight: bold; } .lg-sub-html p { font-size: 12px; margin: 5px 0 0; } #lg-counter { color: #999; display: inline-block; font-size: 16px; padding-left: 20px; padding-top: 12px; vertical-align: middle; } .lg-toolbar, .lg-prev, .lg-next { opacity: 1; transition: transform 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.35s cubic-bezier(0, 0, 0.25, 1) 0s, color 0.2s linear; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object { transform: scale3d(0.5, 0.5, 0.5); opacity: 0; transition: transform 250ms cubic-bezier(0, 0, 0.25, 1) 0s, opacity 250ms cubic-bezier(0, 0, 0.25, 1) !important; transform-origin: 50% 50%; } body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object { transform: scale3d(1, 1, 1); opacity: 1; } .lg-outer .lg-thumb-outer { background-color: #0D0A0A; bottom: 0; position: absolute; width: 100%; z-index: 1080; max-height: 350px; transform: translate3d(0, 100%, 0); transition: transform 0.25s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item { cursor: grab; } .lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item { cursor: move; cursor: grabbing; } .lg-outer .lg-thumb-outer.lg-dragging .lg-thumb { transition-duration: 0s !important; } .lg-outer.lg-thumb-open .lg-thumb-outer { transform: translate3d(0, 0%, 0); } .lg-outer .lg-thumb { padding: 10px 0; height: 100%; margin-bottom: -5px; } .lg-outer .lg-thumb-item { border-radius: 5px; cursor: pointer; float: left; overflow: hidden; height: 100%; border: 2px solid #FFF; border-radius: 4px; margin-bottom: 5px; box-sizing: border-box; } /* .lg .lg-toolbar { max-width: 1360px; width: calc(calc(374px + (1360 - 374) * ((100vw - 414px) / (1700 - 414))) - var(--scrollbar-width, 0)); left: 50%; transform: translateX(-50%); background: transparent; } */ .lg .lg-toolbar { width: calc(100% - var(--scrollbar-width, 0)); height: 0px; background: transparent; } .lg .lg-toolbar .lg-close { width: 110px; height: 110px; padding: 0px; background: #EAE8E2; position: relative; transition: all .3s ease-in-out; } .lg .lg-toolbar .lg-close svg { width: 20px !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; fill: #5B5E51; } .no-mobile-device .lg .lg-toolbar .lg-close:hover { opacity: .7; } .lg .lg-toolbar #lg-counter, .lg .lg-toolbar > *:not(.lg-close) { display: none; } .lg .lg-inner .lg-object { width: 100%; max-width: 100%; height: 100%; background: #FFFFFF; } .lg .lg-inner .lg-img-wrap { padding: 0px; } .lg .lg-actions { display: none; } } @media (max-width: 1700px) { .lg .lg-toolbar { height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } .lg .lg-toolbar .lg-close { width: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1025px) { .lg-outer .lg-thumb-item { transition: border-color 0.25s ease; } } @media all { .no-mobile-device .lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover { border-color: #a90707; } .lg-outer .lg-thumb-item img { width: 100%; height: 100%; object-fit: cover; } .lg-outer.lg-has-thumb .lg-item { padding-bottom: 120px; } .lg-outer.lg-can-toggle .lg-item { padding-bottom: 0; } .lg-outer.lg-pull-caption-up .lg-sub-html { transition: bottom 0.25s ease; } .lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html { bottom: 100px; } .lg-outer .lg-toogle-thumb { background-color: #0D0A0A; border-radius: 0px 2px 0 0; color: #999; cursor: pointer; font-size: 24px; height: 39px; line-height: 27px; padding: 5px 0; position: absolute; right: 20px; text-align: center; top: -39px; width: 50px; } .lg-outer .lg-toogle-thumb svg { fill: #999; } .no-mobile-device .lg-outer .lg-toogle-thumb:hover svg { fill: #FFF; } .lg-outer .lg-video-cont { display: inline-block; vertical-align: middle; max-width: 1140px; max-height: 100%; width: 100%; padding: 0 5px; } .lg-outer .lg-video { width: 100%; height: 0; padding-bottom: 56.25%; overflow: hidden; position: relative; } .lg-outer .lg-video .lg-object { display: inline-block; position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; } .lg-outer .lg-video .lg-video-play { width: 84px; height: 59px; position: absolute; left: 50%; top: 50%; margin-left: -42px; margin-top: -30px; z-index: 1080; cursor: pointer; } .lg-outer .lg-has-iframe .lg-video { overflow: auto; } .lg-outer .lg-has-html5 .lg-video-play { height: 64px; margin-left: -32px; margin-top: -32px; width: 64px; opacity: 0.8; } .no-mobile-device .lg-outer .lg-has-html5:hover .lg-video-play { opacity: 1; } .lg-outer .lg-video-play svg { width: 55px; height: 55px; } .lg-outer .lg-video-object { width: 100% !important; height: 100% !important; position: absolute; top: 0; left: 0; } .lg-outer .lg-has-video .lg-video-object { visibility: hidden; } .lg-outer .lg-has-video.lg-video-playing .lg-object, .lg-outer .lg-has-video.lg-video-playing .lg-video-play { display: none; } .lg-outer .lg-has-video.lg-video-playing .lg-video-object { visibility: visible; } .lg-progress-bar { background-color: #333; height: 5px; left: 0; position: absolute; top: 0; width: 100%; z-index: 1083; opacity: 0; transition: opacity 0.08s ease 0s; } .lg-progress-bar .lg-progress { background-color: #a90707; height: 5px; width: 0; } .lg-progress-bar.lg-start .lg-progress { width: 100%; } .lg-show-autoplay .lg-progress-bar { opacity: 1; } .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap, .lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image { transition-duration: 0s; } .lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap { transition: left 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, top 0.3s cubic-bezier(0, 0, 0.25, 1) 0s; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap { transform: translate3d(0, 0, 0); backface-visibility: hidden; } .lg-outer .lg-item.lg-complete.lg-zoomable .lg-image { transform: scale3d(1, 1, 1); transition: transform 0.3s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.15s !important; transform-origin: 0 0; backface-visibility: hidden; } #lg-zoom-out { opacity: 0.5; pointer-events: none; } .lg-zoomed #lg-zoom-out { opacity: 1; pointer-events: auto; } .lg-outer .lg-pager-outer { bottom: 60px; left: 0; position: absolute; right: 0; text-align: center; z-index: 1080; height: 10px; } .lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont { overflow: visible; } .lg-outer .lg-pager-cont { cursor: pointer; display: inline-block; overflow: hidden; position: relative; vertical-align: top; margin: 0 5px; } .no-mobile-device .lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont { opacity: 1; transform: translate3d(0, 0, 0); } .lg-outer .lg-pager-cont.lg-pager-active .lg-pager { box-shadow: 0 0 0 2px white inset; } .lg-outer .lg-pager-thumb-cont { background-color: #fff; color: #FFF; bottom: 100%; height: 83px; left: 0; margin-bottom: 20px; margin-left: -60px; opacity: 0; padding: 5px; position: absolute; width: 120px; border-radius: 3px; transition: opacity 0.15s ease 0s, transform 0.15s ease 0s; transform: translate3d(0, 5px, 0); } .lg-outer .lg-pager-thumb-cont img { width: 100%; height: 100%; } .lg-outer .lg-pager { background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.7) inset; display: block; height: 12px; transition: box-shadow 0.3s ease 0s; width: 12px; } .no-mobile-device .lg-outer .lg-pager:hover, .lg-outer .lg-pager:focus { box-shadow: 0 0 0 8px white inset; } .lg-outer .lg-caret { border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px dashed; bottom: -10px; display: inline-block; height: 0; left: 50%; margin-left: -5px; position: absolute; vertical-align: middle; width: 0; } .lg-outer #lg-dropdown-overlay { background-color: rgba(0, 0, 0, 0.25); bottom: 0; cursor: default; left: 0; position: fixed; right: 0; top: 0; z-index: 1081; opacity: 0; visibility: hidden; transition: visibility 0s linear 0.18s, opacity 0.18s linear 0s; } .lg-outer.lg-dropdown-active .lg-dropdown, .lg-outer.lg-dropdown-active #lg-dropdown-overlay { transition-delay: 0s; transform: translate3d(0, 0px, 0); opacity: 1; visibility: visible; } .lg-outer.lg-dropdown-active #lg-share { color: #FFF; } .lg-outer .lg-dropdown { background-color: #fff; border-radius: 0px; font-size: 14px; list-style-type: none; margin: 0; padding: 10px 0; position: absolute; right: 0; text-align: left; top: 50px; opacity: 0; visibility: hidden; transform: translate3d(0, 5px, 0); transition: transform 0.18s linear 0s, visibility 0s linear 0.5s, opacity 0.18s linear 0s; } .lg-outer .lg-dropdown:after { content: ""; display: block; height: 0; width: 0; position: absolute; border: 8px solid transparent; border-bottom-color: #FFF; right: 16px; top: -16px; } .lg-outer .lg-dropdown li { padding-left: 0px; } .lg-outer .lg-dropdown > li:last-child { margin-bottom: 0px; } .no-mobile-device .lg-outer .lg-dropdown > li:hover a, .no-mobile-device .lg-outer .lg-dropdown > li:hover .lg-icon { color: #333; } .lg-outer .lg-dropdown a { color: #333; display: block; white-space: pre; padding: 4px 12px; font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; } .lg-outer .lg-dropdown a:hover { background-color: rgba(0, 0, 0, 0.07); } .lg-outer .lg-dropdown .lg-dropdown-text { display: inline-block; line-height: 1; margin-top: -3px; vertical-align: middle; } .lg-outer .lg-dropdown .lg-icon { color: #333; display: inline-block; float: none; height: auto; line-height: 1; margin-right: 8px; padding: 0; vertical-align: middle; width: auto; } .lg-outer #lg-share { position: relative; } .lg-outer #lg-share-facebook .lg-icon svg { fill: #3b5998; } .lg-outer #lg-share-twitter .lg-icon svg { fill: #00aced; } .lg-outer #lg-share-googleplus .lg-icon svg { fill: #dd4b39; } .lg-outer #lg-share-pinterest .lg-icon svg { fill: #cb2027; } .lg.thumb.lg-group { box-sizing: border-box; white-space: nowrap; } .lg-group:after { content: ""; display: table; clear: both; } .lg-outer { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1050; text-align: left; opacity: 0; transition: opacity 0.15s ease 0s; } .lg-outer.lg-visible { opacity: 1; } .lg-outer.lg-css3 .lg-item.lg-prev-slide, .lg-outer.lg-css3 .lg-item.lg-next-slide, .lg-outer.lg-css3 .lg-item.lg-current { transition-duration: inherit !important; transition-timing-function: inherit !important; } .lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide, .lg-outer.lg-css3.lg-dragging .lg-item.lg-current { transition-duration: 0s !important; opacity: 1; } .lg-outer.lg-grab img.lg-object { cursor: grab; } .lg-outer.lg-grabbing img.lg-object { cursor: move; cursor: grabbing; } .lg-outer .lg { height: 100%; width: 100%; position: relative; overflow: hidden; margin-left: auto; margin-right: auto; max-width: 100%; max-height: 100%; } .lg-outer .lg-inner { width: 100%; height: 100%; position: absolute; left: 0; top: 0; white-space: nowrap; } .lg-outer .lg-item { display: none !important; } .lg-outer .lg-item span.picture-loading { content: ''; border: 5px solid #f3f3f3; border-top: 5px solid #555555; border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0px 0px -20px; animation: spin 1.6s linear infinite; z-index: 100; } .lg-outer.lg-css3 .lg-prev-slide, .lg-outer.lg-css3 .lg-current, .lg-outer.lg-css3 .lg-next-slide { display: inline-block !important; } .lg-outer.lg-css .lg-current { display: inline-block !important; } .lg-outer .lg-item, .lg-outer .lg-img-wrap { display: inline-block; text-align: center; position: absolute; width: 100%; height: 100%; } .lg-outer .lg-item:before, .lg-outer .lg-img-wrap:before { content: ""; display: inline-block; height: 50%; width: 1px; margin-right: -1px; } .lg-outer .lg-img-wrap { position: absolute; padding: 0 5px; left: 0; right: 0; top: 0; bottom: 0; } .lg-outer .lg-item.lg-complete span.picture-loading { display: none; } .lg-outer .lg-item.lg-current { z-index: 1060; } .lg-outer .lg-image { display: inline-block; vertical-align: middle; max-width: 100%; max-height: 100%; width: auto !important; height: auto !important; } .lightGalleryBg .lg-object > div, .lightGalleryBg .lg-object > span, .lightGalleryBg .lg-object > section { display: block; padding: 70px 30px 70px 30px; background-color: var(--bgweb-bg-color); } .lightGalleryBg .lg-object .centercontent { width: auto; } .lg-outer .lg-ajax { display: inline-block; vertical-align: middle; max-width: 90%; max-height: 100%; text-align: left; white-space: normal; overflow-y: auto; } .lg-outer.lg-loadingcomplete .lg-ajax { overflow-y: auto; } .lg-outer.lg-show-after-load .lg-item .lg-object, .lg-outer.lg-show-after-load .lg-item .lg-video-play { opacity: 0; transition: opacity 0.15s ease 0s; } .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object, .lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play { opacity: 1; } .lg-outer .lg-empty-html { display: none; } .lg-outer.lg-hide-download #lg-download { display: none; } .lg-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1040; background-color: #000; opacity: 0; transition: opacity 0.15s ease 0s; } .lg-backdrop.in { opacity: 1; } .lg-css3.lg-no-trans .lg-prev-slide, .lg-css3.lg-no-trans .lg-next-slide, .lg-css3.lg-no-trans .lg-current { transition: none 0s ease 0s !important; } .lg-css3.lg-use-css3 .lg-item { backface-visibility: hidden; } .lg-css3.lg-use-left .lg-item { backface-visibility: hidden; } .lg-css3.lg-fade .lg-item { opacity: 0; } .lg-css3.lg-fade .lg-item.lg-current { opacity: 1; } .lg-css3.lg-fade .lg-item.lg-prev-slide, .lg-css3.lg-fade .lg-item.lg-next-slide, .lg-css3.lg-fade .lg-item.lg-current { transition: opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-css3 .lg-item { opacity: 0; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide { transform: translate3d(-100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide { transform: translate3d(100%, 0, 0); } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { transform: translate3d(0, 0, 0); opacity: 1; } .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current { transition: transform 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } .lg-css3.lg-slide.lg-use-left .lg-item { opacity: 0; position: absolute; left: 0; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide { left: -100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide { left: 100%; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { left: 0; opacity: 1; } .lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide, .lg-css3.lg-slide.lg-use-left .lg-item.lg-current { transition: left 1s cubic-bezier(0, 0, 0.25, 1) 0s, opacity 0.1s ease 0s; } } /* Owl Carousel __________________________________________________________ */ @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @media all { /* Owl Carousel - Core */ .owl-carousel { width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1; } .owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y; -moz-backface-visibility: hidden; /* fix firefox animation glitch */ } .owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); } .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; } .owl-carousel .owl-item img { display: block; width: 100%; } .owl-carousel .owl-item.cloned.active picture { height: auto !important; padding: 0px !important; } .owl-carousel .owl-item.cloned.active .objectfit-cover picture { height: 100% !important; } .owl-carousel .owl-item.cloned.active picture.picture-loading:before { display: none !important; } .owl-carousel .owl-item.cloned.active picture.picture-loading img { opacity: 1 !important; } .owl-carousel .owl-nav.disabled, .owl-carousel .owl-dots.disabled { display: none; } .owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-loaded { display: block; } .owl-carousel.owl-loading { opacity: 0; display: block; } .owl-carousel.owl-hidden { opacity: 0; } .owl-carousel.owl-refresh .owl-item { visibility: hidden; } .owl-carousel.owl-drag .owl-item { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .owl-carousel.owl-grab { cursor: move; cursor: grab; } .owl-carousel.owl-rtl { direction: rtl; } .owl-carousel.owl-rtl .owl-item { float: right; } /* No Js */ .no-js .owl-carousel { display: block; } /* Owl Carousel - Animate Plugin */ .owl-carousel .animated { animation-duration: 1000ms; animation-fill-mode: both; } .owl-carousel .owl-animated-in { z-index: 0; } .owl-carousel .owl-animated-out { z-index: 1; } .owl-carousel .fadeOut { animation-name: fadeOut; } /* Owl Carousel - Auto Height Plugin */ .owl-height { transition: height 500ms ease-in-out; } /* Owl Carousel - Lazy Load Plugin */ .owl-carousel .owl-item .owl-lazy { opacity: 0; transition: opacity 400ms ease; } .owl-carousel .owl-item img.owl-lazy { transform-style: preserve-3d; } /* Owl Carousel - Video Plugin */ .owl-carousel .owl-video-wrapper { position: relative; height: 100%; background: #000; } .owl-carousel .owl-video-play-icon { position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; cursor: pointer; z-index: 1; -webkit-backface-visibility: hidden; transition: transform 100ms ease; } .no-mobile-device .owl-carousel .owl-video-play-icon:hover { -ms-transform: scale(1.3, 1.3); transform: scale(1.3, 1.3); } .owl-carousel .owl-video-playing .owl-video-tn, .owl-carousel .owl-video-playing .owl-video-play-icon { display: none; } .owl-carousel .owl-video-tn { opacity: 0; height: 100%; background-position: center center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; } .owl-carousel .owl-video-frame { position: relative; z-index: 1; height: 100%; width: 100%; } } /* Owl Carousel - Zeppelin Custom __________________________________________________________ */ @media all { .objectfit-cover .owl-stage, .adapted-height .owl-stage, .objectfit-cover .owl-stage-outer, .adapted-height .owl-stage-outer, .objectfit-cover .owl-item, .adapted-height .owl-item { height: 100%; } .owl-carousel:not(.owl-loaded) .element, .owl-carousel:not(.owl-loaded) article.room, .owl-carousel:not(.owl-loaded) div.room, .owl-carousel:not(.owl-loaded) div.offer { display: none !important; } .owl-carousel:not(.owl-loaded) .element:first-child, .owl-carousel:not(.owl-loaded) article.room:first-child, .owl-carousel:not(.owl-loaded) div.room:first-child, .owl-carousel:not(.owl-loaded) div.offer:first-child { display: block !important; } .owl-carousel .owl-nav .owl-prev.disabled, .owl-carousel .owl-nav .owl-next.disabled { opacity: 0.5; } .owl-carousel .owl-nav .owl-prev.disabled svg, .owl-carousel .owl-nav .owl-next.disabled svg { cursor: default; } } /* Basic Print ____________________________________________________ */ @media print { body { text-align: left; background-color: #FFFFFF !important; } nav.mainmenu { display: none; } header.pageheader { display: none; } div.pagecontent { margin: 0px 0px 0px 0px; } article.maincontent { color: #000000 !important; background-color: #FFFFFF !important; margin: 0px 0px 0px 0px !important; float: none; } article.maincontent div.inlineapi a.noprint { display: none; } article.maincontent div.inlineapi span.noprint { display: none; } article.maincontent div.inlineapi div.onlyprint { display: block; } article.maincontent div.inlineapi div.bestaetigung { display: none; } article.maincontent div.inlineapi div.noprint { display: none; } footer.pagefooter { display: none; } } /* Other _____________________________________________________________ */ @media all { br.clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } div.clear { clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } .clearbefore::before { content: ''; clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } .clearbeforeafter::before { content: ''; clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } .clearbeforeafter::after { content: ''; clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } .clearafter::after { content: ''; clear: both; line-height: 0px; font-size: 0px; height: 0px; overflow: hidden; text-indent: -100px; } } /* __________________________________________________________________ End *//* Basic ____________________________________________________ */ @media all { body { } body.overflow, body.lg-on { overflow: hidden; overflow: -moz-scrollbars-none; -ms-overflow-style: none; scrollbar-width: 0px; } body.overflow::-webkit-scrollbar { width: 0 !important; display: none; } body.overflow *::-webkit-scrollbar { width: 0 !important; display: none; } address { font-style: normal; } div.frame { position: relative; text-align: left; overflow: hidden; } .pagemobilebar { position: relative; z-index: 6; } .pagemenu { position: relative; z-index: 5; } .pageheader { position: relative; z-index: 4; } .pagecontent { position: relative; z-index: 3; } .pagefooter { position: relative; z-index: 2; } .pagecontent .maincontent > *:first-child { padding-top: 280px; } .inverted-header .pagecontent .maincontent > *:first-child { padding-top: 0px; } .moduleInstancePreview .pagecontent .maincontent > *:first-child { padding-top: 160px; } .centercontent { margin-left: auto; margin-right: auto; max-width: 1360px; width: calc(374px + (1360 - 374) * ((100vw - 414px) / (1700 - 414))); } .centercontent .centercontent { width: 100%; max-width: 100%; } .centercontentMagazine { margin-left: auto; margin-right: auto; max-width: 1200px; width: calc(374px + (1200 - 374) * ((100vw - 414px) / (1700 - 414))); } .centercontent .centercontentMagazine { max-width: 1200px; } .centercontentMagazine .centercontentMagazine { width: 100%; max-width: 100%; } .centercontentMagazineFotogallery { margin-left: auto; margin-right: auto; max-width: 1360px; width: calc(374px + (1360 - 374) * ((100vw - 414px) / (1700 - 414))); } .centercontentMagazineFotogallery .centercontentMagazineFotogallery { width: 100%; max-width: 100%; } .standardspace { padding: 160px 0px; position: relative; z-index: 1; } .standardspace.TeaserT3 { padding-top: 100px; } .standardspace.Hotels.ListT3 { padding: 100px 0px; } .standardspace + .standardspace { padding-top: 0px; } .standardspace.bgweb2 + .standardspace:not(.bgweb2) { padding-top: 160px; } .standardspace:not(.bgweb2) + .standardspace.bgweb2 { padding-top: 160px; } .standardspace.bgweb2 + .standardspace.bgweb3 { padding-top: 0px; } .standardspace.bgweb3 + .standardspace.bgweb2 { padding-top: 160px; } .standardspace:not(.bgweb2) + .standardspace.bgweb3 { padding-top: 160px; } .standardspace.bgusp + .standardspace:not(.bgusp) { padding-top: 160px; } .standardspace:not(.bgusp) + .standardspace.bgusp { padding-top: 160px; } svg { height: 100%; } img, svg { display: block; width: 100%; } [data-object-fit="cover"] * { height: 100%; } picture, picture a { display: block; position: relative; } picture img { transition: opacity 500ms; opacity: 1; } picture.picture-loading:before { content: ''; border: 5px solid #f3f3f3; border-top: 5px solid #555555; border-radius: 50%; position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0px 0px -20px; animation: spin 1.6s linear infinite; } picture.picture-loading img { opacity: 0; } .page-logo { position: absolute; z-index: 4; top: calc(100vh - 200px); right: 1.041667%; display: block; width: 180px; padding-top: 0px !important; box-sizing: border-box; transition: padding 500ms, width 500ms; } .page-logo.with-watchlist { top: calc(calc(100vh - 200px) - 165px) } .page-logo:hover { opacity: 1; } .page-logo span { position: relative; z-index: 2; display: block; } .page-logo span img { height: auto; transition: opacity 500ms; } .page-logo span img.logo { opacity: 1; } .page-logo span img + img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .no-mobile-device .image-hover .image a picture, .no-mobile-device .image-hover .image .lightGallery picture, .no-mobile-device .image-hover[data-element-linked$="rue"] .image picture { position: relative; overflow: hidden; } .no-mobile-device .image-hover .image a picture:after, .no-mobile-device .image-hover .image .lightGallery picture:after, .no-mobile-device .image-hover[data-element-linked$="rue"] .image picture:after { background-color: rgba(255,255,255,0); content: ''; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: background-color 700ms; } .no-mobile-device .image-hover .image a picture img, .no-mobile-device .image-hover .image .lightGallery picture img, .no-mobile-device .image-hover[data-element-linked$="rue"] .image picture img { transition: transform 2000ms cubic-bezier(0,0,0.2,1); transform: scale(1); -webkit-transform: scale(1); } .no-mobile-device .image-hover .image a:hover picture:after, .no-mobile-device .image-hover .image .lightGallery:hover picture:after, .no-mobile-device .image-hover[data-element-linked$="rue"]:hover .image picture:after { background-color: rgba(255,255,255,0.2); } .no-mobile-device .image-hover .image a:hover picture img, .no-mobile-device .image-hover .image .lightGallery:hover picture img, .no-mobile-device .image-hover[data-element-linked$="rue"]:hover .image picture img { transform: scale(1.03); -webkit-transform: scale(1.03); } .clearbefore:before, .clearafter:after, .clearbeforeafter:before, .clearbeforeafter:after { content: ''; clear: both; display: block; font-size: 0px; height: 0px; line-height: 0px; overflow: hidden; text-indent: -100px; } .module-intro { margin-bottom: 45px; } .module-intro .textbox { max-width: 720px; } .cursor-none { cursor: none; } .cursor-slider { display: none; width: 119px; position: fixed; left: 0; top: 0; pointer-events: none; z-index: 1000; } .cursor-slider.visible { display: block; } .cursor-slider.hide { display: none; } div.kalendercontainer { position: relative; top: 0px; } div.kalendercontainer div.kalender { width: 292px; background-color: var(--bgweb2-bg-color); border: 1px solid rgba(112,112,112,0.2); border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; } div.kalendercontainer div.kalender a.prev, div.kalendercontainer div.kalender a.prev:hover { left: 12px; top: 10px; width: 10px; height: 10px; border: none; border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; background: url(/images/design/icon-date-prev.png) no-repeat; background-size: contain; background-position: center center; } div.kalendercontainer div.kalender a.next, div.kalendercontainer div.kalender a.next:hover { right: 12px; top: 10px; width: 10px; height: 10px; border: none; border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; background: url(/images/design/icon-date-next.png) no-repeat; background-size: contain; background-position: center center; } div.kalendercontainer div.kalender a.next:hover, div.kalendercontainer div.kalender a.prev:hover { opacity: 0.7; filter: alpha(opacity = 70); } div.kalendercontainer div.kalender a.calendarclose { display: none; } div.kalendercontainer div.kalender div.kalenderbox { width: 100%; padding: 0px; } div.kalendercontainer div.kalender div.kalenderbox b { width: calc(100% - 2px); background: transparent; border: 0px; border-bottom: 1px solid rgba(112,112,112,0.2); color: var(--bgweb2-text-color); font-size: 18px; line-height: 30px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; border-radius: 0px; -webkit-border-radius: 0px; -khtml-border-radius: 0px; -moz-border-radius: 0px; } div.kalendercontainer div.kalender div.kalenderbox table { margin: 0px 0px 0px 0px; width: 100%; float: none; display: block; } div.kalendercontainer div.kalender div.kalenderbox table tbody { width: 100%; display: block; } div.kalendercontainer div.kalender div.kalenderbox table tr { width: 100%; display: block; display: flex; } div.kalendercontainer div.kalender div.kalenderbox table th { width: 41px; height: 45px; line-height: 45px; font-weight: bold; text-transform: uppercase; color: var(--bgweb2-text-color); } div.kalendercontainer div.kalender div.kalenderbox table td { display: block; width: 34px; margin: 4px; padding: 0px; } div.kalendercontainer div.kalender div.kalenderbox table td span { margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; margin: 0px; border: 1px solid rgba(80,40,30,0.2); color: var(--bgweb2-text-color); opacity: 0.5; filter: alpha(opacity=50); width: calc(100% - 2px); font-size: 15px; line-height: 30px; height: auto; } div.kalendercontainer div.kalender div.kalenderbox table td a { transition: all 500ms; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: none; margin: 0px; border: 1px solid rgba(80,40,30,0.2); color: var(--bgweb2-text-color); width: calc(100% - 2px); font-size: 15px; line-height: 30px; height: auto; } div.kalendercontainer div.kalender div.kalenderbox table td a:hover { background: var(--bgweb2-text-color); border: 1px solid rgba(80,40,30,0.2); color: var(--bgweb2-bg-color); } a.link-icon-left svg.icon-link-background { transform: scaleX(-1) !important; } a.link-icon-left svg.icon-link-arrow { transform: rotate(180deg) !important; top: 0px !important; } a.link-icon-left:hover svg.icon-link-arrow { animation: shiftLeft 1.3s linear infinite !important; } .no-mobile-device a.link-icon:hover svg.icon-link-arrow, .no-mobile-device a:hover .link-icon svg.icon-link-arrow, .no-mobile-device [data-element-linked="true"]:hover .link-icon svg.icon-link-arrow { animation: shiftRight 1.3s linear infinite; } } @keyframes shiftRight { 0% { right: 0px; } 50% { right: -15px; } 100% { right: 0px; } } @keyframes shiftLeft { 0% { left: 0px; } 50% { left: -15px; } 100% { left: 0px; } } @media (max-width: 1700px) { .module-intro { margin-bottom: calc(25px + (45 - 25) * ((100vw - 414px) / (1700 - 414))); } .standardspace { padding: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))) 0px; } .standardspace.TeaserT3 { padding-top: calc(60px + (100 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace.Hotels.ListT3 { padding: calc(60px + (100 - 60) * ((100vw - 414px) / (1700 - 414))) 0px; } .standardspace.bgweb2 + .standardspace:not(.bgweb2) { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace:not(.bgweb2) + .standardspace.bgweb2 { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace.bgweb2 + .standardspace.bgweb3 { padding-top: 0px; } .standardspace.bgweb3 + .standardspace.bgweb2 { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace:not(.bgweb2) + .standardspace.bgweb3 { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace.bgusp + .standardspace:not(.bgusp) { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .standardspace:not(.bgusp) + .standardspace.bgusp { padding-top: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))); } .page-logo { top: calc(100vh - 230px); width: calc(130px + (180 - 130) * ((100vw - 414px) / (1700 - 414))); } .page-logo.with-watchlist { top: calc(calc(100vh - 230px) - 100px); } .page-logo.inverted { top: calc(100vh - 270px); } .page-logo.inverted.with-watchlist { top: calc(calc(100vh - 270px) - 50px); } } @media (max-width: 1080px) { } @media (max-width: 620px) { .pagecontent .maincontent > *:first-child { padding-top: 170px; } .page-logo.with-watchlist { top: calc(calc(100vh - 230px) - 20px); } .page-logo.inverted { top: calc(100vh - 220px) } .page-logo.inverted.with-watchlist { top: calc(calc(100vh - 220px) - 20px); } .centercontentMagazineFotogallery { width: calc(100% - 40px); } } @media (max-width: 450px) { .centercontent .centercontentMagazine { max-width: 100%; } } /* __________________________________________________________________ End */ @media all { .Widget.CodeT1.issuu .inner-module { max-width: 1080px; } .Widget.CodeT1.issuu .inner-module .component { padding-top: 62%; position: relative; } .Widget.CodeT1.issuu .inner-module .component iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100% !important; } }/* VoucherTourismT1 */ @media all { .unitvoucher.requestthanks.default > * { max-width: 890px; } .unitvoucher.requestthanks.default, div.unitvoucher.request.default { padding: 160px 0px; position: relative; z-index: 1; } .unitvoucher.requestthanks.default, div.unitvoucher.request.default > div { margin-left: auto; margin-right: auto; max-width: 1360px; width: calc(374px + (1360 - 374) * ((100vw - 414px) / (1700 - 414))); } div.unitvoucher.request.default div.titel { border-color: var(--bgweb-border-color); } div.unitvoucher.request.default a { color: var(--default-link-text-color); font-weight: var(--default-link-font-weight); transition: color 500ms; } .no-mobile-device div.unitvoucher.request.default a:hover { color: var(--default-link-hover-text-color); opacity: 1; } div.unitvoucher.request.default a.senden { display: inline-block; background-color: var(--bgweb-button1-bg-color); color: var(--bgweb-button1-text-color); padding: 19px 40px; border-radius: var(--button-border-radius); border: var(--button-outline-width) solid var(--bgweb-button1-border-color); font-size: var(--default-link-font-size); line-height: 1em; font-family: var(--default-link-font-family); font-weight: var(--default-link-font-weight, normal); font-style: var(--default-link-font-style, normal); text-indent: var(--default-link-letter-spacing); letter-spacing: var(--default-link-letter-spacing); text-transform: var(--default-link-text-transform); transition: .5s ease; } .no-mobile-device div.unitvoucher.request.default a.senden:hover { background-color: var(--bgweb-button1-hover-bg-color); color: var(--bgweb-button1-hover-text-color); opacity: 1; } div.unitvoucher.request.default div.galleryContainer .arrow { width: 30px; height: 30px; } div.unitvoucher.request.default div.galleryContainer .arrow svg { fill: #CCCCCC; } body.unitvoucher.detail.default { font-family: 'Arial', sans-serif !important; } body.unitvoucher.detail.default div.unitvouchertemplate { background-color: #F5F4EF; font-size: 14px; line-height: 18px; color: #6B6B6D; } body.unitvoucher.detail.default div.unitvouchertemplate div.footer { background-color: #BFB8AC; background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 60px 60px; } body.unitvoucher.detail.default img { width: auto; } body.unitvoucher.detail.default div.unitvouchertemplate div.text { border-color: rgba(91,57,34,0.3); font-size: 16px; line-height: 24px; } body.unitvoucher.detail.default div.unitvouchertemplate div.text div { font-size: 14px; line-height: 18px; } body.unitvoucher.detail.default div.unitvouchertemplate img.logo { max-width: 150px; margin-bottom: 20px; } body.unitvoucher.detail.default div.unitvouchertemplate span.code { display: block; margin-bottom: 20px; } body.unitvoucher.detail.default div.unitvouchertemplate span.code span { display: block; font-size: 18px; line-height: 22px; } body.unitvoucher.detail.default div.unitvouchertemplate div.preis { font-size: 20px; line-height: 28px; font-weight: 300; } body.unitvoucher.detail.default div.unitvouchertemplate div.preis span { font-size: 28px; font-weight: 300; line-height: 34px; } body.unitvoucher.detail.default div.unitvouchertemplate div.duration { font-size: 12px; line-height: 14px; height: auto; margin: 0px; } body.unitvoucher.detail.default div.unitvouchertemplate > div.duration { padding: 0px 30px 10px 30px; margin: -20px 0px 0px 0px; } .unitvoucher.requestthanks.default, .unitvoucher.requestthanks.default h1 { font-size: 1.2em; line-height: 1.5em; } .unitvoucher.requestthanks.default h1 { font-weight: bold; font-size: 1.8em; line-height: 2.2em; } } @media (max-width: 1700px) { .unitvoucher.requestthanks.default, div.unitvoucher.request.default { padding: calc(60px + (160 - 60) * ((100vw - 414px) / (1700 - 414))) 0px; } } @media all { .Usp.UspT3 { padding-top: 110px; overflow: hidden; } .Usp.UspT3 .intro + .elements-container { margin-top: 30px; } .Usp.UspT3 .elements-container { position: relative; } .Usp.UspT3 .elements-container .decoration { position: absolute; z-index: 1; } .Usp.UspT3 .elements-container .decoration.decoration1 { left: -30px; top: 60%; transform: translateY(-60%);} .Usp.UspT3 .elements-container .decoration.decoration2 { left: 70%; top: -100px; transform: translateX(-70%);} .Usp.UspT3 .elements-container .decoration.deco-17-1 { width: 340px; height: 250px; } .Usp.UspT3 .elements-container .decoration.deco-18-1 { width: 140px; height: 230px; } .Usp.UspT3 .elements.owl-carousel .owl-stage-outer { overflow: visible; } .Usp.UspT3 .elements .element { position: relative; box-sizing: border-box; } .Usp.UspT3 .elements .element.type-2 { margin-top: 50px; } .Usp.UspT3 .elements .element .inner-element { width: 100%; height: 100%; position: relative; } .Usp.UspT3 .elements .element .inner-element .picture:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Usp.UspT3 .elements .element .inner-element .picture:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Usp.UspT3 .elements .element .background img { width: 100% !important; height: auto; } .Usp.UspT3 .elements .element .linkbox { position: absolute; bottom: -2px; left: 30px; z-index: 1; } .Usp.UspT3 .elements .element.bgweb2 a { color: #404041; font-weight: bold; } .Usp.UspT3 .elements .element .linkbox a { color: #404041; font-weight: bold; padding: 0px 5px; } .Usp.UspT3 .elements .element .linkbox a.fakelink { pointer-events: none; } .Usp.UspT3 .elements .element a:hover { opacity: .8; } .Usp.UspT3 .elements .element .linkbox + .text { bottom: 45px; } .Usp.UspT3 .elements .element .text { position: absolute; left: 30px; bottom: 30px; padding-right: 20px; z-index: 2; } .Usp.UspT3 .elements .element .text .fact { font-size: 72px; line-height: 84px; text-transform: inherit; } .Usp.UspT3 .elements .element .text .introduction { color: #404041; } .Usp.UspT3 .elements .element.template-fact .background:after { z-index: 1; content: ''; display: block; position: absolute; bottom: -110px; left: 50%; transform: translateX(-50%); width: 270px; height: 180px; background-image: url('/images/design/patterns/white-dots_lines.png'); background-repeat: no-repeat; background-size: cover; clip-path: inset(0 0px 110px 0); } .Usp.UspT3 .elements .element.template-fact .text { top: 40px; bottom: auto; } .Usp.UspT3 .elements .element.template-icon .background:before { z-index: 1; content: ''; display: block; position: absolute; top: -30px; right: -30px; width: 230px; height: 250px; background-image: url('/images/design/patterns/white-dots.png'); background-repeat: no-repeat; background-size: cover; } .Usp.UspT3 .elements .element.template-icon .text { width: 100%; height: fit-content; padding: 0px; top: 50%; left: 50%; transform: translate(-50%, -50%); bottom: auto; text-align: center; } .Usp.UspT3 .elements .element.template-icon .text .icon { max-width: 230px; width: 50%; margin: 0 auto; } .Usp.UspT3 .elements .element.template-icon .text .icon + * { margin-top: 20px; } .Usp.UspT3 .elements .element.template-icon .text .introduction { padding: 0px 30px; } .Usp.UspT3 .elements .element.template-icon .linkbox { left: 50%; transform: translateX(-50%); } .Usp.UspT3 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; width: 100%; } .Usp.UspT3 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Usp.UspT3 .swipe-icon svg + div { margin-top: 5px; } } @media (max-width: 1700px) { .Usp.UspT3 { padding-top: calc(55px + (110 - 55) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .intro + .elements-container { margin-top: calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements-container .decoration.decoration1 { left: calc(-20px + (-30 - -20) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements-container .decoration.decoration2 { top: calc(0px + (-100 - 0) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements-container .decoration.deco-17-1 { width: calc(270px + (340 - 270) * ((100vw - 414px) / (1700 - 414))); height: calc(200px + (250 - 200) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements-container .decoration.deco-18-1 { width: calc(120px + (140 - 120) * ((100vw - 414px) / (1700 - 414))); height: calc(200px + (230 - 200) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element.type-2 { margin-top: calc(30px + (50 - 30) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element .linkbox { left: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element .linkbox + .text { bottom: calc(30px + (45 - 30) * ((100vw - 414px) / (1700 - 414))) } .Usp.UspT3 .elements .element .text { left: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); bottom: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element .text .fact { font-size: calc(52px + (72 - 52) * ((100vw - 414px) / (1700 - 414))); line-height: calc(64px + (84 - 64) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element.template-fact .background:after { bottom: calc(-70px + (-110 - -70) * ((100vw - 414px) / (1700 - 414))); width: calc(75px + (270 - 75) * ((100vw - 414px) / (1700 - 414))); height: calc(50px + (180 - 50) * ((100vw - 414px) / (1700 - 414))); clip-path: inset(0 0px calc(70px + (110 - 70) * ((100vw - 414px) / (1700 - 414))) 0); } .Usp.UspT3 .elements .element.template-fact .text { top: calc(0px + (40 - 0) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element.template-icon .background:after { top: calc(-80px + (-30 - -80) * ((100vw - 414px) / (1700 - 414))); right: calc(-80px + (-30 - -80) * ((100vw - 414px) / (1700 - 414))); width: calc(100px + (230 - 100) * ((100vw - 414px) / (1700 - 414))); height: calc(110px + (250 - 110) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element.template-icon .text .icon + * { margin-top: calc(-20px + (20 - -20) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT3 .elements .element.template-icon .text .introduction { padding: 0px calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1200px) { .Usp.UspT3 .elements-container .decoration.decoration2 { left: 90%; transform: translateX(-90%); } .Usp.UspT3 .elements .element.template-fact .text { top: 3.488372%; } .Usp.UspT3 .elements .element.template-fact .background:after { bottom: -27.906977%; width: 62.790698%; height: 41.860465%; clip-path: inset(0 0px 66% 0); } .Usp.UspT3 .elements .element.template-icon .background:before { top: -6.976744%; right: -6.976744%; width: 58.139535%; height: 44.186047%; } .Usp.UspT3 .elements .element.template-icon .text .icon + * { margin-top: 3.488372%; } } @media (max-width: 800px) and (min-width: 701px) { .Usp.UspT3 .elements .element.template-icon .text .icon { width: 40%; } } @media (min-width: 801px) { .Usp.UspT3 .elements .element .text .headline + .subheadline { margin-top: 5px; } .Usp.UspT3 .swipe-icon { display: none; } } @media all { .Usp.UspT2 { padding-top: 110px; overflow: hidden; } .Usp.UspT2 .intro + .elements-container { margin-top: 30px; } .Usp.UspT2 .elements.owl-carousel .owl-stage-outer { overflow: visible; } .Usp.UspT2.big .elements .element { width: 603px; position: relative; padding-right: 40px; box-sizing: border-box;} .Usp.UspT2.offset .elements .owl-item:nth-child(2n) .element { margin-top: 210px; } .Usp.UspT2.offset.big .elements .owl-item:nth-child(2n) .element { margin-top: 270px; } .Usp.UspT2 .elements .element { position: relative; box-sizing: border-box; } .Usp.UspT2 .elements .element.type-2 { margin-top: 50px; } .Usp.UspT2 .elements .element .inner-element { width: 100%; height: 100%; position: relative; } .Usp.UspT2 .elements .element .inner-element:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Usp.UspT2 .elements .element .inner-element:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 50%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Usp.UspT2 .elements .element .text { position: absolute; left: 30px; bottom: 30px; padding-right: 20px; z-index: 2; } .Usp.UspT2 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; width: 100%; } .Usp.UspT2 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Usp.UspT2 .swipe-icon svg + div { margin-top: 5px; } } @media (max-width: 1700px) { .Usp.UspT2 { padding-top: calc(55px + (110 - 55) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT2 .intro + .elements-container { margin-top: calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT2.offset .elements .owl-item:nth-child(2n) .element { margin-top: calc(55px + (210 - 55) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT2.offset.big .elements .owl-item:nth-child(2n) .element { margin-top: calc(55px + (270 - 55) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT2 .elements .element.type-2 { margin-top: calc(30px + (50 - 30) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT2 .elements .element .text { left: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); bottom: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Usp.UspT2.big .elements .element { width: 553px; padding-right: 30px; } } @media (min-width: 801px) { .Usp.UspT2 .elements .element .text .headline + .subheadline { margin-top: 5px; } .Usp.UspT2 .swipe-icon { display: none; } } @media (max-width: 600px) { .Usp.UspT2.big .elements .element { width: 503px; padding-right: 20px; } } @media (max-width: 500px) { .Usp.UspT2.big .elements .element { width: 313px; } } @media all { .Usp.UspT1 .top { padding: 140px 0px; } .Usp.UspT1.image-count-1 .top, .Usp.UspT1.image-count-2 .top { padding-bottom: 460px; } .Usp.UspT1 .top .intro { max-width: 960px; } .Usp.UspT1 .top .intro .subheadline { margin-top: 10px; } .Usp.UspT1 .top .intro .introduction { margin-top: 40px; } .Usp.UspT1 .top .intro .linkbox { margin-top: 20px; } .Usp.UspT1 .top .intro .linkbox { display: flex; align-items: flex-start; flex-direction: column; } .Usp.UspT1 .top .intro .linkbox a + a { margin-top: 5px; } .Usp.UspT1 .top .content { margin: 0px -50px; } .Usp.UspT1 .top .content .content-blocks { display: flex; justify-content: flex-start; flex-wrap: wrap; } .Usp.UspT1 .top .content .content-blocks .content-block { width: 100%; padding: 50px 50px 0px 50px; box-sizing: border-box; } .Usp.UspT1.content-count-2 .top .content .content-blocks .content-block { width: 50%; } .Usp.UspT1.content-count-3 .top .content .content-blocks .content-block { width: 33.333333%; } .Usp.UspT1 .top .content .content-blocks .content-block .content-headline { margin-bottom: 10px; } .Usp.UspT1 .top .content .content-blocks .content-block ul li:first-child { margin-top: 0px; } .Usp.UspT1 .bottom { margin-top: -380px; padding-bottom: 140px; } .Usp.UspT1 .bottom .images .image { position: relative; height: fit-content; } .Usp.UspT1 .bottom .images .image .play-button { position: absolute; z-index: 4; top: 50%; left: 50%; max-width: 350px; max-height: 350px; width: 70%; height: 70%; transform: translate(-50%, -50%); background-image: url('/images/design/video-play.png'); background-position: center center; background-repeat: no-repeat; background-size: contain; } .Usp.UspT1.image-count-2 .bottom .images { display: flex; justify-content: space-between; } .Usp.UspT1.image-count-2 .bottom .images .image1 { width: calc((100% - 30px) / 2); } .Usp.UspT1.image-count-2 .bottom .images .image2 { margin-top: 140px; width: calc((100% - 30px) / 2); } .Usp.UspT1.decoration .top { position: relative; } .Usp.UspT1.decoration .top > div { position: relative; z-index: 2; } .Usp.UspT1.decoration .top:before { content: ''; position: absolute; bottom: 20px; right: 0px; width: 260px; height: 405px; background-size: contain; background-position: right bottom; background-repeat: no-repeat; background-image: url('/images/design/decorations/deco-11-1.png'); } .Usp.UspT1.decoration.deco-11-2 .top:before { background-image: url('/images/design/decorations/deco-11-2.png'); background-position: right top; bottom: 120px; } .Usp.UspT1.decoration.deco-11-3 .top:before { background-image: url('/images/design/decorations/deco-11-3.png'); background-position: right top; bottom: 80px; } } @media (max-width: 1700px) { .Usp.UspT1 .top { padding: calc(60px + (140 - 60) * ((100vw - 414px) / (1700 - 414))) 0px; } .Usp.UspT1.image-count-1 .top, .Usp.UspT1.image-count-2 .top { padding-bottom: calc(150px + (460 - 150) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1 .top .intro .introduction { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1 .top .content { margin: 0px calc(-1 * (10px + (50 - 10) * ((100vw - 414px) / (1700 - 414)))); } .Usp.UspT1 .top .content .content-blocks .content-block { width: 100%; padding: calc(30px + (50 - 30) * ((100vw - 414px) / (1700 - 414)))calc(10px + (50 - 10) * ((100vw - 414px) / (1700 - 414))) 0px calc(10px + (50 - 10) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.content-count-2 .top .content .content-blocks .content-block { width: 50%; } .Usp.UspT1.content-count-3 .top .content .content-blocks .content-block { width: 33.333333%; } .Usp.UspT1 .bottom { margin-top: calc(-1 * (110px + (380 - 110) * ((100vw - 414px) / (1700 - 414)))); padding-bottom: calc(60px + (140 - 60) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.image-count-2 .bottom .images .image1, .Usp.UspT1.image-count-2 .bottom .images .image2 { width: calc(182px + (665 - 182) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.image-count-2 .bottom .images .image2 { margin-top: calc(60px + (140 - 60) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.decoration .top:before { width: calc(180px + (260 - 180) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.decoration.deco-11-2 .top:before { bottom: calc(20px + (120 - 20) * ((100vw - 414px) / (1700 - 414))); } .Usp.UspT1.decoration.deco-11-3 .top:before { bottom: calc(20px + (80 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1080px) { .Usp.UspT1.decoration .top:before { display: none; } } @media (max-width: 860px) { .Usp.UspT1.content-count-2 .top .content .content-blocks .content-block, .Usp.UspT1.content-count-3 .top .content .content-blocks .content-block { width: 50%; } } @media (max-width: 540px) { .Usp.UspT1.content-count-2 .top .content .content-blocks .content-block, .Usp.UspT1.content-count-3 .top .content .content-blocks .content-block { width: 100%; } .Usp.UspT1.image-count-2 .bottom .images .image1 { width: 100%; } .Usp.UspT1.image-count-2 .bottom .images .image2 { display: none; } }/* Usercentrics Box */ @media all { .usercentrics-alertbox { width: 100%; position: absolute; top: 0px; left: 0px; text-align: center; z-index: 2; } } @media all { .Themestage.ThemestageT2 { position: relative; } .Themestage.ThemestageT2 .elements { position: relative; } .Themestage.ThemestageT2 .elements picture img { object-fit: cover; } .Themestage.ThemestageT2 .elements:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Themestage.ThemestageT2 .elements:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%); background: linear-gradient(to top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 30%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Themestage.ThemestageT2 .element { overflow: hidden; } .Themestage.ThemestageT2 .inner-module { width: 100vw; } .Themestage.ThemestageT2 .element { overflow: hidden; } .Themestage.ThemestageT2 .element .inner-element { position: relative; } .Themestage.ThemestageT2 .element .inner-element .image { height: calc(70vh - var(--statusbar-height, 0px)); overflow: hidden; } .Themestage.ThemestageT2 .owl-dots { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); z-index: 2; } .moduleInstancePreview .Themestage.ThemestageT2 .element .inner-element .image { height: 700px; } .Themestage.ThemestageT2 .component.form { transform: translateX(-50%); bottom: 70px; left: 50%; position: absolute; z-index: 2; } .Themestage.ThemestageT2 .component.form form .innerForm { -webkit-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); } .Themestage.ThemestageT2 .component.form form .form-row { position: relative; display: flex; justify-content: flex-start; align-items: center; border: 1px solid #ffffff; } .Themestage.ThemestageT2 .component.form form .form-row > * { display: none; width: 33.333333%; box-sizing: border-box; } .Themestage.ThemestageT2 .component.form form .form-row .gradient { display: block; position: absolute; height: 180%; width: 120%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; } .Themestage.ThemestageT2 .component.form form .form-row.hotel { border-bottom: 1px solid rgba(112,112,112,0.2); } .Themestage.ThemestageT2 .component.form form .form-row > a.senden, .Themestage.ThemestageT2 .component.form form .form-row > div.row.input, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar { display: block; } .Themestage.ThemestageT2 .component.form form .form-row > a.senden { z-index: 1; max-width: fit-content; padding-right: 15px; padding-left: 15px; display: flex; align-items: center; justify-content: center; margin-right: 10px; white-space: nowrap; } .Themestage.ThemestageT2 .component.form form .form-row > a.senden span { display: none; } .Themestage.ThemestageT2 .component.form form .form-row > a.senden span.mitte { display: block; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar { position: relative; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input > .clear, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select > .clear, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar > .clear { display: none; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input label, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select label, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar label { display: none; font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input input, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar input { background-color: transparent; height: 78px; padding: 16px 16px 16px 40px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.1em; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input div.inputfield, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield, .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar div.calendarfield { width: 100%; margin: 0px; padding: 0px; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.input div.inputfield:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 16px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-white-arrow-down2.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield { height: 78px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field { background-color: transparent; height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.1em; margin: 0px; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.select { bottom: 24px; padding: 16px 16px 16px 25px; margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field select { cursor: pointer; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 16px; top: calc(50% - 6.5px); right: 65px; background-image: url('/images/design/icon-white-arrow-down2.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon:after, .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; z-index: 7; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { width: 21px; height: 21px; margin: 0px; position: absolute; top: calc(50% - 10px); right: 16px; fill: #FFFFFF; } .Themestage.ThemestageT2 .component.form.fixed { position: fixed; bottom: 0px; width: 100%; background-color: var(--bgweb2-bg-color,#FFFFFF); -webkit-box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); } .Themestage.ThemestageT2 .component.form.fixed .centercontent { } .Themestage.ThemestageT2 .component.form.fixed form .innerForm { box-shadow: none !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row { background-color: var(--bgweb2-bg-color,#FFFFFF); color: #404041 !important; border: none !important } .Themestage.ThemestageT2 .component.form.fixed form .form-row .kalendercontainer { bottom: 400px !important; top: auto !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row input, .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.select div.selectfield span.field { color: #8D8D8D !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.select div.selectfield span.field span.selecticon { background-image: url('/images/design/icon-grey-arrow-down2.png'); } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.arrival, .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.departure { border-right: 1px solid rgba(112,112,112,0.2) !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row svg { fill: #8D8D8D !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row .gradient { display: none; } } @media (max-width: 1700px) { .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { right: calc(-20px + (65 - -20) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1081px) { .Themestage.ThemestageT2 .component.form form .form-row > div.row.arrival, .Themestage.ThemestageT2 .component.form form .form-row > div.row.departure { border-right: 1px solid rgba(255,255,255,0.5); } } @media (max-width: 1080px) { .Themestage.ThemestageT2 .component.form { } .Themestage.ThemestageT2 .component.form form .form-row { flex-wrap: wrap; } .Themestage.ThemestageT2 .component.form form .form-row > * { width: 50%; } .Themestage.ThemestageT2 .component.form form .form-row .gradient { height: 120%; } .Themestage.ThemestageT2 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { right: 16px; } .Themestage.ThemestageT2 .component.form form .form-row > a.senden { margin: 0 auto; } .Themestage.ThemestageT2 .component.form.fixed form .form-row { border: 0 !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.arrival { border-bottom: 1px solid rgba(112,112,112,0.2) !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.departure { border-bottom: 1px solid rgba(112,112,112,0.2) !important; border-right: none !important; } .Themestage.ThemestageT2 .component.form.fixed form .form-row > div.row.adults { border-right: 1px solid rgba(112,112,112,0.2)!important } } @media (max-width: 1080px) and (min-width: 621px) { .Themestage.ThemestageT2 .component.form form .form-row > div.row.arrival { border-right: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); } .Themestage.ThemestageT2 .component.form form .form-row > div.row.departure { border-bottom: 1px solid rgba(255,255,255,0.5); } .Themestage.ThemestageT2 .component.form form .form-row > div.row.adults { border-right: 1px solid rgba(255,255,255,0.5); } } @media (max-width: 620px) { .Themestage.ThemestageT2 .component.form { display: none; } .Themestage.ThemestageT2 .component.form form .form-row .row:nth-child(n + 2) { border-top: 0px solid rgba(255,255,255,0.5); } } @media all { .Themestage.ThemestageT1 { position: relative; } .Themestage.ThemestageT1 .element { overflow: hidden; } .Themestage.ThemestageT1 .inner-module { width: 100vw; } .Themestage.ThemestageT1 .element { overflow: hidden; } .Themestage.ThemestageT1 .element .inner-element { position: relative; } .Themestage.ThemestageT1 .element .inner-element .image { height: 100vh; height: calc(100vh - var(--statusbar-height, 0px)); overflow: hidden; transition: height 500ms; } .Themestage.ThemestageT1.with-searchbar .element .inner-element .image { height: calc(100vh + 39px); height: calc(100vh + 39px - var(--statusbar-height, 0px)); } .Themestage.ThemestageT1 .element .inner-element .textbox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 100px 0px; text-align: center; max-width: 1360px; width: calc(374px + (1360 - 374) * ((100vw - 414px) / (1700 - 414))); box-sizing: border-box; } .Themestage.ThemestageT1 .element .inner-element .textbox .gradient { position: absolute; z-index: 1; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 120%; height: 120%; opacity: .4; } .Themestage.ThemestageT1 .element .inner-element .textbox .inner-textbox { position: relative; z-index: 2; } .Themestage.ThemestageT1 .element .inner-element .textbox .inner-textbox .link-icon { left: 50%; transform: translateX(-50%); width: 46px; height: 43px; display: block; position: relative; margin-top: 15px; } .Themestage.ThemestageT1 .element .inner-element .textbox .inner-textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Themestage.ThemestageT1 .element .inner-element .textbox .inner-textbox a.text { display: inline-block; padding-right: 56px; position: relative; } .Themestage.ThemestageT1 .element .owl-dots { position: relative; justify-content: center; z-index: 100; top: 160px; margin-bottom: 15px; } .Themestage.ThemestageT1 .component.form { transform: translateX(-50%); bottom: 70px; left: 50%; position: absolute; z-index: 2; } .Themestage.ThemestageT1 .component.form form .innerForm { -webkit-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); } .Themestage.ThemestageT1 .component.form form .form-row { position: relative; display: flex; justify-content: flex-start; align-items: center; border: 1px solid #ffffff; } .Themestage.ThemestageT1 .component.form form .form-row > * { display: none; width: 33.333333%; box-sizing: border-box; } .Themestage.ThemestageT1 .component.form form .form-row .gradient { display: block; position: absolute; height: 180%; width: 120%; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; } .Themestage.ThemestageT1 .component.form form .form-row.hotel { border-bottom: 1px solid rgba(112,112,112,0.2); } .Themestage.ThemestageT1 .component.form form .form-row > a.senden, .Themestage.ThemestageT1 .component.form form .form-row > div.row.input, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar { display: block; } .Themestage.ThemestageT1 .component.form form .form-row > a.senden { z-index: 1; max-width: fit-content; padding-right: 15px; padding-left: 15px; display: flex; align-items: center; justify-content: center; margin-right: 10px; white-space: nowrap; } .Themestage.ThemestageT1 .component.form form .form-row > a.senden span { display: none; } .Themestage.ThemestageT1 .component.form form .form-row > a.senden span.mitte { display: block; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar { position: relative; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input > .clear, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select > .clear, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar > .clear { display: none; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input label, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select label, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar label { display: none; font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input input, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar input { background-color: transparent; height: 78px; padding: 16px 16px 16px 40px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.1em; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input div.inputfield, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield, .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar div.calendarfield { width: 100%; margin: 0px; padding: 0px; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.input div.inputfield:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 16px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-white-arrow-down2.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield { height: 78px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field { background-color: transparent; height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #FFFFFF; letter-spacing: 0.1em; margin: 0px; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.select { bottom: 24px; padding: 16px 16px 16px 25px; margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field select { cursor: pointer; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 16px; top: calc(50% - 6.5px); right: 65px; background-image: url('/images/design/icon-white-arrow-down2.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon:after, .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Themestage.ThemestageT1 .component.form form .form-row .kalendercontainer { bottom: 400px !important; top: auto !important; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; z-index: 7; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { width: 21px; height: 21px; margin: 0px; position: absolute; top: calc(50% - 10px); right: 16px; fill: #FFFFFF; } .moduleInstancePreview .Themestage.ThemestageT1 .element .inner-element .image { height: 900px; } .Themestage.ThemestageT1 .component.form.fixed { position: fixed; bottom: 0px; width: 100%; background-color: var(--bgweb2-bg-color,#FFFFFF); -webkit-box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 10px 2px rgba(112,112,112,0.2); } .Themestage.ThemestageT1 .component.form.fixed .centercontent { } .Themestage.ThemestageT1 .component.form.fixed form .innerForm { box-shadow: none !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row { background-color: var(--bgweb2-bg-color,#FFFFFF); color: #404041 !important; border: none !important } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row input, .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.select div.selectfield span.field { color: #8D8D8D !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.select div.selectfield span.field span.selecticon { background-image: url('/images/design/icon-grey-arrow-down2.png'); } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.arrival, .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.departure { border-right: 1px solid rgba(112,112,112,0.2) !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row svg { fill: #8D8D8D !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row .gradient { display: none; } } @media (max-width: 1700px) { .Themestage.ThemestageT1 .element .inner-element .textbox { padding: calc(30px + (100 - 30) * ((100vw - 414px) / (1700 - 414)))calc(30px + (170 - 30) * ((100vw - 414px) / (1700 - 414))); } .Themestage.ThemestageT1 .element .inner-element .textbox .inner-textbox .link-icon { width: calc(41px + (46 - 41) * ((100vw - 414px) / (1700 - 414))); height: calc(35px + (43 - 35) * ((100vw - 414px) / (1700 - 414))); } .Themestage.ThemestageT1 .element .owl-dots { top: calc(50px + (160 - 50) * ((100vw - 414px) / (1700 - 414))); } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { right: calc(-20px + (65 - -20) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1081px) { .Themestage.ThemestageT1 .component.form form .form-row > div.row.arrival, .Themestage.ThemestageT1 .component.form form .form-row > div.row.departure { border-right: 1px solid rgba(255,255,255,0.5); } } @media (max-width: 1080px) { .Themestage.ThemestageT1 .component.form { } .Themestage.ThemestageT1 .component.form form .form-row { flex-wrap: wrap; } .Themestage.ThemestageT1 .component.form form .form-row > * { width: 50%; } .Themestage.ThemestageT1 .component.form form .form-row .gradient { height: 120%; } .Themestage.ThemestageT1 .component.form form .form-row > div.row.select div.selectfield span.field span.selecticon { right: 16px; } .Themestage.ThemestageT1 .component.form form .form-row > a.senden { margin: 0 auto; } .Themestage.ThemestageT1 .component.form.fixed form .form-row { border: 0 !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.arrival { border-bottom: 1px solid rgba(112,112,112,0.2) !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.departure { border-bottom: 1px solid rgba(112,112,112,0.2) !important; border-right: none !important; } .Themestage.ThemestageT1 .component.form.fixed form .form-row > div.row.adults { border-right: 1px solid rgba(112,112,112,0.2)!important } } @media (max-width: 1080px) and (min-width: 621px) { .Themestage.ThemestageT1 .component.form form .form-row > div.row.arrival { border-right: 1px solid rgba(255,255,255,0.5); border-bottom: 1px solid rgba(255,255,255,0.5); } .Themestage.ThemestageT1 .component.form form .form-row > div.row.departure { border-bottom: 1px solid rgba(255,255,255,0.5); } .Themestage.ThemestageT1 .component.form form .form-row > div.row.adults { border-right: 1px solid rgba(255,255,255,0.5); } } @media (max-width: 620px) { .Themestage.ThemestageT1 .component.form { display: none; } .Themestage.ThemestageT1 .component.form form .form-row .row:nth-child(n + 2) { border-top: 0px solid rgba(255,255,255,0.5); } .Themestage.ThemestageT1 .element .inner-element .image, .Themestage.ThemestageT1.with-searchbar .element .inner-element .image { height: calc(100vh - var(--statusbar-height, 0) - 60px); } } @media all { .Teaser.TeaserT9 { } .Teaser.TeaserT9 .element .inner-element { position: relative; } .Teaser.TeaserT9 .element .inner-element .textbox { position: relative; top: 0px; left: 0px; height: 100%; padding: 50px 80px 50px 240px; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; } .Teaser.TeaserT9:not(.decoration) .element .inner-element .textbox { padding-left: 80px; } .no-mobile-device .Teaser.TeaserT9 .element .inner-element .textbox:hover { opacity: 0.7; } .Teaser.TeaserT9 .element .inner-element .textbox a.absolute-link { position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 3; } .Teaser.TeaserT9 .element .inner-element .textbox .inner-textbox { z-index: 2; position: relative; transition: opacity 500ms; } .Teaser.TeaserT9 .element .inner-element .textbox .link-icon { width: 46px; height: 43px; display: block; position: relative; margin-left: 15px; } .Teaser.TeaserT9 .element .inner-element .textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bgweb2-form-text-color); } .Teaser.TeaserT9.decoration.decoration-1 .inner-element:before { content: ''; z-index: 5; position: absolute; left: -60px; top: -85px; width: 250px; height: 290px; background-image: url('/images/design/decorations/deco-14-1.png'); background-size: contain; background-position: right top; background-repeat: no-repeat; } } @media (max-width: 1700px) { .Teaser.TeaserT9 .element .inner-element .textbox { padding: calc(15px + (50 - 15) * ((100vw - 414px) / (1700 - 414)))calc(10px + (80 - 10) * ((100vw - 414px) / (1700 - 414)))calc(15px + (50 - 15) * ((100vw - 414px) / (1700 - 414)))calc(55px + (240 - 55) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT9:not(.decoration) .element .inner-element .textbox { padding-left: calc(10px + (80 - 10) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT9 .element .inner-element .textbox .link-icon { width: calc(41px + (46 - 41) * ((100vw - 414px) / (1700 - 414))); height: calc(35px + (43 - 35) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT9.decoration.decoration-1 .inner-element:before { width: calc(80px + (250 - 80) * ((100vw - 414px) / (1700 - 414))); height: calc(92px + (290 - 92) * ((100vw - 414px) / (1700 - 414))); left: calc(-25px + (-60 - -25) * ((100vw - 414px) / (1700 - 414))); top: calc(-30px + (-85 - -30) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Teaser.TeaserT9 .element .inner-element .textbox .inner-textbox a span.text { display: none; } } @media (max-width: 620px) { .Teaser.TeaserT9 .element .inner-element .textbox { flex-direction: column; align-items: baseline; padding: calc(100px + (200 - 100) * ((100vw - 414px) / (1700 - 414)))calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414)))calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414)))calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT9:not(.decoration) .element .inner-element .textbox { padding: calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT9 .element .inner-element .textbox .link-icon { margin-left: 0; margin-top: 10px; } .Teaser.TeaserT9.decoration.decoration-1 .inner-element:before { width: calc(125px + (250 - 125) * ((100vw - 414px) / (1700 - 414))); height: calc(145px + (290 - 145) * ((100vw - 414px) / (1700 - 414))); left: calc(-20px + (-50 - -20) * ((100vw - 414px) / (1700 - 414))); top: calc(-45px + (-85 - -45) * ((100vw - 414px) / (1700 - 414))); } } @media all { .Teaser.TeaserT8 { overflow: hidden; } .Teaser.TeaserT8 .elements-container { position: relative; } .Teaser.TeaserT8 .elements-container:before { content: ''; z-index: 2; position: absolute; right: 0px; top: 0px; width: 410px; height: 160px; background-image: url('/images/design/decorations/deco-1-1.png'); background-size: contain; background-position: right top; background-repeat: no-repeat; } .Teaser.TeaserT8 .elements-container:before { width: 280px; height: 400px; background-image: url('/images/design/decorations/deco-2-1.png'); } .Teaser.TeaserT8 .element .inner-element { position: relative; overflow: hidden; } .Teaser.TeaserT8 .element .inner-element .image { position: relative; } .Teaser.TeaserT8 .element .inner-element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Teaser.TeaserT8 .element .inner-element .image:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(to top,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Teaser.TeaserT8 .element .inner-element .textbox { position: absolute; top: 0px; left: 0px; height: 100%; padding: 100px 170px; display: flex; align-items: center; box-sizing: border-box; } .Teaser.TeaserT8 .element .inner-element .textbox .gradient { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; opacity: .5; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox { max-width: 640px; z-index: 2; position: relative; transition: opacity 500ms; } .no-mobile-device .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox:hover { opacity: 0.7; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox > a.element-link { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .pre-headline { margin-bottom: 5px; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .link-icon { width: 46px; height: 43px; display: block; position: relative; margin-top: 15px; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox a.text { display: inline-block; padding-right: 56px; position: relative; } } @media (max-width: 1700px) { .Teaser.TeaserT8 .elements-container:before { width: calc(150px + (280 - 150) * ((100vw - 414px) / (1700 - 414))); height: calc(200px + (400 - 200) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT8 .element .inner-element .textbox { padding: calc(25px + (100 - 25) * ((100vw - 414px) / (1700 - 414)))calc(20px + (170 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .link-icon { width: calc(41px + (46 - 41) * ((100vw - 414px) / (1700 - 414))); height: calc(35px + (43 - 35) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1025px) { .Teaser.TeaserT8 .owl-dots { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); display: flex; justify-content: center; } .Teaser.TeaserT8 .owl-dots .owl-dot { position: relative; bottom: 0px; transition: 1s; } .Teaser.TeaserT8 .owl-dots .owl-dot.active { bottom: 20px; opacity: .7; } .Teaser.TeaserT8 .owl-dots .owl-dot + .owl-dot { margin-left: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT8 .owl-dots .owl-dot:after { content: ''; position: absolute; top: calc(100% + 30px); left: 50%; transform: translateX(-50%); height: 60px; width: 2px; background: #ffffff; transition: 1s; } .Teaser.TeaserT8 .owl-dots .owl-dot.active:after { top: calc(100% + 10px); } } @media (max-width: 1024px) { .Teaser.TeaserT8 .element .inner-element .textbox { position: relative; padding-bottom: 0px; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox > a.element-link { display: none; } .Teaser.TeaserT8 .element .inner-element .textbox .gradient { width: 0px; height: 0px; display: none; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .link-icon svg + svg { stroke: var(--bgweb-link-icon-color); } } @media (min-width: 601px) { .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .headline.headline-mobile { display: none; } } @media (max-width: 600px) { /* .Teaser.TeaserT8 .elements-container:before { display: none; } */ .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .headline.headline-mobile + .headline { display: none; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox .subheadline { display: none; } .Teaser.TeaserT8 .element .inner-element .textbox .inner-textbox a.text span.text { display: none; } } @media all { .bgweb2 + .Teaser.TeaserT7 { margin-top: -70px; } .Teaser.TeaserT7 .bg2 { height: 25%; } .Teaser.TeaserT7 .elements-container { margin: 0px -30px; } .Teaser.TeaserT7 .elements-container .elements { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; } .Teaser.TeaserT7 .elements-container .elements .element { width: 50%; box-sizing: border-box; padding: 0px 30px; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element { position: relative; overflow: hidden; } .Teaser.TeaserT7 .elements-container .elements .element.video-element .inner-element { cursor: pointer; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(1) { width: 41.549296%; padding: 0px 30px 0px 110px; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(1) .inner-element { padding-top: 154.444444%; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(2) { width: 58.450704%; padding: 150px 30px 0px 30px; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(2) .inner-element { padding-top: 70.779221%; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(3) { width: 52.112676%; margin-top: 60px; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(3) .inner-element { padding-top: 100%; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(4) { width: 47.887324%; padding: 0px 110px 0px 30px; margin-top: 60px; } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(4) .inner-element { padding-top: 100%; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element > div { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element .video { z-index: 1; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element .image { z-index: 2; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element .textbox { z-index: 3; padding: 20px; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element .play-button { z-index: 4; top: 50%; left: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); background-image: url('/images/design/video-play.png'); background-position: center center; background-repeat: no-repeat; background-size: contain; } .Teaser.TeaserT7 .elements-container .elements .element .inner-element .video video { object-fit: cover; width: 100%; height: 100%; } } @media (max-width: 1700px) { .bgweb2 + .Teaser.TeaserT7 { margin-top: calc(-1 * (30px + (70 - 30) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT7 .elements-container { margin: 0px calc(-1 * (10px + (30 - 10) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT7 .elements-container .elements .element { padding: 0px calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(1) { width: 41.549296%; padding: 0px calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))) 0px calc(30px + (110 - 30) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(2) { width: 58.450704%; padding: calc(40px + (150 - 40) * ((100vw - 414px) / (1700 - 414)))calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))) 0px calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(3) { width: 52.112676%; margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(4) { width: 47.887324%; padding: 0px calc(30px + (110 - 30) * ((100vw - 414px) / (1700 - 414))) 0px calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 720px) { .Teaser.TeaserT7 .elements-container { margin: 0px; } .Teaser.TeaserT7 .elements-container .elements .element, .Teaser.TeaserT7 .elements-container .elements .element:nth-child(1), .Teaser.TeaserT7 .elements-container .elements .element:nth-child(2), .Teaser.TeaserT7 .elements-container .elements .element:nth-child(3), .Teaser.TeaserT7 .elements-container .elements .element:nth-child(4) { width: 100%; padding: 0px; margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT7 .elements-container .elements .element:nth-child(1) { margin-top: 0px; } } @media all { .Teaser.TeaserT6 .elements-container { margin: 0px -30px; } .Teaser.TeaserT6 .elements-container .elements { display: flex; justify-content: flex-start; align-items: flex-end; } .Teaser.TeaserT6 .elements-container .elements .element { width: 57.042254%; padding: 0px 30px; box-sizing: border-box; } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 1) { padding-bottom: 100px; } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 2) { width: 42.957746%; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element { position: relative; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element > a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 2; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element .image { position: relative; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element .image:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 240px; height: 200px; background-image: url('/images/design/decorations/deco-3-1.png'); background-position: left bottom; background-size: contain; background-repeat: no-repeat; z-index: 1; } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 2) .inner-element .image:before { bottom: auto; left: 0px; top: 0px; width: 180px; height: 155px; background-image: url('/images/design/decorations/deco-3-2.png'); background-position: left top; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element .textbox { max-width: 440px; margin-top: 15px; } .Teaser.TeaserT6 .elements-container .elements .element .inner-element .textbox .introduction { margin-top: 5px; } .moduleInstancePreview .Teaser.TeaserT6 .elements-container .elements .element:nth-child(n + 3) { display: none !important; } } @media (max-width: 1700px) { .Teaser.TeaserT6 .elements-container { margin: 0px calc(-1 * (10px + (30 - 10) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT6 .elements-container .elements .element { padding: 0px calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 1) { padding-bottom: calc(20px + (100 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 540px) { .Teaser.TeaserT6 .bg2 { height: 75%; } .Teaser.TeaserT6 .elements-container { margin: 0px; } .Teaser.TeaserT6 .elements-container .elements { display: block; } .Teaser.TeaserT6 .elements-container .elements .element { padding: 0px; width: 100%; } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 1) { padding: 0px; } .Teaser.TeaserT6 .elements-container .elements .element:nth-child(2n + 2) { width: 100%; } .Teaser.TeaserT6 .elements-container .elements .element + .element { margin-top: calc(50px + (60 - 50) * ((100vw - 414px) / (1700 - 414))); } } @media all { .Teaser.TeaserT5 { padding-top: 100px; } .Teaser.TeaserT5 .elements .element { width: 603px; position: relative; padding: 0px 20px; box-sizing: border-box; } .Teaser.TeaserT5 .elements .element.two { margin-top: 270px; } .Teaser.TeaserT5 .elements .element.three { margin-top: 120px; } .Teaser.TeaserT5 .elements .element.four { margin-top: 180px; } .Teaser.TeaserT5 .elements .element.Quote { width: 429px; height: 389px; } .Teaser.TeaserT5 .elements .element.Social { width: 298px; } .Teaser.TeaserT5 .elements .element .inner-element { width: 100%; height: 100%; position: relative; } .Teaser.TeaserT5 .elements .element .inner-element > a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 4; } .Teaser.TeaserT5 .elements .element.Teaser .inner-element:before, .Teaser.TeaserT5 .elements .element.Teaser .inner-element:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Teaser.TeaserT5 .elements .element.Teaser .inner-element:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 30%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Teaser.TeaserT5 .elements .element.Teaser .inner-element:after { background: -moz-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 20%); background: -webkit-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 20%); background: linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 20%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Teaser.TeaserT5 .elements .element.Quote .inner-element { background-image: url('/images/design/bgs/bgbar.png'); background-position: center center; background-size: 232px 233px; } .Teaser.TeaserT5 .elements .element.Quote .image { position: absolute; top: 0px; right: 0px; } .Teaser.TeaserT5 .elements .element.Quote .image img { width: 260px; } .Teaser.TeaserT5 .elements .element.Social .social-icon { width: 40px; position: absolute; top: 10px; right: 10px; transition: .3s ease; pointer-events: none; } .Teaser.TeaserT5 .elements .element.Social .image:hover + .social-icon { opacity: .7; } .Teaser.TeaserT5 .elements .element.Teaser .preheadline { position: absolute; top: 30px; left: 30px; z-index: 2; } .Teaser.TeaserT5 .elements .element .text { position: absolute; left: 40px; bottom: 40px; padding-right: 20px; z-index: 2; } .Teaser.TeaserT5 .elements .element .text .quote-img { width: 33px; margin-bottom: 15px; } .Teaser.TeaserT5 .elements .element .text .preheadline + .headline { margin-top: 10px; } .Teaser.TeaserT5 .elements .element .text a { display: block; position: relative; margin-top: 5px; } .Teaser.TeaserT5 .elements .element:not(.Teaser) .text a.mobile { display: none; } .Teaser.TeaserT5 .elements .element .text .link-icon { width: 46px; height: 40px; display: inline-block; position: absolute; margin-left: 5px; margin-top: -5px; } .Teaser.TeaserT5 .elements .element .text .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Teaser.TeaserT5 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } .Teaser.TeaserT5 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Teaser.TeaserT5 .swipe-icon svg + div { margin-top: 5px; } } @media (max-width: 1700px) { .Teaser.TeaserT5 { padding-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT5 .elements .element.two { margin-top: calc(55px + (270 - 55) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT5 .elements .element.three { margin-top: calc(15px + (120 - 15) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT5 .elements .element.four { margin-top: calc(30px + (180 - 30) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT5 .elements .element .text .link-icon { width: calc(30px + (46 - 30) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Teaser.TeaserT5 .elements .element { width: 553px; padding: 0px 15px; } .Teaser.TeaserT5 .elements .element.Quote { width: 379px; height: 349px; } .Teaser.TeaserT5 .elements .element.Social { width: 248px; } .Teaser.TeaserT5 .elements .element .text { left: 30px; bottom: 30px; padding-right: 15px; } } @media (min-width: 801px) { .Teaser.TeaserT5 .swipe-icon { display: none; } } @media (min-width: 601px) { .Teaser.TeaserT5 .elements .element.Teaser .text a.mobile { display: none; } } @media (max-width: 600px) { .Teaser.TeaserT5 .elements .element { width: 503px; padding: 0px 10px; } .Teaser.TeaserT5 .elements .element.Quote { width: 339px; height: 319px; } .Teaser.TeaserT5 .elements .element.Social { width: 218px; } .Teaser.TeaserT5 .elements .element .text { left: 20px; bottom: 20px; padding-right: 10px; } .Teaser.TeaserT5 .elements .element.Teaser .preheadline { top: 20px; left: 20px; } .Teaser.TeaserT5 .elements .element.Teaser .text { padding-right: 35px; } .Teaser.TeaserT5 .elements .element.Teaser .text > .headline, .Teaser.TeaserT5 .elements .element.Teaser .text a:not(.mobile) { display: none; } .Teaser.TeaserT5 .elements .element.Teaser .text a .headline { display: inline; } } @media (max-width: 500px) { .Teaser.TeaserT5 .elements .element { width: 313px; } .Teaser.TeaserT5 .elements .element.Quote { width: 299px; height: 279px; } .Teaser.TeaserT5 .elements .element.Teaser .preheadline { left: 15px; } .Teaser.TeaserT5 .elements .element.Teaser .text { left: 15px; } } @media all { .Teaser.TeaserT4 .elements-container { margin: 0px -20px; } .Teaser.TeaserT4 .elements-container .element { padding: 0px 20px; } .Teaser.TeaserT4 .elements-container .element.spacing { padding-top: 40px; } .Teaser.TeaserT4 .elements-container .element .inner-element { position: relative; } .Teaser.TeaserT4 .elements-container .element .inner-element a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3; } .Teaser.TeaserT4 .elements-container .element .inner-element .image { position: relative; } .Teaser.TeaserT4 .elements-container .element .inner-element .image:before { content: ''; z-index: 2; position: absolute; background-size: contain; background-position: right top; background-repeat: no-repeat; } .Teaser.TeaserT4 .elements-container .element .inner-element .image:before { left: 0px; bottom: 0px; width: 150px; height: 198px; background-image: url('/images/design/decorations/deco-3-1.png'); } .Teaser.TeaserT4 .elements-container .element.pattern2 .inner-element .image:before { left: 0px; top: 0px; width: 150px; height: 199px; background-image: url('/images/design/decorations/deco-3-2.png'); } .Teaser.TeaserT4 .elements-container .element.pattern3 .inner-element .image:before { left: 0px; bottom: 0px; width: 150px; height: 198px; background-image: url('/images/design/decorations/deco-3-3.png'); } .Teaser.TeaserT4 .elements-container .element .inner-element .textbox { width: calc(100% - 30px); margin-top: 30px; } .Teaser.TeaserT4 .elements-container .element .inner-element .textbox .introduction { margin-top: 5px; } } @media (max-width: 1700px) { .Teaser.TeaserT4 .elements-container { margin: 0px calc(-1 * (5px + (20 - 5) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT4 .elements-container .element { padding: 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT4 .elements-container .element.spacing { padding-top: calc(10px + (40 - 10) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT4 .elements-container .element .inner-element .textbox { margin-top: calc(25px + (30 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1200px) { .Teaser.TeaserT4 .elements-container .element .inner-element .image:before { width: 120px; height: 159px; } .Teaser.TeaserT4 .elements-container .element.pattern2 .inner-element .image:before { width: 120px; height: 160px; } .Teaser.TeaserT4 .elements-container .element.pattern3 .inner-element .image:before { width: 120px; height: 159px; } } @media (max-width: 540px) { .Teaser.TeaserT4 .elements-container .element.spacing { padding-top: 0px; } .Teaser.TeaserT4 .elements-container .elements .owl-stage-outer { overflow: visible; } .Teaser.TeaserT4 .elements-container .element .inner-element .textbox { width: calc(100% - 50px); } } @media all { .Teaser.TeaserT3 .elements-container { margin: 0px -20px; } .Teaser.TeaserT3 .elements-container .element { padding: 0px 20px; } .Teaser.TeaserT3 .elements-container .element.spacing { padding-top: 40px; } .Teaser.TeaserT3 .elements-container .element .inner-element { position: relative; } .Teaser.TeaserT3 .elements-container .element .inner-element a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 6; } .Teaser.TeaserT3 .elements-container .element .inner-element .image { position: relative; } .Teaser.TeaserT3 .elements-container .element .inner-element .image:before { content: ''; z-index: 3; position: absolute; background-size: contain; background-position: right top; background-repeat: no-repeat; } .Teaser.TeaserT3 .elements-container .element .inner-element .image .svg-container { position: absolute; bottom: -5px; left: 15px; transform: translateY(50%); z-index: 5; } .Teaser.TeaserT3 .elements-container .element .inner-element .image .svg-container svg { display: inline; width: 30px; } .Teaser.TeaserT3 .elements-container .element .inner-element .image .svg-container svg + svg { margin-left: 5px; } .Teaser.TeaserT3 .elements-container .element .inner-element .image .svg-container svg.icon-1 { width: 25px; } .Teaser.TeaserT3 .elements-container .element .inner-element .image .svg-container svg.icon-2 { width: 28px; } .Teaser.TeaserT3 .elements-container .element.pattern1 .inner-element .image:before { left: 0px; bottom: -35px; width: 96px; height: 151px; background-image: url('/images/design/decorations/deco-4-1.png'); } .Teaser.TeaserT3 .elements-container .element.pattern2 .inner-element .image:before { left: 0px; bottom: -33px; width: 96px; height: 151px; background-image: url('/images/design/decorations/deco-4-2.png'); } .Teaser.TeaserT3 .elements-container .element .inner-element .image:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; } .Teaser.TeaserT3 .elements-container .element .inner-element .image:after { background: -moz-linear-gradient(bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); background: -webkit-linear-gradient(bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); background: linear-gradient(to top,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Teaser.TeaserT3 .elements-container .element .inner-element .textbox { margin-top: 50px; } .Teaser.TeaserT3 .elements-container .elements.owl-carousel .owl-stage-outer .owl-stage { padding-left: 0px !important; } } @media (max-width: 1700px) { .Teaser.TeaserT3 .elements-container { margin: 0px calc(-1 * (5px + (20 - 5) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT3 .elements-container .element { padding: 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT3 .elements-container .element.spacing { padding-top: calc(5px + (40 - 5) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT3 .elements-container .element .inner-element .textbox { margin-top: calc(35px + (50 - 35) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 540px) { .Teaser.TeaserT3.hide-mobile { display: none !important; } .Teaser.TeaserT3 .elements-container .element.spacing { padding-top: 0px; } .Teaser.TeaserT3 .elements-container .elements .owl-stage-outer { overflow: visible; } } @media all { .Teaser.TeaserT2 { } .Teaser.TeaserT2 .element .inner-element { position: relative; } .Teaser.TeaserT2 .element .inner-element .image { position: relative; } .Teaser.TeaserT2 .element .inner-element .image img { object-fit: cover; } .Teaser.TeaserT2 .element .inner-element .textbox { position: absolute; top: 0px; left: 0px; height: 100%; padding: 100px 170px; display: flex; align-items: center; box-sizing: border-box; } .Teaser.TeaserT2 .element .inner-element .textbox .gradient { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; opacity: .5; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox { z-index: 2; position: relative; transition: opacity 500ms; } .no-mobile-device .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox:hover { opacity: 0.7; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox > a.element-link { display: none; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox .pre-headline { margin-bottom: 5px; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox .link-icon { width: 46px; height: 43px; display: block; position: relative; margin-top: 15px; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox a.text { display: inline-block; padding-right: 56px; position: relative; } .Teaser.TeaserT2.decoration .image:after, .Teaser.TeaserT2.decoration .image:before { content: ''; z-index: 2; position: absolute; right: 0px; top: 0px; width: 410px; height: 160px; background-image: url('/images/design/decorations/deco-1-1.png'); background-size: contain; background-position: right top; background-repeat: no-repeat; } .Teaser.TeaserT2.decoration .image:after { top: auto; bottom: 0px; width: 300px; height: 260px; background-image: url('/images/design/decorations/deco-1-2.png'); background-position: right bottom; } .Teaser.TeaserT2.decoration-2 .image:before { width: 280px; height: 400px; background-image: url('/images/design/decorations/deco-2-1.png'); } .Teaser.TeaserT2.decoration-2 .image:after { width: 490px; height: 290px; background-image: url('/images/design/decorations/deco-2-2.png'); } } @media (max-width: 1700px) { .Teaser.TeaserT2 .element .inner-element .textbox { padding: calc(25px + (100 - 25) * ((100vw - 414px) / (1700 - 414)))calc(20px + (170 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox .link-icon { width: calc(41px + (46 - 41) * ((100vw - 414px) / (1700 - 414))); height: calc(35px + (43 - 35) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT2.decoration .image:before { width: calc(170px + (410 - 170) * ((100vw - 414px) / (1700 - 414))); height: calc(110px + (160 - 110) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT2.decoration .image:after { width: calc(150px + (300 - 150) * ((100vw - 414px) / (1700 - 414))); height: calc(120px + (260 - 120) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT2.decoration-2 .image:before { width: calc(150px + (280 - 150) * ((100vw - 414px) / (1700 - 414))); height: calc(200px + (400 - 200) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT2.decoration-2 .image:after { width: calc(240px + (490 - 240) * ((100vw - 414px) / (1700 - 414))); height: calc(150px + (290 - 150) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1025px) { .Teaser.TeaserT2 .element .inner-element .image a.responsive-link { display: none; } } @media (max-width: 1024px) { .Teaser.TeaserT2 .element .inner-element .image a.responsive-link { display: block; width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; z-index: 3; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox a span.text { display: none; } } @media (min-width: 621px) { .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox > a.element-link { display: block; } } @media (max-width: 620px) { .Teaser.TeaserT2.decoration .image:before, .Teaser.TeaserT2.decoration-2 .image:after { display: none; } .Teaser.TeaserT2.decoration-2 .image:before { display: block; } .Teaser.TeaserT2 .element .inner-element .textbox { position: static; } .Teaser.TeaserT2 .element .inner-element .textbox, .Teaser.TeaserT2 .element .inner-element .textbox .t1 { color: var(--bgweb-text-color); } .Teaser.TeaserT2 .element .inner-element .textbox .gradient { display: none; width: 0; height: 0; } .Teaser.TeaserT2 .element .inner-element .textbox .inner-textbox .link-icon svg + svg { stroke: var(--bgweb-link-icon-color); } } @media all { .Teaser.TeaserT1 .elements-container { margin: 0px -70px; } .Teaser.TeaserT1 .elements-container .element { padding: 0px 70px; position: relative; } .Teaser.TeaserT1 .elements-container .element .inner-element { margin: 0 auto; position: relative; } .Teaser.TeaserT1 .elements-container .element .inner-element .element-link { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 4; } .Teaser.TeaserT1 .elements-container .element .inner-element .image { position: relative; z-index: 3; } .Teaser.TeaserT1 .elements-container .element .inner-element .image svg.imag-mask { position: absolute; top: -1px; left: 0px; width: calc(100% + -1.6px); height: calc(100% - 1.5px); z-index: 2; border: 2px solid white; } .Teaser.TeaserT1 .elements-container .element .inner-element .image .link-icon { position: absolute; bottom: 0px; width: 46px; height: 43px; z-index: 3; } .Teaser.TeaserT1 .elements-container .element .inner-element .image .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bgweb-link-icon-color); } .Teaser.TeaserT1 .elements-container .element .inner-element .textbox { margin-top: 30px; text-align: center; } .Teaser.TeaserT1 .elements-container .element .inner-element .textbox .subheadline { margin-top: 5px; } .Teaser.TeaserT1 .elements-container .element.pattern1:before { content: ''; position: absolute; z-index: 3; top: -30px; left: 0px; width: 180px; height: 240px; background-image: url('/images/design/patterns/green-lines.png'); background-repeat: no-repeat; background-size: contain; background-position: left top; } .Teaser.TeaserT1 .elements-container .element.pattern2:before { content: ''; position: absolute; z-index: 3; top: -60px; left: 40px; width: 255px; height: 335px; background-image: url('/images/design/patterns/green-dots.png'); background-repeat: no-repeat; background-size: contain; background-position: left top; } .Teaser.TeaserT1 .elements-container .element.pattern3:before { content: ''; position: absolute; z-index: 3; top: 60px; right: 40px; width: 180px; height: 240px; background-image: url('/images/design/patterns/green-lines.png'); background-repeat: no-repeat; background-size: contain; background-position: right bottom; } .Teaser.TeaserT1 .elements-container .element.pattern1 .inner-element .image .link-icon { left: 53.846154%; } .Teaser.TeaserT1 .elements-container .element.pattern2 .inner-element .image .link-icon { left: 69.230769%; } .Teaser.TeaserT1 .elements-container .element.pattern3 .inner-element .image .link-icon { left: 57.692308%; } } @media (max-width: 1700px) { .Teaser.TeaserT1 .elements-container { margin: 0px calc(-1 * (20px + (70 - 20) * ((100vw - 414px) / (1700 - 414)))); } .Teaser.TeaserT1 .elements-container .element { padding: 0px calc(20px + (70 - 20) * ((100vw - 414px) / (1700 - 414))); } .Teaser.TeaserT1 .elements-container .element .inner-element .image .link-icon { width: calc(41px + (46 - 41) * ((100vw - 414px) / (1700 - 414))); height: calc(35px + (43 - 35) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 620px) { .Teaser.TeaserT1 .elements-container .element.pattern1:before, .Teaser.TeaserT1 .elements-container .element.pattern2:before, .Teaser.TeaserT1 .elements-container .element.pattern3:before { display: none; } } @media (max-width: 540px) { .Teaser.TeaserT1 .elements-container .elements { padding: 0px calc(60px + (500 - 60) * ((100vw - 414px) / (1700 - 414))); box-sizing: border-box; } .Teaser.TeaserT1 .elements-container .elements .owl-stage-outer { overflow: visible; } } @media all { div.sticker { position: absolute; right: 40px; top: 100vh; margin-top: -40px; z-index: 1; transform: translateY(-100%); } div.sticker .link-icon { position: absolute; right: 15px; bottom: 35px; width: 46px; height: 43px; display: block; pointer-events: none; } div.sticker .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } } @media (max-width: 1024px) { div.sticker { right: 20px; margin-top: -20px; } } @media (max-width: 800px) { div.sticker { display: none; } } @media all { .SocialWall.SocialWall { position: relative; } } @media all { .Request.RequestT1 { position: relative; } .Request.RequestT1 > div { position: relative; z-index: 1; } .Request.RequestT1 .loader { position: absolute; z-index: 15; top: -41px; left: 0px; width: 100%; height: calc(100% + 41px); opacity: 0.8; } .Request.RequestT1 .filter { position: relative; z-index: 10; margin-bottom: 35px; } .Request.RequestT1 .filter .additional-filter { overflow: hidden; margin-top: 15px; } .Request.RequestT1 .filter .additional-filter .hotel-counter { float: left; } .Request.RequestT1 .filter .additional-filter a { display: block; float: right; padding-left: 30px; text-align: right; position: relative; } .Request.RequestT1 .filter .additional-filter a:after, .Request.RequestT1 .filter .additional-filter a:before { content: ''; position: absolute; background-color: currentColor; height: 1px; width: 12px; top: 12px; left: 12px; transform: rotate(-45deg); } .Request.RequestT1 .filter .additional-filter a:before { transform: rotate(45deg); } .Request.RequestT1 .filter form .innerForm { -webkit-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); } .Request.RequestT1 .filter form .form-row { display: flex; justify-content: flex-start; align-items: center; } .Request.RequestT1 .filter form .form-row > * { display: none; width: 33.333333%; box-sizing: border-box; } .Request.RequestT1 .filter form .form-row > a.senden, .Request.RequestT1 .filter form .form-row > div.row.input, .Request.RequestT1 .filter form .form-row > div.row.select, .Request.RequestT1 .filter form .form-row > div.row.calendar { display: block; } .Request.RequestT1 .filter form .form-row > a.senden { height: 78px; padding: 0px; display: flex; align-items: center; justify-content: center; border-radius: 0px; border: 0px; -webkit-border-radius: 0px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container { display: block; position: relative; height: 78px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container.region { border-right: 1px solid rgba(112,112,112,0.2); } .Request.RequestT1 .filter form .form-row > div.custom-select-container > .label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .value { font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; padding: 35px 16px 16px 16px; cursor: pointer; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .options-container { position: absolute; bottom: 0px; left: 0px; width: 100%; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .options-container .options { position: absolute; top: 0px; left: -1px; width: calc(100% + 2px); background-color: #fff; padding: 16px; box-sizing: border-box; z-index: 10; border: 1px solid rgba(112,112,112,0.2); } .Request.RequestT1 .filter form .form-row > div.custom-select-container .options-container .options .row { border: 0px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .options-container .options label { display: none; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .options-container .options label.extralabel { display: block; } .Request.RequestT1 .filter form .form-row > div.custom-select-container:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Request.RequestT1 .filter form .form-row > div.row.input, .Request.RequestT1 .filter form .form-row > div.row.select, .Request.RequestT1 .filter form .form-row > div.row.calendar { position: relative; } .Request.RequestT1 .filter form .form-row > div.row.input > .clear, .Request.RequestT1 .filter form .form-row > div.row.select > .clear, .Request.RequestT1 .filter form .form-row > div.row.calendar > .clear { display: none; } .Request.RequestT1 .filter form .form-row > div.row.input label, .Request.RequestT1 .filter form .form-row > div.row.select label, .Request.RequestT1 .filter form .form-row > div.row.calendar label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Request.RequestT1 .filter form .form-row > div.row.input input, .Request.RequestT1 .filter form .form-row > div.row.calendar input { height: 78px; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; } .Request.RequestT1 .filter form .form-row > div.row.input div.inputfield, .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield, .Request.RequestT1 .filter form .form-row > div.row.calendar div.calendarfield { width: 100%; margin: 0px; padding: 0px; } .Request.RequestT1 .filter form .form-row > div.row.input div.inputfield:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield { height: 78px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field { height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; margin: 0px; background-color: var(--bgweb-form-bg-color); } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.select { margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field select { cursor: pointer; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon:after, .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Request.RequestT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; z-index: 7; } .Request.RequestT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { width: 21px; height: 21px; margin: 0px; position: absolute; top: calc(50% - 10px); right: 16px; fill: #5B5E51; } .Request.RequestT1 .filter form .form-row.toggle-availability > * { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; height: 78px; padding: 16px; box-sizing: border-box; width: 100%; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; } .Request.RequestT1 .filter form .form-row.toggle-availability > span { position: relative; } .Request.RequestT1 .filter form .form-row.toggle-availability > span:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .IntroT2.standardspace + .Request.RequestT1.standardspace { padding-top: 0px; } .IntroT2 + .Request.RequestT1 .filter { transform: translateY(-41px); } .Request.RequestT1 .hotels.bgweb { padding-bottom: 140px; } .Request.RequestT1 .hotels .elements { display: flex; justify-content: space-between; flex-wrap: wrap; } .Request.RequestT1 .hotels.bgweb .elements { padding-top: 160px; } .Request.RequestT1 .hotels .filter + div .elements { padding-top: 0px; } .Request.RequestT1 .hotels .elements:after { content: ''; } .Request.RequestT1 .hotels .elements:after, .Request.RequestT1 .hotels .elements .element { width: 31.323529%; position: relative; } .Request.RequestT1 .hotels .elements .element:nth-of-type(1n + 4) { margin-top: 60px; } .Request.RequestT1 .hotels .elements .element .image { position: relative; } .Request.RequestT1 .hotels .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Request.RequestT1 .hotels .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Request.RequestT1 .hotels .elements .element .inner-element { position: relative; } .Request.RequestT1 .hotels .elements .element .remove-hotel { cursor: pointer; position: absolute; top: 15px; right: 15px; background-color: #fff; padding: 5px 10px 5px 30px; z-index: 6; transition: opacity 500ms; } .Request.RequestT1 .hotels .elements .element .remove-hotel:before, .Request.RequestT1 .hotels .elements .element .remove-hotel:after { position: absolute; content: ''; transform: rotate(-45deg); top: 14px; left: 9px; width: 14px; height: 2px; background-color: currentColor; -webkit-border-radius: 1px; border-radius: 1px; } .Request.RequestT1 .hotels .elements .element .remove-hotel:after { transform: rotate(45deg); } .no-mobile-device .Request.RequestT1 .hotels .elements .element .remove-hotel:hover { opacity: 0.7; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink:hover { background: rgba(91,94,81,.3); opacity: 1; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink .fotogallery-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 6; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink .fotogallery-button { opacity: 0; transition: 500ms; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink:hover .fotogallery-button { opacity: 1; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink .fotogallery-button svg.bg-rating { width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; z-index: 1; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink .fotogallery-button svg.icon { width: 32px; height: 32px; margin: 0px auto; position: relative; z-index: 2; } .Request.RequestT1 .hotels .elements .element .image a.fotogallerylink .fotogallery-button div { position: relative; margin-top: 5px; z-index: 2; } .Request.RequestT1 .hotels .elements .element .textbox { margin-top: 15px; position: relative; } .Request.RequestT1 .hotels .elements .element .textbox .headline { width: calc(100% - 50px); } .Request.RequestT1 .hotels .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Request.RequestT1 .hotels .elements .element .textbox .headline .hotelclass span { font-size: .6em; line-height: 1.1em; text-transform: lowercase; } .Request.RequestT1 .hotels .elements .element .textbox .headline + .subheadline { margin-top: 5px; } .Request.RequestT1 .hotels .elements .element .textbox .rating { position: absolute; right: 0px; top: 0px; display: flex; align-items: center; } .Request.RequestT1 .hotels .elements .element .textbox .rating svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--bgweb-button1-bg-color); } .Request.RequestT1 .hotels .elements .element .textbox .price-info { margin-top: 15px; } .Request.RequestT1 .hotels .elements .element .textbox .row { display: flex; align-items: flex-start; position: relative; margin-top: 20px; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield { height: 24px; display: flex; justify-content: center; align-items: center; width: 16px; cursor: pointer; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield svg { width: 16px; height: 100%; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield svg.icon-checkbox { display: block; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield svg.icon-checkbox-checked { display: none; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield.checked svg.icon-checkbox { display: none; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield.checked svg.icon-checkbox-checked { display: block; } .Request.RequestT1 .hotels .elements .element .textbox .row .checkboxfield input { position: absolute; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .Request.RequestT1 .hotels .elements .element .textbox .row label { line-height: 24px; margin-left: 5px; } .Request.RequestT1 .hotels + div { padding-top: 140px; } .Request.RequestT1 .offer-request { margin-bottom: 30px; } .Request.RequestT1 .offer-request .element { max-width: 560px; background-color: rgba(112,112,112,0.2); padding: 15px; box-sizing: border-box; } .Request.RequestT1 .offer-request .element .inner-element { display: flex; align-items: center; } .Request.RequestT1 .offer-request .element .inner-element .image { width: 120px; } .Request.RequestT1 .offer-request .element .inner-element .textbox { width: calc(100% - 135px); margin-left: 15px; box-sizing: border-box; } .Request.RequestT1 .offer-request [data-price="0,00"], .Request.RequestT1 .offer-request [data-price^="0,00"], .Request.RequestT1 .offer-request [data-price="0,00€"], .Request.RequestT1 .offer-request [data-price="0,00 €"] { display: none !important; } .Request.RequestT1 .component form div .error { color: #c62649; } .Request.RequestT1 .component form label.label { display: none; } .Request.RequestT1 .component form .hotel-count { margin-bottom: 30px; } .Request.RequestT1 .component form .form-row + .form-headline { margin-top: 60px; } .Request.RequestT1 .component form .form-row { margin: 0px -10px; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; } .Request.RequestT1 .component form .form-row.children { display: none; } .Request.RequestT1 .component form .form-row.children.show { display: flex; } .Request.RequestT1 .component form .offer { margin-bottom: 40px; } .Request.RequestT1 .component form .form-row.personal-data-row div.row:nth-child(3) { width: 100%; } .Request.RequestT1 .component form .form-row.checkbox-row label.extralabel { display: block; line-height: 24px; margin: 0px 0px 0px 5px; } .Request.RequestT1 .component form .form-row.checkbox-row div.row { width: 100%; display: flex; align-items: flex-start; } .Request.RequestT1 .component form .form-row.checkbox-row div.row div.checkboxfield { margin: 0px; display: flex; align-items: center; float: none; width: 16px; height: 24px; position: relative; } .Request.RequestT1 .component form .form-row.checkbox-row div.row div.checkboxfield svg { position: static; width: 16px; height: 16px; } .Request.RequestT1 .component form .form-row.checkbox-row div.row div.checkboxfield input { width: 16px; height: 100%; position: absolute; top: 0px; left: 0px; } .Request.RequestT1 .component form div.row { padding: 0px 10px; box-sizing: border-box; width: 50%; margin-top: 20px; } .Request.RequestT1 .component form div.row.email, .Request.RequestT1 .component form div.row.textarea { width: 100%; } .Request.RequestT1 .component form div.row.input div.inputfield, .Request.RequestT1 .component form div.row.calendar div.calendarfield { width: 100%; float: none; display: block; } .Request.RequestT1 .component form div.row.select div.selectfield { width: 100%; padding: 0px; float: none; display: block; height: 50px; } .Request.RequestT1 .component form div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; left: auto; bottom: auto; } .Request.RequestT1 .component form div.row.calendar div.calendarfield a.kalenderopener svg { position: absolute; width: 22px; height: 22px; right: 15px; top: calc(50% - 11px); fill: #5B5E51; } .Request.RequestT1 .component form div.row.select div.selectfield span.select { position: absolute; top: 0px; left: 0px; z-index: 1; padding: 0px 15px; margin: 0px; width: 100%; height: 100%; top: 0px; left: 0px; line-height: 50px; } .Request.RequestT1 .component form div.row.select div.selectfield select { cursor: pointer; } .Request.RequestT1 .component form div.inputfield input, .Request.RequestT1 .component form div.calendarfield input { box-sizing: border-box; text-indent: 0px; height: 50px; line-height: 48px; padding: 0px 15px; } .Request.RequestT1 .component form div.row div.textarea { width: 100%; padding: 0px; margin: 0px; float: none; display: block; } .Request.RequestT1 .component form div.row div.textarea textarea { resize: vertical; padding: 10px 15px; margin: 0px; text-indent: 0px; line-height: 24px; min-height: 94px; } .Request.RequestT1 .component form div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 20px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Request.RequestT1 .component form div.selectfield span.field span.selecticon:after, .Request.RequestT1 .component form div.selectfield span.field span.selecticon:before { display: none; } .Request.RequestT1 .component form a.senden { text-align: center; font-weight: normal; letter-spacing: 0px; border-radius: 45px; margin-top: 60px; } .Request.RequestT1 .component form a.senden span { display: block; } .Request.RequestT1 .component form a.senden span { font-size: 22px; line-height: 26px; letter-spacing: 0.15em; text-transform: uppercase; } .Request.RequestT1 .component form a.senden span + span { margin-top: 6px; font-size: 16px; line-height: 20px; letter-spacing: 0px; text-transform: none; } .Request.RequestT1 .component .inner-component { display: flex; justify-content: space-between; align-items: flex-start; } .Request.RequestT1 .component .left { width: 100%; padding-right: 60px; box-sizing: border-box; max-width: 880px; } .Request.RequestT1 .component .right { min-width: 420px; overflow: hidden; } .Request.RequestT1 .component .right .selected-hotels-headline { margin-bottom: 20px; } .Request.RequestT1 .component .right .selected-hotels { overflow: auto; height: 100%; } .Request.RequestT1 .component .right .hotel { display: none; justify-content: space-between; align-items: stretch; background-color: rgba(255,255,255,0.3); } .Request.RequestT1 .component .right .hotel.mt { margin-top: 20px; } .Request.RequestT1 .component .right .hotel.active { display: flex; } .Request.RequestT1 .component .right .hotel .image { width: 160px; } .Request.RequestT1 .component .right .hotel .textbox { width: calc(100% - 160px); padding: 10px 20px; box-sizing: border-box; display: flex; align-items: center; position: relative; } .Request.RequestT1 .component .right .hotel .textbox .headline + * { margin-top: 5px; } .Request.RequestT1 .component .right .hotel .textbox .hotel-remover { width: 44px; height: 44px; position: absolute; top: 0px; right: 0px; cursor: pointer; } .Request.RequestT1 .component .right .hotel .textbox .hotel-remover:after, .Request.RequestT1 .component .right .hotel .textbox .hotel-remover:before { content:''; position: absolute; top: 14px; right: 10px; width: 12px; height: 2px; transform: rotate(45deg); border-radius: 1px; background-color: #5B5E51; } .Request.RequestT1 .component .right .hotel .textbox .hotel-remover:before { transform: rotate(-45deg); } .IntroT2.bgweb + .Request.RequestT1 .elements { padding-top: 0px; } } @media (max-width: 1700px) { .Request.RequestT1 .hotels .elements { margin-top: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .hotels .elements .element:nth-of-type(1n + 4) { margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .component form a.senden { border-radius: calc(35px + (45 - 35) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .component form a.senden span { font-size: calc(18px + (22 - 18) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .component form a.senden span + span { font-size: calc(14px + (16 - 14) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .hotels + div { padding-top: calc(60px + (140 - 60) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .hotels.bgweb { padding-bottom: calc(60px + (140 - 60) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1181px) { .Request.RequestT1 .component form .hotel-count { display: none !important; } } @media (max-width: 1180px) { .Request.RequestT1 .component .right { display: none !important; } .Request.RequestT1 .component .left { width: 100%; padding: 0px; } } @media (max-width: 1024px) { .Request.RequestT1 .hotels .elements .element { width: 47.333333%; } .Request.RequestT1 .hotels .elements .element:nth-of-type(1n + 3) { margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } .Request.RequestT1 .filter form .form-row { flex-wrap: wrap; } .Request.RequestT1 .filter form .form-row > * { width: 50%; } .Request.RequestT1 .filter form .form-row > a.senden { width: 100%; } } @media (max-width: 640px) { .Request.RequestT1 .filter { margin-bottom: 16px; } .Request.RequestT1 .loader { top: -19px; height: calc(100% + 19px); } .Request.RequestT1 .filter form .form-row { flex-wrap: wrap; } .Request.RequestT1 .filter form .form-row > * { width: 100%; } .Request.RequestT1 .filter form .form-row > a.senden { height: 58px; } .Request.RequestT1 .filter form .form-row > div.row.select { } .Request.RequestT1 .filter form .form-row .row:nth-child(n + 2) { border-top: 1px solid rgba(112,112,112,0.2); } .Request.RequestT1 .filter form .form-row > div.row.input label, .Request.RequestT1 .filter form .form-row > div.row.select label, .Request.RequestT1 .filter form .form-row > div.row.calendar label { top: 6px; left: 16px; } .Request.RequestT1 .filter form .form-row > div.row.input input, .Request.RequestT1 .filter form .form-row > div.row.calendar input { height: 58px; padding: 25px 16px 6px 16px; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield { height: 58px; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field { padding: 25px 16px 6px 16px; } .Request.RequestT1 .filter form .form-row > div.row.input div.inputfield:after { right: 21px; } .Request.RequestT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { right: 16px; } .Request.RequestT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon { right: 22px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container { height: 59px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container > .label { top: 6px; } .Request.RequestT1 .filter form .form-row > div.custom-select-container .value { padding: 25px 16px 6px 16px; } } @media (min-width: 601px) { .Request.RequestT1 .filter form .form-row > div.row.select.region { border-right: 1px solid rgba(112,112,112,0.2); } } @media (max-width: 600px) { .Request.RequestT1 .filter form .form-row > * { width: 100%; } .Request.RequestT1 .filter form .form-row > div.row.select.region { border-bottom: 1px solid rgba(112,112,112,0.2); } .Request.RequestT1 .hotels .elements .element { width: 100%; } .Request.RequestT1 .hotels .elements .element:nth-of-type(1n + 2) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 540px) { .Request.RequestT1 .component form div.row { width: 100%; } } @media all { .Request.QuickRequestOnPageT1 { position: relative; } .Request.QuickRequestOnPageT1.bgweb2:before { content: ''; position: absolute; z-index: 1; top: 0px; left: 0px; width: 210px; height: 290px; background-image: url('/images/design/decorations/deco-3-2.png'); background-repeat: no-repeat; background-size: contain; background-position: left top; } .Request.QuickRequestOnPageT1.bgweb2:after { content: ''; position: absolute; z-index: 1; bottom: 0px; right: 0px; width: 260px; height: 240px; background-image: url('/images/design/decorations/deco-1-2.png'); background-repeat: no-repeat; background-size: contain; background-position: right bottom; } .Request.QuickRequestOnPageT1 .inner { position: relative;text-align: center; z-index: 2; } .Request.QuickRequestOnPageT1 .inner .text .headline + .subheadline { margin-top: 5px; } .Request.QuickRequestOnPageT1 form { margin-top: 35px; } .Request.QuickRequestOnPageT1 form .form-row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select { width: 500px; display: block; position: relative; border: 1px solid var(--bgweb2-form-border-color); box-sizing: border-box; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select + div.row.select { margin-left: 50px; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select > .clear { display: none; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield { width: 100%; height: 78px; box-sizing: border-box; border: 0px; outline: none; margin: 0px; padding: 0px; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.field { height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; margin: 0px; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.select { margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; text-align: left; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.field select { cursor: pointer; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.field span.selecticon:after, .Request.QuickRequestOnPageT1 form .form-row > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Request.QuickRequestOnPageT1 form .buttons { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 35px; } .Request.QuickRequestOnPageT1 form .buttons .button { width: 290px; } .Request.QuickRequestOnPageT1 form .buttons .button + .button { margin-left: 50px; } } @media (max-width: 1700px) { .Request.QuickRequestOnPageT1.bgweb2:before { width: calc(150px + (210 - 150) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1.bgweb2:after { width: calc(130px + (260 - 130) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form { margin-top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form .form-row > div.row.select { width: calc(200px + (500 - 200) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form .form-row > div.row.select + div.row.select { margin-left: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form .buttons { margin-top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form .buttons .button { width: calc(200px + (290 - 200) * ((100vw - 414px) / (1700 - 414))); } .Request.QuickRequestOnPageT1 form .buttons .button + .button { margin-left: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 700px) { .Request.QuickRequestOnPageT1.bgweb2:before, .Request.QuickRequestOnPageT1.bgweb2:after { display: none; width: 0px; height: 0px; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select { width: 100%; } .Request.QuickRequestOnPageT1 form .form-row > div.row.select + div.row.select { margin-top: 20px; margin-left: 0px; } .Request.QuickRequestOnPageT1 form .buttons { flex-direction: column; } .Request.QuickRequestOnPageT1 form .buttons .button { width: 300px; max-width: 100%; box-sizing: border-box; } .Request.QuickRequestOnPageT1 form .buttons .button + .button { margin-top: 20px; margin-left: 0px; } }/* PopUp _____________________________________________________ */ @media all { body.PopUpActive { overflow: hidden; } .PopUp.PopUpT1 { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,.5); overflow: auto; z-index: 150; } .PopUp.PopUpT1 .container { width: calc(100% - 40px); max-width: 1000px; position: relative; margin: 195px auto 50px auto; } .PopUp.PopUpT1 .container .element { position: relative; padding: 60px 4.858300%; } .PopUp.PopUpT1 .container .element .element-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .PopUp.PopUpT1 .container .element .element-inner .textbox { width: 48.582996%; } .PopUp.PopUpT1 .container .element .element-inner .textbox .subheadline { margin-top: 10px; } .PopUp.PopUpT1 .container .element .element-inner .textbox .introduction { margin-top: 20px; } .PopUp.PopUpT1 .container .element .element-inner .textbox .default-link { margin-top: 30px; } .PopUp.PopUpT1 .container .element .element-inner .textbox .author { margin-top: 40px; } .PopUp.PopUpT1 .container .element .element-inner .image { width: 33.360324%; max-width: 412px; } .PopUp.PopUpT1 .container .element .close { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 3; } .PopUp.PopUpT1 .container .element .close:hover { opacity: .7; } .PopUp.PopUpT1.Hotels { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; background: rgba(0,0,0,.5); overflow: auto; z-index: 150; } .PopUp.PopUpT1.Hotels .inner { width: 100%; max-width: 780px; position: relative; margin: 150px auto 50px auto; overflow: hidden; } .PopUp.PopUpT1.Hotels .inner.count2 { max-width: 880px; } .PopUp.PopUpT1.Hotels .inner .elements { position: relative; display: flex; flex-direction: row; width: 100%; } .PopUp.PopUpT1.Hotels .inner .elements .headline-mobile { display: none; } .PopUp.PopUpT1.Hotels .inner .elements .bg1 { position: absolute; z-index: 1; left: 5%; top: 65%; transform: translate(-5%,-65%); } .PopUp.PopUpT1.Hotels .inner.count2 .elements .bg1 { left: 50%; top: 30%; transform: translate(-50%,-30%); } .PopUp.PopUpT1.Hotels .inner .elements .bg1 .headline { position: absolute; z-index: 1; left: 70%; top: 30%; transform: translate(-70%,-30%); color: #ffffff; width: 70%; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .bg1 .headline { left: 50%; top: 30%; transform: translate(-50%,-30%); text-align: center; } .PopUp.PopUpT1.Hotels .inner .elements .element { position: relative; width: 100%; padding: 0; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner { display: flex; align-items: center; flex-direction: column;} .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .image { width: 100%; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox { width: 100%; padding: 6.410256% 0px; z-index: 2; position: relative; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .bg2 { position: absolute; width: auto; height: 100%; right: 0; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .bg2 img { width: auto; height: 100%; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .bg2 { display: none; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox { padding: 11.363636%; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .textbox-inner { padding-left: 6.410256%; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .textbox-inner { padding-left: 11.363636%; } .PopUp.PopUpT1.Hotels .inner .elements .element + .element .element-inner .textbox .textbox-inner { border-left: 1px solid rgba(112, 112, 112, 0.2); } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .headline { padding-top: 10px; width: 80%; display: flex; flex-wrap: wrap; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .subheadline { margin-top: 10px; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .price { margin-top: 15px; } .PopUp.PopUpT1.Hotels .inner .elements .element .element-inner .textbox .link { margin-top: 25px; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .link { padding-bottom: 10px; } .PopUp.PopUpT1.Hotels .inner .elements .close { width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; position: absolute; top: 20px; right: 20px; cursor: pointer; z-index: 10; } .PopUp.PopUpT1.Hotels .inner .elements .close svg.icon-closebg { position: absolute; z-index: -1; width: 2.5em; height: 2.5em; color: #f5f4ef; transform: rotate(28deg); } .PopUp.PopUpT1.Hotels .inner .elements .close:hover { opacity: .7; } } @media (max-width: 1600px) { .PopUp.PopUpT1 .container { margin-top: calc(150px + (300 - 150) * ((100vw - 414px) / (1700 - 414))); margin-bottom: calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } .PopUp.PopUpT1 .container .element { padding-top: calc(25px + (60 - 25) * ((100vw - 414px) / (1700 - 414))); padding-bottom: calc(15px + (60 - 15) * ((100vw - 414px) / (1700 - 414))); } .PopUp.PopUpT1 .container .element .element-inner .textbox .subheadline { margin-top: calc(5px + (10 - 5) * ((100vw - 414px) / (1700 - 414))); } .PopUp.PopUpT1 .container .element .element-inner .textbox .introduction { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .PopUp.PopUpT1 .container .element .element-inner .textbox .default-link { margin-top: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } .PopUp.PopUpT1 .container .element .element-inner .textbox .author { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .PopUp.PopUpT1.Hotels .inner.count2 .elements .bg1 img { height: 32vh; } } @media (max-width: 750px) { .PopUp.PopUpT1 .container .element .element-inner .textbox { width: 100%; } .PopUp.PopUpT1 .container .element .element-inner .image { width: 100%; margin-top: 20px; } .PopUp.PopUpT1.Hotels .inner .elements .bg1 { display: none; } .PopUp.PopUpT1.Hotels .inner .elements .element .headline-mobile { display: block; text-align: center; position: absolute; z-index: 5; left: 115%; top: -10%; width: 100vw; transform: translate(-115%, 0%); text-align: center; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .headline-mobile { opacity: 0; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element + .element .headline-mobile { opacity: 1; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .location { display: none; } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .textbox .price-info { display: none; } } @media (max-width: 500px) { .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .element-inner .image img { aspect-ratio: auto !important; } } @media (max-width: 400px) { .PopUp.PopUpT1.Hotels .inner .elements .element .headline-mobile { top: -20%; width: 80vw; left: 50%; transform: translate(-50%, -20%); } .PopUp.PopUpT1.Hotels .inner.count2 .elements .element .headline-mobile { left: 180%; transform: translate(-180%, -15%); } }/* Overlay _________________________ */ @media all { div.OverlayExitT1 { display: none; position: fixed; z-index: 2000; top: 0px; left: 0px; width: 100%; background-color: rgba(91,94,81,0.7); } div.OverlayExitT1 div.overlaycontent { display: flex; justify-content: center; align-items: center; height: 100vh; width: 100%; } div.OverlayExitT1 div.overlaycontent .overlay-inner { position: relative; } div.OverlayExitT1 div.overlaycontent svg { width: 650px; height: 778px; } div.OverlayExitT1 div.overlaycontent div.innerclass { width: 100%; position: absolute; left: 50%; top: 0px; transform: translateX(-50%); padding: 90px 55px 0px 55px; box-sizing: border-box; } div.OverlayExitT1 div.overlaycontent div.innerclass div.intro .content { margin-top: 15px; } div.OverlayExitT1 div.overlaycontent div.innerclass div.intro .subheadline { margin-top: 30px; } div.OverlayExitT1 div.overlaycontent div.innerclass a.overlayclose { display: inline-block; position: absolute; right: 40px; top: 55px; padding: 10px; -webkit-transition: -webkit-transform 500ms ease; transition: transform 500ms ease; } div.OverlayExitT1 div.overlaycontent div.innerclass a.overlayclose:hover { -webkit-transform: scale(1.25); transform: scale(1.25); opacity: 1; filter: alpha(opacity = 100); } div.OverlayExitT1 div.overlaycontent div.innerclass a.overlayclose svg { width: 16px; height: 16px; stroke: #5B5E51; stroke-width: 2px } div.OverlayExitT1 div.overlaycontent div.table { margin-top: 40px; } div.OverlayExitT1 div.overlaycontent div.table div.row { display: flex; align-items: stretch; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col { width: 33.333333%; padding: 15px; box-sizing: border-box; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col1 { border-left: 1px solid #DDDDDD; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col2 { border-left: 1px solid #DDDDDD; border-right: 1px solid #DDDDDD; display: flex; justify-content: center; align-items: center; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col3 { border-right: 1px solid #DDDDDD; display: flex; justify-content: center; align-items: center; } div.OverlayExitT1 div.overlaycontent div.table div.row:first-child div.col { border-top: 1px solid #DDDDDD; } div.OverlayExitT1 div.overlaycontent div.table div.row:first-child div.col2 { border-top: 0px; position: relative; } div.OverlayExitT1 div.overlaycontent div.table div.row:first-child div.col2:before { content: ''; height: 39px; position: absolute; top: -39px; left: -1px; border: 1px solid #DDDDDD; border-bottom: 0px; width: 100%; } div.OverlayExitT1 div.overlaycontent div.table div.row:last-child div.col { border-bottom: 1px solid #DDDDDD; } div.OverlayExitT1 div.overlaycontent div.table div.row:last-child div.col2 { position: relative; border-bottom: 0px; } div.OverlayExitT1 div.overlaycontent div.table div.row:last-child div.col2:after { content: ''; position: absolute; height: 14px; bottom: -14px; width: 100%; left: -1px; border: 1px solid #DDDDDD; border-top: 0px; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col svg { width: 23px; height: 22px; stroke: #468C00; stroke-width: 1.5px; } div.OverlayExitT1 div.overlaycontent div.table div.row div.col svg.cross { stroke: #B1B537; width: 17px; height: 17px; } div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead div.col2 { padding: 0px; } div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead div.col2 img { width: 95px; position: relative; top: -25px; } div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead div.col2, div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead div.col3 { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 700; } div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead span.booking { color: #001A5D; } div.OverlayExitT1 div.overlaycontent div.table div.row.tablehead span.com { color: #0490DF; } div.OverlayExitT1 div.overlaycontent div.innerclass a.button { text-align: center; box-sizing: border-box; width: 100%; margin-top: 50px; } div.OverlayExitT1 .bgrowalternate { background-color: #F0EDE8; } } @media (max-width: 1250px), (max-height: 800px) { div.OverlayExitT1 { display: none !important; } } @media all { .OnlineShop.OnlineShop { position: relative; } } @media all { .Offer.UspT1 { padding-top: 130px; padding-bottom: 110px; text-align: center; } .Offer.UspT1 .headline + .elements { margin-top: 70px; } .Offer.UspT1 .elements img { width: 150px; margin: 0px auto; } .Offer.UspT1 .elements img + .headline { margin-top: 20px; } .Offer.UspT1 .elements .morelink { margin-top: 15px; } } @media (max-width: 1700px) { .Offer.UspT1 { padding-top: calc(50px + (130 - 50) * ((100vw - 414px) / (1700 - 414))); padding-bottom: calc(40px + (110 - 40) * ((100vw - 414px) / (1700 - 414))); } .Offer.UspT1 .headline + .elements { margin-top: calc(25px + (70 - 25) * ((100vw - 414px) / (1700 - 414))); } .Offer.UspT1 .elements img + .headline { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .Offer.UspT1 .elements .morelink { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Offer.UspT1 .elements .headline { display: none; } } @media all { .Offer.ListT2 { position: relative; padding: 130px 0px; } .Offer.ListT2 .loader { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.9; z-index: 5; } .Offer.ListT2 .elements-container { margin: 0px -20px; } .Offer.ListT2 .elements-container .elements { display: flex; justify-content: flex-start; flex-wrap: wrap; } .Offer.ListT2 .elements-container .elements .element { padding: 0px 20px; width: 33.333333%; box-sizing: border-box; display: none; } .Offer.ListT2 .elements-container .elements .element .textbox { display: block; padding-top: 25px; } .Offer.ListT2 .elements-container .elements .element .textbox span { display: block; } .Offer.ListT2 .elements-container .elements .element .textbox .subheadline { margin-top: 5px; } .Offer.ListT2 .elements-container .elements .element .textbox .hotel, .Offer.ListT2 .elements-container .elements .element .textbox .region { font-weight: bold; margin-top: 5px; } .Offer.ListT2 .elements-container .elements .element .textbox .hotel + .region { margin-top: 0px; } .Offer.ListT2 .elements-container .elements .element .textbox .subheadline > span span { display: inline; } .Offer.ListT2 .elements-container .elements .element.hidden-price .price { display: none !important; } .Offer.ListT2 .elements-container .elements .element:first-child { display: block !important; } .Offer.ListT2 .button { margin-top: 45px; display: none; } .Offer.ListT2 .button .load-more { display: none; } .Offer.ListT2 .button.hidden-elements .load-more { display: block; } .Offer.ListT2 .button.hidden-elements .hide { display: none; } } @media (min-width: 1701px) { .Offer.ListT2 .elements-container .elements .element { padding-top: 0px; padding-bottom: 40px; } .Offer.ListT2 .elements-container .elements .element:nth-child(3n + 2) { padding-top: 40px; padding-bottom: 0px; } .Offer.ListT2 .elements-container .elements .element:nth-child(2), .Offer.ListT2 .elements-container .elements .element:nth-child(3) { display: block !important; } } @media (max-width: 1700px) { .Offer.ListT2 { padding: calc(60px + (130 - 60) * ((100vw - 414px) / (1700 - 414))) 0px; } .Offer.ListT2 .elements-container { margin: 0px calc(-1 * (5px + (20 - 5) * ((100vw - 414px) / (1700 - 414)))); } .Offer.ListT2 .elements-container .elements .element { padding: 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT2 .elements-container .elements .element .textbox { padding-top: calc(15px + (25 - 15) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT2 .button { margin-top: calc(25px + (45 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1700px) and (min-width: 921px) { .Offer.ListT2 .elements-container .elements .element { padding-top: 0px; padding-bottom: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT2 .elements-container .elements .element:nth-child(3n + 2) { padding-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); padding-bottom: 0px; } .Offer.ListT2 .elements-container .elements .element:nth-child(2), .Offer.ListT2 .elements-container .elements .element:nth-child(3) { display: block !important; } } @media (max-width: 1280px) { .Offer.ListT2 .elements-container .elements .element .textbox .subheadline > span span { display: block; } .Offer.ListT2 .elements-container .elements .element .textbox .subheadline .seperator { display: none; } } @media (max-width: 920px) { .Offer.ListT2 .elements-container .elements .element { width: 50%; } } @media (max-width: 920px) and (min-width: 541px) { .Offer.ListT2 .elements-container .elements .element { padding-top: 0px; padding-bottom: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT2 .elements-container .elements .element:nth-child(2n + 2) { padding-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); padding-bottom: 0px; } .Offer.ListT2 .elements-container .elements .element:nth-child(n + 3) { margin-top: calc(25px + (20 - 25) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT2 .elements-container .elements .element:nth-child(2) { display: block !important; } } @media (max-width: 540px) { .Offer.ListT2 .elements-container { margin: 0px; } .Offer.ListT2 .elements-container .elements { display: block; } .Offer.ListT2 .elements-container .elements .element { padding: 0px; width: 100%; } .Offer.ListT2 .elements-container .elements .element + .element { margin-top: calc(35px + (60 - 35) * ((100vw - 414px) / (1700 - 414))); } } @media all { .bgweb2 + .Offer.ListT1 { background-color: var(--bgweb2-bg-color, #FFFFFF); color: var(--bgweb2-text-color); } .bgweb3 + .Offer.ListT1 { background-color: var(--bgweb3-bg-color, #FFFFFF); color: var(--bgweb3-text-color); } .Offer.ListT1 { position: relative; } .Offer.ListT1 .loader { position: absolute; top: -80px; left: 0px; width: 100%; height: calc(100% + 80px); opacity: 0.8; z-index: 10; } .Offer.ListT1 .elements-container { margin: 0px -20px; } .Offer.ListT1 .elements-container .elements { display: flex; justify-content: flex-start; flex-wrap: wrap; } .Offer.ListT1 .elements-container .elements .element { padding: 0px 20px; width: 33.333333%; box-sizing: border-box; } .Offer.ListT1 .elements-container .elements .element .textbox { display: block; padding-top: 25px; } .Offer.ListT1 .elements-container .elements .element .textbox span { display: block; } .Offer.ListT1 .elements-container .elements .element .textbox .subheadline { margin-top: 5px; } .Offer.ListT1 .elements-container .elements .element .textbox .hotel, .Offer.ListT1 .elements-container .elements .element .textbox .region { font-weight: bold; margin-top: 5px; } .Offer.ListT1 .elements-container .elements .element .textbox .hotel + .region { margin-top: 0px; } .Offer.ListT1 .elements-container .elements .element .textbox .subheadline > span span { display: inline; } .Offer.ListT1 .elements-container .elements .element.hidden-price .price { display: none !important; } .Offer.ListT1 .filter { margin-bottom: 40px; } .Offer.ListT1 .filter form .innerForm { display: flex; justify-content: center; align-items: center; border: 1px solid rgba(112,112,112,0.2); -webkit-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); -moz-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); box-shadow: 0px 0px 15px rgba(112,112,112,0.3); } .Offer.ListT1 .filter form .innerForm > * { display: none; width: 25%; box-sizing: border-box; } .Offer.ListT1 .filter form .innerForm > a.senden, .Offer.ListT1 .filter form .innerForm > div.row.select, .Offer.ListT1 .filter form .innerForm > div.row.calendar { display: block; } .Offer.ListT1 .filter form .innerForm > a.senden { height: 78px; padding: 0px; display: flex; align-items: center; justify-content: center; border-radius: 0px; border: 0px; -webkit-border-radius: 0px; } .Offer.ListT1 .filter form .innerForm > a.senden span { display: none; } .Offer.ListT1 .filter form .innerForm > a.senden span.mitte { display: block; } .Offer.ListT1 .filter form .innerForm > div.row.select, .Offer.ListT1 .filter form .innerForm > div.row.calendar { position: relative; border-right: 1px solid rgba(112,112,112,0.2); } .Offer.ListT1 .filter form .innerForm > div.row.select > .clear, .Offer.ListT1 .filter form .innerForm > div.row.calendar > .clear { display: none; } .Offer.ListT1 .filter form .innerForm > div.row.select label, .Offer.ListT1 .filter form .innerForm > div.row.calendar label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Offer.ListT1 .filter form .innerForm > div.row.calendar input { height: 78px; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield, .Offer.ListT1 .filter form .innerForm > div.row.calendar div.calendarfield { width: 100%; margin: 0px; padding: 0px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield { height: 78px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field { height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; margin: 0px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.select { margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field select { cursor: pointer; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field span.selecticon:after, .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Offer.ListT1 .filter form .innerForm > div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; z-index: 7; } .Offer.ListT1 .filter form .innerForm > div.row.calendar div.calendarfield a.kalenderopener svg { width: 21px; height: 21px; margin: 0px; position: absolute; top: calc(50% - 10px); right: 16px; fill: #8D8D8D; } .IntroT2.standardspace + .Offer.ListT1.standardspace { padding-top: 0px; } .IntroT2.standardspace + .Offer.ListT1.withoutFilter.standardspace { margin-top: calc(-30px + (-70 - -30) * ((100vw - 414px) / (1700 - 414))); } .IntroT2 + .Offer.ListT1 .filter { transform: translateY(-41px); } .Offer.ListT1 .filter .additional-filter { overflow: hidden; margin-top: 15px; } .Offer.ListT1 .filter .additional-filter .hotel-counter { float: left; } .Offer.ListT1 .filter .additional-filter a { display: block; float: right; padding-left: 30px; text-align: right; position: relative; } .Offer.ListT1 .filter .additional-filter a:after, .Offer.ListT1 .filter .additional-filter a:before { content: ''; position: absolute; background-color: currentColor; height: 1px; width: 12px; top: 12px; left: 12px; transform: rotate(-45deg); } .Offer.ListT1 .filter .additional-filter a:before { transform: rotate(45deg); } .Offer.ListT1.withoutFilter .elements-container .elements .element { display: none; } .Offer.ListT1.withoutFilter .elements-container .elements .element:first-child { display: block !important; } .Offer.ListT1.withoutFilter .button { margin-top: 45px; display: none; } .Offer.ListT1.withoutFilter .button { margin-top: 45px; display: none; } .Offer.ListT1.withoutFilter .button .load-more { display: none; } .Offer.ListT1.withoutFilter .button.hidden-elements .load-more { display: block; } .Offer.ListT1.withoutFilter .button.hidden-elements .hide { display: none; } } @media (min-width: 1701px) { .Offer.ListT1 .elements-container .elements .element { padding-top: 0px; padding-bottom: 60px; } .Offer.ListT1 .elements-container .elements .element:nth-child(3n + 2) { padding-top: 60px; padding-bottom: 0px; } .Offer.ListT1 .elements-container .elements .element:nth-child(2), .Offer.ListT1 .elements-container .elements .element:nth-child(3) { display: block !important; } } @media (max-width: 1700px) { .Offer.ListT1 .elements-container { margin: 0px calc(-1 * (5px + (20 - 5) * ((100vw - 414px) / (1700 - 414)))); } .Offer.ListT1 .elements-container .elements .element { padding: 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT1 .elements-container .elements .element .textbox { padding-top: calc(15px + (25 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1700px) and (min-width: 921px) { .Offer.ListT1 .elements-container .elements .element { padding-top: 0px; padding-bottom: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT1 .elements-container .elements .element:nth-child(3n + 2) { padding-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); padding-bottom: 0px; } .Offer.ListT1.withoutFilter .elements-container .elements .element:nth-child(2), .Offer.ListT1.withoutFilter .elements-container .elements .element:nth-child(3) { display: block !important; } } @media (max-width: 1280px) { .Offer.ListT1 .elements-container .elements .element .textbox .subheadline > span span { display: block; } .Offer.ListT1 .elements-container .elements .element .textbox .subheadline .seperator { display: none; } } @media (max-width: 1080px) { .IntroT2 + .Offer.ListT1 .filter { transform: translateY(-79px); } .Offer.ListT1 .filter form .innerForm { flex-wrap: wrap; } .Offer.ListT1 .filter form .innerForm > * { width: 50%; } .Offer.ListT1 .filter form .innerForm > div.row.calendar { border-bottom: 1px solid rgba(112,112,112,0.2); } } @media (max-width: 920px) { .Offer.ListT1 .elements-container .elements .element { width: 50%; } } @media (max-width: 920px) and (min-width: 541px) { .Offer.ListT1 .elements-container .elements .element { padding-top: 0px; padding-bottom: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Offer.ListT1 .elements-container .elements .element:nth-child(2n + 2) { padding-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); padding-bottom: 0px; } .Offer.ListT1.withoutFilter .elements-container .elements .element:nth-child(2) { display: block !important; } } @media (max-width: 640px) { .IntroT2 + .Offer.ListT1 .filter { transform: translateY(-19px); } .Offer.ListT1 .loader { position: absolute; top: -20px; left: 0px; width: 100%; height: calc(100% + 20px); opacity: 0.8; z-index: 10; } .Offer.ListT1 .filter { margin-bottom: 16px; } .Offer.ListT1 .filter form .innerForm > * { width: 100%; } .Offer.ListT1 .filter form .innerForm > a.senden { height: 58px; } .Offer.ListT1 .filter form .innerForm > div.row.select { border-bottom: 1px solid rgba(112,112,112,0.2); } .Offer.ListT1 .filter form .innerForm > div.row.select label, .Offer.ListT1 .filter form .innerForm > div.row.calendar label { top: 6px; left: 16px; } .Offer.ListT1 .filter form .innerForm > div.row.calendar input { height: 58px; padding: 25px 16px 6px 16px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield { height: 58px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field { padding: 25px 16px 6px 16px; } .Offer.ListT1 .filter form .innerForm > div.row.calendar div.calendarfield a.kalenderopener svg { right: 16px; } .Offer.ListT1 .filter form .innerForm > div.row.select div.selectfield span.field span.selecticon { right: 22px; } } @media (max-width: 850px) { .IntroT2 + .Offer.ListT1 .filter { transform: translateY(-44px); } .Offer.ListT1 .filter { margin-bottom: 0px; } } @media (max-width: 540px) { .Offer.ListT1 .elements-container { margin: 0px; } .Offer.ListT1 .elements-container .elements { display: block; } .Offer.ListT1 .elements-container .elements .element { padding: 0px; width: 100%; } .Offer.ListT1 .elements-container .elements .element + .element { margin-top: calc(35px + (60 - 35) * ((100vw - 414px) / (1700 - 414))); } } @media all { .OfferDetailT1 .introduction { padding-bottom: 150px; position: relative; } .OfferDetailT1 .introduction:before { content: ''; position: absolute; bottom: 0px; left: 0px; width: 220px; height: 320px; transform: scaleX(-1); background-image: url('/images/design/decorations/deco-8-1.png'); background-repeat: no-repeat; background-position: left bottom; background-size: contain; } .OfferDetailT1 .introduction .inner { display: flex; flex-wrap: wrap; } .OfferDetailT1 .introduction .inner .left { width: 37.500000%; margin-right: 140px; } .OfferDetailT1 .introduction .inner .left .headline { margin-top: 10px; } .OfferDetailT1 .introduction .inner .left .price { margin-top: 40px; } .OfferDetailT1 .introduction .inner .left .hotel { margin-top: 10px; display: inline-block; } .OfferDetailT1 .introduction .inner .left .buttons { margin-top: 15px; } .OfferDetailT1 .introduction .inner .left .buttons .button + .button { margin-left: 20px; } .OfferDetailT1 .introduction .inner .right { width: 34.558824%; padding-top: 100px; } .OfferDetailT1 .introduction .inner .right .description { margin-top: 10px; } .OfferDetailT1 .content { padding-top: 140px; } .OfferDetailT1 .content .headline { color: #ffffff; } .OfferDetailT1 .content .headline + .images { margin-top: 50px; } .OfferDetailT1 .content .images:before { content: ''; position: absolute; bottom: 0px; right: 0px; width: 240px; height: 320px; transform: scaleX(-1); background-image: url('/images/design/decorations/deco-3-3.png'); background-repeat: no-repeat; background-position: left bottom; background-size: contain; z-index: 2; } .OfferDetailT1 .content .inclusivecontent { margin-top: 60px; } .OfferDetailT1 .content .inclusivecontent .element.clickable .inclusivename { cursor: pointer; transition: opacity .3s linear; } .no-mobile-device .OfferDetailT1 .content .inclusivecontent .element.clickable .inclusivename:hover { opacity: .5; } .OfferDetailT1 .content .inclusivecontent .element + .element { margin-top: 20px; } .OfferDetailT1 .content .inclusivecontent .element .inclusivename { display: flex; justify-content: space-between; align-items: center; padding: 15px 30px; } .OfferDetailT1 .content .inclusivecontent .element .inclusivename span { width: calc(100% - 25px); } .OfferDetailT1 .content .inclusivecontent .element .inclusivename svg { width: 15px; height: 15px; transition: transform .3s linear; } .OfferDetailT1 .content .inclusivecontent .element.active .inclusivename svg { transform: rotate(-180deg); } .OfferDetailT1 .content .inclusivecontent .element .description { border-top: 1px solid #C1C0BA; padding: 30px; } .OfferDetailT1 .introduction .inner .left .price[data-price="0,00"], .OfferDetailT1 .introduction .inner .left .price[data-price^="0,00"], .OfferDetailT1 .introduction .inner .left .price[data-price="0,00€"], .OfferDetailT1 .introduction .inner .left .price[data-price="0,00 €"] { display: none !important; } } @media (max-width: 1700px) { .OfferDetailT1 .introduction { padding-bottom: calc(50px + (150 - 50) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction:before { width: calc(120px + (220 - 120) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .left { margin-right: calc(40px + (140 - 40) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .left .headline { margin-top: calc(5px + (10 - 5) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .left .price { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .left .buttons { margin-top: calc(10px + (15 - 10) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .left .buttons .button + .button { margin-left: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .right { padding-top: calc(30px + (100 - 30) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .right .description { margin-top: calc(5px + (10 - 5) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content { padding-top: calc(40px + (140 - 40) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .headline + .images { margin-top: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .images:before { width: calc(160px + (240 - 160) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .inclusivecontent { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .inclusivecontent .element + .element { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .inclusivecontent .element .inclusivename { padding: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414)))calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .content .inclusivecontent .element .description { padding: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 1025px) { .OfferDetailT1 .introduction .inner .left .season-nights { display: none; } } @media (max-width: 1024px) { .OfferDetailT1 .introduction:before { display: none; width: 0px; height: 0px; } .OfferDetailT1 .introduction .inner .left { width: 100%; } .OfferDetailT1 .introduction .inner .left .price { margin-top: 0px; } .OfferDetailT1 .introduction .inner .left .season-nights { display: block; margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .OfferDetailT1 .introduction .inner .right { width: 90%; } .OfferDetailT1 .introduction .inner .right .season-nights { display: none; } .OfferDetailT1 .introduction .inner .left .buttons { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 620px) { .OfferDetailT1 .content .images:before { display: none; width: 0px; height: 0px; } } /* RequestT1 _____________________________________________________________ */ @media all { section.NewsletterOld { margin: 17px 0px 0px 0px; position: relative; z-index: 5; } section.NewsletterOld form { max-width: 815px; margin: 60px 0px 60px 0px; } section.NewsletterOld form label.pflichtfeld { font-weight: normal; } section.NewsletterOld form a.senden { margin: 0px 0px 0px 0px; } section.NewsletterOld form div.rowline { } section.NewsletterOld form div.big1 { margin: 0px 0px 20px 0px; } section.NewsletterOld form div.row { float: left; display: inline; width: 31.288344%; clear: none; margin: 0px 0px 20px 3.067485%; } section.NewsletterOld form div.row.requiredinfobox { float: none; display: block; width: auto; } section.NewsletterOld form div.inputfield input, section.NewsletterOld form div.calendarfield input, section.NewsletterOld form div.selectfield span.field { border: solid 1px #C8C8C8; } section.NewsletterOld form div.row.email { width: 65.521472%; } section.NewsletterOld form div.row:first-child { margin: 0px 0px 20px 0px; } section.NewsletterOld form div.row label { width: 100%; margin: 0px 0px 0px 0px; font-size: 1.200000em; color: #777777; } section.NewsletterOld form div.row div.inputfield, section.NewsletterOld form div.row div.selectfield { width: 100%; } section.NewsletterOld form div.row.textarea { width: 100%; } section.NewsletterOld form div.row div.textarea { width: 100%; background-color: #F4F4F4; color: #777777; padding: 0px 0px 0px 0px; position: relative; z-index: 1; border: solid 1px #C8C8C8; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } section.NewsletterOld form div.row.checkbox label { display: none; } section.NewsletterOld form div.row.checkbox { width: 100%; } section.NewsletterOld form div.row.checkbox label.extralabel { display: inline-block; margin-top: 4px; } section.NewsletterOld form div.row div.textarea textarea { padding: 0.933333em 0.933333em 0.933333em 0.933333em; width: 100%; height: 8.533333em; background: transparent; border: 0px; resize: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } section.NewsletterOld form div.row.checkbox { width: 60%; margin: 0px 0px 8px 0px; } section.NewsletterOld form div.row.checkbox span.privacytoggle { display: inline-block; margin: 0px 0px 0px 5px; } section.NewsletterOld form div.row.checkbox div.privacytext { margin: 5px 0px 10px 0px; } #jsnewsletteroverlayerposition { display: none; text-align: center; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; min-height: 600px; z-index: 999; overflow: hidden; } #jsnewsletteroverlayerposition div.center { margin: 0 auto; width: 496px; position: relative; left: 0px; top: 150px; z-index: 999; } #jsnewsletteroverlayerbg { display: none; opacity: 0.7; filter: alpha(opacity = 70); background-color: #000000; position: fixed; _position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; min-height: 600px; z-index: 998; overflow: hidden; } #jsnewsletteroverlayer { position: absolute; left: 0px; top: 0px; width: 496px; height: 360px; z-index: 999; } div.jsnewsletteroverlayer { position: relative; display: block; color: #000000; font-size: 11px; } div.jsnewsletteroverlayer a.privacy { position: absolute; left: 247px; top: 203px; color: #000000; font-size: 10px; } div.jsnewsletteroverlayer a.schliessen { position: absolute; right: 13px; top: 29px; width: 26px; height: 24px; background: url(/images/design/bg-overlayer-x.png) no-repeat 0px 0px; font-size: 1px; line-height: 1px; } div.jsnewsletteroverlayer div.overlayertext { color: #444444; font-size: 19px; line-height: 24px; width: 100%; text-align: left; clear: both; float: left; border-top: 1px solid #C8C8C8; } div.jsnewsletteroverlayer div.overlayertext ul { margin: 20px 0px 0px 0px; padding-left: 0px; } div.jsnewsletteroverlayer div.overlayertext ul li { text-indent: 0px; margin: 0px 0px 6px 0px; padding: 0px 0px 0px 30px; background: url(/images/modules/NewsletterOld/bg-overlayer-li.png) no-repeat 0px 5px; } div.jsnewsletteroverlayer div.emailtext { color: #FFFFFF; font-size: 17px; line-height: 19px; position: absolute; left: 28px; bottom: 88px; width: 440px; text-transform: uppercase; text-align: left; } form.overlayer input.email { position: absolute; left: 31px; bottom: 58px; width: 305px; height: 25px; color: #b7b6b6; background-color: transparent; border: 0px; font-size: 17px; line-height: 25px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } form.overlayer input.privacy { position: absolute; left: 30px; bottom: 32px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } form.overlayer label.privacy { position: absolute; left: 50px; bottom: 30px; color: #e4f09a; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; } form.overlayer label.privacy a { color: #e4f09a; } form.overlayer label.privacy a:hover { color: #003616; } div.jsnewsletteroverlayer a.button { color: #FFFFFF; cursor: pointer; font-size: 15px; line-height: 31px; position: absolute; left: 347px; bottom: 55px; margin: 0px 0px 0px 0px; } div.jsnewsletteroverlayer a.button:hover { color: #003616; } div.jsnewsletteroverlayer a.button span.links { background: url(/images/design/bg-overlayer-button-l.gif) no-repeat 0px 0px; float: left; display: inline; width: 3px; height: 31px; } div.jsnewsletteroverlayer a.button span.mitte { background: url(/images/design/bg-overlayer-button-m.gif) repeat-x 0px 0px; float: left; display: inline; height: 31px; padding: 0px 9px 0px 8px; } div.jsnewsletteroverlayer a.button span.rechts { background: url(/images/design/bg-overlayer-button-r.gif) no-repeat 0px 0px; float: left; display: inline; width: 3px; height: 31px; } div.jsnewsletteroverlayer a.close { float: right; } div.jsnewsletteroverlayer img.logo { float: left; padding-bottom: 22px; } div.jsnewsletteroverlayer span.titel.suedtirol { margin-top: 5px; float: right; color: #003913; font-size: 20px; line-height: 40px; font-family: 'Suedtirol'; clear: right; } div.jsnewsletteroverlayer div.overlayertext ul li:before { content: ""; } div.overlayercontainernl { top: 50% !important; margin-top: -200px; } div.overlayercontainernl div.content { width: 585px !important; } div.overlayercontainernl div.innen { padding: 0px 0px 0px 0px !important; } div.overlayercontainernl div.top { padding: 25px 25px 25px 25px !important; } div.overlayercontainernl div.nlanmeldung { float: left; width: 100%; background-color: #A9BF00; margin-top: 15px; } div.overlayercontainernl div.email label.email { color: #FFFFFF; font-size: 18px; margin-left: 30px; margin-top: 25px; margin-bottom: 5px; font-weight: normal; } div.overlayercontainernl div.email div.email { width: 378px; height: 40px; margin-left: 30px; font-family: 'Kievit'; } div.overlayercontainernl div.email div.email input { height: 40px; font-size: 18px; color: #777777; font-family: 'Kievit'; } div.overlayercontainernl div.email div.row { width: 410px; float: left; } div.overlayercontainernl div.email a.button3 { margin: 53px 25px 0px 0px; line-height: 40px; } div.overlayercontainernl div.email div.erroricon { top: 15px; right: 10px; } div.overlayercontainernl div.okicon { top: 15px; } div.overlayercontainernl div.row label.privacy { width: auto; float: none; display: inline-block; margin-left: 5px; font-weight: normal; } div.overlayercontainernl div.privacy { margin-left: 30px; font-size: 15px; line-height: 28px; color: #FFFFFF; font-family: 'Kievit'; padding-bottom: 5px; font-weight: normal; } div.overlayercontainernl div.privacy div.row { float: left; min-width: 220px; } div.overlayercontainernl div.privacy div.row label { display: none; } div.overlayercontainernl div.privacy div.row label.extralabel { display: inline; } div.overlayercontainernl div.privacy div.row label.extralabel a { color: #FFFFFF; position: relative; top: 2px; } div.overlayercontainernl div.privacy span.label { float: left; } div.overlayercontainernl div.privacy span.privacytoggle a { color: #FFFFFF; font-family: 'Kievit'; font-weight: normal; font-size: 15px; } div.overlayercontainernl div.privacy div.privacytext { font-size: 13px; float: left; } div.overlayercontainernl div.privacy div.privacytext a { color: #003913; font-size: 13px; } div.overlayercontainernl div.privacy div.erroricon { right: 20px !important; } div.overlayercontainernl div.introduction { color: #FFFFFF; padding: 30px 30px 30px 30px; } } @media (max-width: 660px) { section.NewsletterOld form div.row { width: 48.466258%; } section.NewsletterOld form div.row { width: 48.466258%; } section.NewsletterOld form div.row.email { width: 100%; } section.NewsletterOld form div.rowline div.row.select { width: 100%; margin-left: 0px; } section.NewsletterOld form div.row.checkbox label.extralabel { width: 90%; } div.overlayernl { display: none; } div.overlayercontainernl { display: none; } } @media all { .Magazine.TeaserT2 { position: relative; } .Magazine.TeaserT2 .headline + .elements { margin-top: 40px; } .Magazine.TeaserT2 .elements { position: relative; } .Magazine.TeaserT2 .elements .element { width: 47.794118%; position: relative; float: left; } .Magazine.TeaserT2 .elements .element:nth-of-type(2n + 2) { float: right; } .Magazine.TeaserT2 .elements .element:nth-of-type(2) { margin-top: 110px; } .Magazine.TeaserT2 .elements .element.type-2:first-of-type + .element.type-1 { margin-top: 250px; } .Magazine.TeaserT2 .elements .element:nth-of-type(1n + 3) { margin-top: 60px; } .Magazine.TeaserT2 .elements .element picture:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Magazine.TeaserT2 .elements .element picture:after { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Magazine.TeaserT2 .elements .element .inner-element { position: relative; } .Magazine.TeaserT2 .elements .element .inner-element > a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 3; } .Magazine.TeaserT2 .elements .element .textbox { position: absolute; left: 35px; bottom: 35px; padding-right: 150px; z-index: 2; } .Magazine.TeaserT2 .elements .element .textbox .quote-img { width: 33px; margin-bottom: 15px; } .Magazine.TeaserT2 .elements .element .textbox .headline { font-size: 31px; line-height: 39px; } .Magazine.TeaserT2 .elements .element .textbox a { position: relative; } .Magazine.TeaserT2 .elements .element .textbox .link-icon { width: 46px; height: 40px; display: inline-block; position: absolute; margin-left: 5px; margin-top: -5px; } .Magazine.TeaserT2 .elements .element .textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Magazine.TeaserT2 .elements .element .author { position: absolute; left: 35px; top: 35px; z-index: 2; pointer-events: none; } .Magazine.TeaserT2 .elements .backlink { position: absolute; left: 0px; bottom: 0px; } } @media (max-width: 1700px) { .Magazine.TeaserT2 .elements .element:nth-of-type(2) { margin-top: calc(50px + (110 - 50) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element.type-2:first-of-type + .element.type-1 { margin-top: calc(50px + (250 - 50) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element:nth-of-type(1n + 3) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .headline + .elements { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element .textbox { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); bottom: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(30px + (150 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element .textbox .link-icon { width: calc(30px + (46 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element .textbox .headline { font-size: calc(21px + (31 - 21) * ((100vw - 414px) / (1700 - 414))); line-height: calc(29px + (39 - 29) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element .author { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 800px) { .Magazine.TeaserT2 .elements .element { width: 100%; } .Magazine.TeaserT2 .elements .element:nth-of-type(2), .Magazine.TeaserT2 .elements .element.type-2:first-of-type + .element.type-1, .Magazine.TeaserT2 .elements .element:nth-of-type(1n + 3) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT2 .elements .element picture:after { display: none; width: 0px; height: 0px; } .Magazine.TeaserT2 .elements .element .inner-element > a { display: none; } .Magazine.TeaserT2 .elements .element .textbox { position: relative; left: 0px; bottom: 0px; margin-top: 20px; color: var(--bgweb-text-color, #000000); } .Magazine.TeaserT2 .elements .element .textbox .headline { color: #404041; } .Magazine.TeaserT2 .elements .element .textbox .link-icon { display: block; position: relative; margin-left: 0px; margin-top: 5px; } .Magazine.TeaserT2 .elements .element .textbox .link-icon svg + svg { stroke: var(--bgweb-link-icon-color); } } @media all { .Magazine.TeaserT1 { position: relative; } .Magazine.TeaserT1 .headline + .elements { margin-top: 40px; } .Magazine.TeaserT1 .elements { display: flex; align-items: flex-end; justify-content: space-between; position: relative; } .Magazine.TeaserT1 .elements .element { width: 47.794118%; position: relative; } .Magazine.TeaserT1 .elements .element:first-of-type { margin-bottom: 75px; } .Magazine.TeaserT1 .elements .element picture:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Magazine.TeaserT1 .elements .element picture:after { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Magazine.TeaserT1 .elements .element .textbox { position: absolute; left: 35px; bottom: 35px; padding-right: 150px; z-index: 2; } .Magazine.TeaserT1 .elements .element .textbox .quote-img { width: 33px; margin-bottom: 15px; } .Magazine.TeaserT1 .elements .element .textbox .headline { font-size: 31px; line-height: 39px; } .Magazine.TeaserT1 .elements .element .textbox a { position: relative; } .Magazine.TeaserT1 .elements .element .textbox .link-icon { width: 46px; height: 40px; display: inline-block; position: absolute; margin-left: 5px; margin-top: -5px; } .Magazine.TeaserT1 .elements .element .textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Magazine.TeaserT1 .elements .element .author { position: absolute; left: 35px; top: 35px; z-index: 2; pointer-events: none; } .Magazine.TeaserT1 .elements .backlink { position: absolute; left: 0px; bottom: 0px; } } @media (max-width: 1700px) { .Magazine.TeaserT1 .headline + .elements { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT1 .elements .element .textbox { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); bottom: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(30px + (150 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT1 .elements .element .textbox .link-icon { width: calc(30px + (46 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT1 .elements .element .textbox .headline { font-size: calc(21px + (31 - 21) * ((100vw - 414px) / (1700 - 414))); line-height: calc(29px + (39 - 29) * ((100vw - 414px) / (1700 - 414))); } .Magazine.TeaserT1 .elements .element .author { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 800px) { .Magazine.TeaserT1 .elements { display: block; } .Magazine.TeaserT1 .elements .element { width: 100%; } .Magazine.TeaserT1 .elements .element:first-of-type { margin-bottom: 0px; } .Magazine.TeaserT1 .elements .element + .element { margin-top: 30px; } .Magazine.TeaserT1 .elements .element:not(.T5):not(.T6):after { display: none; width: 0px; height: 0px; } .Magazine.TeaserT1 .elements .element:not(.T5) .textbox { position: relative; left: 0px; bottom: 0px; margin-top: 20px; color: var(--bgweb-text-color, #000000); } .Magazine.TeaserT1 .elements .element:not(.T5) .textbox .headline { color: #404041; } .Magazine.TeaserT1 .elements .element .textbox .link-icon { display: block; position: relative; margin-left: 0px; margin-top: 5px; } .Magazine.TeaserT1 .elements .element:not(.T5) .textbox .link-icon svg + svg { stroke: var(--bgweb-link-icon-color); } .Magazine.TeaserT1 .elements .backlink { position: relative; margin-top: 30px; } } @media all { .Magazine.ListT1 { position: relative; } .IntroT2.standardspace + .Magazine.ListT1.standardspace { padding-top: 0px; } .Magazine.ListT1 .filter { -webkit-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); -moz-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); box-shadow: 0px 0px 15px rgba(112,112,112,0.3); } .IntroT2 + .Magazine.ListT1 .filter { transform: translateY(-50%); } .Magazine.ListT1 .filter .inner-filter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding-bottom: 30px; padding-right: 50px; } .Magazine.ListT1 .filter .inner-filter .option { margin-left: 50px; margin-top: 30px; } .Magazine.ListT1 .filter .inner-filter .option.active { opacity: 0.5; } .Magazine.ListT1 form div.row.select { -webkit-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); -moz-box-shadow: 0px 0px 15px rgba(112,112,112,0.3); box-shadow: 0px 0px 15px rgba(112,112,112,0.3); } .Magazine.ListT1 form div.row.select div.selectfield { width: 100%; height: 55px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; margin: 0px; } .Magazine.ListT1 form div.row.select div.selectfield span.field { height: 100%; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 14px; line-height: 55px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; margin: 0px; text-align: center; } .Magazine.ListT1 form div.row.select div.selectfield span.select { margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Magazine.ListT1 form div.row.select div.selectfield span.field select { cursor: pointer; } .Magazine.ListT1 form div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Magazine.ListT1 form div.row.select div.selectfield span.field span.selecticon:after, .Magazine.ListT1 form div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Magazine.ListT1 div.elements-container div.grid-sizer { width: 47.794118%; } .Magazine.ListT1 div.elements-container div.gutter-sizer { width: 4.411765%; } .Magazine.ListT1 .elements:first-of-type { margin-top: 80px; } .Magazine.ListT1 .elements .element { position: relative; } .Magazine.ListT1 .elements:first-of-type .element:not(:nth-of-type(3)), .Magazine.ListT1 .elements:not(:first-of-type) .element { width: 650px; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(2n + 3), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(2n + 2) { } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(4), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(3) { margin-top: 100px; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(5), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(4) { margin-top: 210px; } .Magazine.ListT1 .elements:first-of-type .element.T5:nth-of-type(5), .Magazine.ListT1 .elements:not(:first-of-type) .element.T5:nth-of-type(4) { margin-top: 310px; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(1n + 6), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(1n + 5) { margin-top: 60px; } /* .Magazine.ListT1 .elements:first-of-type { margin-top: 80px; } .Magazine.ListT1 .elements .element { position: relative; } .Magazine.ListT1 .elements:first-of-type .element:not(:first-of-type), .Magazine.ListT1 .elements:not(:first-of-type) .element { width: 650px; float: left; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(2n + 3), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(2n + 2) { float: right; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(2), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(1) { margin-top: 100px; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(3), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(2) { margin-top: 210px; } .Magazine.ListT1 .elements:first-of-type .element.T5:nth-of-type(3), .Magazine.ListT1 .elements:not(:first-of-type) .element.T5:nth-of-type(2) { margin-top: 310px; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(1n + 4), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(1n + 3) { margin-top: 60px; } */ /* .Magazine.ListT1 .elements:nth-of-type(2) { margin-top: 80px; } .Magazine.ListT1 .elements .element { position: relative; } .Magazine.ListT1 .elements:nth-of-type(2) .element, .Magazine.ListT1 .elements:nth-of-type(3) .element { width: 650px; float: left; } .Magazine.ListT1 .elements:nth-of-type(2) .element:nth-of-type(2n + 2), .Magazine.ListT1 .elements:nth-of-type(3) .element:nth-of-type(2n + 2) { float: right; } .Magazine.ListT1 .elements:nth-of-type(2) .element:nth-of-type(1), .Magazine.ListT1 .elements:nth-of-type(3) .element:nth-of-type(1) { margin-top: 100px; } .Magazine.ListT1 .elements:nth-of-type(2) .element:nth-of-type(2), .Magazine.ListT1 .elements:nth-of-type(3) .element:nth-of-type(2) { margin-top: 210px; } .Magazine.ListT1 .elements:nth-of-type(2) .element.T5:nth-of-type(2), .Magazine.ListT1 .elements:nth-of-type(3) .element.T5:nth-of-type(2) { margin-top: 310px; } .Magazine.ListT1 .elements:nth-of-type(2) .element:nth-of-type(1n + 3), .Magazine.ListT1 .elements:nth-of-type(3) .element:nth-of-type(1n + 3) { margin-top: 60px; } */ .Magazine.ListT1 .elements .element.T5 { height: 488px; } .Magazine.ListT1 .elements .element.T6 { padding: 20px 0px; } .Magazine.ListT1 .elements .element:not(.T5):not(.T6) picture:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Magazine.ListT1 .elements .element picture:after { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Magazine.ListT1 .elements .element.T5 img:not(.quote-img) { width: 330px; position: absolute; right: 0px; top: 0px; } .Magazine.ListT1 .elements .element.T6 .inner-element { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .Magazine.ListT1 .elements .element.T6 img { width: 440px; } .Magazine.ListT1 .elements .element .textbox { position: absolute; left: 35px; bottom: 35px; padding-right: 150px; z-index: 2; } .Magazine.ListT1 .elements .element .textbox .quote-img { width: 33px; margin-bottom: 15px; } .Magazine.ListT1 .elements .element:not(.T5) .textbox .headline { font-size: 31px; line-height: 39px; } .Magazine.ListT1 .elements .element.T5 .textbox .subheadline { margin-top: 40px; } .Magazine.ListT1 .elements .element .textbox a { position: relative; } .Magazine.ListT1 .elements .element .textbox .link-icon { width: 46px; height: 40px; display: inline-block; position: absolute; margin-left: 5px; margin-top: -5px; } .Magazine.ListT1 .elements .element .textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Magazine.ListT1 .elements .element .author { position: absolute; left: 35px; top: 35px; z-index: 2; pointer-events: none; } .Magazine.ListT1 .elements .element .hotelclass { display: inline-flex; } .Magazine.ListT1 .elements .element .hotelclass span { font-size: .9em; line-height: 1em; text-transform: lowercase; } .Magazine.ListT1 .newsletter { width: 100%; position: relative; margin-top: 100px; } .Magazine.ListT1 .newsletter:before, .Magazine.ListT1 .newsletter:after { content: ''; z-index: 2; position: absolute; background-size: contain; background-repeat: no-repeat; } .Magazine.ListT1 .newsletter:before { right: 0px; bottom: 0px; width: 245px; height: 210px; background-image: url('/images/design/decorations/deco-1-2.png'); background-position: right bottom; } .Magazine.ListT1 .newsletter:after { top: 0px; left: 0px; width: 220px; height: 300px; transform: rotate(180deg); background-image: url('/images/design/decorations/deco-8-1.png'); background-position: left top; } .Magazine.ListT1 .newsletter .newsletter-container { padding: 130px 0px; text-align: center; } .Magazine.ListT1 .newsletter .newsletter-headline + .newsletter-subheadline { margin-top: 5px; } .Magazine.ListT1 .newsletter .newsletter-subheadline { font-weight: 400; } .Magazine.ListT1 .loadmoreitems-container { display: flex; align-items: center; justify-content: center; margin-top: 50px; } } @media (max-width: 1700px) { .Magazine.ListT1 .filter .inner-filter { padding-bottom: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(35px + (50 - 35) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .filter .inner-filter .option { margin-left: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements:first-of-type { margin-top: calc(40px + (80 - 40) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements:first-of-type .element:not(:nth-of-type(3)), .Magazine.ListT1 .elements:not(:first-of-type) .element { width: 47.794118%; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(4), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(4) { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(5), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(4) { margin-top: calc(70px + (210 - 70) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements:first-of-type .element.T5:nth-of-type(5), .Magazine.ListT1 .elements:not(:first-of-type) .element.T5:nth-of-type(4) { margin-top: calc(70px + (310 - 70) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(1n + 6), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(1n + 5) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element.T5 { height: calc(300px + (488 - 300) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element.T5 img:not(.quote-img) { width: calc(180px + (330 - 180) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element.T6 img { width: 67.692308%; } .Magazine.ListT1 .elements .element .textbox { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); bottom: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); padding-right: calc(30px + (150 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element .textbox .link-icon { width: calc(30px + (46 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element:not(.T5) .textbox .headline { font-size: calc(21px + (31 - 21) * ((100vw - 414px) / (1700 - 414))); line-height: calc(29px + (39 - 29) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element .author { left: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .newsletter { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .newsletter .newsletter-container { padding: calc(50px + (130 - 50) * ((100vw - 414px) / (1700 - 414))) 0px; } .Magazine.ListT1 .loadmoreitems-container { margin-top: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1100px) { .Magazine.ListT1 .newsletter:before, .Magazine.ListT1 .newsletter:after { display: none; } } @media (min-width: 801px) { .Magazine.ListT1 .filter + form { display: none; } } @media (max-width: 800px) { .Magazine.ListT1 .filter { display: none; } .Magazine.ListT1 .elements:first-of-type .element:not(:first-of-type), .Magazine.ListT1 .elements:not(:first-of-type) .element { width: 100%; } .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(4), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(3), .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(5), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(4), .Magazine.ListT1 .elements:first-of-type .element:nth-of-type(1n + 6), .Magazine.ListT1 .elements:not(:first-of-type) .element:nth-of-type(1n + 5) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.ListT1 .elements .element.T6 { display: none; } .Magazine.ListT1 .elements .element:not(.T5):not(.T6) picture:after { display: none; width: 0px; height: 0px; } .Magazine.ListT1 .elements .element:not(.T5) .textbox { position: relative; left: 0px; bottom: 0px; margin-top: 20px; color: var(--bgweb-text-color, #000000); } .Magazine.ListT1 .elements .element:not(.T5) .textbox .headline { color: #404041; } .Magazine.ListT1 .elements .element .textbox .link-icon { display: block; position: relative; margin-left: 0px; margin-top: 5px; } .Magazine.ListT1 .elements .element:not(.T5) .textbox svg + svg { stroke: var(--bgweb-link-icon-color); } } /* All */ @media all { .Magazine.DetailT1 { position: relative; } .Magazine.DetailT1 .socials { margin: 85px 0px; padding-top: 80px; border-top: 1px solid #E2E2E2; } .Magazine.DetailT1 .socials .socials-elements { display: flex; margin-top: 15px; } .Magazine.DetailT1 .socials .socials-elements .socials-element { width: 55px; height: 55px; display: flex; align-items: center; justify-content: center; position: relative; color: #5B5E51; } .Magazine.DetailT1 .socials .socials-elements .socials-element + .socials-element { margin-left: 10px; } .Magazine.DetailT1 .socials .socials-elements .socials-element.whatsapp { margin-top: -4px; } .Magazine.DetailT1 .socials .socials-elements .socials-element svg.bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 82px; height: 82px; } .Magazine.DetailT1 .socials .socials-elements .socials-element svg.icon { width: 25px; height: 25px; fill: #5B5E51; } .Magazine.DetailT1 .socials .socials-elements .socials-element.whatsapp svg.icon { margin-top: 4px; } } @media (max-width: 1700px) { .Magazine.DetailT1 .socials { margin: calc(60px + (85 - 60) * ((100vw - 414px) / (1700 - 414))) 0px calc(75px + (85 - 75) * ((100vw - 414px) / (1700 - 414))) 0px; padding-top: calc(45px + (80 - 45) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 620px) { .Magazine.DetailT1 .socials .socials-inner { display: flex; flex-direction: column; align-items: center; text-align: center; } } /* Standard */ @media all { .Magazine.DetailT1.standard .theme-image .image { height: calc(70vh - var(--statusbar-height, 0)); overflow: hidden; } .Magazine.DetailT1.standard .theme-image + .content1 { margin-top: 85px; } .Magazine.DetailT1.standard .content1 .introduction { display: flex; justify-content: space-between; align-items: center; } .Magazine.DetailT1.standard .content1 .introduction .left { width: 60.294118%; margin-right: 20px; } .Magazine.DetailT1.standard .content1 .introduction .left .breadcrumb { margin-bottom: 15px; } .Magazine.DetailT1.standard .content1 .introduction .left .text { margin-top: 20px; } .Magazine.DetailT1.standard .content1 .introduction .right { width: 183px; } .Magazine.DetailT1.standard .content1 .introduction .right .image { position: relative; } .Magazine.DetailT1.standard .content1 .introduction .right .image svg { position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); z-index: 2; } .Magazine.DetailT1.standard .content1 .introduction .right .image + .text { margin-top: 25px; } .Magazine.DetailT1.standard .content1 .introduction .right .text .author { margin-top: 5px; } .Magazine.DetailT1.standard .content1 .fotogallery { margin-top: 60px; } .Magazine.DetailT1.standard .content1 .fotogallery .fotogallery-element:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Magazine.DetailT1.standard .content1 .fotogallery .fotogallery-element:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 10%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 10%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 10%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Magazine.DetailT1.standard .content1 .fotogallery .owl-dots { position: absolute; left: 50%; bottom: 0px; transform: translateX(-50%); z-index: 2; } .Magazine.DetailT1.standard .content1 .content-inner { width: 70.955882%; margin-top: 120px; } .Magazine.DetailT1.standard .content1 .content-inner .content-headline + .text { margin-top: 15px; } .Magazine.DetailT1.standard .content1 .quote { width: 73.529412%; margin-top: 90px; } .Magazine.DetailT1.standard .content1 .quote img { width: auto; } .Magazine.DetailT1.standard .content1 .quote .quote-text { margin-top: 10px; } .Magazine.DetailT1.standard .content1 .quote .author { margin-top: 15px; } .Magazine.DetailT1.standard .content1 .image .fullscreen { display: none; } .Magazine.DetailT1.standard .content1 .image video + .fullscreen { display: block; position: absolute; height: 100px; width: 100px; top: calc(50% - 50px); left: calc(50% - 50px); z-index: 3; } .Magazine.DetailT1.standard .content1 .image video + .fullscreen:hover { cursor: pointer; } .Magazine.DetailT1.standard .theme-image2 { margin-top: 120px; } .Magazine.DetailT1.standard .content2 .content-inner { width: 70.955882%; margin-top: 120px; } .Magazine.DetailT1.standard .content2 .content-inner .content-headline + .text { margin-top: 15px; } .Magazine.DetailT1.standard .content2 .content-inner + .images { margin-top: 120px; } .Magazine.DetailT1.standard .content2 .images { display: flex; justify-content: space-between; align-items: center; } .Magazine.DetailT1.standard .content2 .images .left, .Magazine.DetailT1.standard .content2 .images .right { width: 48.897059%; } .Magazine.DetailT1.standard .content2 .images .left .picture + .picture { margin-top: 4.511278%; } } @media (max-width: 1700px) { .Magazine.DetailT1.standard .theme-image + .content1 { margin-top: calc(40px + (85 - 40) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .introduction .left .breadcrumb { margin-bottom: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .introduction .left .text { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .introduction .right .image + .text { margin-top: calc(15px + (25 - 15) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .fotogallery { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .content-inner { margin-top: calc(45px + (120 - 45) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .content-inner .content-headline + .text { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .quote { margin-top: calc(35px + (90 - 35) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content1 .quote .quote-text { margin-top: calc(5px + (10 - 5) * ((100vw - 414px) / (1700 - 414)))10px; } .Magazine.DetailT1.standard .content1 .quote .author { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .theme-image2 { margin-top: calc(45px + (120 - 45) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content2 .content-inner { margin-top: calc(45px + (120 - 45) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content2 .content-inner .content-headline + .text { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.standard .content2 .content-inner + .images { margin-top: calc(45px + (120 - 45) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 620px) { .Magazine.DetailT1.standard .theme-image .image { height: calc(70vh - var(--statusbar-height, 0) - 60px); } .Magazine.DetailT1.standard .content1 .image video + .fullscreen { height: 50px; width: 50px; top: calc(50% - 25px); left: calc(50% - 25px); } .Magazine.DetailT1.standard .content1 .introduction { display: block; } .Magazine.DetailT1.standard .content1 .introduction .left { width: 100%; margin-right: 0px; } .Magazine.DetailT1.standard .content1 .introduction .right { margin-top: 30px; } .Magazine.DetailT1.standard .content1 .fotogallery .owl-stage-outer { overflow: visible; } .Magazine.DetailT1.standard .content1 .content-inner { width: 100%; } .Magazine.DetailT1.standard .content1 .quote { width: 100%; } .Magazine.DetailT1.standard .content2 .content-inner { width: 100%; } } /* Interview */ @media all { .Magazine.DetailT1.interview .introduction { padding-bottom: 80px; } .Magazine.DetailT1.interview .introduction .inner { width: 65.441176%; } .Magazine.DetailT1.interview .introduction .inner .headline { margin-top: 15px; } .Magazine.DetailT1.interview .introduction .inner .text { margin-top: 20px; } .Magazine.DetailT1.interview .theme-image:before { content: ''; z-index: 2; position: absolute; right: 0px; top: -40px; transform: translateY(-50%); width: 400px; height: 450px; background-image: url('/images/design/decorations/deco-11-1.png'); background-size: contain; background-position: right top; background-repeat: no-repeat; } .Magazine.DetailT1.interview .content { margin-top: 150px; } .Magazine.DetailT1.interview .content .text { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .Magazine.DetailT1.interview .content .text .left { width: 40.441176%; } .Magazine.DetailT1.interview .content .text .right { width: 40.441176%; margin-top: 60px; } .Magazine.DetailT1.interview .content2 .text .right { width: 37.132353%; margin-top: 20px; } .Magazine.DetailT1.interview .content2 .text .right .quote-text { margin-top: 10px; } .Magazine.DetailT1.interview .content2 .text .right .author { margin-top: 40px; } .Magazine.DetailT1.interview .content2 .text .right .author + * { margin-top: 5px; } .Magazine.DetailT1.interview .content2 .text .right img { width: auto; } .Magazine.DetailT1.interview .images { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin-top: 150px; } .Magazine.DetailT1.interview .images .picture { width: 56.250000%; } .Magazine.DetailT1.interview .images .picture + .picture { width: 39.338235%; margin-top: 90px; } .Magazine.DetailT1.interview .fotogallery { padding-top: 150px; position: relative; } .Magazine.DetailT1.interview .fotogallery:before { content: ''; z-index: 1; position: absolute; left: 0px; top: -100px; width: 340px; height: 340px; background-image: url('/images/design/decorations/deco-12-1.png'); background-size: contain; background-position: right top; background-repeat: no-repeat; } .Magazine.DetailT1.interview .fotogallery .owl-stage-outer { overflow: visible; } } @media (max-width: 1700px) { .Magazine.DetailT1.interview .introduction { padding-bottom: calc(40px + (80 - 40) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .introduction .inner .headline { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .introduction .inner .text { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .theme-image:before { width: calc(300px + (400 - 300) * ((100vw - 414px) / (1700 - 414))); height: calc(350px + (450 - 350) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .content { margin-top: calc(60px + (150 - 60) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .content .text .right { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .content2 .text .right .quote-text { margin-top: calc(5px + (10 - 5) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .content2 .text .right .author { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .images { margin-top: calc(60px + (150 - 60) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .images .picture + .picture { margin-top: calc(45px + (90 - 45) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .fotogallery { padding-top: calc(60px + (150 - 60) * ((100vw - 414px) / (1700 - 414))); } .Magazine.DetailT1.interview .fotogallery:before { top: calc(-40px + (-100 - -40) * ((100vw - 414px) / (1700 - 414))); width: calc(200px + (340 - 200) * ((100vw - 414px) / (1700 - 414))); height: calc(200px + (340 - 200) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 800px) { .Magazine.DetailT1.interview .introduction .inner { width: 100%; } .Magazine.DetailT1.interview .theme-image:before { display: none; width: 0px; height: 0px; } .Magazine.DetailT1.interview .content .text .left, .Magazine.DetailT1.interview .content .text .right, .Magazine.DetailT1.interview .content2 .text .right { width: 100%; } .Magazine.DetailT1.interview .content2 .text .right { margin-top: 30px; } .Magazine.DetailT1.interview .fotogallery:before { display: none; width: 0px; height: 0px; } } @media (max-width: 600px) { .Magazine.DetailT1.interview .images .picture, .Magazine.DetailT1.interview .images .picture + .picture { width: 100%; } .Magazine.DetailT1.interview .images .picture + .picture { margin-top: 30px; } } @media all { .List.ListT4 .element + .element { margin-top: 60px; } .List.ListT4 .element .inner-element { display: flex; align-items: center; } .List.ListT4 .element .inner-element .image { width: 50%; } .List.ListT4 .element .inner-element .textbox { width: 100%; max-width: 720px; } .List.ListT4 .element .inner-element .image + .textbox .inner-textbox { padding: 0px 0px 0px 85px; } .List.ListT4 .element .inner-element .textbox .inner-textbox .introduction { margin-top: 10px; } .List.ListT4 .element .inner-element .textbox .inner-textbox .linkbox { margin-top: 10px; } .List.ListT4 .element .inner-element .textbox .inner-textbox .links { margin-top: 30px; } .List.ListT4 .element .inner-element .textbox .inner-textbox .links a:not(:last-of-type):after { content: ','; } } @media (max-width: 1700px) { .List.ListT4 .element + .element { margin-top: calc(50px + (60 - 50) * ((100vw - 414px) / (1700 - 414))); } .List.ListT4 .element .inner-element .isuu + .textbox .inner-textbox, .List.ListT4 .element .inner-element .image + .textbox .inner-textbox { padding: 0px 0px 0px calc(25px + (85 - 25) * ((100vw - 414px) / (1700 - 414))); } .List.ListT4 .element .inner-element .textbox .inner-textbox .links { margin-top: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 861px) { .List.ListT4 .element .inner-element .image + .textbox { width: 50%; } } @media (max-width: 860px) { .List.ListT4 .element .inner-element { display: block; } .List.ListT4 .element .inner-element .image { width: 100%; } .List.ListT4 .element .inner-element .image + .textbox .inner-textbox { padding: calc(25px + (85 - 25) * ((100vw - 414px) / (1700 - 414))) 0px 0px 0px; } } @media all { .List.ListT3 .elements-container .elements { display: flex; flex-wrap: wrap; } .List.ListT3 .elements-container .element { width: 22.794118%; } .List.ListT3 .elements-container .element + .element { margin-left: 2.941176%; } .List.ListT3 .elements-container .element:nth-of-type(4n + 1) { margin-left: 0px; } .List.ListT3 .elements-container .element:nth-of-type(1n + 5) { margin-top: 20px; } .List.ListT3 .elements-container .element:nth-of-type(2n + 2) { padding-top: 40px; } .List.ListT3 .elements-container .element .inner-element { position: relative; } .List.ListT3 .elements-container .element .inner-element a { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 6; } .List.ListT3 .elements-container .element .inner-element .image { position: relative; } .List.ListT3 .elements-container .element .inner-element .image:before { content: ''; z-index: 3; position: absolute; background-size: contain; background-position: right top; background-repeat: no-repeat; } .List.ListT3 .elements-container .element .inner-element .image .svg-container { position: absolute; bottom: -5px; left: 15px; transform: translateY(50%); z-index: 5; } .List.ListT3 .elements-container .element .inner-element .image .svg-container svg { display: inline; width: 30px; } .List.ListT3 .elements-container .element .inner-element .image .svg-container svg + svg { margin-left: 5px; } .List.ListT3 .elements-container .element .inner-element .image .svg-container svg.icon-1 { width: 25px; } .List.ListT3 .elements-container .element .inner-element .image .svg-container svg.icon-2 { width: 28px; } .List.ListT3 .elements-container .element.pattern1 .inner-element .image:before { left: 0px; bottom: -35px; width: 96px; height: 151px; background-image: url('/images/design/decorations/deco-4-1.png'); } .List.ListT3 .elements-container .element.pattern2 .inner-element .image:before { left: 0px; bottom: -33px; width: 96px; height: 151px; background-image: url('/images/design/decorations/deco-4-2.png'); } .List.ListT3 .elements-container .element .inner-element .image:after { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 2; } .List.ListT3 .elements-container .element .inner-element .image:after { background: -moz-linear-gradient(bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); background: -webkit-linear-gradient(bottom,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); background: linear-gradient(to top,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 30%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .List.ListT3 .elements-container .element .inner-element .textbox { margin-top: 50px; } } @media (max-width: 1700px) { .List.ListT3 .elements-container .element:nth-of-type(2n + 2) { padding-top: calc(5px + (40 - 5) * ((100vw - 414px) / (1700 - 414))); } .List.ListT3 .elements-container .element .inner-element .textbox { margin-top: calc(35px + (50 - 35) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .List.ListT3 .elements-container .element { width: 30.693069%; } .List.ListT3 .elements-container .element + .element { margin-left: 3.960396%; } .List.ListT3 .elements-container .element:nth-of-type(3n + 1) { margin-left: 0px; } .List.ListT3 .elements-container .element:nth-of-type(1n + 4) { margin-top: 20px; } .List.ListT3 .elements-container .element:nth-of-type(2n + 2) { padding-top: 0px; } .List.ListT3 .elements-container .element:nth-of-type(3n + 2) { padding-top: calc(5px + (40 - 5) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 600px) { .List.ListT3.hide-mobile { display: none !important; } .List.ListT3 .elements-container .element { width: 46.969697%; } .List.ListT3 .elements-container .element + .element { margin-left: 6.060606%; } .List.ListT3 .elements-container .element:nth-of-type(2n + 1) { margin-left: 0px; } .List.ListT3 .elements-container .element:nth-of-type(1n + 3) { margin-top: 20px; } .List.ListT3 .elements-container .element:nth-of-type(3n + 2) { padding-top: 0px; } .List.ListT3 .elements-container .element:nth-of-type(2n + 2) { padding-top: calc(5px + (40 - 5) * ((100vw - 414px) / (1700 - 414))); } } @media all { .List.ListT2 .element + .element { margin-top: 60px; } .List.ListT2 .element .inner-element { display: flex; align-items: stretch; } .List.ListT2 .element .inner-element .image { width: 33.333333%; } .List.ListT2 .element .inner-element .image + .textbox { width: 66.666667%; } .List.ListT2 .element .inner-element .textbox { width: 100%; padding: 30px; box-sizing: border-box; } .List.ListT2 .element .inner-element .textbox .inner-textbox .introduction { margin-top: 10px; } .List.ListT2 .element .inner-element .textbox .inner-textbox .linkbox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; margin: 15px -10px 0px -10px; } .List.ListT2 .element .inner-element .textbox .inner-textbox .linkbox a { margin: 5px 10px 0px 10px; display: block; } .moduleInstancePreview .List.ListT2 .element .inner-element .image { max-height: 300px; } } @media (max-width: 1700px) { .List.ListT2 .element + .element { margin-top: calc(50px + (60 - 50) * ((100vw - 414px) / (1700 - 414))); } .List.ListT2 .element .inner-element .textbox { padding: calc(20px + (30 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 860px) { .List.ListT2 .element .inner-element { display: block; } .List.ListT2 .element .inner-element .image { width: 100%; } .List.ListT2 .element .inner-element .image + .textbox { width: 100%; } } @media all { .List.ListT1 .element + .element { margin-top: 60px; } .List.ListT1 .element .inner-element { display: flex; align-items: center; } .List.ListT1 .element .inner-element .image, .List.ListT1 .element .inner-element .issuu { width: 50%; } .List.ListT1 .element .inner-element .textbox { width: 100%; max-width: 720px; } .List.ListT1 .element .inner-element .issuu + .textbox .inner-textbox, .List.ListT1 .element .inner-element .image + .textbox .inner-textbox { padding: 0px 0px 0px 85px; } .List.ListT1 .element .inner-element .issuu > div { position: relative; padding-top: 75.000000%; } .List.ListT1 .element .inner-element .issuu > div iframe { position: absolute; top: 0px; left: 0px; height: 100% !important; } .List.ListT1 .element .inner-element .textbox .inner-textbox .introduction { margin-top: 10px; } .List.ListT1 .element .inner-element .textbox .inner-textbox .linkbox { display: flex; align-items: center; flex-wrap: wrap; margin: 15px -10px 0px -10px; } .List.ListT1 .element .inner-element .textbox .inner-textbox .linkbox a { margin: 5px 10px 0px 10px; display: block; } } @media (max-width: 1700px) { .List.ListT1 .element + .element { margin-top: calc(50px + (60 - 50) * ((100vw - 414px) / (1700 - 414))); } .List.ListT1 .element .inner-element .isuu + .textbox .inner-textbox, .List.ListT1 .element .inner-element .image + .textbox .inner-textbox { padding: 0px 0px 0px calc(25px + (85 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 861px) { .List.ListT1 .element .inner-element .issuu + .textbox, .List.ListT1 .element .inner-element .image + .textbox { width: 50%; } } @media (max-width: 860px) { .List.ListT1 .element .inner-element { display: block; } .List.ListT1 .element .inner-element .issuu, .List.ListT1 .element .inner-element .image { width: 100%; } .List.ListT1 .element .inner-element .issuu + .textbox .inner-textbox, .List.ListT1 .element .inner-element .image + .textbox .inner-textbox { padding: calc(25px + (85 - 25) * ((100vw - 414px) / (1700 - 414))) 0px 0px 0px; } } @media all { .Intro.IntroT3 .breadcrumbcontainer { position: relative; } .Intro.IntroT3 .breadcrumbcontainer > div { position: absolute; bottom: 20px; left: 0px; } .Intro.IntroT3 .textbox .inner-textbox { display: flex; justify-content: center; align-items: flex-end; flex-direction: column; } .Intro.IntroT3 .textbox .inner-textbox .headline, .Intro.IntroT3 .textbox .inner-textbox .subheadline, .Intro.IntroT3 .textbox .inner-textbox .introduction, .Intro.IntroT3 .textbox .inner-textbox .linkbox { width: 610px; } .Intro.IntroT3 .textbox .inner-textbox .headline { align-self: start; } .Intro.IntroT3 .textbox .inner-textbox .headline + * { margin-top: -50px; } .Intro.IntroT3 .textbox .inner-textbox .introduction, .Intro.IntroT3 .textbox .inner-textbox .linkbox { margin-top: 20px; } .Intro.IntroT3 .textbox .inner-textbox .linkbox { display: flex; align-items: flex-start; flex-direction: column; } .Intro.IntroT3 .textbox .inner-textbox .linkbox a + a { margin-top: 5px; } .Intro.IntroT3 .textbox .toggle-link { display: none; } .Intro.IntroT3.decoration { position: relative; } .Intro.IntroT3.decoration > div { position: relative; z-index: 2; } .Intro.IntroT3.decoration:before { content: ''; position: absolute; bottom: 0px; right: 0px; width: 300px; height: 410px; background-image: url('/images/design/decorations/deco-8-1.png'); background-repeat: no-repeat; background-position: right bottom; background-size: contain; } .Intro.IntroT3.decoration.deco-8-2:before { background-image: url('/images/design/decorations/deco-8-2.png'); width: 360px; height: 335px; } .Intro.IntroT3.decoration.deco-8-3:before { background-image: url('/images/design/decorations/deco-8-3.png'); background-position: left bottom; left: 0px; right: auto; width: 225px; height: 275px; } } @media (max-width: 1700px) { .Intro.IntroT3 .textbox .inner-textbox .headline, .Intro.IntroT3 .textbox .inner-textbox .subheadline, .Intro.IntroT3 .textbox .inner-textbox .introduction, .Intro.IntroT3 .textbox .inner-textbox .linkbox { width: calc(180px + (610 - 180) * ((100vw - 414px) / (1700 - 414))); } .Intro.IntroT3 .textbox .inner-textbox .headline + * { margin-top: calc(-1 * (30px + (50 - 30) * ((100vw - 414px) / (1700 - 414)))); } } @media (max-width: 820px) { .Intro.IntroT3.decoration:before { display: none; } .Intro.IntroT3 .textbox .inner-textbox { display: block; } .Intro.IntroT3 .textbox .inner-textbox .headline, .Intro.IntroT3 .textbox .inner-textbox .subheadline, .Intro.IntroT3 .textbox .inner-textbox .introduction, .Intro.IntroT3 .textbox .inner-textbox .linkbox { width: 100%; } .Intro.IntroT3 .textbox .inner-textbox .headline + * { margin-top: 0px; } .Intro.IntroT3 .textbox .inner-textbox .subheadline, .Intro.IntroT3 .textbox .inner-textbox .introduction, .Intro.IntroT3 .textbox .inner-textbox .linkbox { margin-top: 20px; } } @media (min-width: 681px) { .Intro.IntroT3 .textbox .mobile-toggle-text { display: block !important; } } @media (max-width: 680px) { .Intro.IntroT3 .textbox .toggle-link { display: block; } .Intro.IntroT3 .textbox .mobile-toggle-text { display: none; } } @media all { .Intro.IntroT2 .breadcrumbcontainer { position: relative; } .Intro.IntroT2 .breadcrumbcontainer > div { position: absolute; bottom: 20px; left: 0px; } .Intro.IntroT2 .container { position: relative; z-index: 2; } .Intro.IntroT2 .textbox { max-width: 890px; } .Intro.IntroT2 .textbox .subheadline, .Intro.IntroT2 .textbox .introduction { margin-top: 20px; } .Intro.IntroT2 .decoration { position: absolute; bottom: 0px; right: 0px; z-index: 1; } .Intro.IntroT2 .decoration.deco-8-1 { width: 300px; } .Intro.IntroT2 .decoration.deco-8-2 { width: 360px; } .Intro.IntroT2 .decoration.deco-8-3 { width: 225px; transform: scaleX(-1); } .Intro.IntroT2 .textbox .toggle-link { display: none; } } @media (max-width: 1700px) { .Intro.IntroT2 .decoration.deco-8-1 { width: calc(200px + (300 - 200) * ((100vw - 414px) / (1700 - 414))); } .Intro.IntroT2 .decoration.deco-8-2 { width: calc(210px + (360 - 210) * ((100vw - 414px) / (1700 - 414))); } .Intro.IntroT2 .decoration.deco-8-3 { width: calc(125px + (225 - 125) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1200px) { .Intro.IntroT2 .decoration.deco-8-1 { width: 180px; } .Intro.IntroT2 .decoration.deco-8-2 { width: 210px; } .Intro.IntroT2 .decoration.deco-8-3 { width: 150px; } } @media (max-width: 1100px) { .Intro.IntroT2 .decoration { display: none; } } @media (min-width: 681px) { .Intro.IntroT2 .textbox .mobile-toggle-text { display: block !important; } } @media (max-width: 680px) { .Intro.IntroT2 .textbox .toggle-link { display: block; } .Intro.IntroT2 .textbox .mobile-toggle-text { display: none; } } @media all { .Intro.IntroT1 { text-align: center; } .Intro.IntroT1 .textbox { max-width: 720px; margin: 0px auto; } .Intro.IntroT1 .textbox .pre-headline { margin-bottom: 5px; } .Intro.IntroT1 .textbox .subheadline, .Intro.IntroT1 .textbox .introduction, .Intro.IntroT1 .textbox .linkbox { margin-top: 20px; display: flex; align-items: center; flex-direction: column; } .Intro.IntroT1 .textbox .linkbox a + a { margin-top: 5px; } .Intro.IntroT1 .textbox .toggle-link { display: none; } } @media (min-width: 681px) { .Intro.IntroT1 .textbox .mobile-toggle-text { display: block !important; } } @media (max-width: 680px) { .Intro.IntroT1 .textbox .toggle-link { display: block; } .Intro.IntroT1 .textbox .mobile-toggle-text { display: none; } } @media all { .Hotels.TeaserT2 { position: relative; } .Hotels.TeaserT2 .decoration { position: absolute; top: 0px; right: 0px; z-index: 1; } .Hotels.TeaserT2 .decoration.deco-2-1 { width: calc(70px + (225 - 70) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .decoration.deco-6-1 { width: calc(70px + (225 - 70) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .decoration.deco-11-1 { width: calc(50px + (225 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .intro { display: flex; align-items: baseline; justify-content: space-between; flex-direction: column; } .Hotels.TeaserT2 .intro .headline + .subheadline { margin-top: 15px; } .Hotels.TeaserT2 .elements { margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; } .Hotels.TeaserT2 .elements .element { width: 48.529412%; } .Hotels.TeaserT2 .elements .element:nth-child(n + 3) { margin-top: 50px; } .Hotels.TeaserT2 .elements .element .inner-element { position: relative; } .Hotels.TeaserT2 .elements .element .inner-element .image { position: relative; } .Hotels.TeaserT2 .elements .element .inner-element .image a.element-link { position: absolute; height: 100%; width: 100%; z-index: 5; } .Hotels.TeaserT2 .elements .element .inner-element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.TeaserT2 .elements .element .image .image-text { position: absolute; left: 15px; top: 15px; display: flex; align-items: center; z-index: 2; } .Hotels.TeaserT2 .elements .element .image .image-text .image-text-left { position: relative; } .Hotels.TeaserT2 .elements .element .image .image-text .image-text-left svg { width: 73px; height: 73px; opacity: .5; } .Hotels.TeaserT2 .elements .element .image .image-text .image-text-left .rating { position: absolute; left: 50%; top: calc(50% + 3px); transform: translate(-50%, -50%); z-index: 1; } .Hotels.TeaserT2 .elements .element .image .image-text .image-text-right { margin-left: 10px; text-shadow: 0.1em 0.1em 0.2em black; } .Hotels.TeaserT2 .elements .element .textbox { z-index: 10; margin-top: 20px; } .Hotels.TeaserT2 .elements .element .textbox .headline { } .Hotels.TeaserT2 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.TeaserT2 .elements .element .textbox .headline .hotelclass span { font-size: .6em; line-height: 1.1em; text-transform: lowercase; } .Hotels.TeaserT2 .elements .element .textbox .headline + .subheadline { margin-top: 5px; } .Hotels.TeaserT2 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } .Hotels.TeaserT2 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Hotels.TeaserT2 .swipe-icon svg + div { margin-top: 5px; } } @media (max-width: 1700px) { .Hotels.TeaserT2 .intro .headline + .subheadline { margin-top: calc(10px + (15 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .elements { margin-top: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .elements .element:nth-child(n + 3) { margin-top: calc(30px + (50 - 30) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT2 .elements .element .textbox { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1100px) { .Hotels.TeaserT2 .decoration { display: none; } } @media (max-width: 800px) { .Hotels.TeaserT2 .intro { display: block; } .Hotels.TeaserT2 .elements { flex-direction: column; } .Hotels.TeaserT2 .elements .element { width: 100%; } .Hotels.TeaserT2 .elements .element + .element { margin-top: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 400px) { .Hotels.TeaserT2 .elements .element .image .image-text { display: none; } } @media all { .Hotels.TeaserT1 .hotel-info { padding-top: 130px; padding-bottom: 155px; } .Hotels.TeaserT1 .hotel-info .text { display: flex; align-items: flex-end; justify-content: space-between; } .Hotels.TeaserT1 .hotel-info .text .hotelclass { display: inline-flex; } .Hotels.TeaserT1 .hotel-info .text .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.TeaserT1 .hotel-info .hotel-images { display: flex; align-items: flex-start; justify-content: space-between; margin-top: 50px; } .Hotels.TeaserT1 .hotel-info .hotel-images .picture { width: 58.455882%; } .Hotels.TeaserT1 .hotel-info .hotel-images .picture + .picture { width: 36.764706%; } } @media (max-width: 1700px) { .Hotels.TeaserT1 .hotel-info { padding-top: calc(50px + (130 - 50) * ((100vw - 414px) / (1700 - 414))); padding-bottom: calc(60px + (155 - 60) * ((100vw - 414px) / (1700 - 414))); } .Hotels.TeaserT1 .hotel-info .hotel-images { margin-top: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 620px) { .Hotels.TeaserT1 .hotel-info .text { display: block; } .Hotels.TeaserT1 .hotel-info .text .right { margin-top: 15px; } .Hotels.TeaserT1 .hotel-info .hotel-images .picture { width: 100%; } .Hotels.TeaserT1 .hotel-info .hotel-images .picture + .picture { display: none; } } @media all { .Hotels.OverlayT4 { position: relative; padding-bottom: 100px; } .Hotels.OverlayT4 .topbar { position: sticky; height: 110px; top: 0px; left: 0px; width: 100%; display: flex; align-items: center; z-index: 10; } .Hotels.OverlayT4 .topbar .topbar-inner { display: flex; justify-content: space-between; align-items: center; } .Hotels.OverlayT4 .topbar .left { display: flex; align-items: flex-end; } .Hotels.OverlayT4 .topbar .left .subheadline { margin-left: 20px; } .Hotels.OverlayT4 .topbar .hotelclass { display: inline-flex; } .Hotels.OverlayT4 .topbar .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.OverlayT4 .content1-container { padding-top: 120px; padding-bottom: 100px; } .Hotels.OverlayT4 .content1-container .inner-content-container { display: flex; align-items: flex-start; justify-content: space-between; } .Hotels.OverlayT4 .content1-container .left { width: 57.720588%; } .Hotels.OverlayT4 .content1-container .left .subheadline .quote-img { width: auto; margin-bottom: 20px; } .Hotels.OverlayT4 .content1-container .left .content { max-width: 700px; margin-top: 10px; } .Hotels.OverlayT4 .content1-container .left .price { margin-top: 50px; } .Hotels.OverlayT4 .content1-container .right .host-box { } .Hotels.OverlayT4 .content1-container .right .host-box .host-image { position: relative; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image img.deco { width: 322px; position: absolute; left: -50px; top: 0px; z-index: 1; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image .picture { width: 261px; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image + .host-text { margin-top: 30px; } .Hotels.OverlayT4 .content1-container .right .host-box .host-link { margin-top: 10px; } .Hotels.OverlayT4 .content2-container { padding: 80px 0px; } .Hotels.OverlayT4 .content2-container .elements .element + .element { padding-left: 20px; } .Hotels.OverlayT4 .content2-container .elements .element .headline { margin-top: 0px; } .Hotels.OverlayT4 .content2-container .elements .element svg { width: 120px; height: 120px; } .Hotels.OverlayT4 .content2-container .elements .owl-dots { margin-top: 20px; } .Hotels.OverlayT4 .detaillink-container { display: flex; align-items: center; justify-content: space-between; padding-bottom: 0px; } } @media (max-width: 1700px) { .Hotels.OverlayT4 { padding-bottom: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .topbar { height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .content1-container { padding-top: calc(50px + (150 - 50) * ((100vw - 414px) / (1700 - 414))); padding-bottom: calc(40px + (125 - 40) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .content1-container .left .price { margin-top: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .content1-container .right .host-box .host-image + .host-text { margin-top:calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .content2-container { padding: calc(30px + (80 - 30) * ((100vw - 414px) / (1700 - 414))) 0px; } .Hotels.OverlayT4 .content2-container .elements .element .headline { margin-top: calc(10px + (15 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT4 .detaillink-container { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1400px) { .Hotels.OverlayT4 .topbar .left { display: block; } .Hotels.OverlayT4 .topbar .left .subheadline { margin-top: 10px; margin-left: 0px; } .Hotels.OverlayT4 .topbar .buttons { position: relative; right: 50px; } } @media (max-width: 1100px) { .Hotels.OverlayT4 .topbar .buttons { display: none; } .Hotels.OverlayT4 .content1-container .inner-content-container { flex-direction: column; } .Hotels.OverlayT4 .content1-container .left { width: 100%; } .Hotels.OverlayT4 .content1-container .right { width: 100%; margin-top: 30px; } } @media (max-width: 700px) { .Hotels.OverlayT4 .topbar .left { display: block; padding-right: 70px; box-sizing: border-box; } .Hotels.OverlayT4 .content1-container { margin-top: 0px; } .Hotels.OverlayT4 .detaillink-container { display: block; } .Hotels.OverlayT4 .detaillink-container > * + * { margin-top: 20px; } } @media (max-width: 600px) { .Hotels.OverlayT4 .content1-container .right .host-box.with-img { justify-content: center; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image img.deco { width: 250px; left: -40px; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image .picture { width: 201px; } .Hotels.OverlayT4 .reviews .top { display: block; } .Hotels.OverlayT4 .reviews .top .rating-box { margin-top: 10px; } } @media (max-width: 450px) { .Hotels.OverlayT4 .content1-container .right .host-box .host-image img.deco { width: 180px; left: -30px; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image .picture { width: 146px; } .Hotels.OverlayT4 .content1-container .right .host-box .host-image + .host-text { margin-left: 15px; } } @media all { .Hotels.OverlayT3 { position: relative; padding-bottom: 100px; } .Hotels.OverlayT3 .topbar { position: sticky; height: 110px; top: 0px; left: 0px; width: 100%; display: flex; align-items: center; z-index: 10; } .Hotels.OverlayT3 .topbar .hotelclass { display: inline-flex; } .Hotels.OverlayT3 .topbar .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.OverlayT3 .element { position: relative; margin-top: 100px; } .Hotels.OverlayT3 .element .picture { width: 100%; margin-top: 20px; } .Hotels.OverlayT3 .element .content { width: 58.823529%; margin-top: 20px; } .Hotels.OverlayT3 .detaillink { margin-top: 100px; } } @media (max-width: 1700px) { .Hotels.OverlayT3 { padding-bottom: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT3 .topbar { height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT3 .element { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT3 .detaillink { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Hotels.OverlayT3 .element .content { width: calc(100% - 50px); } } @media all { .Hotels.OverlayT2 { position: relative; padding-bottom: 100px; } .Hotels.OverlayT2 .topbar { position: sticky; height: 110px; top: 0px; left: 0px; width: 100%; display: flex; align-items: center; z-index: 10; } .Hotels.OverlayT2 .topbar .hotelclass { display: inline-flex; } .Hotels.OverlayT2 .topbar .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.OverlayT2 .element { position: relative; margin-top: 100px; } .Hotels.OverlayT2 .detaillink { margin-top: 100px; } } @media (max-width: 1700px) { .Hotels.OverlayT2 { padding-bottom: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT2 .topbar { height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT2 .element { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT2 .detaillink { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } } @media all { .Hotels.OverlayT1 { position: relative; padding-bottom: 100px; } .Hotels.OverlayT1 .topbar { position: sticky; height: 110px; top: 0px; left: 0px; width: 100%; display: flex; align-items: center; z-index: 10; } .Hotels.OverlayT1 .topbar .topbar-inner { display: flex; justify-content: space-between; align-items: center; } .Hotels.OverlayT1 .topbar .left { display: flex; align-items: flex-end; } .Hotels.OverlayT1 .topbar .left .subheadline { margin-left: 20px; } .Hotels.OverlayT1 .topbar .hotelclass { display: inline-flex; } .Hotels.OverlayT1 .topbar .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.OverlayT1 .elements .element { position: relative; margin-top: 100px; } .Hotels.OverlayT1 .elements .element .image-collage { display: flex; justify-content: space-between; flex-wrap: wrap; } .Hotels.OverlayT1 .elements .element .image-collage .picture, .Hotels.OverlayT1 .elements .element .image-collage .type-4 { margin-top: 2.205882%; } .Hotels.OverlayT1 .elements .element .image-collage .type-1 { width: 100%; position: relative; } .Hotels.OverlayT1 .elements .element .image-collage .type-1:after { content: ''; z-index: 2; position: absolute; right: 0px; bottom: 0px; width: 300px; height: 260px; background-image: url('/images/design/decorations/deco-1-2.png'); background-size: contain; background-position: right bottom; background-repeat: no-repeat; } .Hotels.OverlayT1 .elements .element .image-collage .type-2 { width: 66.176471%; position: relative; } .Hotels.OverlayT1 .elements .element .image-collage .type-2:last-of-type:after { content: ''; z-index: 2; position: absolute; left: 0px; bottom: 0px; width: 200px; height: 260px; background-image: url('/images/design/decorations/deco-3-3.png'); background-size: contain; background-position: left bottom; background-repeat: no-repeat; } .Hotels.OverlayT1 .elements .element .image-collage .type-3 { width: 31.617647%; } .Hotels.OverlayT1 .elements .element .image-collage .type-4 { width: 31.617647%; display: flex; flex-direction: column; justify-content: space-between; } .Hotels.OverlayT1 .elements .element .image-collage .type-4 .picture { margin-top: 0px; } .Hotels.OverlayT1 .detaillink-container { margin-top: 100px; display: flex; align-items: center; justify-content: space-between; } } @media (max-width: 1700px) { .Hotels.OverlayT1 { padding-bottom: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT1 .topbar { height: calc(80px + (110 - 80) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT1 .elements .element { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT1 .elements .element .image-collage .type-1:after { width: calc(150px + (300 - 150) * ((100vw - 414px) / (1700 - 414))); height: calc(120px + (260 - 120) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT1 .elements .element .image-collage .type-2:last-of-type:after { width: calc(100px + (200 - 100) * ((100vw - 414px) / (1700 - 414))); height: calc(120px + (260 - 120) * ((100vw - 414px) / (1700 - 414))); } .Hotels.OverlayT1 .detaillink-container { margin-top: calc(50px + (100 - 50) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1400px) { .Hotels.OverlayT1 .topbar .left { display: block; box-sizing: border-box; } .Hotels.OverlayT1 .topbar .left .subheadline { margin-top: 10px; margin-left: 0px; } } @media (max-width: 700px) { .Hotels.OverlayT1 .topbar .left { display: block; padding-right: 70px; } .Hotels.OverlayT1 .topbar .buttons { display: none; } .Hotels.OverlayT1 .detaillink-container { display: block; } .Hotels.OverlayT1 .detaillink-container > * + * { margin-top: 20px; } } @media (max-width: 600px) { .Hotels.OverlayT1 .elements .element .image-collage .type-2, .Hotels.OverlayT1 .elements .element .image-collage .type-3, .Hotels.OverlayT1 .elements .element .image-collage .type-4 { width: 100%; } .Hotels.OverlayT1 .elements .element .image-collage .type-4 { margin-top: 0px; } .Hotels.OverlayT1 .elements .element .image-collage .type-4 .picture { margin-top: 2.205882%; } } @media all { .Hotels.ListT5 { position: relative; } .Hotels.ListT5 .decoration { position: absolute; top: 0px; right: 0px; z-index: 1; } .Hotels.ListT5 .decoration.deco-15-1 { width: 480px; top: -180px; right: -180px; } .Hotels.ListT5 .intro { display: flex; align-items: baseline; justify-content: space-between; } .Hotels.ListT5 .intro + .elements-container { margin-top: 40px; } .Hotels.ListT5 .elements { } .Hotels.ListT5 .elements.owl-carousel .owl-stage-outer { overflow: visible; } .Hotels.ListT5 .elements .element { width: 100%; } .Hotels.ListT5 .elements .element .image { position: relative; overflow: hidden; } .Hotels.ListT5 .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Hotels.ListT5 .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.ListT5 .elements .element .image a.element-link { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Hotels.ListT5 .elements .element .image a.element-link:hover { background: rgba(91,94,81,.3); opacity: 1; } .Hotels.ListT5 .elements .element .image .image-text { position: absolute; left: 15px; top: 15px; display: flex; align-items: center; z-index: 2; } .Hotels.ListT5 .elements .element .image .image-text .image-text-left { position: relative; } .Hotels.ListT5 .elements .element .image .image-text .image-text-left svg { width: 73px; height: 73px; opacity: .5; } .Hotels.ListT5 .elements .element .image .image-text .image-text-left .rating { position: absolute; left: 50%; top: calc(50% + 3px); transform: translate(-50%, -50%); z-index: 1; } .Hotels.ListT5 .elements .element .image .image-text .image-text-right { margin-left: 10px; text-shadow: 0.1em 0.1em 0.2em black; } .Hotels.ListT5 .elements .element .textbox { padding-top: 24px; position: relative; background-color: #fff; z-index: 5; } .Hotels.ListT5 .elements .element .textbox .headline { width: calc(100% - 50px); } .Hotels.ListT5 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.ListT5 .elements .element .textbox .headline .hotelclass span { font-size: .6em; line-height: 1.1em; text-transform: lowercase; } .Hotels.ListT5 .elements .element .textbox .headline + .subheadline { margin-top: 5px; } .Hotels.ListT5 .elements .element .textbox .rating { position: absolute; right: 0px; top: 0px; display: flex; align-items: center; } .Hotels.ListT5 .elements .element .textbox .rating svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--bgweb-button1-bg-color); } .Hotels.ListT5 .elements .element .label { width: 145px; position: absolute; bottom: -60px; right: -20px; z-index: 3; } .Hotels.ListT5 .elements .element .label svg { } .Hotels.ListT5 .elements .element .label .text { position: absolute; top: 35%; left: 40%; transform: translate(-40%, -35%); width: 80%; text-align: center; } .Hotels.ListT5 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } .Hotels.ListT5 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Hotels.ListT5 .swipe-icon svg + div { margin-top: 5px; } .Hotels.ListT5 .button { margin-top: 40px; } } @media (max-width: 1700px) { .Hotels.ListT5 .decoration.deco-15-1 { width: calc(240px + (480 - 240) * ((100vw - 414px) / (1700 - 414))); top: calc(-100px + (-200 - -100) * ((100vw - 414px) / (1700 - 414))); right: calc(-90px + (-180 - -90) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT5 .intro + .elements-container { margin-top: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT5 .elements { } .Hotels.ListT5 .elements .element .textbox { padding-top: calc(15px + (24 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT5 .elements .element .label { width: calc(120px + (145 - 120) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT5 .button { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1100px) { .Hotels.ListT5 .decoration { display: none; } } @media (max-width: 800px) { .Hotels.ListT5 .intro { display: block; } .Hotels.ListT5 .intro .headline + .morelink { margin-top: 5px; } } @media (min-width: 801px) { .Hotels.ListT5 .swipe-icon { display: none; } } @media (max-width: 500px) { .Hotels.ListT5 .elements .element .label .text { top: 40%; left: 40%; transform: translate(-40%, -40%); } } @media all { .Hotels.ListT4 { position: relative; } .Hotels.ListT4 > div { position: relative; z-index: 1; } .Hotels.ListT4 .intro + .elements-container { margin-top: 55px; } .Hotels.ListT4 .elements { display: flex; flex-wrap: wrap; justify-content: space-between; } .Hotels.ListT4 .elements .element { position: relative; width: 30.882353%; } .Hotels.ListT4 .elements .element:nth-child(n + 4) { margin-top: 3.676471%; } .Hotels.ListT4 .elements .element .inner-element { display: flex; flex-direction: column; height: 100%; } .Hotels.ListT4 .elements .element .image { width: 100%; position: relative; } .Hotels.ListT4 .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Hotels.ListT4 .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.ListT4 .elements .element .image a.fotogallerylink { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Hotels.ListT4 .elements .element .image a.fotogallerylink:hover { background: rgba(91,94,81,.3); opacity: 1; } .Hotels.ListT4 .elements .element .image a.fotogallerylink .fotogallery-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 6; } .Hotels.ListT4 .elements .element .image a.fotogallerylink .fotogallery-button { opacity: 0; transition: 500ms; } .Hotels.ListT4 .elements .element .image a.fotogallerylink:hover .fotogallery-button { opacity: 1; } .Hotels.ListT4 .elements .element .image a.fotogallerylink .fotogallery-button svg.bg-rating { width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; z-index: 1; } .Hotels.ListT4 .elements .element .image a.fotogallerylink .fotogallery-button svg.icon { width: 32px; height: 32px; margin: 0px auto; position: relative; z-index: 2; } .Hotels.ListT4 .elements .element .image a.fotogallerylink .fotogallery-button div { position: relative; margin-top: 5px; z-index: 2; } .Hotels.ListT4 .elements .element .image .image-text { position: absolute; left: 15px; top: 15px; display: flex; align-items: center; z-index: 2; } .Hotels.ListT4 .elements .element .image .image-text .image-text-left { position: relative; } .Hotels.ListT4 .elements .element .image .image-text .image-text-left svg { width: 73px; height: 73px; opacity: .5; } .Hotels.ListT4 .elements .element .image .image-text .image-text-left .rating { position: absolute; left: 50%; top: calc(50% + 3px); transform: translate(-50%, -50%); z-index: 1; } .Hotels.ListT4 .elements .element .image .image-text .image-text-right { margin-left: 10px; } .Hotels.ListT4 .elements .element .image .picture, .Hotels.ListT4 .elements .element .image .picture * { height: 100%; } .Hotels.ListT4 .elements .element .image .picture img { object-fit: cover; } .Hotels.ListT4 .elements .element .owl-carousel .owl-nav { position: absolute; width: 92.5%; display: flex; justify-content: space-between; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .Hotels.ListT4 .elements .element .owl-carousel .owl-nav .link-icon { left: 50%; transform: translateX(-50%); width: 46px; height: 43px; display: block; position: relative; margin-top: 15px; } .Hotels.ListT4 .elements .element .owl-carousel .owl-nav .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Hotels.ListT4 .elements .element .textbox { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 7.500000% 7.500000% 7.500000% 7.500000%; box-sizing: border-box; } .Hotels.ListT4 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.ListT4 .elements .element .textbox .headline .hotelclass span { font-size: 0.5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.ListT4 .elements .element .textbox .price-info { margin-top: 30px; } .Hotels.ListT4 .elements .element .textbox .overlay-link { margin-top: 20px; } .Hotels.ListT4 .elements .element .textbox .row { display: flex; align-items: flex-start; position: relative; margin-top: 20px; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield { height: 24px; display: flex; justify-content: center; align-items: center; width: 16px; cursor: pointer; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield svg { width: 16px; height: 100%; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield svg.icon-checkbox { display: block; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield svg.icon-checkbox-checked { display: none; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield.checked svg.icon-checkbox { display: none; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield.checked svg.icon-checkbox-checked { display: block; } .Hotels.ListT4 .elements .element .textbox .row .checkboxfield input { position: absolute; width: 100%; height: 100%; cursor: pointer; opacity: 0; } .Hotels.ListT4 .elements .element .textbox .row label { line-height: 24px; margin-left: 5px; } .Hotels.ListT4 .elements .element .textbox .buttons { margin-top: 75px; display: flex; flex-wrap: wrap; } .Hotels.ListT4 .elements .element .textbox .buttons .button { width: 100%; text-align: center; } .Hotels.ListT4 .elements .element .textbox .buttons .button span + span { display: none; } .Hotels.ListT4 .elements .element .textbox .buttons .button.active span { display: none; } .Hotels.ListT4 .elements .element .textbox .buttons .button.active span:last-of-type { display: block; } .Hotels.ListT4 .elements .element .textbox .buttons .button.active { background-color: #BCB2A3; } .no-mobile-device .Hotels.ListT4 .elements .element .textbox .buttons .button.active:hover { background-color: #BCB2A3; } .Hotels.ListT4 .elements .element .textbox .buttons .button + .button { margin-top: 10px; } } @media (max-width: 1700px) { .Hotels.ListT4 .intro + .elements-container { margin-top: calc(20px + (55 - 20) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT4 .elements .element .textbox { padding: calc(30px + (70 - 30) * ((100vw - 414px) / (1700 - 414)))calc(20px + (45 - 20) * ((100vw - 414px) / (1700 - 414)))calc(20px + (55 - 20) * ((100vw - 414px) / (1700 - 414)))calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); box-sizing: border-box; } .Hotels.ListT4 .elements .element .textbox .price-info { margin-top: calc(5px + (30 - 5) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT4 .elements .element .textbox .overlay-link { margin-top: calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT4 .elements .element .textbox .buttons { margin-top: calc(20px + (75 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1500px) { .Hotels.ListT4 .elements .element .image { width: 100%; } .Hotels.ListT4 .elements .element .textbox { width: 100%; } } @media (max-width: 1280px) { .Hotels.ListT4 .elements .element { width: 48.076923%;} .Hotels.ListT4 .elements .element:nth-child(n + 3) { margin-top: 3.846154%; } } @media (max-width: 1100px) { .Hotels.ListT4 .elements .element .image { width: 100%; } .Hotels.ListT4 .elements .element .textbox { width: 100%; padding: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT4 .elements .element .textbox .inner-textbox { width: 85%; } } @media (max-width: 850px) { .Hotels.ListT4 .elements .element { width: 100%; } .Hotels.ListT4 .elements .element + .element { margin-top: 7.042254%; } } @media (max-width: 600px) { .Hotels.ListT4 .elements .element .image:before { background: -moz-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); background: -webkit-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); background: linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); } .Hotels.ListT4 .elements .element .textbox .inner-textbox { width: 95%; } } @media all { .Hotels.ListT3 { position: relative; } .Hotels.ListT3 .intro { display: flex; align-items: baseline; justify-content: space-between; } .Hotels.ListT3 .elements { margin-top: 40px; } .Hotels.ListT3 .elements.owl-carousel .owl-stage-outer { overflow: visible; } .Hotels.ListT3 .elements .element { width: 100%; } .Hotels.ListT3 .elements .element .image { position: relative; } .Hotels.ListT3 .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Hotels.ListT3 .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.ListT3 .elements .element .image a.fotogallerylink { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Hotels.ListT3 .elements .element .image a.fotogallerylink:hover { background: rgba(91,94,81,.3); opacity: 1; } .Hotels.ListT3 .elements .element .image a.fotogallerylink .fotogallery-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 6; } .Hotels.ListT3 .elements .element .image a.fotogallerylink .fotogallery-button { opacity: 0; transition: 500ms; } .Hotels.ListT3 .elements .element .image a.fotogallerylink:hover .fotogallery-button { opacity: 1; } .Hotels.ListT3 .elements .element .image a.fotogallerylink .fotogallery-button svg.bg-rating { width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; z-index: 1; } .Hotels.ListT3 .elements .element .image a.fotogallerylink .fotogallery-button svg.icon { width: 32px; height: 32px; margin: 0px auto; position: relative; z-index: 2; } .Hotels.ListT3 .elements .element .image a.fotogallerylink .fotogallery-button div { position: relative; margin-top: 5px; z-index: 2; } .Hotels.ListT3 .elements .element .textbox { margin-top: 15px; position: relative; } .Hotels.ListT3 .elements .element .textbox .headline { width: calc(100% - 50px); } .Hotels.ListT3 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.ListT3 .elements .element .textbox .headline .hotelclass span { font-size: .6em; line-height: 1.1em; text-transform: lowercase; } .Hotels.ListT3 .elements .element .textbox .headline + .subheadline { margin-top: 5px; } .Hotels.ListT3 .elements .element .textbox .rating { position: absolute; right: 0px; top: 0px; display: flex; align-items: center; } .Hotels.ListT3 .elements .element .textbox .rating svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--bgweb-button1-bg-color); } .Hotels.ListT3 .swipe-icon { display: flex; flex-direction: column; align-items: center; margin-top: 30px; } .Hotels.ListT3 .swipe-icon svg { width: 30px; height: 30px; fill: var(--bgweb-button2-bg-color); } .Hotels.ListT3 .swipe-icon svg + div { margin-top: 5px; } } @media (max-width: 1700px) { .Hotels.ListT3 .elements { margin-top: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 800px) { .Hotels.ListT3 .intro { display: block; } .Hotels.ListT3 .intro .headline + .morelink { margin-top: 5px; } } @media (min-width: 801px) { .Hotels.ListT3 .swipe-icon { display: none; } } @media all { .Hotels.ListT2 { position: relative; } .Hotels.ListT2 .elements { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 40px; } .Hotels.ListT2 .elements:after { content: ''; } .Hotels.ListT2 .elements:after, .Hotels.ListT2 .elements .element { width: 31.323529%; } .Hotels.ListT2 .elements .element:nth-of-type(1n + 4) { margin-top: 60px; } .Hotels.ListT2 .elements .element .image { position: relative; } .Hotels.ListT2 .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Hotels.ListT2 .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.ListT2 .elements .element .image a.fotogallerylink { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Hotels.ListT2 .elements .element .image a.fotogallerylink:hover { background: rgba(91,94,81,.3); opacity: 1; } .Hotels.ListT2 .elements .element .image a.fotogallerylink .fotogallery-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 6; } .Hotels.ListT2 .elements .element .image a.fotogallerylink .fotogallery-button { opacity: 0; transition: 500ms; } .Hotels.ListT2 .elements .element .image a.fotogallerylink:hover .fotogallery-button { opacity: 1; } .Hotels.ListT2 .elements .element .image a.fotogallerylink .fotogallery-button svg.bg-rating { width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; z-index: 1; } .Hotels.ListT2 .elements .element .image a.fotogallerylink .fotogallery-button svg.icon { width: 32px; height: 32px; margin: 0px auto; position: relative; z-index: 2; } .Hotels.ListT2 .elements .element .image a.fotogallerylink .fotogallery-button div { position: relative; margin-top: 5px; z-index: 2; } .Hotels.ListT2 .elements .element .textbox { margin-top: 15px; position: relative; } .Hotels.ListT2 .elements .element .textbox .headline { width: calc(100% - 50px); } .Hotels.ListT2 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.ListT2 .elements .element .textbox .headline .hotelclass span { font-size: .6em; line-height: 1.1em; text-transform: lowercase; } .Hotels.ListT2 .elements .element .textbox .headline + .subheadline { margin-top: 5px; } .Hotels.ListT2 .elements .element .textbox .rating { position: absolute; right: 0px; top: 0px; display: flex; align-items: center; } .Hotels.ListT2 .elements .element .textbox .rating svg { width: 14px; height: 14px; margin-right: 5px; fill: var(--bgweb-button1-bg-color); } } @media (max-width: 1700px) { .Hotels.ListT2 .elements { margin-top: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT2 .elements .element:nth-of-type(1n + 4) { margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1024px) { .Hotels.ListT2 .elements .element { width: 47.333333%; } .Hotels.ListT2 .elements .element:nth-of-type(1n + 3) { margin-top: calc(20px + (60 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 600px) { .Hotels.ListT2 .elements .element { width: 100%; } .Hotels.ListT2 .elements .element:nth-of-type(1n + 2) { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } } @media all { .Hotels.ListT1 { position: relative; } .Hotels.ListT1 > div { position: relative; z-index: 1; } .Hotels.ListT1 .loader { position: absolute; display: flex; justify-content: center; z-index: 15; top: -80px; left: 0px; width: 100%; height: calc(100% + 80px); opacity: 0.8; } .Hotels.ListT1 .loader .spinner { position: relative; top: 100px; border: 7px solid #AEAEAE; border-top: 7px solid #9FA808; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .Hotels.ListT1 .filter { position: relative; z-index: 10; margin-bottom: 35px; } .Hotels.ListT1 .filter .additional-filter { overflow: hidden; margin-top: 15px; display: flex; flex-direction: column; align-items: flex-end; } .Hotels.ListT1 .filter .additional-filter .counter { width: 100%; display: flex; justify-content: space-between; } .Hotels.ListT1 .filter .additional-filter .hotel-counter { float: left; } .Hotels.ListT1 .filter .additional-filter a { display: block; float: right; padding-left: 30px; text-align: right; position: relative; } .Hotels.ListT1 .filter .additional-filter a:after, .Hotels.ListT1 .filter .additional-filter a:before { content: ''; position: absolute; background-color: currentColor; height: 1px; width: 12px; top: 12px; left: 12px; transform: rotate(-45deg); } .Hotels.ListT1 .filter .additional-filter a:before { transform: rotate(45deg); } .Hotels.ListT1 .filter .additional-filter a.request { margin-top: 15px; width: fit-content; display: flex; justify-content: center; align-items: center; gap: 5%; } .Hotels.ListT1 .filter .additional-filter a.request:before, .Hotels.ListT1 .filter .additional-filter a.request:after { display: none; } .Hotels.ListT1 .filter .additional-filter a.request span.inner-button { text-align: left; } .Hotels.ListT1 .filter .additional-filter a.request svg { width: 2.5em; height: 2.5em; fill: #ffffff; } .Hotels.ListT1 .filter form .innerForm { -webkit-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); -moz-box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); box-shadow: 0px 0px 21px 2px rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row { display: flex; justify-content: flex-start; align-items: center; } .Hotels.ListT1 .filter form .form-row > * { display: none; width: 33.333333%; box-sizing: border-box; } .Hotels.ListT1 .filter form .form-row.hotel { border-bottom: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row > a.senden, .Hotels.ListT1 .filter form .form-row > div.row.input, .Hotels.ListT1 .filter form .form-row > div.row.select, .Hotels.ListT1 .filter form .form-row > div.row.calendar { display: block; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container { display: block; position: relative; height: 79px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container.region { border-right: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row > div.custom-select-container > .label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .value { font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; padding: 35px 16px 16px 16px; cursor: pointer; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .options-container { position: absolute; bottom: 0px; left: 0px; width: 100%; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .options-container .options { position: absolute; top: 0px; left: -1px; width: calc(100% + 2px); background-color: #fff; padding: 16px; box-sizing: border-box; z-index: 10; border: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .options-container .options .row { border: 0px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .options-container .options label { display: none; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .options-container .options label.extralabel { display: block; } .Hotels.ListT1 .filter form div.row.checkbox div.checkboxfield { margin: 0px; display: flex; align-items: center; height: 20px; } .Hotels.ListT1 .filter form div.row.checkbox div.checkboxfield input { position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; } .Hotels.ListT1 .filter form div.row.checkbox div.checkboxfield svg { position: static; } .Hotels.ListT1 .filter form div.row.checkbox label { line-height: 20px; margin: 0px 0px 0px 7px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Hotels.ListT1 .filter form .form-row > a.senden { height: 78px; padding: 0px; text-align: center; display: flex; align-items: center; justify-content: center; border-radius: 0px; border: 0px; -webkit-border-radius: 0px; } .Hotels.ListT1 .filter form .form-row > a.senden span { display: none; } .Hotels.ListT1 .filter form .form-row > a.senden span.mitte { display: block; } .Hotels.ListT1 .filter form .form-row > div.row.input, .Hotels.ListT1 .filter form .form-row > div.row.select, .Hotels.ListT1 .filter form .form-row > div.row.calendar { position: relative; } .Hotels.ListT1 .filter form .form-row > div.row.input > .clear, .Hotels.ListT1 .filter form .form-row > div.row.select > .clear, .Hotels.ListT1 .filter form .form-row > div.row.calendar > .clear { display: none; } .Hotels.ListT1 .filter form .form-row > div.row.input label, .Hotels.ListT1 .filter form .form-row > div.row.select label, .Hotels.ListT1 .filter form .form-row > div.row.calendar label { font-size: 14px; line-height: 18px; font-weight: 400; color: #AEAEAE; position: absolute; top: 16px; left: 16px; margin: 0px; z-index: 6; width: auto; } .Hotels.ListT1 .filter form .form-row > div.row.input input, .Hotels.ListT1 .filter form .form-row > div.row.calendar input { height: 78px; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; } .Hotels.ListT1 .filter form .form-row > div.row.input div.inputfield, .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield, .Hotels.ListT1 .filter form .form-row > div.row.calendar div.calendarfield { width: 100%; margin: 0px; padding: 0px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield { height: 78px; box-sizing: border-box; border: 0px; outline: none; padding: 0px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field { height: 100%; padding: 35px 16px 16px 16px; box-sizing: border-box; border: 0px; outline: none; text-indent: 0px; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; margin: 0px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.select { margin: 0px; width: calc(100% - 28px); height: 100%; overflow: hidden; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field select { cursor: pointer; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon:after, .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon:before { display: none; } .Hotels.ListT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; z-index: 7; } .Hotels.ListT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { width: 21px; height: 21px; margin: 0px; position: absolute; top: calc(50% - 10px); right: 16px; fill: #5B5E51; } .Hotels.ListT1 .filter form .form-row.toggle-availability > * { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; height: 78px; padding: 16px; box-sizing: border-box; width: 100%; font-size: 17px; line-height: 23px; font-weight: 400; text-transform: uppercase; color: #8D8D8D; letter-spacing: 0.1em; } .Hotels.ListT1 .filter form .form-row.toggle-availability > span { position: relative; } .Hotels.ListT1 .filter form .form-row.toggle-availability > span:after { content: ''; z-index: 2; position: absolute;width: 12px; height: 13px; top: calc(50% - 6.5px); right: 23px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .IntroT2.standardspace + .Hotels.ListT1.standardspace { padding-top: 0px; } .IntroT2 + .Hotels.ListT1 .filter { transform: translateY(-79px); } .Hotels.ListT1 .elements { display: flex; flex-wrap: wrap; gap: 3.5%; } .Hotels.ListT1 .elements .element { position: relative; width: 30.882353%; } .Hotels.ListT1 .elements .element:nth-child(n + 4) { margin-top: 3.676471%; } .Hotels.ListT1 .elements .element .inner-element { display: flex; flex-direction: column; height: 100%; } .Hotels.ListT1 .elements .element .image { width: 100%; position: relative; } .Hotels.ListT1 .elements .element .image:before { content: ''; position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1; } .Hotels.ListT1 .elements .element .image:before { background: -moz-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: -webkit-linear-gradient(45deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); background: linear-gradient(135deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 40%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.ListT1 .elements .element .image a.fotogallerylink { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; transition: 500ms; z-index: 5; } .Hotels.ListT1 .elements .element .image a.fotogallerylink:hover { background: rgba(91,94,81,.3); opacity: 1; } .Hotels.ListT1 .elements .element .image a.fotogallerylink .fotogallery-button { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 6; } .Hotels.ListT1 .elements .element .image a.fotogallerylink .fotogallery-button { opacity: 0; transition: 500ms; } .Hotels.ListT1 .elements .element .image a.fotogallerylink:hover .fotogallery-button { opacity: 1; } .Hotels.ListT1 .elements .element .image a.fotogallerylink .fotogallery-button svg.bg-rating { width: 143px; height: 143px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .5; z-index: 1; } .Hotels.ListT1 .elements .element .image a.fotogallerylink .fotogallery-button svg.icon { width: 32px; height: 32px; margin: 0px auto; position: relative; z-index: 2; } .Hotels.ListT1 .elements .element .image a.fotogallerylink .fotogallery-button div { position: relative; margin-top: 5px; z-index: 2; } .Hotels.ListT1 .elements .element .image .image-text { position: absolute; left: 15px; top: 15px; display: flex; align-items: center; z-index: 2; } .Hotels.ListT1 .elements .element .image .image-text .image-text-left { position: relative; } .Hotels.ListT1 .elements .element .image .image-text .image-text-left svg { width: 73px; height: 73px; opacity: .5; } .Hotels.ListT1 .elements .element .image .image-text .image-text-left .rating { position: absolute; left: 50%; top: calc(50% + 3px); transform: translate(-50%, -50%); z-index: 1; } .Hotels.ListT1 .elements .element .image .image-text .image-text-right { margin-left: 10px; } .Hotels.ListT1 .elements .element .image .picture, .Hotels.ListT1 .elements .element .image .picture * { height: 100%; } .Hotels.ListT1 .elements .element .image .picture img { object-fit: cover; } .Hotels.ListT1 .elements .element .owl-carousel .owl-nav { position: absolute; width: 92.5%; display: flex; justify-content: space-between; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .Hotels.ListT1 .elements .element .owl-carousel .owl-nav .link-icon { left: 50%; transform: translateX(-50%); width: 46px; height: 43px; display: block; position: relative; margin-top: 15px; } .Hotels.ListT1 .elements .element .owl-carousel .owl-nav .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bggallery-text-color); } .Hotels.ListT1 .elements .element .watchlist-icon { position: absolute; padding: 20px; display: flex; justify-content: center; align-items: center; width: 58px; height: 56px; box-sizing: border-box; top: 0px; right: 0px; cursor: pointer; z-index: 6; } .Hotels.ListT1 .elements .element .watchlist-icon svg { fill: none; color: #ffffff; } .Hotels.ListT1 .elements .element.watched .watchlist-icon svg { fill: #ffffff; } .Hotels.ListT1 .elements .element .textbox { position: relative; display: flex; flex-direction: column; justify-content: space-between; width: 100%; height: 100%; padding: 7.500000% 7.500000%; box-sizing: border-box; } .Hotels.ListT1 .elements .element .textbox .headline .hotelclass { display: inline-flex; } .Hotels.ListT1 .elements .element .textbox .headline .hotelclass span { font-size: 0.5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.ListT1 .elements .element .textbox .price-info { margin-top: 50px; } .Hotels.ListT1 .elements .element .textbox .buttons { margin-top: 75px; display: flex; flex-wrap: wrap; gap: 10px; } } @media (max-width: 1700px) { .Hotels.ListT1 .elements .element .textbox { padding: calc(30px + (70 - 30) * ((100vw - 414px) / (1700 - 414)))calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414)))calc(20px + (55 - 20) * ((100vw - 414px) / (1700 - 414)))calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); box-sizing: border-box; } .Hotels.ListT1 .elements .element .textbox .price-info { margin-top: calc(5px + (50 - 5) * ((100vw - 414px) / (1700 - 414))); } .Hotels.ListT1 .elements .element .textbox .buttons { margin-top: calc(20px + (75 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1500px) { .Hotels.ListT1 .elements .element .image { width: 100%; } .Hotels.ListT1 .elements .element .textbox { width: 100%; } } @media (min-width: 1281px) { .Hotels.ListT1 .filter form .form-row.availability div.row { border-right: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row.availability > * { width: 20%; } } @media (max-width: 1280px) and (min-width: 1081px) { .Hotels.ListT1 .filter form .form-row.availability { flex-wrap: wrap; } .Hotels.ListT1 .filter form .form-row.availability > * { width: 50%; } .Hotels.ListT1 .filter form .form-row.availability > .senden { width: 100%; } .Hotels.ListT1 .filter form .form-row.availability .row:nth-child(2n + 1) { border-right: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row.availability .row:nth-child(n + 3) { border-top: 1px solid rgba(112,112,112,0.2); } } @media (max-width: 1280px) { .Hotels.ListT1 .elements .element { width: 48.076923%;} .Hotels.ListT1 .elements .element:nth-child(n + 3) { margin-top: 3.846154%; } } @media (min-width: 1081px) { .Hotels.ListT1 .filter form .form-row.hotel div.row { border-right: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row.hotel div.row.specials { border: 0px; } } @media (max-width: 1080px) and (min-width: 641px) { .Hotels.ListT1 .filter form .form-row { flex-wrap: wrap; } .Hotels.ListT1 .filter form .form-row > * { width: 50%; } .Hotels.ListT1 .filter form .form-row > .search, .Hotels.ListT1 .filter form .form-row > .senden { width: 100%; } .Hotels.ListT1 .filter form .form-row.hotel .row:nth-child(n + 2), .Hotels.ListT1 .filter form .form-row.availability .row:nth-child(n + 3) { border-top: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row.hotel .region { border-right: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row.availability .row:nth-child(2n + 1) { border-right: 1px solid rgba(112,112,112,0.2); } } @media (max-width: 850px) { .IntroT2 + .Hotels.ListT1 .filter { transform: translateY(-44px); } .Hotels.ListT1 .filter { margin-bottom: 0px; } .Hotels.ListT1 .loader { top: -44px; height: calc(100% + 44px); } .Hotels.ListT1 .elements .element { width: 100%; } .Hotels.ListT1 .elements .element + .element { margin-top: 7.042254%; } } @media (max-width: 640px) { .IntroT2 + .Hotels.ListT1 .filter { transform: translateY(-19px); } .Hotels.ListT1 .filter { margin-bottom: 16px; } .Hotels.ListT1 .loader { top: -19px; height: calc(100% + 19px); } .Hotels.ListT1 .filter form .form-row { flex-wrap: wrap; } .Hotels.ListT1 .filter form .form-row > * { width: 100%; } .Hotels.ListT1 .filter form .form-row > a.senden { height: 58px; } .Hotels.ListT1 .filter form .form-row > div.row.select { } .Hotels.ListT1 .filter form .form-row .row:nth-child(n + 2) { border-top: 1px solid rgba(112,112,112,0.2); } .Hotels.ListT1 .filter form .form-row > div.row.input label, .Hotels.ListT1 .filter form .form-row > div.row.select label, .Hotels.ListT1 .filter form .form-row > div.row.calendar label { top: 6px; left: 16px; } .Hotels.ListT1 .filter form .form-row > div.row.input input, .Hotels.ListT1 .filter form .form-row > div.row.calendar input { height: 58px; padding: 25px 16px 6px 16px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield { height: 58px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field { padding: 25px 16px 6px 16px; } .Hotels.ListT1 .filter form .form-row > div.row.input div.inputfield:after { right: 21px; } .Hotels.ListT1 .filter form .form-row > div.row.calendar div.calendarfield a.kalenderopener svg { right: 16px; } .Hotels.ListT1 .filter form .form-row > div.row.select div.selectfield span.field span.selecticon { right: 22px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container { height: 59px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container > .label { top: 6px; } .Hotels.ListT1 .filter form .form-row > div.custom-select-container .value { padding: 25px 16px 6px 16px; } .Hotels.ListT1 .filter form .form-row.toggle-availability > * { height: 58px; padding: 6px 16px; } .Hotels.ListT1 .filter form .form-row.toggle-availability > span:after { right: 21px; } } @media (max-width: 600px) { .Hotels.ListT1 .elements .element .image:before { background: -moz-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); background: -webkit-linear-gradient(top,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); background: linear-gradient(to bottom,rgba(0,0,0,.2) 0%,rgba(0,0,0,0) 60%); } .Hotels.ListT1 .elements .element .textbox .inner-textbox { width: 95%; } } @media all { .Hotels.DetailT1 { padding-bottom: 130px; } .Hotels.DetailT1 .theme-image { position: relative; max-height: 100vh; } .Hotels.DetailT1 .theme-image:before { content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 1; } .Hotels.DetailT1 .theme-image:before { background: -moz-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 25%); background: -webkit-linear-gradient(bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 25%); background: linear-gradient(to top,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 25%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#80000000',GradientType=0 ); } .Hotels.DetailT1 .theme-image .image img { object-fit: cover; } .Hotels.DetailT1 .theme-image .theme-text { display: flex; align-items: flex-end; justify-content: space-between; position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 2; } .Hotels.DetailT1 .theme-image .theme-text .theme-text-inner .preheadline { display: flex; align-items: center; } .Hotels.DetailT1 .theme-image .theme-text .theme-text-inner .preheadline svg { display: inline; width: 12px; height: 12px; margin-right: 3px; } .Hotels.DetailT1 .theme-image .theme-text .theme-text-inner .hotelclass { display: inline-flex; } .Hotels.DetailT1 .theme-image .theme-text .theme-text-inner .hotelclass span { font-size: .5em; line-height: 1.4em; text-transform: lowercase; } .Hotels.DetailT1 .theme-image .theme-text .theme-buttons { display: flex; margin-top: 20px; } .Hotels.DetailT1 .theme-image .theme-text .theme-buttons > * + * { margin-left: 20px; } .Hotels.DetailT1 .theme-image .theme-text .theme-buttons .fotogallery-button, .Hotels.DetailT1 .theme-image .theme-text .theme-buttons .video-button { display: flex; align-items: center; } .Hotels.DetailT1 .theme-image .theme-text .theme-buttons svg { display: inline; width: 20px; height: 20px; margin-right: 10px; } .Hotels.DetailT1 .bar { width: 100%; padding: 20px 0px; position: absolute; left: 0px; top: auto; box-shadow: 0 0 5px rgba(0,0,0,0.5); z-index: 3; } .Hotels.DetailT1 .bar .inner-bar { display: flex; align-items: center; justify-content: center; } .Hotels.DetailT1 .bar .inner-bar .element + .element { margin-left: 100px; } .Hotels.DetailT1 .content1-container { margin-top: 60px; padding-top: 150px; padding-bottom: 125px; } .Hotels.DetailT1 .content1-container .inner-content-container { display: flex; align-items: flex-start; justify-content: space-between; } .Hotels.DetailT1 .content1-container .left { width: 57.720588%; } .Hotels.DetailT1 .content1-container .left .subheadline .quote-img { width: auto; margin-bottom: 20px; } .Hotels.DetailT1 .content1-container .left .content { max-width: 700px; margin-top: 10px; } .Hotels.DetailT1 .content1-container .left .host-box { display: flex; align-items: center; margin-top: 50px; } .Hotels.DetailT1 .content1-container .left .host-box .host-image { position: relative; } .Hotels.DetailT1 .content1-container .left .host-box .host-image img.deco { width: 322px; position: absolute; left: -50px; top: 0px; z-index: 1; } .Hotels.DetailT1 .content1-container .left .host-box .host-image .picture { width: 261px; } .Hotels.DetailT1 .content1-container .left .host-box .host-image + .host-text { margin-left: 30px; } .Hotels.DetailT1 .content1-container .left .host-box .host-link { margin-top: 10px; } .Hotels.DetailT1 .content1-container .right { width: 31.323529%; min-width: 365px; position: relative; margin-top: 30px; margin-left: 30px; } .Hotels.DetailT1 .content1-container .right svg.bg-detail-box { width: 100%; height: 416px; } .Hotels.DetailT1 .content1-container .right svg.bg-detail-box-small { width: 50%; height: 216px; } .Hotels.DetailT1 .content1-container .right .inner-right { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; padding-top: 55px; padding-left: 70px; -webkit-box-sizing: border-box; box-sizing: border-box; } .Hotels.DetailT1 .content1-container .right .inner-right .info { margin-top: 10px; } .Hotels.DetailT1 .content1-container .right .inner-right .info + .info { margin-top: 20px; } .Hotels.DetailT1 .content1-container .right .inner-right .icons { display: flex; align-items: center; margin-top: 30px; } .Hotels.DetailT1 .content1-container .right .inner-right .icons a { width: 27px; height: 27px; } .Hotels.DetailT1 .content1-container .right .inner-right .icons a + a { margin-left: 30px; } .Hotels.DetailT1 .content1-container .right .inner-right .icons a svg { fill: #bcb2a3; } .Hotels.DetailT1 .content1-container .right .inner-right .websitelink { margin-top: 35px; } .Hotels.DetailT1 .content1-container .right .inner-right .cincode { opacity: .5; position: absolute; right: -47px; bottom: 30%; transform: rotate(-88deg); } .Hotels.DetailT1 .content2-container { padding: 80px 0px; } .Hotels.DetailT1 .content2-container .elements .element + .element { padding-left: 20px; } .Hotels.DetailT1 .content2-container .elements .element .headline { margin-top: 0px; } .Hotels.DetailT1 .content2-container .elements .element svg { width: 120px; height: 120px; } .Hotels.DetailT1 .content2-container .elements .owl-dots { margin-top: 20px; } .Hotels.DetailT1 .map { padding-top: 140px; } .Hotels.DetailT1 .Usp + .map { padding-top: 0px; } .Hotels.DetailT1 .map .map-container { margin-top: 30px; display: flex; } .Hotels.DetailT1 .map .map-container .left { width: 50%; height: 427px; } .Hotels.DetailT1 .map .map-container .left .inner-left { width: 100%; height: 100%; } .Hotels.DetailT1 .map .map-container .right { width: 50%; display: flex; align-items: center; justify-content: center; } .Hotels.DetailT1 .map .map-container .right .inner-right { width: calc(100% - 160px); } .Hotels.DetailT1 .map .map-container .right .inner-right .elements { margin-top: 5px; } .Hotels.DetailT1 .map .map-container .right .inner-right .element { display: flex; justify-content: space-between; padding: 10px 0px; border-bottom: 1px solid #DAD9D5; } .Hotels.DetailT1 .map .map-container .right .inner-right .element:last-of-type { padding-bottom: 0px; border-bottom: 0px; } .Hotels.DetailT1 .reviews { padding-top: 150px; } .Hotels.DetailT1 .reviews .top { display: flex; justify-content: space-between; align-items: center; } .Hotels.DetailT1 .reviews .top .rating-box { display: flex; align-items: center; } .Hotels.DetailT1 .reviews .top .rating-box .rating-box-left { position: relative; } .Hotels.DetailT1 .reviews .top .rating-box .rating-box-left img { width: 85px; } .Hotels.DetailT1 .reviews .top .rating-box .rating-box-left .rating { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; } .Hotels.DetailT1 .reviews .top .rating-box .rating-box-right { margin-left: 10px; } .Hotels.DetailT1 .reviews .bottom { position: relative; margin-top: 10px; } .Hotels.DetailT1 .reviews .bottom .bottom-inner { padding: 75px; } .Hotels.DetailT1 .reviews .bottom .elements .element { padding-right: 100px; } .Hotels.DetailT1 .reviews .bottom .elements .element img { width: auto; margin-bottom: 20px; } .Hotels.DetailT1 .reviews .bottom .elements .element .preheadline + .headline { margin-top: 10px; } .Hotels.DetailT1 .reviews .bottom .elements .element .subheadline { margin-top: 5px; } .Hotels.DetailT1 .reviews .bottom .elements .owl-dots { justify-content: flex-start; } .Hotels.DetailT1 .reviews .bottom .elements .owl-dots .owl-dot span { border-color: var(--bgweb-link-icon-color); } .Hotels.DetailT1 .reviews .bottom .elements .owl-dots .owl-dot.active span { background-color: var(--bgweb-link-icon-color); } .Hotels.DetailT1 .reviews .bottom .decoration { position: absolute; right: 0px; bottom: 0px; width: 202px; } .Hotels.DetailT1 .backlink { padding-top: 50px; } .Hotels.DetailT1 .inner-bottom-right { margin-top: 30px; } /* Owl Carousel - Core */ .Hotels.DetailT1 .owl-carousel .owl-stage .owl-item .innerUSPSide { display: flex; } .Hotels.DetailT1 .owl-carousel .owl-stage .owl-item .innerUSPSide .innerRightSide svg { width: 100%; height: 100%; } .Hotels.DetailT1 .owl-carousel .owl-stage .owl-item .innerUSPSide .innerLeftSide { display: block; width: 150px; padding: 10px 10px 10px 20px; position: absolute; left: 140px; } .Hotels.DetailT1 .owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-font-smoothing: antialiased; } .Hotels.DetailT1 .owl-carousel .owl-item img { display: block; width: 100%;} .Hotels.DetailT1 .inner_awardsImg_Area { display: block; width: 100%; height: 128px; overflow: hidden; position: relative; max-width: 75%; } .Hotels.DetailT1 .inner_awardsImg_Area .picture { margin-left: 30px; position: absolute; box-sizing: border-box; } .Hotels.DetailT1 .inner_awardsText_Area { margin-top: 10px; width: 70%; margin-left: 30px; } .Hotels.DetailT1 .innerRightSide { display: grid; grid-template-columns: 128px; } .Hotels.DetailT1 .innerRightSidePicture { grid-column: 1; grid-row: 1; height: 128px; overflow: hidden; } .Hotels.DetailT1 .innerRightSide svg { width: 100%; height: 100%; grid-column: 1; grid-row: 1; } .Hotels.DetailT1 .innerRightSide .picture { height: 128px; width: 128px; display: flex; align-items: center; justify-content: center; } .Hotels.DetailT1 .owl-carousel .owl-nav.disabled, .Hotels.DetailT1 .owl-carousel .owl-dots.disabled { display: none; } .Hotels.DetailT1 .awardsSmall .pointsv2 { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; position: absolute; bottom: 4px; left: 155px; } .Hotels.DetailT1 .awards .pointsv2 { display: flex; align-items: center; justify-content: center; margin-bottom: 0px; position: absolute; } .Hotels.DetailT1 .pointsv2 div { margin: 0px 5px; } .Hotels.DetailT1 .pointsv2 div span { display: block; width: 12px; height: 12px; background-color: transparent; border: 1px solid var(--bgweb-text-color); transition: background-color 500ms; border-radius: 6px; box-sizing: border-box; cursor: pointer; } .Hotels.DetailT1 .pointsv2 div.active span { background-color: var(--bgweb-text-color); } } @media (max-width: 1700px) { .Hotels.DetailT1 { padding-bottom: calc(30px + (130 - 30) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .theme-image .theme-text { bottom: calc(10px + (30 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .bar .inner-bar .element + .element { margin-left: calc(10px + (100 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content1-container { padding-top: calc(50px + (150 - 50) * ((100vw - 414px) / (1700 - 414))); padding-bottom: calc(40px + (125 - 40) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content1-container .left .host-box { margin-top: calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content1-container .right .inner-right { padding-top: calc(25px + (55 - 25) * ((100vw - 414px) / (1700 - 414))); padding-left: calc(25px + (70 - 25) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content1-container .right .inner-right .websitelink { margin-top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content2-container { padding: calc(30px + (80 - 30) * ((100vw - 414px) / (1700 - 414))) 0px; } .Hotels.DetailT1 .content2-container .elements .element .headline { margin-top: calc(10px + (15 - 10) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .map { padding-top: calc(40px + (140 - 40) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .Usp + .map { padding-top: 0px; } .Hotels.DetailT1 .map .map-container { margin-top: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .reviews { padding-top: calc(50px + (150 - 50) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .reviews .bottom .bottom-inner { padding: calc(30px + (75 - 30) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .reviews .bottom .elements .element { padding-right: calc(20px + (100 - 20) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .backlink { padding-top: calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1100px) { .Hotels.DetailT1 .content1-container .inner-content-container { flex-direction: column; } .Hotels.DetailT1 .content1-container .left { width: 100%; } .Hotels.DetailT1 .content1-container .right { width: 100%; min-width: 1px; position: relative; margin-left: 0px; background: var(--bgweb2-bg-color,#FFFFFF); } .Hotels.DetailT1 .content1-container .right svg.bg-detail-box { display: none; width: 0px; height: 0px; } .Hotels.DetailT1 .content1-container .right .inner-right { position: relative; display: flex; justify-content: space-between; align-items: flex-end; padding: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414))); } .Hotels.DetailT1 .content1-container .right .inner-right .icons { margin-top: 0px; } .Hotels.DetailT1 .content1-container .right .inner-right .cincode { right: -45px; bottom: 50%; transform: rotate(-90deg); } } @media (max-width: 1024px) { .Hotels.DetailT1 .theme-image .theme-text { flex-direction: column; align-items: flex-start; } .Hotels.DetailT1 .theme-image .theme-text .theme-buttons { margin-top: 10px; } .Hotels.DetailT1 .map .map-container .right .inner-right { width: calc(100% - 80px); } .Hotels.DetailT1 .reviews .bottom .decoration { width: 152px; } } @media (min-width: 801px) { .Hotels.DetailT1 .theme-image .image { height: calc(100vh - var(--statusbar-height, 0px)); } } @media (max-width: 800px) { .Hotels.DetailT1 .theme-image:before { width: 0px; height: 0px; display: none; } .Hotels.DetailT1 .theme-image .theme-text { width: 100%; position: relative; bottom: 0px; left: 0px; transform: translateX(0px); padding: 20px 10px; box-sizing: border-box; } .Hotels.DetailT1 .bar { display: none; } .Hotels.DetailT1 .content1-container { margin-top: 0px; } .Hotels.DetailT1 .map .map-container { flex-direction: column; } .Hotels.DetailT1 .map .map-container .left { width: 100%; } .Hotels.DetailT1 .map .map-container .right { width: 100%; } .Hotels.DetailT1 .map .map-container .right .inner-right { width: calc(100% - 40px); padding: 30px 0px; } } @media (max-width: 600px) { .Hotels.DetailT1 .content1-container .left .host-box.with-img { justify-content: center; } .Hotels.DetailT1 .content1-container .left .host-box .host-image img.deco { width: 250px; left: -40px; } .Hotels.DetailT1 .content1-container .left .host-box .host-image .picture { width: 201px; } .Hotels.DetailT1 .content1-container .right .inner-right { display: block; } .Hotels.DetailT1 .content1-container .right .inner-right .icons { margin-top: 10px; } .Hotels.DetailT1 .reviews .top { display: block; } .Hotels.DetailT1 .reviews .top .rating-box { margin-top: 10px; } } @media (max-width: 450px) { .Hotels.DetailT1 .content1-container .left .host-box .host-image img.deco { width: 180px; left: -30px; } .Hotels.DetailT1 .content1-container .left .host-box .host-image .picture { width: 146px; } .Hotels.DetailT1 .content1-container .left .host-box .host-image + .host-text { margin-left: 15px; } } @media all { .Hotels.CollageT1 { position: relative; padding-bottom: 100px; } .Hotels.CollageT1 .elements .element { position: relative; margin-top: 100px; } .Hotels.CollageT1 .elements .element .image-collage { display: flex; justify-content: space-between; flex-wrap: wrap; } .Hotels.CollageT1 .elements .element .image-collage .picture { position: relative; width: 48.529412%; } .Hotels.CollageT1 .elements .element .image-collage .picture.type-2 { margin-top: 7.352941%; } .Hotels.CollageT1 .elements .element .image-collage .picture.type-3 { margin-top: -20.588235%; } .Hotels.CollageT1 .elements .element .image-collage .picture.type-4 { margin-top: 2.941176%; } .Hotels.CollageT1 .elements .element .image-collage .picture.type-5 { margin-top: -4.411765%; } .Hotels.CollageT1 .elements .element .image-collage .textbox { position: relative; width: 48.529412%; display: flex; flex-direction: column; justify-content: center; } .Hotels.CollageT1 .elements .element .image-collage .textbox .inner-textbox { padding: 15.151515% 9.090909%; } .Hotels.CollageT1 .elements .element .image-collage .textbox .inner-textbox .fotogallery { position: relative; } .Hotels.CollageT1 .elements .element .image-collage .textbox .inner-textbox .fotogallerylink { margin-top: 4.545455%; } .Hotels.CollageT1 .elements .element .image-collage .textbox .link-icon { width: 46px; height: 40px; display: inline-block; position: absolute; margin-left: 5px; margin-top: -5px; } .Hotels.CollageT1 .elements .element .image-collage .textbox .link-icon svg + svg { position: absolute; top: 50%; right: 0px; transform: translateY(-50%); stroke: var(--bgweb-link-icon-color); } } @media (max-width: 620px) { .Hotels.CollageT1 .elements .element .image-collage .textbox { order: 1; padding: 0; width: 100%; } .Hotels.CollageT1 .elements .element .image-collage .textbox .inner-textbox { padding-top: 0; padding-left: 0; } .Hotels.CollageT1 .elements .element .image-collage .picture { width: 100%; margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))) !important; order: 2; } }/* NL Onpage T3 */ @media all { div.unitnewsletter.onpage.layout3 { width: 587px; } div.unitnewsletter.onpage.layout3 .formfields { display: flex; justify-content: space-between; } div.unitnewsletter.onpage.layout3 input { border: 0px; color: #fff; background: transparent; } div.unitnewsletter.onpage.layout3 .innerFormfields { width: 100%; height: 45px; display: flex; justify-content: space-between; align-items: center; background-color: rgba(0,0,0,.1); } div.unitnewsletter.onpage.layout3 .innerFormfields .email { width: 100%; } div.unitnewsletter.onpage.layout3 .innerFormfields .email .inputfield { width: 100%; } div.unitnewsletter.onpage.layout3 .innerFormfields .email input { width: 100%; height: 100%; text-indent: 10px; } div.unitnewsletter.onpage.layout3 .innerFormfields .checkbox { width: auto; display: flex; align-items: center; margin-right: 20px; white-space: nowrap; } div.unitnewsletter.onpage.layout3 .innerFormfields div.row.checkbox div.checkboxfield { margin: 6px 0px 0px 0px; } div.unitnewsletter.onpage.layout3 .innerFormfields div.row.checkbox label.extralabel { font-size: 12px; margin: 0px 0px 0px 4px; } } @media (max-width: 1600px) { div.unitnewsletter.onpage.layout3 { width: 100%; margin-top: 20px; } }/* NL Onpage T1 */ @media all { div.unitnewsletter.onpage.layout1 { width: 810px; max-width: 100%; margin: 40px auto 0px auto; } div.unitnewsletter.onpage.layout1 form div.row.input div.inputfield { width: 100%; } div.unitnewsletter.onpage.layout1 form div.row.input div.inputfield input { height: 64px; line-height: 64px; text-align: center; font-size: 17px; text-transform: uppercase; letter-spacing: 1px; } div.unitnewsletter.onpage.layout1 form div.row.checkbox { display: flex; align-items: center; justify-content: center; margin-top: 15px; } div.unitnewsletter.onpage.layout1 form div.row.checkbox div.checkboxfield { margin-top: 4px; } div.unitnewsletter.onpage.layout1 form div.row.checkbox .label.extralabel { margin-top: 0px; font-size: 13px; } div.unitnewsletter.onpage.layout1 form .senden { margin-top: 35px; } div.unitnewsletter.onpage.layout1 form .senden:not(:hover) { background-color: var(--bgweb-button3-bg-color); } } @media (max-width: 1700px) { div.unitnewsletter.onpage.layout1 { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } div.unitnewsletter.onpage.layout1 form .senden { margin-top: calc(15px + (35 - 15) * ((100vw - 414px) / (1700 - 414))); } div.unitnewsletter.onpage.layout1 form div.row.checkbox { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } } @media all { .Globals.MenuT1 .active > a, .no-mobile-device a:hover { opacity: 0.5; } .Globals.MenuT1 { position: fixed; top: 0px; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; } .Globals.MenuT1 .mainmenu { height: 100%; position: relative; } .Globals.MenuT1 .mainmenu .closer { cursor: pointer; position: absolute; top: 0px; right: 0px; width: 46px; height: 46px; padding: 13px; box-sizing: border-box; } .Globals.MenuT1 .mainmenu .inner-mainmenu { height: 100%; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu { display: flex; align-items: center; height: 100%; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left { width: 39.156627%; padding: 100px 20px 100px 100px; box-sizing: border-box; border-right: 1px solid var(--bgmenu-border-color); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item > a { position: relative; text-transform: none; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item svg.icon-next { position: absolute; width: 15px; height: 15px; bottom: 8px; left: calc(100% + 5px); transform: translateY(-50%); display: inline; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item.no-level-2-menu svg.icon-next { display: none; width: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item + .level-1-item { margin-top: 15px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:nth-child(4), .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:nth-child(8) { margin-top: 70px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 { display: none; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-3 { display: none; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right { width: 60.843373%; display: flex; align-items: center; padding: 100px 50px; box-sizing: border-box; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 { display: none; width: 100%; padding: 0px 50px; box-sizing: border-box; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2.active { display: block; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items { display: flex; justify-content: center; flex-wrap: wrap; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items .level-2-item { max-width: 100%; min-width: 33%; flex-basis: 33%; flex: 1; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items .level-2-item .level-3 { margin-top: 15px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items .level-2-item .level-3 .level-3-item { margin-top: 5px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu { display: flex; align-items: baseline; position: absolute; right: 40px; bottom: 40px; z-index: 3; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item a { font-size: 18px; color: #5B5E51; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item span { margin: 0px 10px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item:last-of-type span { display: none; } .Globals.MenuT1 .mainmenu .menu-decoration { position: absolute; right: 0px; bottom: 0px; width: 220px; } } @media (max-width: 1700px) { .Globals.MenuT1 { padding: calc(0px + (20 - 0) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left { padding: calc(40px + (100 - 40) * ((100vw - 414px) / (1700 - 414))) 20px calc(40px + (100 - 40) * ((100vw - 414px) / (1700 - 414)))calc(40px + (100 - 40) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item + .level-1-item { margin-top: calc(5px + (15 - 5) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:nth-child(4), .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:nth-child(8) { margin-top: calc(40px + (70 - 40) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item svg.icon-next { bottom: calc(1px + (7 - 1) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right { padding: calc(40px + (100 - 40) * ((100vw - 414px) / (1700 - 414)))calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); box-sizing: border-box; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 { padding: 0px calc(20px + (50 - 20) * ((100vw - 414px) / (1700 - 414))); } .Globals.MenuT1 .mainmenu .menu-decoration { width: calc(170px + (220 - 170) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1280px) { .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items .level-2-item { max-width: 100%; min-width: 50%; flex-basis: 50%; flex: 1; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right .level-2 .level-2-items .level-2-item:nth-child(n + 3) { margin-top: calc(15px + (50 - 15) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 851px) { .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 { display: none !important; } } @media (max-width: 850px) { .Globals.MenuT1 .active .level-2-item.active .title { opacity: .5; } .Globals.MenuT1 { padding: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu { display: block; overflow: scroll; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left { width: 100%; padding-right: 40px; border-right: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item > a { width: 100%; display: block; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:not(.no-level-2-menu) > a:before, .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:not(.no-level-2-menu) > a:after { content: ''; width: 12px; height: 1px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); background: currentColor; z-index: 1; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item:not(.no-level-2-menu) > a:after { transform: translateY(-50%) rotate(90deg); transition: .3s ease; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item.active:not(.no-level-2-menu) > a:after { transform: translateY(-50%) rotate(0deg); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-1-item svg.icon-next { display: none; width: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 { margin: 15px 0px 20px 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item + .level-2-item { margin-top: 15px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .title { position: relative; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .title:before, .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .title:after { content: ''; width: 12px; height: 1px; position: absolute; top: 50%; right: 0px; transform: translateY(-50%); background: currentColor; z-index: 1; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .title:after { transform: translateY(-50%) rotate(90deg); transition: .3s ease; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item.active .title:after { transform: translateY(-50%) rotate(0deg); } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .level-3 { margin-bottom: 30px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .left .level-2 .level-2-item .level-3 .level-3-item { margin-top: 8px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .right { display: none; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu { display: block; padding-left: calc(40px + (100 - 40) * ((100vw - 414px) / (1700 - 414))); position: relative; right: 0px; bottom: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item + .secondary-menu-item { margin-top: 10px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item a { font-size: 12px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu .secondary-menu-item span { display: none; margin: 0px; } .Globals.MenuT1 .mainmenu .menu-decoration { display: none; width: 0px; } } @media (max-width: 620px) { .Globals.MenuT1 .mainmenu .closer { display: none; width: 0px; height: 0px; } .Globals.MenuT1 .mainmenu .inner-mainmenu .menu .secondary-menu { padding-bottom: 80px; } } @media all { .LanguageSwitchT1 .inner { display: block; position: relative; padding-inline-start: 0px; } .LanguageSwitchT1 .inner .lang { display: flex; align-items: center; cursor: pointer; margin-top: 0px; transition: all .3s linear; } .LanguageSwitchT1 .inner .lang div { margin-left: 5px; margin-top: 2px; display: flex; align-items: center; } .LanguageSwitchT1 .inner .lang div svg { display: block; width: 10px; height: 10px; transform: rotate(-180deg); transition: transform .3s linear; } .LanguageSwitchT1 .inner .dropdown { width: 100%; position: absolute; left: 0px; bottom: calc(100% + 5px); padding-left: 5px; margin-left: -5px; overflow: hidden; z-index: 10; } .LanguageSwitchT1 .inner .dropdown li { display: block; margin-top: -50px; line-height: 20px; transition: all .3s linear; } .LanguageSwitchT1.open .inner .lang div svg { transform: rotate(0); } .LanguageSwitchT1.open .inner .dropdown li { margin-top: 5px; } } @media (min-width: 851px) { .LanguageSwitchT1 .inner, .LanguageSwitchT1 .inner a { font-size: 18px; color: #5B5E51; } } @media (max-width: 850px) { .LanguageSwitchT1 { padding: 20px 0px; } .LanguageSwitchT1 .inner .lang { display: none; } .LanguageSwitchT1 .inner .dropdown { position: relative; bottom: 0px; } .LanguageSwitchT1 .inner .dropdown li { margin-top: 0px; display: inline; } .LanguageSwitchT1 .inner .dropdown li + li { margin-left: 10px; } } @media all { .Globals.HeaderT2 { position: absolute; top: 0px; left: 0px; width: 100%; height: 200px; transition: height 500ms, background-color 500ms, background 500ms; background-color: transparent; } .Globals.HeaderT2 .inner-header { display: flex; justify-content: flex-end; align-items: center; position: relative; } .Globals.HeaderT2 .inner-header .logo-container { position: absolute; top: 0px; left: 0px; display: block; padding: 30px 75px 45px 45px; width: 300px; box-sizing: border-box; transition: padding 500ms, width 500ms; } .Globals.HeaderT2 .inner-header .logo-container:hover { opacity: 1; } .Globals.HeaderT2 .inner-header .logo-container span { position: relative; z-index: 2; display: block; } .Globals.HeaderT2 .inner-header .logo-container span img { transition: opacity 500ms; } .Globals.HeaderT2 .inner-header .logo-container span img.logo { opacity: 1; } .Globals.HeaderT2 .inner-header .logo-container span img.logo-white { opacity: 0; } .Globals.HeaderT2 .inner-header .logo-container span img.logo-scroll { opacity: 0; } .Globals.HeaderT2 .inner-header .logo-container span img + img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .Globals.HeaderT2 .inner-header .logo-container svg { position: absolute; top: 0px; left: 0px; opacity: 0.1; transition: opacity 500ms; } .Globals.HeaderT2 .inner-header .hotels-link { position: absolute; top: 70px; right: 45px; } .Globals.HeaderT2 .inner-header .buttons-container { position: fixed; right: 0px; bottom: 0px; width: 150px; padding: 55px 35px 55px 0px; box-sizing: border-box; } .Globals.HeaderT2 .inner-header .buttons-container .buttons { } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button { font-size: 14px; line-height: 18px; color: #FFFFFF; display: flex; position: relative; justify-content: center; align-items: center; text-align: center; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button + a.button { margin-top: 15px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button svg { opacity: 1; transition: opacity 500ms; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button svg.bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button svg.responsive { width: calc(100% - 30px); position: relative; fill: #ffffff; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button span { display: block; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button .inner-button { position: relative; z-index: 2; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu { height: 100px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request { height: 110px; position: relative; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request .hotel-counter { width: 50px; height: 50px; position: absolute; top: -21px; right: 0px; display: flex; justify-content: center; align-items: center; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request .hotel-counter svg { position: absolute; z-index: 1; top: 0px; left: 0px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request .hotel-counter span { position: relative; z-index: 2; text-align: center; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request-detail + a.button.request { display: none; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.booking { height: 105px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.booking svg.bg { transform: rotate(-35deg); fill: #B0D8F4; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu .icon { width: 20px; height: 16px; position: relative; margin: 0px auto 5px auto; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu .icon span { height: 2px; background-color: #FFFFFF; width: 100%; -webkit-border-radius: 1px; border-radius: 1px; position: absolute; top: 0px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu .icon span:nth-child(2) { top: 7px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu .icon span:nth-child(3) { top: 14px; } .no-mobile-device .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button:hover { opacity: 1; color: #FFFFFF; } .no-mobile-device .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button:hover svg { opacity: 1; } .inverted-header .Globals.HeaderT2 { background: rgba(0,0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); } .inverted-header .Globals.HeaderT2 .inner-header .logo-container svg { opacity: 0.35; } .inverted-header .Globals.HeaderT2 .inner-header .logo-container span img.logo { opacity: 0; } .inverted-header .Globals.HeaderT2 .inner-header .logo-container span img.logo-white { opacity: 1; } .inverted-header .Globals.HeaderT2 .inner-header .logo-container span img.logo-scroll { opacity: 0; } .mobile-menubarT2 { display: none; height: 60px; position: fixed; bottom: 0px; left: 0px; width: 100%; } .mobile-menubarT2 .inner-mobile-menubar { display: flex; justify-content: center; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button { height: 60px; width: 100%; box-sizing: border-box; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button + .mobile-button { border-left: 1px solid rgba(255,255,255,0.3); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button a { display: block; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a span { display: block; position: relative; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a span.icon { width: 24px; height: 18px; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a span.icon span { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; border-radius: 1px; background-color: var(--bgmobilemenu-text-color); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a span.icon span:nth-child(2) { top: 8px; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a span.icon span:nth-child(3) { top: 16px; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.bell a { background-color: #B0D8F4; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.bell a svg { width: 28px; height: 30px; fill: #FFFFFF; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger .bar { transition: .25s ease-in-out; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar { width: 0; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(1) { transition-delay: .5s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(1) { transition-delay: 0s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(2) { transition-delay: .625s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(2) { transition-delay: .125s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(3) { transition-delay: .75s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(3) { transition-delay: .25s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger div { transform: rotate(45deg); position: absolute; width: 24px; height: 24px; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger div .bar:nth-of-type(1) { width: 2px; height: 0px; left: 50%; transform: translateX(-50%); transition-delay: .0s; position: absolute; background-color: var(--bgmobilemenu-text-color); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active div .bar:nth-of-type(1) { height: 100%; transition-delay: .625s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger div .bar:nth-of-type(2) { width: 0px; height: 2px; top: 50%; transform: translateY(-50%); transition-delay: .25s; position: absolute; background-color: var(--bgmobilemenu-text-color); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active div .bar:nth-of-type(2) { width: 100%; transition-delay: .375s; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.hotels a svg { width: 37px; height: 38px; fill: var(--bgmobilemenu-text-color);} .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request a { background-color: #C1CC00; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request a svg { width: 26px; height: 21px; stroke: var(--bgmobilemenu-text-color); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.wishlist a svg { width: 27px; height: 26px; stroke: var(--bgmobilemenu-text-color); } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request .icon-container { position: relative; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request .hotel-counter { width: 50px; height: 50px; position: absolute; top: -31px; right: -31px; display: flex; justify-content: center; align-items: center; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request .hotel-counter svg { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; stroke: none; } .mobile-menubarT2 .inner-mobile-menubar .mobile-button.request .hotel-counter span { position: relative; z-index: 2; text-align: center; } } @media (max-width: 1700px) { .Globals.HeaderT2 .inner-header .logo-container { padding: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414)))calc(45px + (75 - 45) * ((100vw - 414px) / (1700 - 414))) 45px calc(15px + (45 - 15) * ((100vw - 414px) / (1700 - 414))); width: calc(155px + (270 - 155) * ((100vw - 414px) / (1700 - 414))); } .Globals.HeaderT2 .inner-header .hotels-link { top: calc(35px + (70 - 35) * ((100vw - 414px) / (1700 - 414))); right: calc(20px + (45 - 20) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 801px) { .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button svg.responsive { display: none; } } @media (max-width: 800px) { .Globals.HeaderT2 .inner-header .buttons-container { width: 75px; padding: 55px 20px 0px 0px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu, .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.request, .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.booking { height: 50px; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button .text { display: none; } .Globals.HeaderT2 .inner-header .buttons-container .buttons a.button.menu .icon { margin: 0px auto; } } @media (max-width: 620px) { .Globals.HeaderT2 { height: 150px; } .Globals.HeaderT2 .inner-header .buttons-container { display: none; } .mobile-menubarT2 { display: block; } } @media all { .Globals.HeaderT1 { position: absolute; top: 0px; left: 0px; width: 100%; height: 200px; transition: height 500ms, background-color 500ms, background 500ms; background-color: transparent; } .Globals.HeaderT1 .inner-header { display: flex; justify-content: flex-end; align-items: center; position: relative; } .Globals.HeaderT1 .inner-header .logo-container { position: absolute; top: 0px; left: 0px; display: block; padding: 30px 75px 45px 45px; width: 300px; box-sizing: border-box; transition: padding 500ms, width 500ms; } .Globals.HeaderT1 .inner-header .logo-container:hover { opacity: 1; } .Globals.HeaderT1 .inner-header .logo-container span { position: relative; z-index: 2; display: block; } .Globals.HeaderT1 .inner-header .logo-container span img { height: auto; transition: opacity 500ms; } .Globals.HeaderT1 .inner-header .logo-container span img.logo { opacity: 1; } .Globals.HeaderT1 .inner-header .logo-container span img.logo-white { opacity: 0; } .Globals.HeaderT1 .inner-header .logo-container span img.logo-scroll { opacity: 0; } .Globals.HeaderT1 .inner-header .logo-container span img + img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .Globals.HeaderT1 .inner-header .logo-container svg { position: absolute; top: 0px; left: 0px; opacity: 0.1; transition: opacity 500ms; } .Globals.HeaderT1 .inner-header .header-menu { padding: 90px 190px 0px 0px; } .Globals.HeaderT1 .inner-header .header-menu .header-menu-items { display: flex; align-items: center; justify-content: flex-end; } .Globals.HeaderT1 .inner-header .header-menu .header-menu-items a { display: inline-flex; color: #5B5E51; transition: opacity 500ms, color 500ms; } .Globals.HeaderT1 .inner-header .header-menu .header-menu-items .header-menu-item.active a, .no-mobile-device .Globals.HeaderT1 .inner-header .header-menu .header-menu-items .header-menu-item a:hover { opacity: 0.5; } .Globals.HeaderT1 .inner-header .header-menu .header-menu-items .header-menu-item + .header-menu-item { margin-left: 30px; } .Globals.HeaderT1 .inner-header .buttons-container { position: fixed; right: 0px; top: 0px; width: 150px; padding: 55px 35px 0px 0px; box-sizing: border-box; } .Globals.HeaderT1 .inner-header .buttons-container .buttons { } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button { font-size: 14px; line-height: 18px; color: #FFFFFF; display: flex; position: relative; justify-content: center; align-items: center; text-align: center; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button + a.button { margin-top: 15px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg { opacity: 1; transition: opacity 500ms; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg.bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg.responsive { width: calc(100% - 30px); position: relative; fill: #ffffff; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button span { display: block; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button .inner-button { position: relative; z-index: 2; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu { height: 100px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request { height: 110px; position: relative; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request .hotel-counter { width: 50px; height: 50px; position: absolute; top: -21px; right: 0px; display: flex; justify-content: center; align-items: center; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request .hotel-counter svg { position: absolute; z-index: 1; top: 0px; left: 0px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request .hotel-counter span { position: relative; z-index: 2; text-align: center; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request-detail + a.button.request { display: none; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.booking { height: 105px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.booking svg.bg { transform: rotate(-35deg); fill: #B0D8F4; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu .icon { width: 20px; height: 16px; position: relative; margin: 0px auto 5px auto; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu .icon span { height: 2px; background-color: #FFFFFF; width: 100%; -webkit-border-radius: 1px; border-radius: 1px; position: absolute; top: 0px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu .icon span:nth-child(2) { top: 7px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu .icon span:nth-child(3) { top: 14px; } .no-mobile-device .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button:hover { opacity: 1; color: #FFFFFF; } .no-mobile-device .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button:hover svg { opacity: 1; } .Globals.HeaderT1 .inner-header .watchlist-container { position: fixed; right: 0px; bottom: 0px; width: 150px; padding: 0px 35px 55px 0px; box-sizing: border-box; } .Globals.HeaderT1 .inner-header .watchlist-container .button { width: 115px; height: 110px; font-size: 14px; line-height: 18px; color: #FFFFFF; display: flex; position: relative; justify-content: center; align-items: center; text-align: center; cursor: pointer; } .Globals.HeaderT1 .inner-header .watchlist-container .button svg.bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; transition: opacity 500ms; opacity: 1; } .Globals.HeaderT1 .inner-header .watchlist-container .button .inner-button { position: relative; z-index: 2; } .Globals.HeaderT1 .inner-header .watchlist-container .button .hotel-counter { width: 50px; height: 50px; position: absolute; top: -4px; right: 0px; display: flex; justify-content: center; align-items: center; } .Globals.HeaderT1 .inner-header .watchlist-container .button .hotel-counter svg { position: absolute; z-index: 1; top: 0px; left: 0px; } .Globals.HeaderT1 .inner-header .watchlist-container .button .hotel-counter span { position: relative; z-index: 2; text-align: center; } .no-mobile-device .Globals.HeaderT1 .inner-header .watchlist-container .button:hover svg.bg { opacity: 0.8; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor { position: relative; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist { position: absolute; bottom: 0px; right: 0px; width: 420px; height: auto; padding: 35px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; background-image: url('/images/design/bgs/bgwatchlist.png'); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .close-icon { cursor: pointer; position: absolute; top: 20px; right: 14px; width: 40px; height: 40px; transition: opacity 500ms; } .no-mobile-device .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .close-icon:hover { opacity: 0.7; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .close-icon:after, .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .close-icon:before { content: ''; position: absolute; top: 10px; left: 10px; height: 2px; width: 14px; transform: rotate(-45deg); background-color: currentColor; border-radius: 1px; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .close-icon:before { transform: rotate(45deg); } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist > div { position: relative; z-index: 2; width: 100%; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels { margin-top: 15px; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel { display: none; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel.mt { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(112,112,112,0.2); } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel.active { display: block; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel a { display: flex; align-items: stretch; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel a .image { max-width: 78px; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel a .textbox { display: flex; align-items: center; padding: 8px; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel a .textbox .headline { display: block; font-size: 1.06em; letter-spacing: 0.05em; text-transform: uppercase; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .hotels .hotel a .textbox .subheadline { font-size: 0.8em; line-height: 1.1em; display: block; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist .linkbox { margin-top: 15px; } .inverted-header .Globals.HeaderT1 { background: rgba(0,0,0,0); background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%); } .inverted-header .Globals.HeaderT1 .inner-header .logo-container svg { opacity: 0.35; } .inverted-header .Globals.HeaderT1 .inner-header .logo-container span img.logo { opacity: 0; } .inverted-header .Globals.HeaderT1 .inner-header .logo-container span img.logo-white { opacity: 1; } .inverted-header .Globals.HeaderT1 .inner-header .logo-container span img.logo-scroll { opacity: 0; } .inverted-header .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg.bg { opacity: .5; } .inverted-header .Globals.HeaderT1 .inner-header .watchlist-container .button svg.bg { opacity: 0.8; } .no-mobile-device.inverted-header .Globals.HeaderT1 .inner-header .watchlist-container .button:hover svg.bg { opacity: 1; } .inverted-header .Globals.HeaderT1 .inner-header .header-menu .header-menu-items a { color: #FFFFFF; } .scroll-header .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg.bg { opacity: 1; } .no-mobile-device.scroll-header .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button:hover svg { opacity: 0.5; } .scroll-header .Globals.HeaderT1 .inner-header .watchlist-container .button svg.bg { opacity: 1; } .no-mobile-device.scroll-header .Globals.HeaderT1 .inner-header .watchlist-container .button:hover svg.bg { opacity: 0.8; } .mobile-menubar { display: none; height: 60px; position: fixed; bottom: 0px; left: 0px; width: 100%; } .mobile-menubar .inner-mobile-menubar { display: flex; justify-content: center; } .mobile-menubar .inner-mobile-menubar .mobile-button { height: 60px; width: 25%; box-sizing: border-box; } .mobile-menubar[data-element-count="5"] .inner-mobile-menubar .mobile-button { width: 20%; } .mobile-menubar .inner-mobile-menubar .mobile-button + .mobile-button { border-left: 1px solid rgba(255,255,255,0.3); } .mobile-menubar .inner-mobile-menubar .mobile-button a { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; } .mobile-menubar .inner-mobile-menubar .mobile-button a span.text { text-transform: uppercase; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span { display: block; position: relative; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span.icon { width: 24px; height: 18px; top: 8px; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span.icon span { position: absolute; top: 0px; left: 0px; width: 100%; height: 2px; border-radius: 1px; background-color: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span.icon span:nth-child(2) { top: 8px; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span.icon span:nth-child(3) { top: 16px; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a span.text { margin-top: 12px; } .mobile-menubar .inner-mobile-menubar .mobile-button.bell a { background-color: #B0D8F4; } .mobile-menubar .inner-mobile-menubar .mobile-button.bell a svg { width: 28px; height: 30px; fill: #FFFFFF; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger .bar { transition: .25s ease-in-out; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar { width: 0; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(1) { transition-delay: .5s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(1) { transition-delay: 0s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(2) { transition-delay: .625s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(2) { transition-delay: .125s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger span.icon .bar:nth-of-type(3) { transition-delay: .75s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active span.icon .bar:nth-of-type(3) { transition-delay: .25s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger div { top: 10px; transform: rotate(45deg); position: absolute; width: 24px; height: 24px; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger div .bar:nth-of-type(1) { width: 2px; height: 0px; left: 50%; transform: translateX(-50%); transition-delay: .0s; position: absolute; background-color: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active div .bar:nth-of-type(1) { height: 100%; transition-delay: .625s; } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger div .bar:nth-of-type(2) { width: 0px; height: 2px; top: 50%; transform: translateY(-50%); transition-delay: .25s; position: absolute; background-color: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.menu a.mobile-burger.active div .bar:nth-of-type(2) { width: 100%; transition-delay: .375s; } .mobile-menubar .inner-mobile-menubar .mobile-button.hotels a svg { width: 37px; height: 30px; fill: var(--bgmobilemenu-text-color);} .mobile-menubar .inner-mobile-menubar .mobile-button.request a { background-color: #C1CC00; } .mobile-menubar .inner-mobile-menubar .mobile-button.request a svg { width: 26px; height: 28px; stroke: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.wishlist a svg { width: 27px; height: 26px; stroke: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.calendar2 a svg { width: 27px; height: 26px; stroke: var(--bgmobilemenu-text-color); } .mobile-menubar .inner-mobile-menubar .mobile-button.request .icon-container { position: relative; } .mobile-menubar .inner-mobile-menubar .mobile-button.request .hotel-counter { width: 50px; height: 50px; position: absolute; top: -31px; right: -31px; display: flex; justify-content: center; align-items: center; } .mobile-menubar .inner-mobile-menubar .mobile-button.request .hotel-counter svg { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; stroke: none; } .mobile-menubar .inner-mobile-menubar .mobile-button.request .hotel-counter span { position: relative; z-index: 2; text-align: center; } } @media (max-width: 1700px) { .Globals.HeaderT1 .inner-header .logo-container { padding: calc(15px + (30 - 15) * ((100vw - 414px) / (1700 - 414)))calc(45px + (75 - 45) * ((100vw - 414px) / (1700 - 414))) 45px calc(15px + (45 - 15) * ((100vw - 414px) / (1700 - 414))); width: calc(180px + (270 - 180) * ((100vw - 414px) / (1700 - 414))); } } @media (min-width: 801px) { .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button svg.responsive { display: none; } } @media (max-width: 800px) { .Globals.HeaderT1 .inner-header .buttons-container { width: 75px; padding: 55px 20px 0px 0px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu, .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.request, .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.booking { height: 50px; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button .text { display: none; } .Globals.HeaderT1 .inner-header .buttons-container .buttons a.button.menu .icon { margin: 0px auto; } } @media (max-width: 1080px) { .Globals.HeaderT1 .inner-header .header-menu { display: none; } } @media (max-width: 620px) { .Globals.HeaderT1 { height: 150px; } .Globals.HeaderT1 .inner-header .buttons-container { display: none; } .Globals.HeaderT1 .inner-header .watchlist-container { bottom: 20px; width: auto; z-index: 2; } .Globals.HeaderT1 .inner-header .watchlist-container .button { width: auto; height: 30px; background-color: #BCB2A3; } .Globals.HeaderT1 .inner-header .watchlist-container .button svg.bg { display: none; } .Globals.HeaderT1 .inner-header .watchlist-container .button .inner-button { padding: 0px 25px 0px 15px; } .Globals.HeaderT1 .inner-header .watchlist-container .button .hotel-counter { top: -23px; right: -22px; } .mobile-menubar { display: block; } .Globals.HeaderT1 .inner-header .watchlist-container .watchlist-anchor .watchlist { display: block; position: fixed; top: 0px; left: 0px; width: 100%; height: calc(100% - 60px); background-image: none; background-color: var(--bgweb2-bg-color); } } @media all { .Globals.FooterT1 .footer-decoration-helper { position: relative; } .Globals.FooterT1 .footer-top { padding: 35px 0px; position: relative; background-color: rgba(0,0,0,.1); z-index: 2; } .Globals.FooterT1 .footer-top .elements .element .morelink { display: flex; align-items: center; } .Globals.FooterT1 .footer-top .elements .element .morelink img { width: auto; } .Globals.FooterT1 .footer-top .elements .element .morelink .text { margin-left: 20px; } .Globals.FooterT1 .footer-top .elements .element .morelink .text .subheadline { margin-top: 5px; } .Globals.FooterT1 .footer-top .owl-dots { margin-top: 15px; margin-bottom: 0px; } .Globals.FooterT1 .footer-mid { position: relative; z-index: 2; } .Globals.FooterT1 .footer-mid .inner-footer-mid { padding: 130px 0px 110px 0px; } .Globals.FooterT1 .footer-mid .elements { display: flex; } .Globals.FooterT1 .footer-mid .elements .element { width: 33.333333%; } .Globals.FooterT1 .footer-mid .elements .element + .element { margin-left: 20px; } .Globals.FooterT1 .footer-mid .elements .element .headline { display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 1.5px; } .Globals.FooterT1 .footer-mid .elements .element .linkbox { margin-top: 20px; } .Globals.FooterT1 .footer-mid .elements .element .linkbox .box-element + .box-element { margin-top: 5px; } .Globals.FooterT1 .footer-mid .socials { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; } .Globals.FooterT1 .footer-mid .socials .socials-elements { display: flex; } .Globals.FooterT1 .footer-mid .socials .socials-element + .socials-element { margin-left: 10px; } .Globals.FooterT1 .footer-mid .socials .socials-element a { display: block; } .Globals.FooterT1 .footer-mid .socials .socials-element img { width: 45px; } .Globals.FooterT1 .footer-mid .socials .sudtirol-logo { width: 65px; } .Globals.FooterT1 .footer-mid .newsletter { padding: 40px 0px 50px 0px; z-index: 100; margin-right: 20%; } .Globals.FooterT1 .footer-mid .newsletter div, .Globals.FooterT1 .footer-mid .newsletter input, .Globals.FooterT1 .footer-mid .newsletter span, .Globals.FooterT1 .footer-mid .newsletter input::placeholder, .Globals.FooterT1 .footer-mid .newsletter select { color: white; } .Globals.FooterT1 .footer-mid .newsletter svg { fill: white; right: 5px; } .Globals.FooterT1 .footer-mid .newsletter a > span { color: rgb(193, 204, 41) !important; } .Globals.FooterT1 .footer-decoration-helper .footer-decoration { position: absolute; width: 25.294118%; bottom: -30px; right: 0px; z-index: 1; } .Globals.FooterT1 .footer-bottom { position: relative; z-index: 3; } .Globals.FooterT1 .footer-bottom .footer-navi { margin: 25px 0px 40px 0px; } .Globals.FooterT1 .footer-bottom .footer-navi .elements-container { display: flex; justify-content: space-between; align-items: center; } .Globals.FooterT1 .footer-bottom .footer-navi .elements { display: flex; flex-wrap: wrap; align-items: baseline; } .Globals.FooterT1 .footer-bottom .footer-navi .elements .helper { margin: 0px 5px; } .Globals.FooterT1 .footer-bottom .footer-navi .elements .element img { width: 52px; display: inline-block; } .Globals.FooterT1 .footer-bottom .footer-navi .sudtirol-logo { width: 80px; } .Globals.FooterT1 .footer-top .owl-carousel .owl-stage { margin: 0px auto; } } @media (max-width: 1700px) { .Globals.FooterT1 .footer-mid .inner-footer-mid { padding: calc(15px + (130 - 15) * ((100vw - 414px) / (1700 - 414))) 0px calc(25px + (110 - 25) * ((100vw - 414px) / (1700 - 414))) 0px; } .Globals.FooterT1 .footer-mid .newsletter { padding: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))) 0px calc(30px + (50 - 30) * ((100vw - 414px) / (1700 - 414))) 0px; } .Globals.FooterT1 .footer-decoration-helper .footer-decoration { width: calc(200px + (430 - 200) * ((100vw - 414px) / (1700 - 414))); } .Globals.FooterT1 .footer-bottom .footer-navi { margin: calc(20px + (25 - 20) * ((100vw - 414px) / (1700 - 414))) 0px calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))) 0px; } } @media (max-width: 1600px) { .Globals.FooterT1 .footer-mid .newsletter { display: block; } } @media (max-width: 1100px) { .Globals.FooterT1 .footer-bottom .footer-navi .elements-container { display: block; } .Globals.FooterT1 .footer-bottom .footer-navi .sudtirol-logo { margin-top: 20px; } } @media (max-width: 900px) { .Globals.FooterT1 .footer-mid .newsletter .newsletter-text { display: block; } .Globals.FooterT1 .footer-bottom .footer-navi .elements { justify-content: center; } .Globals.FooterT1 .footer-bottom .footer-navi .elements .element:nth-of-type(5) .helper { display: none; } .Globals.FooterT1 .footer-bottom .footer-navi .elements .publisher-element { width: 100%; margin-top: 15px; text-align: center; } .Globals.FooterT1 .footer-bottom .footer-navi .sudtirol-logo { margin: 20px auto 0px auto; } } @media (min-width: 701px) { .Globals.FooterT1 .footer-mid .elements .element .headline svg { display: none; } .Globals.FooterT1 .footer-mid .elements .element .toggle-content { display: block !important; } .Globals.FooterT1 .footer-mid .socials .sudtirol-logo { display: none; } } @media (max-width: 700px) { .Globals.FooterT1 .footer-mid .elements { display: block; } .Globals.FooterT1 .footer-mid .elements .element { width: 100%; padding: 20px 0px; border-bottom: 1px solid rgba(255,255,255,.2); } .Globals.FooterT1 .footer-mid .elements .element + .element { margin-left: 0px; } .Globals.FooterT1 .footer-mid .elements .element .toggle-content { display: none; } .Globals.FooterT1 .footer-mid .elements .element .headline svg { width: 25px; height: 25px; transform: rotate(90deg); stroke: currentColor; transition: .6s ease; } .Globals.FooterT1 .footer-mid .elements .element .headline.active svg { transform: rotate(-90deg); } .Globals.FooterT1 .footer-mid .socials { margin-top: 15px; } .Globals.FooterT1 .footer-mid .socials .socials-element img { width: 35px; } .Globals.FooterT1 .footer-mid .newsletter { margin-right: 0; } .Globals.FooterT1 .footer-decoration-helper .footer-decoration { display: none; } .Globals.FooterT1 .footer-bottom .footer-navi .sudtirol-logo { display: none; } } @media (max-width: 620px) { .Globals.FooterT1 { margin-bottom: 60px; } } @media (max-width: 580px) { div.unitnewsletter.onpage.layout3 .formfields { display: block; } div.unitnewsletter.onpage.layout3 form a.senden { width: 100%; height: 45px; box-sizing: border-box; text-align: center; justify-content: center; } } @media (max-width: 450px) { .Globals.FooterT1 .footer-top .elements .element .morelink .picture { display: none; } .Globals.FooterT1 .footer-top .elements .element .morelink .text { margin-left: 0px; } } @media all { section.unitcredits.layout1 div.clientdata img { width: 200px; } section.unitcredits.layout1 div.clientdata.zeppelindata img { width: auto; } } @media all { section.Forms.RequestT2 { position: relative; background-color: #CFD480; } section.Forms.RequestT2 form { width: 80%; margin: 0 auto; padding: 60px 0px; } section.Forms.RequestT2 form label { display: none; } section.Forms.RequestT2 form label.extralabel { display: block; } section.Forms.RequestT2 form div.row.requiredinfobox { display: none; } section.Forms.RequestT2 form div.row div.textarea, section.Forms.RequestT2 form div.row.input div.inputfield, section.Forms.RequestT2 form div.row.select div.selectfield, section.Forms.RequestT2 form div.row.calendar div.calendarfield { width: 100%; } section.Forms.RequestT2 form div.inputfield input, section.Forms.RequestT2 .formrow .textarea, section.Forms.RequestT2 form div.row.select div.selectfield, section.Forms.RequestT2 form div.calendarfield input { height: 46px; line-height: 46px; text-indent: 0px; background-color: transparent !important; border: none; color: #000; } section.Forms.RequestT2 form div.row.select div.selectfield span.field { background-color: transparent !important; border: none; color: #000; text-indent: 0; } section.Forms.RequestT2 form div.row.select div.selectfield span.select { margin: 0; } section.Forms.RequestT2 form div.row.select div.selectfield span.field span.selecticon:before, section.Forms.RequestT2 form div.row.select div.selectfield span.field span.selecticon:after { background-color: #fff; width: 25px; } section.Forms.RequestT2 form div.row.select div.selectfield span.field span.selecticon:before { left: -15px; } section.Forms.RequestT2 form div.row.select div.selectfield span.field span.selecticon:after { left: 2px; } section.Forms.RequestT2 form div.row.calendar div.calendarfield a.kalenderopener { background-image: url('/images/design/icon-calendar-white.png'); background-position: center center; background-size: contain; background-repeat: no-repeat; width: 25px; height: 25px; top: 0.87em; } section.Forms.RequestT2 form div.row.checkbox { position: relative; left: -2.5em; display: flex; } section.Forms.RequestT2 form div.row.checkbox.newsletter { align-items: center; } section.Forms.RequestT2 form div.row.checkbox label { margin: 0; } section.Forms.RequestT2 form div.row.checkbox div.checkboxfield, section.Forms.RequestT2 form div.row.checkbox input { width: 2.5em; height: 2em; } section.Forms.RequestT2 form div.checkboxfield svg { background-color: #fff; color: #fff; fill: #000; width: 2em; height: 2em; } section.Forms.RequestT2 form div.row:not(.checkbox) { border-bottom: 1px solid #fff; padding: 10px 0px; } section.Forms.RequestT2 form div.row.checkbox { margin-top: 20px; } section.Forms.RequestT2 .formrow.checkbox-row { } section.Forms.RequestT2 .formrow.checkbox-row .senden { align-self: flex-end; } section.Forms.RequestT2 .formrow .checkboxes > * { margin-right: 30px; } section.Forms.RequestT2 form a.senden { position: absolute; bottom: -25px; margin: 0px; border-radius: 0; padding-left: 10px; } section.Forms.RequestT2 form a:after { display: none; } section.Forms.RequestT2 form div.row.checkbox label.extralabel { margin-top: -5px; } } @media (max-width: 1024px) { section.Forms.RequestT2 form { padding: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))) 0px; } } /* RequestT1 _____________________________________________________________ */ @media all { .Forms.RequestT1 form div.formspace { height: 0px; } .Forms.RequestT1 form div.row { padding: 0px 10px; box-sizing: border-box; width: 50%; margin-top: 20px; float: left; clear: none; } .Forms.RequestT1 form label.label { display: block; width: 100%; margin: 0px 0px 5px 0px; float: none; } .Forms.RequestT1 form label.ort { display: block; } .Forms.RequestT1 form div.row.email, .Forms.RequestT1 form div.row.textarea { width: 100%; } .Forms.RequestT1 form div.row.input div.inputfield, .Forms.RequestT1 form div.row.calendar div.calendarfield { width: 100%; float: none; display: block; margin: 0px; } .Forms.RequestT1 form div.row.input div.plzortcontainer { width: calc(50% - 15px); float: left; } .Forms.RequestT1 form div.row.input div.plzortcontainer + div.plzortcontainer { margin-left: 30px; } .Forms.RequestT1 form div.row.select div.selectfield { width: 100%; padding: 0px; float: none; display: block; height: 50px; } .Forms.RequestT1 form div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; left: auto; bottom: auto; } .Forms.RequestT1 form div.row.calendar div.calendarfield a.kalenderopener svg { position: absolute; width: 22px; height: 22px; right: 15px; top: calc(50% - 11px); } .Forms.RequestT1 form div.row.select div.selectfield span.select { position: absolute; top: 0px; left: 0px; z-index: 1; padding: 0px 15px; margin: 0px; width: 100%; height: 100%; top: 0px; left: 0px; line-height: 50px; } .Forms.RequestT1 form div.row.select div.selectfield select { cursor: pointer; } .Forms.RequestT1 form div.inputfield input, .Forms.RequestT1 form div.calendarfield input { box-sizing: border-box; text-indent: 0px; height: 50px; line-height: 48px; padding: 0px 15px; } .Forms.RequestT1 form div.row div.textarea { width: 100%; padding: 0px; margin: 0px; float: none; display: block; } .Forms.RequestT1 form div.row div.textarea textarea { resize: vertical; padding: 10px 15px; margin: 0px; text-indent: 0px; line-height: 24px; min-height: 94px; } .Forms.RequestT1 form div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 20px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Forms.RequestT1 form div.selectfield span.field span.selecticon:after, .Forms.RequestT1 form div.selectfield span.field span.selecticon:before { display: none; } .Forms.RequestT1 form div.row.checkbox { width: 100%; } .Forms.RequestT1 form div.row.checkbox label.label:not(.extralabel) { display: none; } .Forms.RequestT1 form div.row.checkbox div.checkboxfield { margin-top: 4px; } .Forms.RequestT1 form a.senden { text-transform: none; text-align: center; font-weight: normal; letter-spacing: 0px; border-radius: 45px; margin-top: 60px; } .Forms.RequestT1 form a.senden span { display: block; } .Forms.RequestT1 form a.senden span { font-size: 22px; line-height: 26px; letter-spacing: 0.15em; } .Forms.RequestT1 form a.senden span + span { margin-top: 6px; font-size: 16px; line-height: 20px; letter-spacing: 0px; } } @media (max-width: 1700px) { .Forms.RequestT1 form a.senden { border-radius: calc(35px + (45 - 35) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Forms.RequestT1 form a.senden span { font-size: calc(18px + (22 - 18) * ((100vw - 414px) / (1700 - 414))); } .Forms.RequestT1 form a.senden span + span { font-size: calc(14px + (16 - 14) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 700px) { .Forms.RequestT1 form div.row { width: 100%; padding: 0px; } } /* RequestT1 _____________________________________________________________ */ @media all { .Forms.NewsletterT1 form div.formspace { height: 0px; } .Forms.NewsletterT1 form div.row { padding: 0px 10px; box-sizing: border-box; width: 50%; margin-top: 20px; float: left; clear: none; } .Forms.NewsletterT1 form label.label { display: block; width: 100%; margin: 0px 0px 5px 0px; float: none; } .Forms.NewsletterT1 form label.ort { display: block; } .Forms.NewsletterT1 form div.row.email, .Forms.NewsletterT1 form div.row.textarea { width: 100%; } .Forms.NewsletterT1 form div.row.input div.inputfield, .Forms.NewsletterT1 form div.row.calendar div.calendarfield { width: 100%; float: none; display: block; margin: 0px; } .Forms.NewsletterT1 form div.row.input div.plzortcontainer { width: calc(50% - 15px); float: left; } .Forms.NewsletterT1 form div.row.input div.plzortcontainer + div.plzortcontainer { margin-left: 30px; } .Forms.NewsletterT1 form div.row.select div.selectfield { width: 100%; padding: 0px; float: none; display: block; height: 50px; } .Forms.NewsletterT1 form div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; left: auto; bottom: auto; } .Forms.NewsletterT1 form div.row.calendar div.calendarfield a.kalenderopener svg { position: absolute; width: 22px; height: 22px; right: 15px; top: calc(50% - 11px); } .Forms.NewsletterT1 form div.row.select div.selectfield span.select { position: absolute; top: 0px; left: 0px; z-index: 1; padding: 0px 15px; margin: 0px; width: 100%; height: 100%; top: 0px; left: 0px; line-height: 50px; } .Forms.NewsletterT1 form div.row.select div.selectfield select { cursor: pointer; } .Forms.NewsletterT1 form div.inputfield input, .Forms.NewsletterT1 form div.calendarfield input { box-sizing: border-box; text-indent: 0px; height: 50px; line-height: 48px; padding: 0px 15px; } .Forms.NewsletterT1 form div.row div.textarea { width: 100%; padding: 0px; margin: 0px; float: none; display: block; } .Forms.NewsletterT1 form div.row div.textarea textarea { resize: vertical; padding: 10px 15px; margin: 0px; text-indent: 0px; line-height: 24px; min-height: 94px; } .Forms.NewsletterT1 form div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 20px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Forms.NewsletterT1 form div.selectfield span.field span.selecticon:after, .Forms.NewsletterT1 form div.selectfield span.field span.selecticon:before { display: none; } .Forms.NewsletterT1 form div.row.checkbox { width: 100%; } .Forms.NewsletterT1 form div.row.checkbox label.label.pflichtfeld { display: none; } .Forms.NewsletterT1 form div.row.checkbox div.checkboxfield { margin-top: 4px; } .Forms.NewsletterT1 form a.senden { text-transform: none; text-align: center; font-weight: normal; letter-spacing: 0px; border-radius: 45px; margin-top: 60px; } .Forms.NewsletterT1 form a.senden span { display: block; } .Forms.NewsletterT1 form a.senden span { font-size: 22px; line-height: 26px; letter-spacing: 0.15em; } .Forms.NewsletterT1 form a.senden span + span { margin-top: 6px; font-size: 16px; line-height: 20px; letter-spacing: 0px; } } @media (max-width: 1700px) { .Forms.NewsletterT1 form a.senden { border-radius: calc(35px + (45 - 35) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Forms.NewsletterT1 form a.senden span { font-size: calc(18px + (22 - 18) * ((100vw - 414px) / (1700 - 414))); } .Forms.NewsletterT1 form a.senden span + span { font-size: calc(14px + (16 - 14) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 700px) { .Forms.NewsletterT1 form div.row { width: 100%; padding: 0px; } } /* RequestT1 _____________________________________________________________ */ @media all { .Forms.CatalogT1 form div.formspace { height: 0px; } .Forms.CatalogT1 form div.row { padding: 0px 10px; box-sizing: border-box; width: 50%; margin-top: 20px; float: left; clear: none; } .Forms.CatalogT1 form label.label { display: block; width: 100%; margin: 0px 0px 5px 0px; float: none; } .Forms.CatalogT1 form label.ort { display: block; } .Forms.CatalogT1 form div.row.email, .Forms.CatalogT1 form div.row.textarea { width: 100%; } .Forms.CatalogT1 form div.row.input div.inputfield, .Forms.CatalogT1 form div.row.calendar div.calendarfield { width: 100%; float: none; display: block; margin: 0px; } .Forms.CatalogT1 form div.row.input div.plzortcontainer { width: calc(50% - 15px); float: left; } .Forms.CatalogT1 form div.row.input div.plzortcontainer + div.plzortcontainer { margin-left: 30px; } .Forms.CatalogT1 form div.row.select div.selectfield { width: 100%; padding: 0px; float: none; display: block; height: 50px; } .Forms.CatalogT1 form div.row.calendar div.calendarfield a.kalenderopener { width: 100%; height: 100%; top: 0px; right: 0px; left: auto; bottom: auto; } .Forms.CatalogT1 form div.row.calendar div.calendarfield a.kalenderopener svg { position: absolute; width: 22px; height: 22px; right: 15px; top: calc(50% - 11px); } .Forms.CatalogT1 form div.row.select div.selectfield span.select { position: absolute; top: 0px; left: 0px; z-index: 1; padding: 0px 15px; margin: 0px; width: 100%; height: 100%; top: 0px; left: 0px; line-height: 50px; } .Forms.CatalogT1 form div.row.select div.selectfield select { cursor: pointer; } .Forms.CatalogT1 form div.inputfield input, .Forms.CatalogT1 form div.calendarfield input { box-sizing: border-box; text-indent: 0px; height: 50px; line-height: 48px; padding: 0px 15px; } .Forms.CatalogT1 form div.row div.textarea { width: 100%; padding: 0px; margin: 0px; float: none; display: block; } .Forms.CatalogT1 form div.row div.textarea textarea { resize: vertical; padding: 10px 15px; margin: 0px; text-indent: 0px; line-height: 24px; min-height: 94px; } .Forms.CatalogT1 form div.selectfield span.field span.selecticon { width: 12px; height: 13px; top: calc(50% - 6.5px); right: 20px; background-image: url('/images/design/icon-grey-arrow-down.png'); background-size: contain; background-position: center center; background-repeat: no-repeat; } .Forms.CatalogT1 form div.selectfield span.field span.selecticon:after, .Forms.CatalogT1 form div.selectfield span.field span.selecticon:before { display: none; } .Forms.CatalogT1 form div.row.checkbox { width: 100%; } .Forms.CatalogT1 form div.row.checkbox label.label.pflichtfeld { display: none; } .Forms.CatalogT1 form div.row.checkbox div.checkboxfield { margin-top: 4px; } .Forms.CatalogT1 form a.senden { text-transform: none; text-align: center; font-weight: normal; letter-spacing: 0px; border-radius: 45px; margin-top: 60px; } .Forms.CatalogT1 form a.senden span { display: block; } .Forms.CatalogT1 form a.senden span { font-size: 22px; line-height: 26px; letter-spacing: 0.15em; } .Forms.CatalogT1 form a.senden span + span { margin-top: 6px; font-size: 16px; line-height: 20px; letter-spacing: 0px; } } @media (max-width: 1700px) { .Forms.CatalogT1 form a.senden { border-radius: calc(35px + (45 - 35) * ((100vw - 414px) / (1700 - 414))); margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Forms.CatalogT1 form a.senden span { font-size: calc(18px + (22 - 18) * ((100vw - 414px) / (1700 - 414))); } .Forms.CatalogT1 form a.senden span + span { font-size: calc(14px + (16 - 14) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 700px) { .Forms.CatalogT1 form div.row { width: 100%; padding: 0px; } } @media all { .Faq.FaqT1 .elements .element:not(:last-of-type) { margin-bottom: 10px; } .Faq.FaqT1 .elements .element .opener { padding: 30px; display: flex; align-items: center; justify-content: space-between; } .Faq.FaqT1 .elements .element .opener .headline { width: 66.406250%; } .Faq.FaqT1 .elements .element .opener svg { transition: all .3s linear; width: 1.25em; height: 1.25em; } .Faq.FaqT1 .elements .element .opener.active svg { transform: rotate(-180deg); } .Faq.FaqT1 .elements .element .inner-element { display: none; padding: 30px 0px; margin: 0px 30px; border-top: 1px solid #E0E0E0 } .Faq.FaqT1 .elements .element.unfolded .inner-element { display: block; } .Faq.FaqT1 .elements .element .text .content { width: 57.083333%; } .Faq.FaqT1 .elements .element .text .link { margin-top: 5px; } } @media (max-width: 1024px) { .Faq.FaqT1 .Intro + .elements { margin-top: 45px; } .Faq.FaqT1 .elements .element .opener { padding: 25px; } .Faq.FaqT1 .elements .element .opener .headline { width: 83.333333%; } .Faq.FaqT1 .elements .element .text .content { width: 83.333333%; } .Faq.FaqT1 .elements .element .inner-element { padding: 25px 0px; margin: 0px 25px; } } @media (max-width: 600px) { .Faq.FaqT1 .Intro + .elements { margin-top: 30px; } .Faq.FaqT1 .elements .element .opener { padding: 20px; } .Faq.FaqT1 .elements .element .opener .headline { width: 91.666667%; } .Faq.FaqT1 .elements .element .text .content { width: 100%; } .Faq.FaqT1 .elements .element .inner-element { padding: 20px 0px; margin: 0px 20px; } } /* Eyecatcher T1 _____________________________________________________________ */ @media all { div.Eyecatcher { position: absolute; left: -30px; top: 50vh; z-index: 5; } div.Eyecatcher div.container { position: absolute; } div.Eyecatcher div.container .element { position: relative; width: 250px; height: 285px; display: flex; justify-content: right; text-align: center; -webkit-border-radius: 50%; border-radius: 50%; } div.Eyecatcher div.container .element .background { position: absolute; width: 100%; height: 100%; z-index: -1; transform: rotate(-95deg); } div.Eyecatcher div.container .element .background img { width: 100%; height: 100%; } div.Eyecatcher div.container .element .content { position: relative; margin-right: 5px; right: 15px; width: 70%; height: 100%; display: flex; flex-flow: column; justify-content: center; align-items: center; padding: 0; text-transform: inherit; } div.Eyecatcher div.container .element span.headline { line-height: 28px; } div.Eyecatcher div.container .element span.headline, div.Eyecatcher div.container .element div.subheadline { width: 100%; display: block; } div.Eyecatcher div.container .element * + div.subheadline { margin-top: 3px; } div.Eyecatcher div.container .element * + div.linkbox { margin-top: 20px; } div.Eyecatcher div.container .element div.linkbox a { color: #ffffff; font-size: 15px; line-height: 20px; } } @media (max-width: 1700px) { div.Eyecatcher div.container .element span.headline { line-height: calc(24px + (28 - 24) * ((100vw - 414px) / (1700 - 414))); } div.Eyecatcher div.container .element { width: calc(200px + (250 - 200) * ((100vw - 414px) / (1700 - 414))); height: calc(215px + (285 - 215) * ((100vw - 414px) / (1700 - 414))); } div.Eyecatcher div.container .element * + div.linkbox { margin-top: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } div.Eyecatcher div.container .element div.linkbox a { font-size: calc(12px + (15 - 12) * ((100vw - 414px) / (1700 - 414))); line-height: calc(16px + (20 - 16) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 800px) { div.Eyecatcher { display: none; } } @media all { .Detail.DetailT1 .breadcrumbcontainer { position: relative; } .Detail.DetailT1 .breadcrumbcontainer > div { position: absolute; bottom: 20px; left: 0px; } .Detail.DetailT1.with-image { padding-top: 0px; } .Detail.DetailT1 .inner-module .textbox { max-width: 960px; } .Detail.DetailT1 .inner-module .intro .subheadline { margin-top: 10px; } .Detail.DetailT1 .inner-module .intro .introduction { margin-top: 40px; } .Detail.DetailT1.issuu .inner-module .widget .inner-widget { padding-top: 56.250000%; position: relative; } .Detail.DetailT1.issuu .inner-module .widget .inner-widget iframe { position: absolute; top: 0px; left: 0px; height: 100% !important; } .Detail.DetailT1 .pointsv1 { position: absolute; bottom: 0px; left: 0px; justify-content: center; width: 100%; } .Detail.DetailT1 .inner-module .content ul { padding-left: 20px; } .Detail.DetailT1 .inner-module .content ul li + li { margin-top: 5px; } .Detail.DetailT1 .inner-module .content .content-headline + .content-text { margin-top: 5px; } .Detail.DetailT1 .inner-module .gallery2 .images { display: flex; justify-content: space-between; align-items: center; } .Detail.DetailT1 .inner-module .gallery2 .images > div { width: 50%; box-sizing: border-box; padding: 0px 20px 0px 0px; } .Detail.DetailT1 .inner-module .gallery2 .images > div.image3 { padding: 0px 0px 0px 20px; } .Detail.DetailT1 .inner-module .gallery2 .images > div .image + .image { margin-top: 40px; } .Detail.DetailT1 .inner-module > div + div { margin-top: 60px; } .Detail.DetailT1 .inner-module .header-image + .intro { margin-top: 100px; } .Detail.DetailT1 .inner-module .widget + .content1, .Detail.DetailT1 .inner-module .gallery1 + .content1 { margin-top: 120px; } .Detail.DetailT1 .inner-module .content + .gallery2 { margin-top: 110px; } .Detail.DetailT1 .inner-module .gallery2 + .content { margin-top: 120px; } .Detail.DetailT1.backlink { padding: 50px 0px; } .Detail.DetailT1 + .Detail.DetailT1.backlink { padding-top: 0px; } } @media (max-width: 1700px) { .Detail.DetailT1 .inner-module > div + div { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .intro .introduction { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .header-image + .intro { margin-top: calc(60px + (100 - 60) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .widget + .content1, .Detail.DetailT1 .inner-module .gallery1 + .content1 { margin-top: calc(30px + (120 - 30) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .content + .gallery2 { margin-top: calc(30px + (110 - 30) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .gallery2 + .content { margin-top: calc(30px + (110 - 30) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .gallery2 .images > div { padding: 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))) 0px 0px; } .Detail.DetailT1 .inner-module .gallery2 .images > div.image3 { padding: 0px 0px 0px calc(5px + (20 - 5) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1 .inner-module .gallery2 .images > div .image + .image { margin-top: calc(10px + (40 - 10) * ((100vw - 414px) / (1700 - 414))); } .Detail.DetailT1.backlink { padding: calc(25px + (50 - 25) * ((100vw - 414px) / (1700 - 414))) 0px; } } @media (max-width: 1280px) { .Detail.DetailT1 .inner-module .header-image .image img { aspect-ratio: 1280/720 !important; } } @media (max-width: 720px) { .Detail.DetailT1 .inner-module .header-image .image img { aspect-ratio: 720/480 !important; } } @media all { .Competition.CompetitionT1 { position: relative; z-index: 1; background: unset; color: unset; } .Competition.CompetitionT1 .background { position: absolute; top: 0px; left: 0px; width: 100%; height: 55%; z-index: 1; } .Competition.CompetitionT1 .inner-competition { z-index: 2; position: relative; } .Competition.CompetitionT1 .intro .textbox { max-width: 890px; } .Competition.CompetitionT1 .intro .textbox .subheadline { margin-top: 5px; } .Competition.CompetitionT1 .content-container { margin-top: 40px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; } .Competition.CompetitionT1 .competition-container { margin-top: 60px; display: flex; justify-content: space-between; gap: 20px; } .Competition.CompetitionT1 .competition-container .container-1 { width: calc(50% - 10px); } .Competition.CompetitionT1 .competition-container .container-1 .description { margin-top: 60px; } .Competition.CompetitionT1 .competition-container .container-1 .linkbox { margin-top: 10px; } .Competition.CompetitionT1 .competition-container .container-1 .linkbox .link { text-decoration: underline; color: #404041; } .Competition.CompetitionT1 .competition-container .container-1 .linkbox .link:hover { opacity: .8; } .Competition.CompetitionT1 .competition-container .container-2 { position: relative; width: calc(50% - 10px); margin-top: 150px; height: fit-content; } .Competition.CompetitionT1 .decoration { position: absolute; bottom: 0px; right: 0px; z-index: 1; } .Competition.CompetitionT1 .decoration.deco-8-1 { width: 300px; } .Competition.CompetitionT1 .decoration.deco-8-2 { width: 360px; } .Competition.CompetitionT1 .decoration.deco-8-3 { width: 225px; transform: scaleX(-1); } } @media (max-width: 1700px) { .Competition.CompetitionT1 .content-container { margin-top: calc(20px + (40 - 20) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .competition-container { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); gap: calc(10px + (20 - 10) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .competition-container .container-1 { } .Competition.CompetitionT1 .competition-container .container-1 .description { margin-top: calc(30px + (60 - 30) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .competition-container .container-2 { margin-top: calc(75px + (150 - 75) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .decoration.deco-8-1 { width: calc(200px + (300 - 200) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .decoration.deco-8-2 { width: calc(210px + (360 - 210) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .decoration.deco-8-3 { width: calc(125px + (225 - 125) * ((100vw - 414px) / (1700 - 414))); } } @media (max-width: 1200px) { .Competition.CompetitionT1 .decoration.deco-8-1 { width: 180px; } .Competition.CompetitionT1 .decoration.deco-8-2 { width: 210px; } .Competition.CompetitionT1 .decoration.deco-8-3 { width: 150px; } } @media (max-width: 1100px) { .Competition.CompetitionT1 .decoration { display: none; } } @media (max-width: 1024px) { .Competition.CompetitionT1 .background { height: 40%; } .Competition.CompetitionT1 .competition-container { flex-direction: column; gap: calc(40px + (80 - 40) * ((100vw - 414px) / (1700 - 414))); } .Competition.CompetitionT1 .competition-container .container-1, .Competition.CompetitionT1 .competition-container .container-2 { width: 100%; } .Competition.CompetitionT1 .competition-container .container-2 { margin-top: 0; } } /* BreadcrumbT1 __________________________________________________________ */ @media all { #BreadcrumbT1, #BreadcrumbT1 a { color: #8D8D8D; font-size: 13px; transition: opacity 500ms; } #BreadcrumbT1 > span:last-of-type, #BreadcrumbT1 a:hover { opacity: 0.7; } } @media (max-width: 780px) { #BreadcrumbT1 { display: none !important; } } /* __________________________________________________________________ End */ @media all { .Booking.HgvT1 .centercontent { max-width: 1200px; } .Booking.HgvT1 .headline { margin-bottom: 40px; } } @media (max-width: 1700px) { .Booking.HgvT1 .headline { margin-bottom: calc(15px + (40 - 15) * ((100vw - 414px) / (1700 - 414))); } } /* ArrivalMapT1 ___________________________________________________________ */ @media all { section.unitarrival.intro.layout1 { padding-bottom: 0px; } section.unitarrival.intro.layout1.cssversion2 article div.boxright span.headline { border-color: var(--bgbar-border-color); } section.unitarrival.map.layout1 div.arrivalmapform form div.selectfield select { background: #F8F8F8; } section.unitarrival.map.layout1 div.arrivalmapform a.senden { width: auto; padding-left: 15px; padding-right: 15px; margin-top: 10px; } section.unitarrival.links.layout1 { padding-top: 0px; } section.unitarrival.map .arrivalmap { margin-top: 45px; width: 100%; height: 500px; } section.unitarrival.map .contactdata { margin-top: 45px; padding: 2em; float: left; display: block; } } @media (max-width: 1350px) { section.unitarrival.map.layout1 div.arrivalmapform { display: flex; flex-direction: column; align-items: flex-start; } section.unitarrival.map.layout1 div.arrivalmapform form { width: 100%; } }