/* --- CSS-Styles Homepage Metzenauer.com --- */

*{
   margin: 0;
   padding: 0;
}

body{
   background-color: #F9F9F9;
   margin: 0px;
   color: #606060;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
   font-weight: 300;
   font-size: 22px;
   min-width: 500px;
   max-width: 100%;
   overflow-x: hidden;
   hyphens: auto;
}

/* --- Email Links --- */
a[href^="mailto:"]{
   color: #B20000;
   }

.maintext {
   text-align: justify;
   font-size: 24px;
   padding-left: 0%; 
   padding-right: 0%;
}

.contentpicture {
   display: block;
   padding-top: 0px;
   max-width: 100%;
   height:auto;
   width:auto;
}

/* -- Buttons --- */
.mybutton {
  font-size: 28px; 
  border: #B20000; 
  background-color:#B20000; 
  border-radius:10px;
  padding: 8px 16px;
  color: #FFFFFF;
  cursor:pointer;
}

.offerheadertextbox {
   text-align: center;
   background-color: #b20000;
   color: #f9f9f9; 
   position: relative; 
   height: 80px;
}

.offerheadertext {
   font-size: 28px; 
   position: absolute; 
   top: 3px; 
   left: 0; 
   right: 0; 
   margin: auto;
}

.offertext {
   padding-top: 18px; 
   padding-bottom: 18px;
}

.offeroptionicon {
   float: left;
   display: block; 
   padding-top: 12px; 
   width: 40px; 
   height: 40px;
}

.offerexpandicon{
   width: 25px; 
   height: 25px; 
   position: absolute; 
   bottom: 20px; 
   right: 20px;
}

.offerrequestbutton {
  font-size: 24px; 
  position: absolute; 
  top: -5px; 
  right: 0px;
  border: #B20000; 
  background-color:#B20000; 
  border-radius:10px;
  padding: 8px 16px;
  color: #FFFFFF;
  cursor:pointer;
}

.linkbutton {
   max-height:50px; 
   vertical-align:middle; 
}
/* ----- Hauptmenue ------------------------------------------------------------------------------------------ */
.toggler {
   z-index: 2;
   position: absolute;
   height: 70px;
   width: 70px;
   top: 0;
   left: 0;
   cursor: pointer;
   opacity: 0;
}

.hamburger {
   position: absolute;
   height: 60px;
   width: 60px;
   top: 32px;
   left: 12px;
}

/* CREATING THE MIDDLE LINE OF THE HAMBURGER */
.hamburger > div {
   position: relative;
   height: 5px;
   width: 80%;
   top: 0;
   left: 0;
   background: #B20000; 
   transition: all  0.4s ease;
}

/* CREATING THE TOP AND BOTTOM LINES */
.hamburger > div::before,
.hamburger > div::after {
   content: '';
   position: absolute;
   height: 5px;
   width: 100%;
   top: -12px;
   background: #B20000; 
   transition: all  0.4s ease;
}

.hamburger > div::after{
   top: 12px;
}

/* IF THE TOGGLER IS IN ITS CHECKED STATE, THEN SETTING THE BACKGROUND OF THE MIDDLE LINE TO BACKGROUND COLOR (= INVISIBLE) */
.toggler:checked + .hamburger > div {
   background: #F9F9F9;
}

/* AND ROTATING THE TOP AND BOTTOM LINES :  */
.toggler:checked + .hamburger > div::before {
   top: 0;
   transform: rotate(45deg);
   background: #B20000; 
}

.toggler:checked + .hamburger > div::after {
   top: 0;
   transform: rotate(135deg);
   background: #B20000; 
}


/* Oberer Bereich des Headers mit Hamburger und Symbolen */
.menu{
   z-index: 2;
   background: #F9F9F9;
   border-bottom: 1px solid #B20000; 
   top: 70px;
   height: 70px;
   width: 100%;
}

/* DISBALED: IF THE TOGGLER IS CHECKED, THEN INCREASE THE WIDTH OF THE MENU TO 30% , CREATING A SMOOTH EFFECT :  */
.toggler:checked ~ .menu{
   z-index:2; /* nicht notwendig */
}

/* STYLING THE LIST :  */
.menu >  div > ul{
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 70px;
   left: 0;
   right: 0;
   padding-left: 10px;
   border: 1px solid  #B20000; 
   background: #F9F9F9;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.5s ease-in;
}

.menu > div > ul > li{
   list-style: none;
   padding: 0.5rem;
}

.menu > div > ul > li > a{  
   color: #B20000; 
   text-decoration: none;
   font-size: 36px;
   font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

/* WHEN THE TOGGLER IS CHECKED, CHANGE THE VISIBILITY TO VISIBLE :  */
.toggler:checked ~ .menu > div > ul{
   visibility: visible;
   opacity: 1;
   z-index: 2;
}

.toggler:checked ~ .menu > div > ul > li > a:hover{
   font-weight: 700; 
}


/* ----- Ende Hauptmenue ------------------------------------------------------------------------------------- */

/* --- Logo rechts oben --- */
.logo {
   position:absolute;right:25px;top:5px;
   }

.flagDE {
   position:absolute;right:200px;top:20px;
   }

.flagEN {
   position:absolute;right:125px;top:20px;
   }

/* ----- Google Rating ------------------------------------------------------------------------------------- */

.googlerating-container {
   position: relative; 
   margin: auto;
   z-index:0;
}

.googlerating-item {
   display: none;
   z-index: 0;
}

/* Number text (1/3 etc) */
.googlerating-numbertext {
   color: #606060;
   font-size: 20px;
   position: absolute;
   right: 40px;
   bottom: 25px;
}
         
.googlerating-imgtext {
   font-size: 24px;
   position: absolute;
   left: 0px;
   right: 0px;
   bottom: 100px;
   text-align: center;
}

.googlerating-img {
   z-index: 0;
   width: 600px; 
   border: 1px solid #B20000;
   border-radius: 10px;
}

/* Fading animation */
.anim {
   animation-name: anim;
   animation-duration: 3s;
}
 
@keyframes anim {
   from {opacity: 0.2;}
   to {opacity: 1;}
}

 /* ----- Lauftext ------------------------------------------------------------------------------------- */   
 .marquee {
  width: 100%;
  line-height: 3rem;
  background-color: #b20000;
  color: #F9F9F9;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}
.marquee > p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 25s linear infinite;
}
@keyframes marquee {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-100%, 0); }
}