@charset 'utf-8';

/* ¡Renormasaniset */
*, ::before, ::after {background-repeat: no-repeat; box-sizing: border-box;} html {-webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-hyphenate-limit-before: 3; -webkit-hyphenate-limit-after: 3; -ms-hyphenate-limit-chars: 6 3 3; hyphenate-limit-chars: 6 3 3; -webkit-hyphenate-limit-lines: 3; -ms-hyphenate-limit-lines: 3; hyphenate-limit-lines: 3; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; overflow-y: scroll;} body {background-color: transparent;} a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,button,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,input,kbd,label,legend,li,main,mark,menu,nav,object,ol,option,output,p,pre,q,ruby,s,samp,section,select,small,span,strike,strong,sub,summary,sup,table,tbody,td,textarea,tfoot,th,thead,time,tr,tt,u,ul,var,video {margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} input {overflow: visible;} button, [type="button"], [type="reset"], [type="submit"] {-webkit-appearance: button;} [type="checkbox"], [type="radio"] {padding: 0;} [type="search"] {-webkit-appearance: textfield; outline-offset: -2px;} textarea {overflow: auto; resize: vertical;} ::-webkit-input-placeholder {color: inherit; opacity: 0.4;} :-webkit-search-decoration {-webkit-appearance: none;} [hidden] {display: none;} audio, video {display: inline-block;} a {background-color: transparent; text-decoration:none } a, area, button, input, label, select, summary, textarea, [tabindex] {-ms-touch-action: manipulation; touch-action: manipulation;} ol,ul{list-style:none} blockquote,q{quotes:none} blockquote:after,blockquote:before,q:after,q:before{content:'';content:none} table{border-collapse:collapse;border-spacing:0} b,strong{font-weight:bold} em,i{font-style:italic} h1,h2,h3,h4,h5,h6{font-weight:400} button, input, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit;} abbr[title]{text-decoration: underline; text-decoration: underline dotted; cursor:help;} img {border-style: none; -moz-user-select: text; -webkit-user-select: text; user-select: text; -moz-user-drag: none; -webkit-user-drag: none; user-drag: none;} svg {fill: currentColor;} svg:not(:root) {overflow: hidden;} .text p, article > ul, .text > ol, .text > * > li {margin: 0 0 .35em 0;} .text > * > li {padding-left: 1.5em; text-indent: -1.5em;} .text > ul > li:before {content: '» '; display: block; float: left; width: 1.5em;} .text > ol {counter-reset: liste; list-style-type: none;} .text > ol > li:before {counter-increment: liste; content: counter(liste) "."; display: block; float: left; width: 1.5em;}
/* Renormasaniset! */

@font-face {
font-family: 'Zilla Slab';
src: url("../fonts/ZillaSlab-Bold.woff2") format("woff2"), url("../fonts/ZillaSlab-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Zilla Slab';
src: url("../fonts/ZillaSlab-Regular.woff2") format("woff2"), url("../fonts/ZillaSlab-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Zilla Slab';
src: url("../fonts/ZillaSlab-Italic.woff2") format("woff2"), url("../fonts/ZillaSlab-Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}


body {
font-family: 'Zilla Slab', 'Georgia', serif;
font-size: 18px;
line-height: 1.4em;
}

a {
transition: all 250ms ease-in;
}

::selection {
background: rgba(254,195,0,.35);
color: black;
text-shadow: none;
}

.flex {
display: flex;
flex-flow: row wrap;
}

header {
position: relative;
top: 0;
width: 100%;
height: calc(100vh - 2em);
overflow: hidden;
display: flex;
flex-flow: row nowrap;
justify-content: center;
background: rgb(100,30,20);
z-index: 1;
}

img.kopf {
display: block;
height: 100%;
width: 100%;
flex: 0 0 auto;
object-fit: cover;
}

header h1 {
position: absolute;
top: 0;
margin: 2em auto 0 auto;
}

header h1 span,
header a span {
display: none;
}

header a {
position: absolute;
bottom: 0;
margin: 0 auto 2em auto;
}

header a.weiter {
display: flex;
width: 68px;
height: 68px;
padding: 16px;
border-radius: 50%;
background: rgba(0,0,0,0);
}

header a.weiter:hover {
background: rgba(0,0,0,.2);
}

header a.weiter:active {
background: rgba(100,30,20,.4);
}

header a.weiter svg {
margin: auto;
overflow: visible;
}

header a.weiter svg polyline {
fill: none;
stroke: white;
stroke-width: 3;
stroke-linecap: round;
}

nav {
color: white;
background: rgb(254,195,0);
}

nav ul {
padding: .25em 2em;
text-align: center;
}

nav ul li {
display: inline-block;
vertical-align: top;
}

nav ul li + li {
margin-left: .2em;
}

nav ul li > * {
display: block;
padding: .05em .4em .15em .4em;
}

nav ul li span {
font-weight: bold;
}

nav ul li a {
color: rgb(0,130,150);
background: white;
border-radius: 2px;
}

nav ul li a:hover {
color: white;
background: rgb(0,130,150);
}

article {
padding: 4vw;
}

article#galerie,
article.voll {
padding: 4vw 0;
}

article.text,
footer > div {
margin: 0 auto;
width: 100%;
max-width: 56em;
}

article.text > *,
footer > * {
display: inline-block;
vertical-align: top;
}

article.text > div {
width: 58%;
padding-right: 3em;
}

aside {
width: 42%;
text-align: right;
}

aside.buchen {
margin-top: 3em;
}

footer {
display: flex;
background: rgb(254,195,0);
}

footer > div {
padding: 1vw 3em;
}

footer div.text {
margin: 0 0 1em 0;
max-width: 34em;
}

ul.galerie li {
display: inline-block;
vertical-align: top;
width: 25%;
padding: .25em;
margin: 0 .5em .5em 0;
background: rgb(254,195,0);
border-radius: .25em;
}

ul.galerie li img {
width: 100%;
height: auto;
max-height: calc((92vw - .25em) / 4);
object-fit: contain;
display: block;
}

ul.galerie li figcaption {
text-align: center;
color: white;
margin: .25em .5em 0 .5em;
}

ul.lapalma {
margin: 0;
}

ul.lapalma li {
width: 100%;
display: block;
}

ul.lapalma li img {
width: 100%;
height: auto;
object-fit: contain;
}

.apartamento img {
width: 100%;
margin: .5em 0 1em 0;
}

.lapalma figcaption {
font-size: .9em;
color: rgb(0,160,190);
text-align: center;
margin: .25em;
}

.text h2 {
font-size: 1.6em;
font-weight: bold;
margin: 0 0 .5em 0;
color: rgb(0,160,190);
}

.text h3 {
font-weight: bold;
margin: 1em 0 .25em 0;
color: rgb(0,160,190);
}

.text h3.toggle {
margin-top: .5em;
}

.text div > h3:first-child {
margin: 0;
}

.text h3 a {
color: rgb(0,160,190);
}

.text h3.toggle:hover,
.text h3 a:hover {
color: rgb(254,195,0);
cursor: pointer;
}

footer h3.toggle:hover {
color: rgb(0,160,190);
cursor: pointer;
}

.text h3.toggle:before,
footer h3.toggle:before {
content: '~';
display: inline-block;
font-size: 1.6em;
font-weight: normal;
color: rgb(254,195,0);
margin: 0 .25em 0 0;
transform: translateY(2px);
}

footer h3.toggle:before {
color: white;
}

.text h3.toggle + div {
margin: 0 0 1em 0;
}

footer h3 {
color: white;
font-weight: bold;
}

.text h4 {
margin: 0 0 1em 0;
color: rgb(0,130,150);
}

footer .text h4 {
margin: 0 0 .5em 0;
}

.text h5 {
font-weight: bold;
}

.text a {
color: black;
border-bottom: 1px solid rgb(0,130,150);
}

.text a[href^='tel:'] {
border-bottom-color: rgba(0,130,150,.1);
}

.text a:hover {
color: rgb(0,130,150);
border-bottom-color: transparent;
}

.text a:active {
border-bottom-color: rgb(254,195,0);
}

.text p b {
/* font-weight: normal;
padding-bottom: 0;
border-bottom: .2em solid rgba(254,195,0,.35);
text-shadow: .1em .1em white, .1em -.1em white, -.1em .1em white, -.1em -.1em white; */
}

ul.icons li {
display: inline-block;
vertical-align: top;
margin: 0 .5em .5em 0;
}

ul.icons img {
display: block;
width: 64px;
height: 64px;
border: 2px solid rgb(254,195,0);
border-radius: 3px;
}

article.voll {
position: relative;
}

div.box {
position: absolute;
top: 5em;
left: 2em;
width: 36vw;
padding: 1.25em 1.5em;
background: rgba(255,255,255,.95);
}

.knopf {
font-size: 1.2em;
font-weight: bold;
margin: 0 .5em .5em 0;
padding: .5em 1em .65em 1em;
color: white !important;
background: rgb(0,160,190);
border-radius: 3px;
}

.knopf:hover {
background: rgb(254,195,0);
}

.knopf:active {
background: black;
}

.text a.inlineknopf {
padding: .1em .2em .1em .2em;
color: white !important;
background: rgb(254,195,0);
border-bottom: none;
border-radius: 3px;
}

.text a.inlineknopf:hover {
background: rgb(0,160,190);
}

.text a.inlineknopf:active {
background: black;
}

ul + .knopf {
display: inline-block;
margin-top: 2em;
}




/*! Flickity v2.2.1
http://flickity.metafizzy.co
---------------------------------------------- */
.flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-button{position:absolute;background:rgb(254,195,0);border:none;color:white}.flickity-button:hover{background:white;color:rgb(254,195,0);cursor:pointer}.flickity-button:focus{outline:0;box-shadow:0 0 0 5px #19f}.flickity-button:active{opacity:.6}.flickity-button:disabled{opacity:.3;cursor:auto;pointer-events:none}.flickity-button-icon{fill:currentColor}.flickity-prev-next-button{top:50%;width:44px;height:44px;border-radius:50%;transform:translateY(-50%)}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button .flickity-button-icon{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}

/* Flickity fullscreen v1.0.1
------------------------- */

.flickity-enabled.is-fullscreen{position:fixed;left:0;top:0;width:100%;height:100%;background:hsla(0,0%,0%,.9);padding-bottom:35px;z-index:1}.flickity-enabled.is-fullscreen .flickity-page-dots{bottom:10px}.flickity-enabled.is-fullscreen .flickity-page-dots .dot{background:#fff}html.is-flickity-fullscreen{overflow:hidden}.flickity-fullscreen-button{display:block;right:10px;top:10px;width:24px;height:24px;border-radius:4px}.flickity-rtl .flickity-fullscreen-button{right:auto;left:10px}.flickity-fullscreen-button-exit{display:none}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-exit{display:block}.flickity-enabled.is-fullscreen .flickity-fullscreen-button-view{display:none}.flickity-fullscreen-button .flickity-button-icon{position:absolute;width:16px;height:16px;left:4px;top:4px}

body .flickity-page-dots .dot {
background: rgb(254,195,0);
margin: 0 .25em;
}

body .flickity-enabled.is-fullscreen {
background: rgb(254,195,0);
}

body ul.flickity-enabled.is-fullscreen .flickity-slider li {
width: 100%;
height: 100%;
display: block
}

body ul.flickity-enabled.is-fullscreen .flickity-slider li figure {
width: 100%;
height: 100%;
margin: 0;
display: flex;
flex-flow: column nowrap;
}

body ul.flickity-enabled.is-fullscreen li img {
max-height: 90%;
margin-top: auto;
}

body ul.flickity-enabled.is-fullscreen li p,
body ul.flickity-enabled.is-fullscreen li figcaption {
margin-bottom: auto;
color: white;
}



/* ############# Screens bis 1024px ############# */
@media only screen and (max-width: 1024px) {

	article.text > div {
	width: 75%;
	}

	aside {
	width: 25%;
	}

  .text {
  -webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
  }

}




/* ############# Screens bis 960px ############# */
@media only screen and (max-width: 960px) {

  div.box {
	position: static;
	top: auto;
	right: auto;
	width: 100%;
	padding: 2em;
	background: rgb(230,246,249);
	}
	
	.box.text p b {
	text-shadow: .1em .1em rgb(230,246,249), .1em -.1em rgb(230,246,249), -.1em .1em rgb(230,246,249), -.1em -.1em rgb(230,246,249);
	}
	
	article.voll {
	padding: 0;
	}

}





/* ############# Screens bis 800px ############# */
@media only screen and (max-width: 800px) {

  ul.galerie li {
	width: 320px;
	max-width: 80%;
	}
	
	ul.galerie li img {
	max-height: 100%;
	}

}





/* ############# Screens bis 640px ############# */
@media only screen and (max-width: 640px) {

  header a {
	margin-bottom: 1em;
	}
	
	article.text > div,
	aside {
	width: 100%;
	padding-right: 0;
	text-align: left;
	}
	
	aside {
	padding-top: 2em;
	}
	
	aside.buchen {
	margin-top: 0;
	margin-bottom: 2em;
	}

}





/* iOS Safari Start-Hack */
@media screen and (orientation:portrait) and (max-width: 767px) {
    _::-webkit-full-page-media, _:future, :root header {
      height: calc(100vh - 6.2em);
    }
}