@charset "UTF-8";
/* CSS Document */

/* eb-garamond-regular - latin */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/eb-garamond-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/eb-garamond-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/eb-garamond-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/eb-garamond-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/eb-garamond-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/eb-garamond-v14-latin-regular.svg#EBGaramond') format('svg'); /* Legacy iOS */
}

/* overpass-300 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 300;
  src: url('fonts/overpass-v7-latin-300.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/overpass-v7-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/overpass-v7-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/overpass-v7-latin-300.woff') format('woff'), /* Modern Browsers */
       url('fonts/overpass-v7-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/overpass-v7-latin-300.svg#Overpass') format('svg'); /* Legacy iOS */
}
/* overpass-700 - latin */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/overpass-v7-latin-700.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/overpass-v7-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/overpass-v7-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/overpass-v7-latin-700.woff') format('woff'), /* Modern Browsers */
       url('fonts/overpass-v7-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/overpass-v7-latin-700.svg#Overpass') format('svg'); /* Legacy iOS */
}

body {-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;}
.header {background-color: #f0e8df; text-align: center; position: relative; padding: 20px 0 0 0}
.row {padding-top: 2% ;}
.navi {position: absolute; right: 2%; margin-top: -25px; font-family: "Overpass", sans-serif; font-weight: 700}
.navi ul {margin-bottom: 0}
.navi li {display: block; width: auto; height: 30px; background-position: center bottom; background-repeat: no-repeat; font-size: 1.2rem; text-transform: uppercase}
.navi li a {display: block; width: 100%; height: 100%}
.navi .text li {display: block; width: auto; height: auto; text-align: center; margin-right: 20px; margin-bottom: 10px}
.navi .text li a {color: #a07342}
.download {background-image: url(../images/book.png); background-size: 36px 23px}
.mail {background-image: url(../images/mail.png); background-size: 26px 18px; margin-bottom: 1rem}
.phone {background-image: url("../images/phone.png"); background-size: 22px 28px;}
.logo {width: 90px; height: 90px; margin-bottom: 30px}
.slogan {width: 196px; height: auto}
.header p {font-size: 1.8rem}

.tooltiptext {
	display: none;}

.text li a {background-color: #fff; border-radius: 15px; text-align: center; height: 22px; line-height: 25px; padding: 0px 8px}
.text li a:hover {background-color: #a07342; color: #fff}


@media (min-width: 750px) {
.header {padding: 60px 0 0 0}
.row {padding-top: 0.5% ;}
.navi li {display: inline-block; width: 40px; height: 30px; }
.mail {margin-left: 5px; margin-bottom: 1rem }
.navi {right: 1%; margin-top: 0px}
	.navi .text li { text-align: center;}
	
	
	.tooltip {
  position: relative;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #a07342;
  color: #fff;
  text-align: center;
  padding: 5px 0;
 display: block;
 display: block;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
	top: -0px;
  right: 105%; 
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

}
.start, .ende {position: relative}
/*.start a {position: absolute; right: 50%; margin-right: -98px; bottom: 10%; z-index: 1}*/
.start a {color: #a07342}
.ende a {position: absolute; right: 50%; margin-right: -98px; top: 10%; z-index: 1}

.textblock {padding: 5% 20px}

.textblock img {margin-bottom: 3rem}

.braun  {background-color: #a07342; color: #fff; border: 1px solid #fff}
.braun:hover {background-color: #fff; color: #a07342; border: 1px solid #a07342}
.stars {padding-top: 2rem; margin-left: 3rem}
.stars li {list-style-type: none; position: relative}
.stars li:before {content: ""; position: absolute; width: 15px; height: 15px; background-image: url(../images/star.png); background-size: contain; left: -25px; top: 3px}
.dreierbox {width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap}
.box, .bigbox, .midbox {width: 100%; padding-top: 100%; position: relative; background-size: cover; background-repeat: no-repeat; margin-bottom: 2%}
.box:last-child {margin-bottom: 0}

.box p {position: absolute; top: 0; right: 3%}
.box h2 {position: absolute; left: 3%; top: 0}
.klein {font-size: 1.3rem}
.buchs_r {background-size: 50%; background-position: bottom left}
.buchs_k {background-size: 50%; background-position: bottom right}
.fullsize_img {width: 100%; padding-top: 100%; background-size: cover; background-position: center center}
.textbox {background-color: #f0e8df; width: 94%; padding: 1% 3%; min-height: 125px}
.rechts {text-align: right}
.text_unten h2 {bottom: 0; left: 3%; top: inherit; margin: 0}
.text_unten {min-height: 125px; padding-top: 0}
@media (min-width: 750px) {
	.textblock {padding: 5% 0}
.dreierbox {flex-wrap: nowrap}
.box {width: 33%; padding-top: 33%; margin-bottom: 0}
.bigbox {width: 66.5%; padding-top: 33%; margin-bottom: 0}
.midbox {width: 49.75%; padding-top: 33%; margin-bottom: 0}
.fullsize_img {padding-top: 50%; }
.box h2 {left: 9%; }
.text_unten h2 {left: 0;}
.text_unten {min-height: 0px; }

}

.video {padding-bottom: 5%}


.center {text-align: center}
.top {margin: 10% 0}

.stoerer {position: absolute; display: flex; align-items: center; justify-content: center; background-color: #fff; color: #a07342; width: 80px; height: 80px; padding: 20px; z-index: 2; text-align: center; left: 5%; top: -5%; transform: rotate(-10deg); border-radius: 50%}
.stoerer h3 {font-size: 1.6rem; margin-bottom: 0}

@media (min-width: 550px) {
	.stoerer {width: 120px; height: 120px; }
	.stoerer h3 {font-size: 2.2rem}
}

.footer {background-color: #f0e8df; width: 100%; padding: 15% 0%;  color: #222;}
.footer ul {display: block; text-align: center; font-size: 1.6rem; color: #a07342; font-family: "EB Garamond", Times, serif}
.footer a {color: #a07342}
.footer ul li {list-style-type: none; display: block; margin-bottom: 10px}
.footer .logo-eng {width: 100px; height: auto}

@media (min-width: 750px) {
.footer {width: 94%; padding: 3% 3% 2%;}

}

@media (min-width: 1000px) {
.footer ul {display: flex; justify-content: space-between; margin: 0; text-align: left; font-size: 1.7rem}
.footer ul li {display: inline; }

}

@media (min-width: 1250px) {
	.footer ul {font-size: 1.9rem}
}