/* CSS Hypnose+ */

/* Schriftart einbinden */

@font-face { font-family: 'roboto';
             src: url('utils/Roboto-Light.ttf') format('truetype'); 
           }
@font-face { font-family: 'roboto';
             src: url('utils/Roboto-Bold.ttf') format('truetype');
             font-weight: bold; 
           }
@font-face { font-family: 'allpony';
             src: url('utils/AllPony.ttf') format('truetype'); 
           }


/* Hintergrundbild zentrieren und auf die verfügbare Seite skalieren */
html { 
  min-height:100%;
  margin:0;
  padding:0;
}

body {
  background: url('uploads/unmoeglich.jpg') no-repeat 50% 0% fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;  

  font-family: 'roboto', sans-serif;
  text-shadow: 2px 0px 0.3em white, -2px 0px 0.3em white, 0px 2px 0.3em white, 0px -2px 0.3em white;

  min-height:100%;
  margin:0;
  padding:0;
} 

.main {
}

.main img, .mapmain img {
  vertical-align:text-bottom;  
}

.wrapper {
	padding: 5px;
	max-width:90%;
	width: 90%;
  margin-left:5%;
}

.columns {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	margin: 5px 0;
  align-items:stretch;
}

.column {
	flex: 1;
  border-radius:15px;
  border:2px solid #FEA621;
  padding:2%;
  background-color:rgba(255,255,255,.7);

	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
}

.header {
  display:flex;
	flex-flow: row wrap;
  justify-content:center;
  align-items:center;
  width:94%;
  margin-left:3%;
}

.smallcolumn {
  height:auto;
  flex-direction:column;
  display:flex;
}

.bigcolumn {
  flex:1 1 100%;
  height:auto;
  flex-direction:column;
  display:flex;
}

.fc10 {
  flex:1 1 10%;
  display:flex;
  justify-content:center;
  height:auto;
  align-items:center;
}

.fc25 {
  flex:1 1 25%;
  display:flex;
  justify-content:center;
  height:auto;
  align-items:center;
}

.fc40 {
  flex:1 1 40%;
}

.fc50 {
  flex:1 1 50%;
}

.fc75 {
  flex:1 1 75%;
}



.title {
	flex: 0 1 auto;
  border-radius:0px;
  padding:2%;
  background-color:rgba(255,255,255,0);

	margin: 2px;
	padding: 10px;
	&:first-child { margin-left: 0; }
	&:last-child { margin-right: 0; }
}

.header .title {
  font-family: 'allpony', sans-serif;
  font-size:6vw;
  line-height:1.2em;
  color:#FEA621;
  text-align:left;
  border:0;
  flex:1 1 40%;
  text-align:right;
  position:relative;
}

.title img {
  max-width:100%;
  width:auto;
  vertical-align:middle;
}

.subtitle {
  font-size:2vw;
  position:absolute;
  bottom:0;
  right:0.1vw;
  line-height:1em;
  color:#aac009;
  color:#ffffff;
  text-shadow:2px 2px 0.3em #000;

}

.pslogo {
  background:url('uploads/ps.png') no-repeat 0% 90%; 
  background-size:17%;
}



.menu {
  border-radius:5px;
  border:1px solid black;
  background-color:#aac009;
  color:black;
  text-shadow:0 0 0 white;
  display:table;
  margin-left:3%;
  width:94%;
  position:sticky;
  top:0;
  z-index:1200;
  padding-top:1vh;
  padding-bottom:1vh;
}

.menu span {
  padding:5px;
  font-weight:lighter;  
  cursor:pointer;
}

.menu span:hover{
  border-bottom-style:dotted;
  border-radius:25%;
  text-shadow: 2px 0px 0.3em #FEA621, -2px 0px 0.3em #FEA621, 0px 2px 0.3em #FEA621, 0px -2px 0.3em #FEA621;
}

.menu span:after{
  content:" |";  
  color:#FEA621;
}
.menu span:last-child:after{
  content:"";  
}

.menuitem a {
  color:inherit;
  text-decoration:inherit;
}

.abschnitt {
  padding:2% 5%;
}

.abschnittstext {
  text-align:left;
  overflow:auto;
  line-height: 150%
}

.wrapper a {
  color:black;
  text-decoration:none;
  text-shadow: 2px 0px 0.3em #aac009, -2px 0px 0.3em #aac009, 0px 2px 0.3em #aac009, 0px -2px 0.3em #aac009;
}
.wrapper a:hover {
  border-bottom-style:dotted;
  border-color:black;
  border-radius:25%;
}

.abschnittstext h2 {
  text-align:left;
  white-space:wrap;
  font-family:'roboto';
  font-weight:bold;
  color:#FEA621;
}

.abschnittstext h3 {
  text-align:left;
  white-space:wrap;
  font-family:'roboto';
  font-weight:bold;
  font-style:italic;
  margin-top:1.5em;
  margin-bottom:0.5em;
}

.rez > h3 {
  margin-top:0.1em;
}

.nodeco{
  border:0;
  white-space: nowrap;
}

figure {
  position:relative;
}

figure img {
  max-width:100%;
  min-width:300px;
  width:100%;
  height:auto;
  display:inline-block;  
}

figcaption {
  font-size:smaller;
}

figcaption i {
  margin-top:5px;
  font-size:smaller;
}

figure div {
  position:absolute;
  top:8px;
  right:2px;
  font-size:0.6vw;
  writing-mode: vertical-rl;
  text-orientation: mixed;  
}

.flexbox {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
}

.flexbox h2 {
  flex:0 1 100%;
}

.flexbox figure{
  flex:1 1 40%;

}

.flexbox ul {
  flex:1 1 51%;
  margin-top:0px;
  margin-bottom:1vh;
}

.map{
  border:0;
  white-space: nowrap;
  text-align:center;
  height:400px;
}

.map img {
  width:100%;
}

.abstand {
}

.main {
  text-align:center;
  font-size:1.5em;
  line-height:1.2em;

  width:100%;
  min-height:100%;
}

.willkommen h2 {
  font-size:4vh;
  line-height:1.2em;
  margin:auto;
}


.fc40 > * {
  margin:auto;
}


.vcenter {
  margin:auto;
}

.preisinfo {
}

.preistext {
  font-weight:bold;
  padding-top:3vh;
}

.preis {
  text-align:right;
  vertical-align:bottom;
}

.preisabstand {
  border-bottom:1px solid black;
}

.PiM {
  font-weight:bold;
  font-size:larger;
}

.smaller {
  font-size:smaller;
}

.larger {
  font-size:larger;
}

.impressum{
  font-size:0.7em;
  margin-top:4em;
}

#imp {
  display:none;
  cursor:pointer;
  min-width:94%;
}

#ppic {
  max-width:1000px;  
}

.foto {
  float:right;
  padding-left:2vw;
  margin:0px;
}

.fotolinks {
  float:left;
  padding-right:2vw;
  margin:0px;
}

.foto figcaption {
  font-size:smaller;
}

.rez {
  background-image:url("uploads/bg2.png");
  background-repeat:repeat;
  padding-left:2%;
  padding-right:2%;
  text-align:justify;
  display:none;
}

.reznav {
  display:flex;
  text-align:center;
  justify-content:center;
  align-items:center;
  font-size:max(4vw,4vh,1em);
  cursor:pointer;  
}

.signature {
  font-style:italic;
  margin-top:0.5em;
}

@media screen and (max-width: 980px) {
  .columns .column {
		margin-bottom: 5px;
    flex-basis: 40%;
		&:nth-last-child(2) {
			margin-right: 0;
		}
	}
  .lastitem{
    order:9;
  }
}

@media screen and (max-width: 680px) {
	.columns .column {
		flex-basis: 100%;
		margin: 0 0 5px 0;
	}
	figure {
		flex-basis: 100%;
	}
  .addon {
    display:none;
  }
  .subtitle {
    font-size:4vw;
  }
  .reznav {
    flex-basis:40%;
  }
}