/*####### ELEMENTE/ TAGS #######*/
* {
   box-sizing:border-box;
   margin:0;
   padding:0;
   border-radius: 1%;
}
article {
   width:100%;

}
aside {
   margin-left: 5%;
   margin-right: 10%;
}
aside p {
   font-size: 0.9em;
}
body {
   background-color: rgba(0, 0, 0, 0.04);
   font-family: Verdana, Geneva, Tahoma, cursive;
}
div.divFrame {
   width:94%;
   height: 19em;
   border: 0px solid #840;
   font-family:calibri;
   font: 1.0em sans-serif;
   overflow: auto;
}
footer {
   width: 100%;
   position:fixed;
   bottom:0;
   border-top: 1px solid rgba(255,0,0,1);
}
footer nav {
   width: 7em;
   background-color: rgba(248, 210, 210, 0.1);
   margin: 0 auto;
}
footer p {
   width:15em;
}
h1 {
   display:relative;
   background-image: linear-gradient(to top,rgba(255,255,255,0.01),rgba(255,255,255,1));;
   color: rgba(255, 0, 0, 0.01);
   margin: 0 auto;
   padding-top: 2%;
   text-align:center;
}
h2 {
   display:relative;
   margin-top:3%;
   margin-left:3%;
   color: rgba(92, 37, 37, 0.6);
}
h3 {
   display:relative;
   margin-left:7%;
}
h4 {
   display:relative;
   margin:1%;
}
header {
   width:100%;
   height:10.5em;
   background-image:url(../image/kopf.png) , linear-gradient(to bottom,rgba(255,0,0,0.01),rgba(255,255,255,0.7));
   background-position:center;
   background-repeat:no-repeat;
   background-blend-mode:multiply;
   background-size: contain;
   border:0;
   margin: 0 auto;
   margin-top:0.5em;
   margin-bottom:0.5em;
   text-align: center;
}
hr {
   border-color: rgba(255,0,0,0.3);
   margin:0.27em;
}
iframe {
   width:17em;
   height:auto;
   border:0;
}
main {
   width:66.6em;
   height: 33em;
   background-color: rgba(248, 210, 210, 0.2);
   margin: 0 auto;
}
nav img {
   width:3em;
   border-radius:100%;
}
p {
   padding:3%;
}
table td {
   white-space:wrap;
   vertical-align:top;
}

/*####### KLASSEN #######*/

.contentDE, .contentIT, .contentFR {
   width: 66.66%;
   float:right;
}

.contentContactDE form, .contentContactIT form, .contentContactFR form {
   width:max-content;
   margin:0 auto;
   border-left:1;
   border-left-style: solid;
   border-left-color: rgba(255,0,0,0.2);
   border-left-width: 0.4em;
   border-top-left-radius: 33.3%;
   border-bottom-left-radius: 66.6%;
}
.contentContactDE table, .contentContactIT table, .contentContactFR table {
   width:max-content;
   border:0;
   empty-cells:1;
   background-repeat:no-repeat; 
   background-position:33px 50px;
   margin:0 auto;
   text-align: left;
}
.contentContactDE td, .contentContactIT td, .contentContactFR td {
   background-color:rgba(255,0,0,0.02);
   border-bottom-color: rgba(255,0,0,0.1);
   border-bottom-style: solid;
   width: max-content;
}
.contentContactDE input, .contentContactIT input, .contentContactFR input {
   width:max-content;
   left: 1%;
}
.contentHomeDE, .contentServiceDE, .contentContactDE, .contentAboutDE, .contentImpressumDE,
.contentHomeIT, .contentServiceIT, .contentContactIT, .contentAboutIT, .contentImpressumIT,
.contentHomeFR, .contentServiceFR, .contentContactFR, .contentAboutFR, .contentImpressumFR {
   width: 100%;
   height:33em;
}
.contentHomeDE, .contentHomeIT, .contentHomeFR {
   border-left:1;
   border-left-style: solid;
   border-left-color: rgba(255,0,0,0.2);
   border-left-width: 0.4em;
   border-bottom-left-radius: 66.6%;
}
.contentHomeDE figure, .contentHomeIT figure, .contentHomeFR figure {
   width:9em;
   margin: 0 auto;
}
.contentHomeDE p, .contentHomeIT p, .contentHomeFR p {
   margin-left: 5%;
   margin-right: 15%;
}
.contentImpressumDE p, .contentImpressumIT p, .contentImpressumFR p {
   margin-left:10%;
   margin-top:3%;
}
.contentServiceDE div {
   width:94%;
   height: 17em;
   border: 0px solid #840;
   font-family:calibri;
   font: 1.0em sans-serif;
   overflow: auto;
}
.contentServiceIT div {
   width:94%;
   height: 16em;
   border: 0px solid #840;
   font-family:calibri;
   font: 1.0em sans-serif;
   overflow: auto;
}
.contentServiceFR div {
   width:94%;
   height: 16.2em;
   border: 0px solid #840;
   font-family:calibri;
   font: 1.0em sans-serif;
   overflow: auto;
}
.contentServiceDE hr, .contentServiceIT hr, .contentServiceFR hr {
   margin-right:7%;
   margin-left:3%;
}

.fields {
   width:100%;
   border:0;
}
.info-box {
   width:17em;
   font-size: small;
   margin-left:10%;
   padding-bottom:10em;
   position:relative;
   z-index:1;
}
/*############# TOOLTIP ##################################*/

.tooltip {
   position: relative;
   display: inline-block;
 }

.tooltiptext span {
   display:none;
 }
 
 .tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
 
   /* Position the tooltip */
   position: absolute;
   z-index: 1;
 }
 
 .tooltip:hover .tooltiptext {
   visibility: visible;
 }

/*################### MENUE ############################*/
.menue {
   width:11.5em;
   height:33em;
   background:url(../image/coccinella_balkenpur.png) repeat 0 0;
   background-size:contain;
   border-top:1;
   border-top-color: rgba(255,0,0,0.2);
   border-top-style: solid;
   border-width: 0.2em;
   float:right;
   -webkit-animation: slide 200s linear infinite;
 }
 @-webkit-keyframes slide {
     from { background-position: 0 0; }
     to { background-position: 0 4000px; }
 }
 .menue h3 {
   background-image: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(255,255,255,1));
   padding-left:2.7em;
   margin:0;
 }
 .langMenue {
   width:6.4em;
   margin:0 auto;
   background-image: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(255,255,255,1));
}
.about {
   position: absolute;
   margin-top:15.8em;
   margin-left:1.8em;
}
.contact {
   position: absolute;
   margin-top:10em;
   margin-left:4.7em;
}
.home {
   position: absolute;
   margin-top:0em;
   margin-left:1.8em;
   z-index: 1;
}
.impressum {
   position: absolute;
   margin-top:17em;
   margin-left:6.1em;  
}
.service {
   position: absolute;
   margin-top:2em;
   margin-left:4.8em;
}

.menueRWD680 {
   display: none;
}
.navMenue img {
   width: 3.9em;
}
.navMenue img:hover {
   zoom:200%;
}
.menueMobile{display: none;
   text-align: center;
}
#mobileMenueActive {
   display:none;
   text-align: center;
}
#mobileMenueActive:target {
   display:block;
   width: 15em;
   margin: 0 auto;

}
/*################### MENUE ENDE ######################*/
/*########################################################*/
span.hamburg { 
   display: block;
   background: rgba(255,0,0,0.66); width: 75px; height: 50px; 
   position: relative; 
   margin-left: auto; margin-right: auto;
   border-radius: 2px; 
}

.line { 
   position: absolute; 
   left:10px;
   height: 4px; width: 55px; 
   background: #fff; border-radius: 2px;
   display: block; 
   transition: 0.5s; 
   transform-origin: center; 
}

.line:nth-child(1) { top: 12px; }
.line:nth-child(2) { top: 24px; }
.line:nth-child(3) { top: 36px; }

/*###############################################################*/


.pfeiltoLeft {
   background-color: rgba(0,0,0,1);
}
.pfeiltoLeft img {
   width:10em;
   float:left;
}
.pfeiltoLeft:hover img {
   opacity: 0.6;
}
.pfeiltoRight {
   background-color: rgba(0,0,0,1);
}
.pfeiltoRight img {
   width:10em;
   float:right;
}
.pfeiltoRight:hover img {
   opacity: 0.6;
}
.siteInfo {
   width:33.33%;
   height: 33em;
   background-image: linear-gradient(200deg,rgba(73, 68, 68, 0.1), rgba(255,255,255,1));
}
.siteInfo h2 {
   padding-top:0.5em;
   margin-left:7%;
}
.siteInfo div, .siteInfo article {
   width: 100%;
   display:flex;
   flex-direction: column;
   justify-content: center; 
   align-items: center;
}
.siteInfo img {
   margin-top: 1em;
}
.siteInfoContact p {
   width:100%;
   padding-bottom: 2em;
   text-align: center;
}
.siteInfoHome address {
   margin-top:3em;
}
.siteInfoService {
   border-left:1;
   border-left-style: solid;
   border-left-color: rgba(255,0,0,0.1);
   border-left-width: 0.4em;
}
.spam tr, .spam td, .spam p {
   white-space:nowrap;
   vertical-align:middle;
}
.spam input,.spam form, .spam table {
   width:13em;
   height:2em;
   margin:1%;
}
.wrapper {
   width: 100%;
   height:33em;
   display:flex;
}
.wrapper:nth-child(1) {
   order: 2;
}
.wrapper:nth-child(2) {
   order: 1;
}

/*####### IDs #######*/

#sprachwahl:target {display:none;}

/*############### Media Queries ####################*/

@media screen and (max-width: 680px) { 
   main {
      width: 100%;
      height:100%;
   }
   .contentDE, .contentIT, .contentFR {
      width: 100%;
      height:100%;
      float:none;
   }
   .contentContactDE, .contentContactIT, .contentContactFR {
      height: 100%;
   }
   .contentContactDE form, .contentContactIT form, .contentContactFR form {
      width: max-content;
      height:max-content; 
      margin: 0 auto;
   }
   .contentContactDE table, .contentContactIT table, .contentContactFR table {
      width: min-content;
      height:max-content;

   }
   .contentHomeDE,.contentImpressumDE, .contentHomeIT,.contentImpressumIT, .contentHomeFR, .contentImpressumFR {
      height:100%;
   }
   .desktop {width:0em;display:none;}
   .fields {width:100%;}
   .menueMobile{display: block;}
   .pfeiltoLeft {
      width:7em;
      bottom:2em;
      left:2em;
      position:fixed;
      z-index:1;
   } 
   .pfeiltoRight {
      width:7em;
      right:2em;
      bottom:2em;
      position:fixed;
      z-index:1;
   }
   .siteInfo {
      width:100%;
   }
   .siteInfoContact p {
      margin-bottom:4em;
   }

}
@media screen and (min-width: 681px) and (max-width: 1100px) {
   main {
      width: 100%;
      height:100%;
   }
   .contentDE, .contentIT, .contentFR {
      width: 100%;
      height:100%;
   }
   .contentContactDE, .contentContactIT, .contentContactFR {
      height:max-content;
   }
   .contentContactDE form, .contentContactIT form, .contentContactFR form {
      height:max-content;   
   }
   .contentContactDE table, .contentContactIT table, .contentContactFR table {
      width: max-content;
      height:max-content;
      margin: 0 auto;
   }
   .contentImpressumDE, .contentImpressumIT, .contentImpressumFR {
      height:13em;
   }
   .contentHomeDE, .contentHomeIT, .contentHomeFR {
      height:15em;
   }
   .desktop {
      display:none;
   }
   .menueMobile{
      display: block;
   }
   .pfeiltoLeft {
      width:7em;
      bottom:5%;
      left:10%;
      position:fixed;
      z-index: 1;
   } 
   .pfeiltoRight {
      width:7em;
      bottom:5%;
      right:10%;
      position:fixed;
      z-index: 1;
   }
   .spam {
      width:min-content;
      margin:0 auto;
   }
}