@font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'PlusJakartaSans'; src: url('../fonts/PlusJakartaSans-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Caveat'; src: url('../fonts/Caveat-Regular.woff2') format('woff2'), local("?"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Caveat'; src: url('../fonts/Caveat-Bold.woff2') format('woff2'), local("?"); font-weight: 700; font-style: normal; font-display: swap; } @keyframes rotate_a1 { 0% { top: 48%; transform: rotate(45deg); } 50% { top: 48%; transform: none; } 100% { top: 41%; transform: none; } } @keyframes rotate_a2 { 0% { top: 48%; transform: rotate(-45deg); } 50% { top: 48%; transform: none; } 100% { top: 55%; transform: none; } } @keyframes rotate_b1 { 0% { top: 41%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(45deg); } } @keyframes rotate_b2 { 0% { top: 55%; transform: none; } 50% { top: 48%; transform: none; } 100% { top: 48%; transform: rotate(-45deg); } } @keyframes motion { 0% { transform: scale(1) translate(-16.6666%,-16.6666%); } 100% { transform: scale(0.6666) translate(0%,0%); } } @keyframes pulse { 0% { filter: opacity(0); transform: translate(-50%,-50%) scale(0.5); } 50% { filter: opacity(0.5); transform: translate(-50%,-50%) scale(1); } 100% { filter: opacity(0); transform: translate(-50%,-50%) scale(1.5); } } html { box-sizing: border-box } *, *:before, *:after { box-sizing: inherit } body { padding: 220px 0px 0px 0px; background: #316347; margin: 0px; color: #316347; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif } h1 { margin: 0px; font-size: 36px; line-height: 60px; font-weight: 400 } h2 { margin: 0px; font-size: 30px; line-height: 48px; font-weight: 400 } h3 { margin: 0px; font-size: 24px; line-height: 36px; font-weight: 400 } h4 { margin: 0px; font-size: 18px; line-height: 30px; font-weight: 400 } h4.texterror { color: #ff0000 } ul { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px; list-style-type: square } ol { padding: 0px 0px 0px 10px; margin: 0px 0px 0px 10px } img { border: none } b { font-weight: 700 } i { display: block; font-size: 12px; line-height: 18px } a { color: #316347; text-decoration: none } table { float: left; width: calc(100% + 40px); padding: 10px; border-style: none; border-spacing: 0px; margin: -20px } table tr td { position: relative; width: 50%; padding: 10px; text-align: left; vertical-align: top } input[type=radio], input[type=radio], input[type=checkbox] { display: none } input[type=radio] + label, input[type=checkbox] + label { display: block; position: relative; float: left; width: 100%; padding: 0px 0px 10px 50px; text-align: left } input[type=radio] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #7cd3a2; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #58a279; border-radius: 50% } input[type=checkbox] + label b { display: block; position: absolute; left: 0px; top: 0px; width: 30px; height: 30px; background-color: #7cd3a2; background-repeat: no-repeat; background-position: center; background-size: contain; border: solid 2px #58a279 } input[type=radio].error + label b, input[type=checkbox].error + label b { border-color: #ff0000 } input[type=radio]:checked + label b { background-image: url(../images/layout/radio.svg); border-color: #316347 } input[type=checkbox]:checked + label b { background-image: url(../images/layout/checkbox.svg); border-color: #316347 } select, textarea, input[type=date], input[type=time], input[type=number], input[type=text] { float: left; width: 100%; padding: 16px; background: #7cd3a2; border: solid 2px #58a279; color: #316347; font-size: 14px; line-height: 24px; font-weight: 400; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; transition: 0.4s ease-in-out; -webkit-appearance: none } select.error, textarea.error, input[type=date].error, input[type=time].error, input[type=number].error, input[type=text].error { border-color: #ff0000 } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=text] + label { display: block; position: absolute; left: 20px; top: 20px; padding: 8px; background: #7cd3a2; pointer-events: none; transition: 0.4s ease-in-out } select:focus, textarea:focus, input[type=date]:focus, input[type=time]:focus, input[type=number]:focus, input[type=text]:focus, select:not([value=""]), textarea:not(:placeholder-shown), input[type=date]:not(:placeholder-shown), input[type=time]:not(:placeholder-shown), input[type=number]:not(:placeholder-shown), input[type=text]:not(:placeholder-shown) { border-color: #316347; outline: none } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { top: 0px; padding: 5px 8px 5px 8px; font-size: 12px; line-height: 12px } select { background-image: url(../images/layout/select.svg); background-repeat: no-repeat; background-position: right center; background-size: contain } textarea { height: 240px; overflow: auto; resize: none } input[type=submit] { float: left; width: 100%; height: 60px; padding: 21px; background: #58a279; border: none; color: #7cd3a2; font-size: 18px; line-height: 18px; font-weight: 700; font-family: 'PlusJakartaSans', Helvetica, Arial, sans-serif; cursor: pointer; transition: 0.4s ease-in-out } input[type=submit]:hover { background: #316347 } div.preloader { position: fixed; z-index: 5000; left: 0%; top: 0%; width: 100%; height: 100%; background: #58a279 } div.preloader:before { display: block; position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; background: url(../images/layout/preloader.svg) no-repeat center; background-size: 80%; content: ''; transform: translate(-50%,-50%) } div.switch { position: fixed; z-index: 4000; right: 20px; top: 20px; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; transition: 0.4s ease-in-out } div.switch:hover { background: #ffffff40 } div.switch:before { display: block; position: absolute; left: 35%; width: 30%; height: 4%; background: #ffffff; content: ''; animation: rotate_a1 0.4s forwards } div.switch:after { display: block; position: absolute; left: 35%; width: 20%; height: 4%; background: #ffffff; content: ''; animation: rotate_a2 0.4s forwards } div.switch.active:before { animation: rotate_b1 0.4s forwards } div.switch.active:after { width: 30%; animation: rotate_b2 0.4s forwards } div.switch span { display: block; position: absolute; right: 80px; top: 50%; color: #ffffff; line-height: 14px; transform: translateY(-50%) } nav { position: fixed; z-index: 3000; right: -480px; top: 0%; width: 480px; height: 100%; overflow: hidden; background: #316347; transition: 0.4s ease-in-out } nav.active { right: 0px } nav ul { float: left; width: 100%; padding: 90px 50px 50px 50px; margin: 0px; list-style-type: none; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-in-out } nav ul.active { transform: none; filter: none } nav ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } nav ul li a { display: block; float: left; width: 100%; padding: 10px; color: #58a279 } nav ul li a h3 { color: #ffffff; font-weight: 700 } div.overlay { display: none; position: fixed; z-index: 2000; left: 0%; top: 0%; width: 100%; height: 100%; background: #000000e6 } header { position: fixed; z-index: 1000; left: 0%; top: 0%; width: 100%; padding: 10px; transition: 0.4s ease-in-out } header.filled { background: #316347 } header a.home { display: block; position: absolute; left: 50%; top: 0%; padding: 161px 40px 41px 40px; background: url(../images/layout/logo_ferienwohnung.svg) no-repeat center 40px; background-size: auto 100px; color: #ffffff; font-size: 18px; line-height: 18px; font-weight: 700; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); transition: 0.4s ease-in-out } header a.home.small { padding: 64px 20px 24px 20px; background-position: center 20px; background-size: auto 30px; font-size: 12px; line-height: 12px } header a.phone { display: block; position: relative; float: left; width: 60px; height: 60px; background: url(../images/layout/phone.svg) no-repeat center; background-size: 50%; border-radius: 50%; margin: 10px; transition: 0.4s ease-in-out } header a.phone:hover { background-color: #ffffff40 } header a.phone span { display: block; position: absolute; left: 80px; top: 50%; color: #ffffff; line-height: 14px; white-space: nowrap; transform: translateY(-50%) } a.scrollto { display: none } a.show_cookiemanager { z-index: 1000; width: 60px; height: 60px; padding: 6px; background: none; transition: 0.4s ease-in-out } a.show_cookiemanager:hover { background: #ffffff40 } a.show_cookiemanager svg path { fill: none; stroke: #ffffff; stroke-width: 1 } div.scrolldown { position: fixed; z-index: 1000; right: 20px; bottom: 20px } div.scrolldown a { display: block; float: left; width: 60px; height: 60px; background: url(../images/layout/scrolldown.svg) no-repeat center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } div.scrolldown a:hover { background-color: #ffffff40 } div.scrolltop { display: none; position: fixed; z-index: 1000; right: 20px; bottom: 20px } div.scrolltop a { display: block; float: left; width: 60px; height: 60px; background: url(../images/layout/up.svg) no-repeat center; background-size: 50%; border-radius: 50%; transition: 0.4s ease-in-out } div.scrolltop a:hover { background-color: #ffffff40 } section.themes { position: relative; float: left; width: 100%; height: 100vh; overflow: hidden; background: #58a279; margin: -220px 0px 0px 0px } section.themes .bx-pager { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 100; left: 0%; bottom: 0%; width: 100%; padding: 30px; margin: 0px; list-style-type: none } section.themes .bx-pager .bx-pager-item { display: block; float: left; margin: 5px } section.themes .bx-pager .bx-pager-item a { display: block; float: left; width: 30px; padding: 9px; border-radius: 50%; outline: solid 2px #ffffff00; color: #ffffff; font-size: 12px; line-height: 12px; font-weight: 700; text-align: center; transition: 0.4s ease-in-out } section.themes .bx-pager .bx-pager-item a:hover { background: #ffffff40 } section.themes .bx-pager .bx-pager-item a.active { outline-color: #ffffff40 } section.themes .bx-wrapper, section.themes .bx-wrapper .bx-viewport, section.themes .bx-wrapper .bx-viewport .slider, section.themes .bx-wrapper .bx-viewport .slider .theme { position: relative; float: left; width: 100%; height: 100% } section.themes .bx-wrapper .bx-viewport .slider .theme div { display: flex; flex-flow: row wrap; justify-content: center; position: absolute; z-index: 2; left: 0%; width: 100%; padding: 10px calc(50% - 570px) 10px calc(50% - 570px); transform: translateY(-50%) } section.themes .bx-wrapper .bx-viewport .slider .theme div h3 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 30px; line-height: 30px; text-align: center; transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div h3.hidden { transform: scale(0); filter: opacity(0) } section.themes .bx-wrapper .bx-viewport .slider .theme div h2 { float: left; width: calc(100% - 20px); margin: 10px; color: #ffffff; font-size: 96px; line-height: 96px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center; transition: 0.8s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div h2.hidden { transform: scale(2); filter: opacity(0) blur(10px) } section.themes .bx-wrapper .bx-viewport .slider .theme div a { display: block; position: relative; float: left; padding: 23px 30px 23px 30px; overflow: hidden; outline: solid 2px #ffffff40; margin: 20px; color: #ffffff; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div a.hidden { transform: scale(0); filter: opacity(0) } section.themes .bx-wrapper .bx-viewport .slider .theme div a:before { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 40%; padding: 0% 0% 40% 0%; background: #ffffff40; border-radius: 50%; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.themes .bx-wrapper .bx-viewport .slider .theme div a:hover:before { width: 120%; padding: 0% 0% 120% 0%; filter: none } section.themes .bx-wrapper .bx-viewport .slider .theme picture { position: absolute; z-index: 1; left: 0%; width: 100%; padding: 0% 0% 56.25% 0%; overflow: hidden; transform: translateY(-50%); filter: brightness(0.6) } section.themes .bx-wrapper .bx-viewport .slider .theme picture img { display: block; position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; object-fit: cover; animation: motion 12s infinite alternate } section.content { float: left; width: 100%; padding: 40px calc(50% - 600px) 60px calc(50% - 600px); overflow-y: hidden; background: #7cd3a2 } section.content hr { float: left; width: calc(100% - 80px); height: 2px; background: #58a279; border: none; margin: 40px; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content hr.active { transform: none; filter: none } section.content .column { position: relative; float: left; padding: 20px } section.content .column.full { width: 100% } section.content .column.ultrawide { width: 75% } section.content .column.wide { width: 66.6666% } section.content .column.medium { width: 50% } section.content .column.slim { width: 33.3333% } section.content .column.ultraslim { width: 25% } section.content .column picture, section.content .column .gallery { display: block; position: relative; float: left; width: calc(100% - 40px); padding: 0% 0% calc(75% - 30px) 0%; margin: 20px; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-out } section.content .column.ultraslim .gallery { padding: 0% 0% calc(100% - 40px) 0% } section.content .column .gallery.equal_height { height: 480px; padding: 0% } section.content .column picture.active, section.content .column .gallery.active { transform: none; filter: none } section.content .column picture img, section.content .column .gallery img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover } section.content .column .gallery:before { display: block; position: absolute; z-index: 1; left: 50%; top: 50%; width: 80px; height: 80px; background: url(../images/layout/zoom.svg) no-repeat center; background-size: contain; animation: pulse 2s linear infinite; content: '' } section.content .column .point { position: absolute; z-index: 1; right: 40px; top: 40px; width: 160px; padding: 30px 0px 40px 0px; background: #316347; border-radius: 50%; color: #ffffff; text-align: center; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .point.active { transform: none; filter: none } section.content .column .point h3 { font-size: 48px; line-height: 72px; font-family: 'Caveat', Georgia, Times, serif; letter-spacing: -0.05em; text-indent: -0.05em } section.content .column .point h3 b { font-size: 72px } section.content .column .point h4 { line-height: 18px } section.content .column .entry { float: left; width: calc(100% - 40px); margin: 20px; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .entry.active { transform: none; filter: none } section.content .column .entry h1, section.content .column .entry h2 { font-size: 48px; line-height: 48px; font-weight: 700; text-transform: uppercase } section.content .column .entry img { display: block; float: left; width: 100% } section.content .column .cta { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .cta.active { transform: none; filter: none } section.content .column .cta li { display: block; float: left; margin: 10px } section.content .column .cta li a { display: block; position: relative; z-index: 0; float: left; padding: 23px 30px 23px 30px; overflow: hidden; outline: solid 2px #316347; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transition: 0.4s ease-in-out } section.content .column .cta li a:before { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 40%; padding: 0% 0% 40% 0%; background: #316347; border-radius: 50%; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.content .column .cta li a:hover { color: #7cd3a2 } section.content .column .cta li a:hover:before { width: 120%; padding: 0% 0% 120% 0%; filter: none } section.content .column .cta li span { display: block; float: left; width: 60px; height: 60px; background-color: #ffffff; background-repeat: no-repeat; background-position: center; background-size: 66.6666%; border-radius: 50% } section.content .column .cta li span.wlan { background-image: url(../images/layout/icon_wlan.svg) } section.content .column .cta li span.tv { background-image: url(../images/layout/icon_tv.svg) } section.content .column .cta li span.kitchen { background-image: url(../images/layout/icon_kitchen.svg) } section.content .column .cta li span.toilet { background-image: url(../images/layout/icon_toilet.svg) } section.content .column .cta li span.shower { background-image: url(../images/layout/icon_shower.svg) } section.content .column .cta li span.parking { background-image: url(../images/layout/icon_parking.svg) } section.content .column #map { float: left; width: calc(100% - 40px); padding: 0% 0% calc(75% - 30px) 0%; margin: 20px; font-size: 12px; line-height: 18px; white-space: nowrap; transform: translateY(50%); filter: opacity(0) grayscale(0.5); transition: 0.4s ease-in-out } section.content .column #map.active { transform: none; filter: opacity(1) grayscale(0.5) } section.content .column #map h4 { font-size: 14px; line-height: 24px } section.teaser { display: flex; flex-flow: row wrap; float: left; width: 100%; overflow-x: hidden; background: #58a279 } section.teaser picture { display: block; position: relative; float: left; width: 50%; transform: translateX(-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.teaser picture.active { transform: none; filter: none } section.teaser picture img { display: block; position: absolute; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; object-position: right top } section.teaser div { display: flex; flex-flow: row wrap; float: left; width: 50%; padding: 110px calc(50% - 530px) 110px 110px; transform: translateX(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.teaser div.active { transform: none; filter: none } section.teaser div h3 { float: left; width: calc(100% - 20px); margin: 10px } section.teaser div h1 { float: left; width: calc(100% - 20px); margin: 10px; font-size: 72px; line-height: 72px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em } section.teaser div h4 { float: left; width: calc(100% - 20px); margin: 10px; font-size: 14px; line-height: 24px } section.teaser div a { display: block; position: relative; z-index: 0; float: left; padding: 23px 30px 23px 30px; overflow: hidden; outline: solid 2px #316347; margin: 30px 10px 10px 10px; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; transition: 0.4s ease-in-out } section.teaser div a:before { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 40%; padding: 0% 0% 40% 0%; background: #316347; border-radius: 50%; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.teaser div a:hover { color: #58a279 } section.teaser div a:hover:before { width: 120%; padding: 0% 0% 120% 0%; filter: none } section.icons { float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow-y: hidden; background: #316347 } section.icons h2 { float: left; width: 100%; padding: 40px; color: #58a279; font-size: 96px; line-height: 96px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.icons h2.active { transform: none; filter: none } section.icons ul { display: flex; flex-flow: row wrap; justify-content: center; float: left; width: 100%; padding: 30px; margin: 0px; list-style-type: none } section.icons ul li { display: block; float: left; width: calc(16.6666% - 20px); margin: 10px; transform: scale(0); filter: opacity(0); transition: 0.4s ease-in-out } section.icons ul li.active { transform: none; filter: none } section.icons ul li a { position: relative; float: left; width: 100%; padding: 80% 0% 10% 0% } section.icons ul li a:before { display: block; position: absolute; left: 15%; top: 5%; width: 70%; padding: 0% 0% 70% 0%; background-repeat: no-repeat; background-position: center; background-size: contain; content: ''; transition: 0.4s ease-in-out } section.icons ul li a:hover:before { transform: scale(1.2) } section.icons ul li a.wlan:before { background-image: url(../images/layout/icon_wlan.svg) } section.icons ul li a.tv:before { background-image: url(../images/layout/icon_tv.svg) } section.icons ul li a.kitchen:before { background-image: url(../images/layout/icon_kitchen.svg) } section.icons ul li a.toilet:before { background-image: url(../images/layout/icon_toilet.svg) } section.icons ul li a.shower:before { background-image: url(../images/layout/icon_shower.svg) } section.icons ul li a.parking:before { background-image: url(../images/layout/icon_parking.svg) } section.icons ul li a h3 { color: #58a279; line-height: 24px; font-weight: 700; font-family: 'Caveat', Helvetica, Arial, sans-serif; text-align: center } section.choice { position: relative; float: left; width: 100%; padding: 0px calc(50% - 560px) 80px calc(50% - 560px); overflow-y: hidden } section.choice h2 { float: left; width: 100%; padding: 80px; color: #7cd3a2; font-size: 96px; line-height: 96px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.choice h2.active { transform: none; filter: none } section.choice ul { display: flex; flex-flow: row wrap; float: left; width: 100%; padding: 0px; margin: 0px; list-style-type: none } section.choice ul li { display: block; float: left; width: 25%; filter: opacity(0); transition: 0.4s ease-in-out } section.choice ul li.active { filter: none } section.choice ul li a { display: block; position: relative; float: left; width: 100%; height: 100% } section.choice ul li a h4, section.choice ul li a div { float: left; width: calc(100% - 20px); margin: 10px; text-align: center } section.choice ul li a h3 { float: left; width: calc(100% - 20px); margin: 10px; font-size: 48px; line-height: 72px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center } section.choice ul li a h3 b { font-size: 72px } section.choice ul li a span { display: block; position: absolute; z-index: 0; left: 50%; padding: 23px 30px 23px 30px; overflow: hidden; outline: solid 2px #316347; line-height: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.2em; text-indent: 0.2em; white-space: nowrap; transform: translateX(-50%); transition: 0.4s ease-in-out } section.choice ul li a span:before { display: block; position: absolute; z-index: -1; left: 50%; top: 50%; width: 40%; padding: 0% 0% 40% 0%; background: #316347; border-radius: 50%; content: ''; transform: translate(-50%,-50%); filter: opacity(0); transition: 0.4s ease-in-out } section.choice ul li a:hover span:before { width: 120%; padding: 0% 0% 120% 0%; filter: none } section.choice ul li:nth-child(odd) { transform: translateY(40px) } section.choice ul li:nth-child(odd).active { transform: translateY(-10px) } section.choice ul li:nth-child(odd) a { padding: 60px 20px 150px 20px; background: #58a279 } section.choice ul li:nth-child(odd) a span { bottom: 50px } section.choice ul li:nth-child(odd) a:hover span { color: #58a279 } section.choice ul li:nth-child(even) { transform: translateY(-40px) } section.choice ul li:nth-child(even).active { transform: translateY(10px) } section.choice ul li:nth-child(even) a { padding: 40px 20px 170px 20px; background: #7cd3a2 } section.choice ul li:nth-child(even) a span { bottom: 70px } section.choice ul li:nth-child(even) a:hover span { color: #7cd3a2 } section.choice img { display: block; position: fixed; z-index: -1; left: 0%; top: 0%; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.6) } section.sitemap { float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow-y: hidden; background: #316347 } section.sitemap div { float: left; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } section.sitemap div.active { transform: none; filter: none } section.sitemap div:nth-child(1) { width: calc(35% - 40px); margin: 20px } section.sitemap div:nth-child(2) { width: calc(25% - 40px); margin: 20px } section.sitemap div:nth-child(3) { width: calc(40% - 80px); background: #58a279; margin: 20px 40px 20px 40px } section.sitemap div ul { float: left; width: 100%; padding: 10px; margin: 0px; list-style-type: none } section.sitemap div ul li { display: block; float: left; width: calc(100% - 20px); margin: 10px } section.sitemap div ul li a { display: block; float: left; width: 100%; padding: 18px 0px 18px 0px; color: #ffffff; font-size: 24px; line-height: 24px; font-weight: 700 } section.sitemap div ul li.small a { padding: 11px 0px 11px 0px; color: #58a279; font-size: 18px; line-height: 18px; font-weight: 400 } section.sitemap div ul li.home a { padding: 111px 0px 11px 0px; background: url(../images/layout/logo_ferienwohnung.svg) no-repeat center 10px; background-size: auto 80px; font-size: 18px; line-height: 18px; text-transform: uppercase; text-align: center } section.sitemap div ul li.address a { padding: 6px 0px 6px 0px; color: #316347; font-size: 18px; line-height: 18px; font-weight: 400; text-align: center } section.sitemap div ul li.phone a { padding: 12px 0px 12px 0px; color: #316347; font-size: 48px; line-height: 36px; font-family: 'Caveat', Helvetica, Arial, sans-serif; letter-spacing: -0.05em; text-indent: -0.05em; text-align: center } section.sitemap div div.shariff { width: 100%; margin: 40px 0px 0px 0px; transform: none; filter: none; transition: none } section.sitemap div div.shariff ul li { width: auto !important; height: auto !important; margin: 10px !important } section.sitemap div div.shariff ul li a { width: 60px !important; height: 60px !important; padding: 0px !important; background: #58a279 !important; border-radius: 50% !important; margin: 0px !important } section.sitemap div div.shariff ul li a span { display: block; float: left; width: 60px !important; height: 60px !important; padding: 18px 0px 18px 0px !important; margin: 0px !important; color: #316347 !important; font-size: 24px !important; line-height: 24px !important; text-align: center } footer { float: left; width: 100%; padding: 40px calc(50% - 600px) 40px calc(50% - 600px); overflow-y: hidden; background: #58a279 } footer h4 { float: left; width: calc(100% - 40px); padding: 20px; margin: 20px; transform: translateY(50%); filter: opacity(0); transition: 0.4s ease-in-out } footer h4.active { transform: none; filter: none } @media only screen and (max-width: 1279px) { body { padding: 110px 0px 0px 0px; font-size: 9px; line-height: 14px } h1 { font-size: 24px; line-height: 36px } h2 { font-size: 18px; line-height: 30px } h3 { font-size: 14px; line-height: 24px } h4 { font-size: 12px; line-height: 18px } ul, ol { padding: 0px 0px 0px 5px; margin: 0px 0px 0px 5px } i { font-size: 7px; line-height: 12px } table { width: calc(100% + 20px); padding: 5px; margin: -10px } table tr td { display: block; float: left; width: 100%; padding: 5px; text-align: center !important } input[type=radio] + label, input[type=checkbox] + label { padding: 0px 0px 5px 30px } input[type=radio] + label b, input[type=checkbox] + label b { width: 20px; height: 20px; border-width: 1px } select, textarea, input[type=date], input[type=time], input[type=number], input[type=text] { padding: 12px; border-width: 1px; font-size: 9px; line-height: 14px } select + label, textarea + label, input[type=date] + label, input[type=time] + label, input[type=number] + label, input[type=text] + label { left: 10px; top: 10px } select:focus + label, textarea:focus + label, input[type=date]:focus + label, input[type=time]:focus + label, input[type=number]:focus + label, input[type=text]:focus + label, select:not([value=""]) + label, textarea:not(:placeholder-shown) + label, input[type=date]:not(:placeholder-shown) + label, input[type=time]:not(:placeholder-shown) + label, input[type=number]:not(:placeholder-shown) + label, input[type=text]:not(:placeholder-shown) + label { padding: 2px 8px 2px 8px; font-size: 7px; line-height: 7px } input[type=submit] { height: 40px; padding: 14px; font-size: 12px; line-height: 12px } div.preloader:before { width: 80px; height: 80px } div.switch { right: 10px; top: 10px; width: 30px; height: 30px } div.switch span { display: none } nav { right: -240px; width: 240px } nav ul { padding: 45px 25px 25px 25px } nav ul li { width: calc(100% - 10px); margin: 5px } nav ul li a { padding: 5px } nav ul li a h3 { font-size: 12px; line-height: 18px } nav ul li a h4 { font-size: 9px; line-height: 14px } header { padding: 5px } header a.home { padding: 80.5px 20px 20.5px 20px; background-position: center 20px; background-size: auto 50px; font-size: 9px; line-height: 9px } header a.home.small { padding: 32px 10px 12px 10px; background-position: center 10px; background-size: auto 15px; font-size: 6px; line-height: 6px } header a.phone { width: 30px; height: 30px; margin: 5px } header a.phone span { display: none } a.show_cookiemanager { left: 10px; bottom: 10px; width: 30px; height: 30px; padding: 3px } a.show_cookiemanager svg path { stroke-width: 0.5 } div.scrolldown { right: 10px; bottom: 10px } div.scrolldown a { width: 30px; height: 30px } div.scrolltop { right: 10px; bottom: 10px } div.scrolltop a { width: 30px; height: 30px } section.themes { margin: -110px 0px 0px 0px } section.themes .bx-pager { padding: 15px; outline-width: 1px } section.themes .bx-pager .bx-pager-item { margin: 2.5px } section.themes .bx-pager .bx-pager-item a { width: 15px; padding: 4px; outline-width: 1px; font-size: 7px; line-height: 7px } section.themes .bx-wrapper .bx-viewport .slider .theme div { padding: 5px calc(50% - 135px) 5px calc(50% - 135px) } section.themes .bx-wrapper .bx-viewport .slider .theme div h3 { width: calc(100% - 10px); margin: 5px; font-size: 14px; line-height: 14px } section.themes .bx-wrapper .bx-viewport .slider .theme div h2 { width: calc(100% - 10px); margin: 5px; font-size: 48px; line-height: 48px } section.themes .bx-wrapper .bx-viewport .slider .theme div a { padding: 10.5px 15px 10.5px 15px; outline-width: 1px; margin: 10px; line-height: 9px } section.themes .bx-wrapper .bx-viewport .slider .theme picture { padding: 0% 0% 210% 0% } section.content { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.content hr { width: calc(100% - 40px); height: 1px; margin: 20px } section.content .column { padding: 10px } section.content .column.full, section.content .column.ultrawide, section.content .column.wide, section.content .column.medium, section.content .column.slim { width: 100% } section.content .column.ultraslim { width: 50%; padding: 0px 10px 0px 0px } section.content .column.ultraslim:nth-child(odd) { padding: 0px 0px 0px 10px } section.content .column picture, section.content .column .gallery { width: calc(100% - 20px); padding: 0% 0% calc(75% - 15px) 0%; margin: 10px } section.content .column.ultraslim .gallery { padding: 0% 0% calc(100% - 20px) 0% } section.content .column .gallery.equal_height { height: 260px; padding: 0% } section.content .column .gallery:before { width: 40px; height: 40px } section.content .column .point { right: 20px; top: 20px; width: 80px; padding: 15px 0px 20px 0px } section.content .column .point h3 { font-size: 24px; line-height: 36px } section.content .column .point h3 b { font-size: 36px } section.content .column .point h4 { font-size: 9px; line-height: 9px } section.content .column .entry { width: calc(100% - 20px); margin: 10px } section.content .column .entry h1, section.content .column .entry h2 { font-size: 18px; line-height: 30px } section.content .column .cta { padding: 5px } section.content .column .cta li { margin: 5px } section.content .column .cta li a { padding: 10.5px 15px 10.5px 15px; outline-width: 1px; line-height: 9px } section.content .column .cta li span { width: 30px; height: 30px } section.content .column #map { width: calc(100% - 20px); padding: 0% 0% calc(150% - 30px) 0%; margin: 10px; font-size: 7px; line-height: 12px } section.content .column #map h4 { font-size: 9px; line-height: 14px } section.teaser picture { width: 100%; padding: 0% 0% 100% 0% } section.teaser div { justify-content: center; width: 100%; padding: 45px calc(50% - 135px) 45px calc(50% - 135px) } section.teaser div h3 { width: calc(100% - 10px); margin: 5px; text-align: center } section.teaser div h1 { width: calc(100% - 10px); margin: 5px; font-size: 48px; line-height: 48px; text-align: center } section.teaser div h4 { width: calc(100% - 10px); margin: 5px; font-size: 9px; line-height: 14px; text-align: center } section.teaser div a { padding: 10.5px 15px 10.5px 15px; outline-width: 1px; margin: 15px 5px 5px 5px; line-height: 9px } section.icons { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.icons h2 { padding: 20px; font-size: 48px; line-height: 48px } section.icons ul { padding: 15px } section.icons ul li { width: calc(33.3333% - 10px); margin: 5px } section.icons ul li a h3 { font-size: 12px; line-height: 12px } section.choice { padding: 40px calc(50% - 140px) 40px calc(50% - 140px) } section.choice h2 { padding: 0px 0px 40px 0px; font-size: 48px; line-height: 48px } section.choice ul li { width: 50%; transform: translateY(50%) !important } section.choice ul li.active { transform: none !important } section.choice ul li a { padding: 10px 5px 70px 5px !important } section.choice ul li a h4, section.choice ul li a div { width: calc(100% - 10px); margin: 5px } section.choice ul li a h3 { width: calc(100% - 10px); margin: 5px; font-size: 30px; line-height: 48px } section.choice ul li a h3 b { font-size: 48px } section.choice ul li a span { bottom: 20px !important; padding: 10.5px 15px 10.5px 15px; outline-width: 1px; line-height: 9px } section.choice ul li:nth-child(1) a, section.choice ul li:nth-child(4) a { background: #58a279 } section.choice ul li:nth-child(2) a, section.choice ul li:nth-child(3) a { background: #7cd3a2 } section.choice ul li:nth-child(1) a:hover span, section.choice ul li:nth-child(4) a:hover span { color: #58a279 } section.choice ul li:nth-child(2) a:hover span, section.choice ul li:nth-child(3) a:hover span { color: #7cd3a2 } section.sitemap { padding: 20px calc(50% - 160px) 20px calc(50% - 160px) } section.sitemap div:nth-child(1), section.sitemap div:nth-child(2) { width: calc(100% - 20px); margin: 10px } section.sitemap div:nth-child(3) { width: calc(100% - 80px); margin: 30px 40px 30px 40px } section.sitemap div ul { padding: 5px } section.sitemap div ul li { width: calc(100% - 10px); margin: 5px } section.sitemap div ul li a { padding: 13px 0px 13px 0px; font-size: 14px; line-height: 14px; text-align: center } section.sitemap div ul li.small a { padding: 9px 0px 9px 0px; font-size: 12px; line-height: 12px } section.sitemap div ul li.home a { padding: 55.5px 0px 5.5px 0px; background-position: center 5px; background-size: auto 40px; font-size: 9px; line-height: 9px } section.sitemap div ul li.address a { padding: 3px 0px 3px 0px; font-size: 9px; line-height: 9px } section.sitemap div ul li.phone a { padding: 6px 0px 6px 0px; font-size: 24px; line-height: 18px } section.sitemap div div.shariff { margin: 20px 0px 0px 0px } section.sitemap div div.shariff ul { display: flex; flex-flow: row wrap; justify-content: center } section.sitemap div div.shariff ul li { margin: 5px !important } section.sitemap div div.shariff ul li a { width: 30px !important; height: 30px !important } section.sitemap div div.shariff ul li a span { width: 30px !important; height: 30px !important; padding: 9px 0px 9px 0px !important; font-size: 12px !important; line-height: 12px !important } footer { padding: 20px calc(50% - 140px) 20px calc(50% - 140px) } footer h4 { width: calc(100% - 20px); padding: 10px; margin: 10px; font-size: 9px; line-height: 14px; text-align: center } }