:root{
  --clr-accent:#00FF0A;
  --clr-extra:#00D0B3;
  --clr-body:#c1c1c1;
  --clr-dark:#0C1A23;
  --clr-less-dark:#2F4858;
  --clr-white:#FFF;
  --clr-smack:#FF358D
}
:root {
  --ff-main:'PT Sans',sans-serif;
  --ff-condensed:'PT Sans Narrow',sans-serif
}
.mt1 {
  margin-top: 1rem;
}	 
.mb1 {
  margin-bottom: 1rem;	 
 }
 .ml2 {
  margin-left: 2rem;
}
.bg{
  background: var(--clr-dark);
}

/* nur als Beispiele (KP) siehe oben gedacht, nicht verwendet */
#asideBtnAvail{
  position:absolute;
  z-index:+2;
  top:170px;
  left:1px;	
  transition: left 0.1s linear;
  opacity:0.8;
}
#asideBtnAvail:hover{top:171px;opacity:1.0;}

#asideBtnBook{
  position:absolute;
  z-index:+2;
  top:300px;
  left:7px;	
  transition: left 0.1s linear;
  opacity:0.8;
  width:auto;
  background-color:#339900;
  background-image:linear-gradient(to bottom, #339900, #1b741c);
  color:white;
  text-align:center;
  padding:10px 10px;
  font:bold 16px Tahoma;
  text-decoration:none;
  border-radius:10px;
}
#asideBtnBook:hover{left:4px;opacity:1.0;}

#asideBtnVert{
 position:absolute;
 z-index:+2;
 top:450px;
 left:-60px;
 width:180px;
 transform:rotate(-90deg);
 background-color:#339900;
 background-image:linear-gradient(to bottom, #339900, #1b741c);
 color:white;
 text-align:center;
 padding:10px 10px;
 font:bold 16px Tahoma;
 text-decoration:none;
 border-radius:10px;
 transition: left 0.1s linear;
}
#asideBtnVert:hover{background-image: linear-gradient(to bottom, #309900, #339900);left:-55px;}
.clear{
  clear:both;
}
#freeRoomsInfo {
  background-color:#339900;
  background-image:linear-gradient(to bottom, #339900, #1b741c);
  padding: .4rem;
  border-radius:10px;
  color:white;
  font-weight: bold;
  font-size: 1.2rem;
}
/* anfahrt.php */
.flex {
  display: flex;	
  gap: 1em;
  align-items: center;  /* vertikal */
}
/* pc-menu - tabelle.php mit eigenem style, da main.css nicht geladen */
.flex_menu_container {
  display: flex;
  position: sticky; /* YT KP */
  top: 1px;
  z-index: 1;
  background: #333;
  box-shadow: 0px 2px 4px #999;
  height: 42px;
}
.flex_menu_container > div {
  margin-left: 10px;
}
.flex_menu_container > div > a {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1.0rem;
  line-height: normal;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
  position: relative;
  transition: color 0.2s;
  color: white;
  display: block;
  height: 42px;
}
.flex_menu_container > div > a > span {
  display: block;
  height: 22px; 
  padding-top: 10px;  
  padding-bottom: 10px;  
}
span.home:hover,
span.home.active {
  color: tomato;
}
span.pr_room:hover,
span.pr_room.active {
  color: lime;
}
span.avail:hover,
span.avail.active {
  color: orangered;
}
span.contact:hover,
span.contact.active {
  color: white;
}
span.book:hover,
span.book.active {
  color: dodgerblue;
}
span.rating:hover,
span.rating.active {
  color: yellow;
}
span.route:hover,
span.route.active {
  color: cyan;
}
span.out_weather:hover,
span.out_weather.active {
  color: #BDFE09;
}
span.home::before {
   background-color: tomato;
}
span.pr_room::before {
   background-color: lime;
}
span.avail::before {
   background-color: orangered;
}
span.contact::before {
   background-color: white;
}
span.book::before {
   background-color: dodgerblue;
}
span.rating::before {
   background-color: yellow;
}
span.route::before {
   background-color: cyan;
}
span.out_weather::before {
   background-color: #BDFE09;
}
span.mitem_frame::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 8px;
  height: 2px;
  width: 100%;
  transition: top .2s ease-in-out, height .2s;
}
span.mitem_frame:hover::before {
  content: '';
  position: absolute;
  top: 32px;
  height: 4px;
}
span.mitem_frame.home.active::before,
span.mitem_frame.pr_room.active::before,
span.mitem_frame.avail.active::before,
span.mitem_frame.contact.active::before,
span.mitem_frame.book.active::before,
span.mitem_frame.rating.active::before,
span.mitem_frame.route.active::before,
span.mitem_frame.out_weather.active::before {
  content: '';
  position: absolute;
  top: 32px;
  height: 4px;
}
div.dropDown {
  margin-top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.dropDown:hover {
  background: #292929;	
}
div.dropDown > a {
  height: 20px !important;	
}
div.dropDown > a > span {
  position: relative;
  height: 20px !important;
  padding: 0 0 0 4px;
}

/* pc-menu Ende */

.myButt{
 background-color:#339900;
 color:white;
 text-align:center;
 padding:5px 5px;
 border-radius:5px;
 font:16px Tahoma;
 text-decoration:none;
 float:left;
 cursor: pointer;
}
.myButt:hover{background-color:#1b741c;color:white;text-decoration:none;}
.green_center{
  color:green;
  text-align:center;
}
.buchanfr{
  width:930px;
  border:1px solid blue;
  font:14px Tahoma;
  color:blue;
}
.offer {
  font:14px Tahoma;
  color:green;
  font-weight:bold;
  text-align:center;
}

#prices {
 color: white;
 background: #333;
 font-weight: normal;
 border: 2px solid red;
 padding: 3px 10px;
 width: max-content;
 margin: 0 auto;
}
#nights_Box {
 margin-left:10px;
 font-weight:bold;
}
#price_Box {
 margin-left:50px;
 font-weight:bold;
}
#discount_Box {
  margin-left:30px;
  color: green;
}
#confirm_txt {
 margin-left:10px;	
}
#preise{
 margin:20px 20px 20px 10px; /* top right bottom left */
 height:150px;   			 /* preise.jpg original grösse */
 width:200px;
 padding:1px;
 border:1px solid black;
 background-color:yellow;
 float:left;
 }
 #preise_txt{
  margin-top:10px;
  max-width:670px;
  font:bold 16px Tahoma;
  float:left;
 }
 #contactInfo{
  width: 200px;
  background-color:#d2e4c8;
  border:1px solid black;
  font:14px Tahoma;
  padding:10px;
 }
.responsive_iframe-16x9 > iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.responsive_iframe-4x3 > iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.responsive_iframe-16x9 {
  /* http://www.holgerkoenemann.de/ein-vimeo-oder-youtube-video-responsive-einbinden/ */
  position: relative;
  padding-bottom: 56.25%;  /* Default for 1600x900 videos 16:9 ratio */
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}
.responsive_iframe-4x3 {
  position: relative;
  padding-bottom: 75%; /* Default for 4:3 videos */
  padding-top: 0px;
  height: 0;
  overflow: hidden;
}
#db-button{
  width:250px;
  height:150px;
  margin: 10px auto;
 }
table{ /* in Veranstaltungen */
 vertical-align:top;
 margin: 0px auto;
 border:1px solid black;
 border-collapse:collapse;
 font:14px Tahoma;
 color:black;
}
td{
 border:1px solid black;
 padding:5px;
 font-size: 1rem;
}
tr:nth-child(2n){
 background-color:#a0a0a0;
}
.greenWhite{
 width:75px;
 height:20px;
 padding:0px 3px 3px 3px;
 color:white;
 font-weight:bold;
 background-color:#339900;
} /* Ende in Veranstaltungen */
 #tahoma16justify{  /* in Datenschutz und Impressum */
  font:16px Tahoma;
  padding:10px;
  text-align:justify;
 }
 label,textarea{ /* in buchungsanfrage und gutschein */
 margin-left:10px;
 font:14px Tahoma;
}
 option, input{
  font:14px Tahoma;
}
 #ihreDaten{
  color:green;
  margin: 0px auto;
  font:bold italic 16px Tahoma;
 } 
 #gzm-color{
  color:brown;
 } 
 #errColor{
  color:red;
  font:bold 16px Tahoma;
 } 
 .color333 {
  color: #333;	 
 }
 #datenschutz{ /* in buchungsanfrage */
  color:green;
  font:bold 14px Tahoma;
  text-align:center;
}
#book_status, #bewert_status {
  display:none;
  font:bold 14px Tahoma;
  background: #fee29e none repeat scroll 0 0;
  border-radius: 3px;
  color: #c00;
  margin-top:15px;
  margin-bottom: 5px;
  padding: 6px 8px;	
}
.status-success,
.status-error {
  z-index: 1;
  font-size: 1em;
  padding: 20px 20px;
  position: fixed;
  right: 10px;
  top: 147px;
  border-radius: 4px;
}
.status-success {
  background: #D4EDDA;
  border-left: 8px solid #3AD66E;
}
.status-error {
  background: #FFF3CD;
  border-left: 8px solid #FFA502;
}
/* Ende in buchungsanfrage und gutschein */

/* KP stuff */
.fancy-link {
  text-decoration: none;
  color: #ee6352;
  position: relative;
}

.fancy-link::after { 
  /* Link unterstreichen */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  /* horizontal 0 Breite zeigen und zwar von rechts (Std. ist Mitte)*/
  transform: scaleX(0);
  /* bei hover out: von rechts nach links löschen */
  transform-origin: left;
  transition: transform 250ms ease-in;
}

.fancy-link:hover::after {
  /* bei hover volle Breite zeigen */
  transform: scaleX(1);	
  /* bei hover links nach rechts */
  transform-origin: left;
}
.button {
  cursor: pointer;
  border: 0;
  border-radius: 0;
  background: #ee6352;
  color: white;
  padding: 0.5em 0.5em;
  position: relative;
  /* with z-Index: 1; living inside button not outside on the page */
  z-index: 1;
}

.button::after {
  content: '';
  /* .button must be relative */
  position: absolute;
  /* Überlappung mit top und left = 0 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); 
  /* hinter den background von .button setzen */
  z-index: -1;
  /* transition gilt für alle buttons */
  transition: transform 200ms ease-in;
}

/* reset AK default in main_9_26.css for button:hover */
.button-three:hover,
.button-four:hover {
  background: #ee6352;
}

/* von oben links nach unten rechts */
.button-three::after {
  transform: scale(0);
  transform-origin: bottom right;  
  }

/* von oben links nach unten rechts */
.button-three:hover::after {
  transform: scale(1);
  transform-origin: top left;  
}

/* von innen nach aussen */
.button-four::after {
  transform: scale(0);
}

/* von innen nach aussen */
.button-four:hover::after {
  transform: scale(1);
}


.page-title {
	display: inline-block;
	color: black;
}

.page-title::after {
	 content: '';
	 display: block;
	 width: 100%;
	 height: 25px;
	 background: #ffe600;
	 margin-top: -20px;
	 margin-left: 15px;
}

.section-title {
	font-size: 1.125rem;
	color: #000;
	margin-top: 1.25em;
}

.section-title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin-top: 10px;
	background: #ffe600;
}

/* Ende KP stuff */

.center {
  text-align:center;  	
}
.flex-center {
  justify-content: center;
}
.avail_btn { /* in booking.php */
  transition: opacity 0.1s linear;
  opacity:0.8;
  background-color:#339900;
  background-image:linear-gradient(to bottom, #339900, #1b741c);
  color:white;
  text-align:center;
  padding:10px 10px;
  font:bold 16px Tahoma;
  text-decoration:none;
  border-radius:10px;
  cursor:pointer;
}
.avail_btn:hover{opacity:1.0;text-decoration:none;color:white}

/* nyze_button Start - used in freizWetter.php + contact.php */
.nyze_button {
  position: relative;
  cursor: pointer;
  padding: 6px 10px;
  display: inline-block;
  background: #122533;
  color: #f66555;
  border-radius: 4px;
  text-decoration: none;
  font-family: 'Varela Round', sans-serif;
  text-transform: uppercase;
  border: 1px solid #dd5a51;
}
/* a:hover in main.css überschreiben */
.nyze_button:hover,
.nyze_button:focus {
  color: #f66555;
  text-decoration: none;
}

.circle {
  display: inline-block;
  margin-left: 10px;
  border-radius: 50%;
  color: #f66555;
  padding: 0.1em 0.3em;
  border: 1px solid #f66555;	
}

/* arrow right in gelb */
.nyze_button:hover i,
.nyze_button:focus i {
  color: yellow;	
}
/* KB Button - nyze.de nachempfunden, 27.4.20 */
/* a::hover wird in main.css gesetzt, daher hier überschrieben */
a:hover {
  color: #f66555;	
}
/* nyze button Ende */

@media screen and (max-width: 1040px) {
 .page-title { font-size: 1.8rem; }
 .page-title::after { margin-top: -22px; }
 #freeRoomsInfo  { display: none; }
 .flex_menu_container { display: none; }
 .flex { flex-direction: column }
 #preise_txt {width:auto;}	
 #db-button {margin:20px auto;}
 table{font:11px Tahoma;}
 .buchanfr {width:95%;padding:1%;}
 #prices {width: 90%;}
 #newLine10 {display:block;margin-bottom:10px;}
 #newLine20 {display:block;margin-bottom:20px;}
 #newLine30 {display:block;margin-bottom:30px;}
 #confirm_txt {margin-left:5px;width:300px;}
 #nights_Box { margin-left:10px;margin-top:15px;}
 #datenschutz{ text-align:left;width:300px;}
}