/* CSS styles */

body {background-color:#e7aa50; font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; margin:5%; }

.topnav {
  /* position: fixed; top: 0;
  */
  color: #e7aa50;
  overflow: auto;
  text-align:right;
  padding-bottom: 10px;
  padding-top: 10px;
  background-color: #ffffff;
}

.topnav a {
  background-color: #ffffff;
  color: #e7aa50;
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.topnav  a:visited {
  background-color: #ffffff;
  color: #e7aa50;
  }
.topnav a:hover {
  background-color: #e7aa50;
  padding-bottom: 10px;
  color: #ffffff;	
}

.topnav  a:active {
  background-color: #e7aa50;
  color: #774d0f;
}

.button {
	margin-left: 0px;
	margin-top:2em;
}
.button a {
  color:#fffff;
  background-color: #774d0f;
  text-align: center;
  padding: 10px;
  padding-right: 10px;
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
}
.button a:visited {
  background-color: #774d0f;
color: #ffffff;}

.button a[href^="mailto:"]{color: #ffffff;}
.button a:visited[href^="mailto:"]{color: #ffffff;}
.button a:active[href^="mailto:"]{color: #ffffff;}
.button a:hover[href^="mailto:"]{color: #ffffff;}
  
a {color:#774d0f;}
a:visited {color:#E7AA50;}
a:focus   { border-bottom-style: dashed; border-width: 1px; text-decoration: none;}
a:hover   {color:#774d0f; font-weight:bold}
a:active  {color:#774d0f; font-weight:bold}

b {color:#774d0f;}
h1 {text-align: left; color:#774d0f;}
h2 {text-align: left; color:#774d0f;}
h3 {text-align: center; color:#774d0f;}
li {list-style-type: "🧭 "; padding-bottom:12px;}
ul {padding-top:12px;}

#cta {list-style-type:"👉🏽 ";  padding-top: 12px;}
#fixheight {min-height:100px;}
.floatquote{position:absolute; top:10%; left:60%; height:auto; width:33%; text-align:left; padding: 3%; color:#ffffff; font-size:3vw; font-weight:bold;}
.headerpic {position: relative; width:100%; margin-top:0px;}
.icon {width:150px; height:150px; padding:5px; margin: auto; display: block;}
.impressum {font-size:10pt; padding: 0px 0px 0px 30px; background-color:#ffffff;}
.infobox {border-color:#774d0f; border-style:solid; border-width:2px; margin-top: 10px; padding:5px;}
.navigation {text-align:center; padding: 20px; color:#774d0f; background-color:#fffff0;}
.portrait { float: left; clear:both; width:200px; height:300px; padding-right:50px; padding-bottom: 30px;}
.picfullsize {width:100%; margin-top:5px; max-width:800px;}
.picleft { float: left; clear:both;  width:300px; height:450px; margin-right: 15px; padding: 2px; border-style: solid; border-width: 0px;}
.picright { float: right; clear:both;  width:300px; height:450px; margin-left: 15px; padding: 2px; border-style: solid; border-width: 0px;}
.referenzen { max-width: 150px; height:auto; padding-right:40px; padding-bottom:40px; vertical-align: middle;}
.textbox {position: relative; background-color:#ffffff; padding:30px; height:auto; clear:both;}
#tagline {font-style: normal; color: #774d0f; font-size:150%; text-align:center;}
#tagline-left{position:relative; float:left; clear:both; width:33%; min-height:50px;
	font-style: normal; color: #774d0f; font-size:150%; text-align:center;}
.titel {text-align:center; height:auto; padding: 20px; background-color:#ffffff; color:#774d0f; font-size:21pt; font-weight:bold;}
.vidright { float: right; clear:both;  width:315px; height:560px; margin-left: 15px; margin-right: 0px; padding: 2px; border-style: solid; border-width: 0px;}

.columnwrappertwo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1%;
  grid-auto-rows: minmax(45%, auto);
}
.columnwrapperthree {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2%;
  grid-auto-rows: minmax(33%, auto);
}
.colone {
  grid-column: 1;
  grid-row: 1;
}
.coltwo {
  grid-column: 2;
  grid-row: 1;
}
.colthree {
  grid-column: 3;
  grid-row: 1;
}

/* Youtube-Video einbetten (Div für Responsive Design) */

.ytcontainer {
  position: relative;
  overflow: hidden;
  width: 50%;
  float: right;
  border-color:#774d0f;
  border-style:solid;
 border-width:4px; 
 margin: 5px;
}

.ytcontainer::after {
  display: block;
  content: "";
  padding-top: 56.25%;
}

.ytcontainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* FAQ*/
#frage {color:#774d0f; font-weight: bold;}
#antwort{font-weight: normal;}