/* lato-regular - latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Lato Regular'), local('Lato-Regular'),
       url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('https://www.artaro-muenchen.de/webfonts/lato-v16-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

html {
}

body {
margin: 0;
padding: 0;
font-family: 'Lato', sans-serif;
font-size: 115%;
line-height: 1.6em;
text-align: center;
color: #4D5356;
background-color: #FFFFFF;
}

h1.start {
display: none;
}

h1, h2, h3 {
font-size: 250%;
line-height: 1.3em;
font-family: 'Lato', sans-serif;
font-weight: bold;
color: #EA4F3D;
margin: 0;
padding: 0;
margin-top: 50px;
margin-bottom: 20px;
}

h1.video {
font-size: 2.8vw;  
line-height: 1.2em;
color: #FFFFFF;
text-align: left;
}

h2.start {
margin-top: 75px;
}

h2.tabklein {
font-size: 100%;
line-height: 1.6em;
font-weight: normal;
color: #4D5356;
text-transform: uppercase;
margin-top: 0;
margin-bottom: 0;
}

h3.tab {
font-size: 160%;
line-height: 1.3em;
margin-top: 5px;
}

h3.redbox {
font-size: 150%;
line-height: 1.35em;
color: #FFFFFF;
text-align: left;
margin-top: 0;
margin-bottom: 0;
}

h3.buch {
font-size: 100%;
line-height: 1.35em;
background-color: #EA4F3D;
color: #FFFFFF;
text-align: left;
margin-top: 0;
margin-bottom: 20px;
padding: 15px 40px;
box-sizing: border-box;
}

input, select {
font-family: 'Lato', sans-serif;
font-size: 100%;
color: #4D5356;
border: none;
box-sizing: border-box;
padding: 10px 2%;
width: 100%;
margin-bottom: 10px;
}

input[type='checkbox'] {
padding: 0;
margin: 0;
width: 20px;
cursor: pointer;
}

textarea {
font-family: 'Lato', sans-serif;
font-size: 100%;
color: #4D5356;
border: none;
box-sizing: border-box;
padding: 10px 2%;
width: 100%;
height: 6em;
margin-bottom: 10px;
}

input:hover, textarea:hover {
color: #EA4F3D;
}

.button {
font-family: 'Lato', sans-serif;
font-size: 100%;
font-weight: bold;
color: #FFFFFF;
box-sizing: border-box;
background-color: #4D5356;
padding: 15px 2%;
width: 100%;
cursor: pointer;
text-align: center;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}

.button:hover {
opacity: 0.9;
color: #FFFFFF;
}

.hidden, .formsubject {
display: none;
}

a {
color: #6473B7;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

img {
border: none;
}

.imgsize {
max-width: 100%;
height: auto;
}

.imgsizemax {
width: 100%;
height: auto;
}

ul.liste {
list-style-type: none;
padding: 0;
padding-left: 45px;
text-indent: -41px;
}

ul.liste li::before {
content: "\f14a";
font-family: "Font Awesome 5 Free";
padding-right: 25px;
color: #EA4F3D;
}

#clear {
clear: both;
}

.wehinweis {
display: none;
}

/**************************************************************************************/

#container {
margin: 0em auto;
width: 80%;
text-align: left;
}

/**************************************************************************************/

header {
background-color: #F6F6F6;
height: 50px;
line-height: 50px;
font-size: 80%;
}

#headerkontakt {
float: right;
}

.headerkontaktdesktop {
display: inline;
}

#headerkontakt a {
color: #4D5356;
}

/**************************************************************************************/

#startbgvideo {
width: 100%;
height: 100%;
height: 60vh;
overflow: hidden;
position: relative;
z-index: 1;
}

#startbgvideocontent {
position: absolute;
overflow: hidden;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
width: 100%;
height: 100%;
}

#startbgvideocontent > video.video1 {
width: 100vw;
height: 100vh;
object-fit: cover;
}

#startbgvideocolor {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
background-color:rgba(234,79,61,0.8);
}

#startbgvideotext {
color: #FFFFFF;
font-size: 0.8vw;
line-height: 1.3em;
position: absolute;
top: 50%;
left: 10%;
transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
text-align: left;
}

/**************************************************************************************/

#tabdreier {
display: -ms-grid;
display: grid;
-ms-grid-columns: 2fr 1fr;
grid-template-columns: 2fr 1fr;
margin-top: -80px;
position: relative;
z-index: 10;
}

#tabdreier > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
}

#tabdreierzweier {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}

#tabdreierzweier > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreierzweier > div:nth-child(2) {
-ms-grid-column: 2;
-ms-grid-row: 1;
padding: 50px;
box-sizing: border-box;
}

#redbox {
background-color: #EA4F3D;
color: #FFFFFF;
padding: 40px;
box-sizing: border-box;
}

#kontaktform {
margin-top: 30px;
margin-bottom: 10px;
color: #FFFFFF;
}

#kontaktform a {
color: #FFFFFF;
}

#kontaktformtext {
font-size: 85%;
line-height: 1.3em;
margin-bottom: 20px;
}

#provenexpert {
margin-top: 25px;
}

#buch {
margin-top: 50px;
}

#tabdreierzweiervierer {
width: 95%;
margin-top: 30px;
}

#btn {
margin-top: 45px;
}

.btn, .popup_open {
background-color: #EA4F3D;
padding: 15px 30px;
text-decoration: none;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
color: #FFFFFF;
font-weight: bold;
font-size: 120%;
border: none;
cursor: pointer;
}

.btn:hover, .popup_open:hover {
opacity: 0.85;
text-decoration: none;
}

.btn i, .popup_open i {
padding-left: 15px;
transition: all 150ms ease-out;
-webkit-transition: all 150ms ease-out;
}

.btn:hover i, .popup_open:hover i {
transform: translate(-5px,0);
}

.btnvortrag {
margin-bottom: 60px;
}

#videoeinzel {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
z-index: 1;
margin-bottom: 30px;
}

#videoeinzel iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/**************************************************************************************/

.popup_content {
padding: 30px;
max-width: 60%;
background-color: #EA4F3D;
}

/**************************************************************************************/

.contenttab-header {
box-sizing: border-box;
margin: 0;
padding: 0;
}

.contenttab {
}

.contenttab-overflow-wrapper, .contenttab-overflow-menu, .contenttab-overflow-list {
display: none;
}

.contenttab-navi {
box-sizing: border-box;
padding: 20px 0;
color: #4D5356;
cursor: pointer;
display: inline-block;
transition: all .3s;
text-decoration: none;
width: 25%;
text-align: center;
}

.contenttab>.contenttab-navi {
border-bottom: 1px solid #C9CBCC;
}

.contenttab>.contenttab-navi[data-contenttab-active="true"], .contenttab>.contenttab-navi:hover {
box-shadow: 0 -6px #EA4F3D inset;
}

.contenttab>.contenttab-navi:hover {
text-decoration: none;
}

.contenttab-navi i {
font-size: 220%;
}

.contenttab-main {
margin-top: 30px;
}

.contenttab-content {
display: none;
}

.contenttab-content[data-contenttab-active="true"] {
display: block;
}

/**************************************************************************************/

footer {
background-color: #4D5356;
padding: 40px 0;
margin-top: 50px;
font-size: 60%;
text-transform: uppercase;
}

footer a {
color: #FFFFFF;
margin: 0 5px;
opacity: 0.2;
}

/****************************************************************************************************************************************************************************/

@media (max-width : 1500px) {
/**************************************************************************************/

#container {
width: 90%;
}

/**************************************************************************************/
}

@media (max-width : 1200px) {
/**************************************************************************************/

#tabdreier {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}

#tabdreier > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreier > div:nth-child(2) {
-ms-grid-column: 1;
-ms-grid-row: 2;
margin-top: 50px;
}

#tabdreierzweiervierer {
width: 100%;
}

/**************************************************************************************/
}

@media (max-width : 600px) {
/**************************************************************************************/

h1, h2, h3, h3.redbox, h3.tab {
font-size: 140%;
line-height: 1.3em;
}

h1.video {
font-size: 4.0vw;  
line-height: 1.5em;
}

h3.start {
margin-top: 35px;
}

h2.video {
font-size: 3.8vw;  
line-height: 1.4em;
}

.headerkontaktdesktop {
display: none;
}

#startbgvideo {
height: 30vh;
}

#startbgvideotext {
font-size: 1.8vw;
line-height: 1.3em;
}

#tabdreier {
margin-top: 20px;
}

#tabdreierzweier {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
}

#tabdreierzweier > div:nth-child(1) {
-ms-grid-column: 1;
-ms-grid-row: 1;
}

#tabdreierzweier > div:nth-child(2) {
-ms-grid-column: 1;
-ms-grid-row: 2;
padding: 0;
}

.contenttab-navitext {
display: none;
}

.popup_content {
padding: 20px;
max-width: 80%;
}

/**************************************************************************************/
}