/* Stylesheet Becker-gtue.de */

/* kalender.php *******************************************************************/

  /* Tabellenzellen mit Datum, Tabellenkopf   */
  .datum {
      background-color:#EAEDFF;
      color: #000000;
      text-align: center;
      float: left; 
      width: 81px;
      height: 35px;
      padding:2px; 
      border:1px solid;
      }
      
  .datum_m {
      background-color:#EAEDFF;
      color: #000000;
      text-align: center;
      float: left; 
      width: 65px;
      height: 34px;
      padding:2px; 
      border:1px solid;
      }    

  /* Tabellenzellen Überschrift Uhrzeit, Tabellenkopf   */
  .uhrzeit {
      background-color:#EAEDFF;
      color:#000000;
      text-align: center;
      vertical-align:middle; 
      border:1px solid;
      height: 39px;
      line-height: 39px;
      }
      
   .uhrzeit_r {
      visibility: visible;
      background-color:#EAEDFF;
      color:#000000;
      text-align: center;
      vertical-align:middle; 
      border:1px solid;
      height: 39px;
      line-height: 39px;
      }      

  /* Tabellenzellen mit den Termin-Uhrzeiten (linke Spalte)*/
  .zeit {
      background-color:#1200C0;
      color:#ffffff;
      text-align: center;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;
      margin-top: 2px;
      }
      
   .zeit_r {
      visibility: visible;   
      background-color:#1200C0;
      color:#ffffff;
      text-align: center;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;
      margin-top: 2px;
      }   

  /* Tabellenzelle links oben */
  .leerfeld {
      background-color:#EAEDFF;
      color:#000000;
      text-align: center;
      vertical-align:middle; 
      border:1px solid;
      height: 30px;
      line-height: 30px;
      }


  /* Tabellenzellen fuer Wochenende, Pausen und Geschaeftsschluss */
  .feld_nix {
      background-color:#8376FF;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 79px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;  
      margin-top: 2px;   
      margin-left: 2px;
  }


  /* Tabellenzellen mit reservierten Terminen */
  .feld_res {
      background-color:#FF0000;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 79px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;      
      margin-top: 2px;
      margin-left: 2px;
  }  
  
  
  /* Tabellenzellen mit freien Terminen */
  .feld_frei {
      background-color:#00CC00;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 79px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;      
      margin-top: 2px;
      margin-left: 2px;
  }
  
  .feld_nix_m {
      background-color:#8376FF;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 63px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;  
      margin-top: 2px;   
      margin-left: 2px;
  }


  /* Tabellenzellen mit reservierten Terminen */
  .feld_res_m {
      background-color:#FF0000;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 63px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;      
      margin-top: 2px;
      margin-left: 2px;
  }  
  
  
  /* Tabellenzellen mit freien Terminen */
  .feld_frei_m {
      background-color:#00CC00;
      color:#FFFFFF;
      text-align: center;
      vertical-align: middle;
      float: left; 
      width: 63px;
      height: 20px;
      line-height: 20px;       
      padding:2px; 
      border:1px solid;      
      margin-top: 2px;
      margin-left: 2px;
  }  

 /* Kalenderfeld */
  #kalenderfeld1_m {
    display: initial;
    float:left; 
    text-align:center; 
    padding:0px; 
    padding-right:3px; 
    border:1px solid; 
    border-color:#33FF00;
    width: 623px; 
    top: 0px; 
    left: 0px; 
    overflow: hidden; 
    position: relative;
  }    
    
.box_m {
    visibility: hidden;
    position: absolute;
    float:left;
    text-align:center;
    padding:0px;
    border:none;
    border-color:#33FF00;
    width: 213px;
    top: 0px;
    left: 300%;
}

.box_pc {
    position: absolute;
    float:left;
    text-align:center;
    padding:0px;
    border:none;
    border-color:#33FF00;
    width: 261px;
    top: 0px;
    left: 300%;
}

 /* Navigationsfeld im Kalender */
  #navfeld {float:left; text-align:center; padding:10px; margin-right:10px; border:1px solid; border-color:#33FF00; height:120px; width: 150px;}

 /* Legendenfeld im Kalender */
  #legfeld {position:absolute; padding:10px; border:1px solid; border-color:#33FF00; width: 150px; top: 330px; left: 10px;}
  #legfeld2 {display: none; float:left; padding:10px; padding-bottom:0; margin-left:5px; margin-bottom:10px; min-height:130px; border:1px solid; border-color:#33FF00;}
 
 
@media only screen and (max-width: 1000px) {
  #legfeld {display: none;}
  #legfeld2 {display: inline;}
}

  /* Hinweistext bei Legende im Kalender */
.legende {
	text-decoration: none;
  color:#000000;
	font-size:17px;
	text-align: center;
	margin-bottom:0;
	margin-top:7px;
	
}

/*--------------------------------------------------------------------------------------------*/

/* reservierung.php ********************************************************/

.aussenrahmen {
      padding:10px; 
      border:1px solid; 
      border-color:#FFFF00; 
      max-width: 785px; 
}  

.aussenrahmenapp {
      padding:0px; 
      border:1px solid; 
      border-color:#FFFF00; 
      max-width: 785px; 
}  

.terminfeld {
      text-align:center; 
      padding:10px; 
      max-width: 765px;
      top: 10px; 
      left: 10px;
}      

.terminfeldapp {
      text-align:center; 
      padding:0px; 
      max-width: 765px;
      top: 0px; 
      left: 10px;
}      

.hinweisfeld {
      text-align:left; 
      padding:10px; 
      max-width: 765px; 
      top: 10px; 
      left: 10px;
}


  /* Buttons am rechten Rand */
.feldrechts {
      color:#000000;
      text-align: center;
      vertical-align: middle;
      float: right; 
      height: 30px;
      line-height: 30px;                
}


  /* linkes Feld */
.feldlinks {
      color:#000000;
      text-align: left;
      vertical-align: top;
      float: left; 
      width: 180px;
      line-height: 30px;               
}

  /* mittleres Feld Auswahl */
.feldmitte_a {
      color:#000000;
      text-align: left;
      padding-top:3px;
      vertical-align: middle;
      float: left; 
      line-height: 30px;         
}

  /* mittleres Feld Liste */
.feldmitte_b {
      color:#000000;
      text-align: left;
      padding-top:8px;
      vertical-align: middle;
      float: left;       
}

  /* Feld Auswahl Fahrzeugart und Dienstleistung*/
.auswahlfeld_a {
      text-align: left; 
      vertical-align: middle;
      padding:10px; 
      background-color:#F4FA58; 
      line-height: 30px;  
      max-width: 765px; 
      left: 10px;
      overflow:hidden;
}

  /* Feld ausgewählte Fahrzeugart und  Dienstleistung*/
.auswahlfeld_b {
      text-align: left; 
      vertical-align: middle;
      padding:10px; 
      margin-bottom: 3px;
      background-color:#9FF781; 
      max-width: 765px; 
      left: 10px;
      overflow:hidden;
}

  /* Feld für Kontaktdaten*/
.absenderfeld {
     text-align:left; 
     padding:10px; 
     background-color:#F4FA58; 
     max-width: 765px; 
     top: 10px; 
     left: 10px;
}

.absenderfeldapp {
     text-align:left; 
     padding:10px; 
     background-color:#F4FA58; 
     max-width: 765px; 
     top: 0px; 
     left: 10px;
}


/*-----------------------------------------------------------------------------------------*/

/* header.inc.php, preisfinder.php (navi) *******************#innenrahmen { float: left; max-width: 960px; margin-left:auto; margin-right:auto;border:1px solid; border-color:red;}*************************************/
#logo {position:absolute;top:0px;right:30px;height:80px;z-index:3;}
#navi {position:relative;top:12px; left:0px; width: 120px; padding:0px; float: left;}
#navi_innen {width: 120px; margin: 0px auto;}
#inhalt {position:absolute;top:0px;left:130px; max-width: 815px; z-index:1; padding:10px;}
#inhalt_hoch {position:absolute;top:0px;left:130px; max-width: 815px; z-index:1; padding:10px;}
#seitenrahmen {position:relative; max-width: 960px; margin-left:auto; margin-right:auto;} /*-- min-width: 319px; 472px --*/

/* Format für Navi-Leiste */	
		div.td {
			display: table-cell;
			text-align:center;
			vertical-align: middle; 
			background-color: #C0C0C0; 
			height:40px;
			width: 90px;
		}
		div.tr {
			float: left;
			margin-bottom:  20px;
			margin-left:  20px;
		}

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

/*  linke Spalte (Navigation) */
p.navi {
	margin:0px;
	padding-top:4px;
	padding-right:0px;
	padding-bottom:5px;
	padding-left:6px;
}
a.navi {
	text-decoration:none;
  color:#000000;
}
td.navi {
  border-top:1px solid #E6E6E6;
}

a.navi:link{color:#0000FF;text-decoration: none;}
a.navi:visited{color:#0000FF;text-decoration: none;}
a.navi:hover{color: #FF0000; font-weight: bold;text-decoration: none;}
a.navi:active{color:#0000FF;text-decoration: none;}
/*-----------------------------------------------------------------------------------------*/

/* index.php, preise.php (neu) ***************************************************************/
a.neu:link{color:#BA002E;text-decoration: none;}
a.neu:visited{color:#BA002E;text-decoration: none;}
a.neu:hover{color: #BA002E; font-weight: bold; text-decoration: underline;}
a.neu:active{color:#BA002E;text-decoration: none;}

/* Tabelle oben für Hinweis und Leistungen */
.indexoben {
      width:100%;
      padding: 5px;
      float: left; 
      padding-bottom: 10px;  
}

/* Tabelle unten für GTÜ-Service */
.indexunten {
      padding: 5px;
      float: left;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around; 
      background-color:#CACACA; 
}

/* Tabellenspalte oben für Hinweis */
.indexspalte {
      text-align: center;
      background-color:#ACFA58; 
      padding: 2% 0;
      float: left; 
      width: 250px;
      margin-right: 20px;      
}

/* Tabellenspalte oben für Bereich Leistungen */
.leistungen {
      width: 100%;
      margin: 0px auto;   
}

@media only screen and (max-width: 920px) {
   .indexspalte {
      text-align: center;
      background-color:#ACFA58;       
      padding: 2% 0;
      float: left; 
      width: 100%;
      margin-bottom: 20px;    
   }
   .leistungen {
      width: 480px;
      margin: 0px auto;   
   }
}

/* Tabellenspalte oben für  Leistungen */
.indexspalte2 {
      text-align: left;
      float: left; 
      width: 230px; 
      padding-bottom: 15px;   
}

/* Tabellenspalte unten für  GTÜ-Service */
.indexspalte3 {
      text-align: left;
      float: left; 
      width:152px;
      height:299px;
      padding-left: 15px; 
      padding-right: 15px; 
      padding-top: 10px;
      padding-bottom: 10px;
}

/* Text Leistungen */
.angebot {
  font-size:12px;
	line-height:19px;
  margin:0px;
	padding-top:0px;
}

/* Abstände von Text-Block zu vorangehendem Block */

.top0px {
  margin:0px;
	padding-top:0px;
}

/* Kleiner Anrisstext auf der Homepage */
.anriss {
  font-size:11px;
	line-height:15px;
  margin:0px;
	padding-top:6px;
}
.anriss a { 
	color:#000000;
}

/* Bilder GTÜ-Services */
.imgbutton {
  border:1px solid; 
  border-color:#FFFFFF;
  width:150px;
  height:84px;
}

/* Farben und Abstände allgemein */
.red, td.red b { color:#BA002E; }

a.red {
  color:#BA002E;
}

/* hu_erinnerung.php ************entfällt evtl.*****************************************/
/* Stern für Pflichfeld */
.stern {
  color:#EE0000;
	font-weight:bold;
	font-family:arial black,arial,sans-serif;
}

/*-------------------------------------------------------------------------------------------*/

/* preisfinder.php ****************************************************/
a.formulartext{
  color:#222222;
  font-family:arial,sans-serif;
  font-size:15px;
}
a.formulartext:link{color:#222222;text-decoration: none;}
a.formulartext:visited{color:#222222;text-decoration: none;}
a.formulartext:hover{color: #222222;text-decoration: none;}
a.formulartext:active{color:#222222;text-decoration: none;}
/*-----------------------------------------------------------------------------------*/

/* faq.php **************************************************************************/
#faq {top:15px; left:40px; padding:10px; font-size:16px}

.headline_grey {
	font-family:arial,sans-serif;
	font-size:18px;
	font-weight:bold;
	line-height:22px;
	color:#777777;
}

a.faq-text{
  color:#222222;
  font-family:arial,sans-serif;
  font-size:14px;
}
a.faq-text:link{color:#222222;text-decoration: none;}
a.faq-text:visited{color:#222222;text-decoration: none;}
a.faq-text:hover{color: #222222;text-decoration: none;}
a.faq-text:active{color:#222222;text-decoration: none;}
/*-----------------------------------------------------------------------------------------------*/

/* allgemein ******************************************/
body, p, td {
	font-family:arial,sans-serif;
	font-size:15px;
	color:#000000;
}

/* Links allgemein */
a {
  color:#BA002E;
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
}
/*-----------------------------------------------------------------------------------------------------*/

@media only screen and (max-width: 760px) {
   #navi {position:absolute; top:15px; left:0px; width: 100%; padding:0px;}
   #navi_innen {width: 570px; margin: 0px auto;}
   #inhalt {position:absolute;top:120px;left:0px; max-width: 825px; z-index:1; padding:10px;}
   #inhalt_hoch {position:absolute;top:70px;left:0px; max-width: 825px; z-index:1; padding:10px;}
   /* Tabelle oben für Hinweis und Leistungen */
    .indexoben {
          padding: 0px;
          float: left; 
          margin-left:  0px;
          max-width: 980px;
          padding-bottom: 10px;
          padding-top: 15px; 
    }

    /* Tabelle oben für GTÜ-Service */
    .indexunten {
          padding: 5px;
          float: left; 
          margin-left:  0px;
          max-width: 990px;   
          background-color:#CACACA; 
    }
	}
@media only screen and (max-width: 600px) {
   #navi_innen {width: 350px; margin: 0px auto;}
   #inhalt {position:absolute;top:180px;left:0px; max-width: 825px; z-index:1; padding:0px;}
	}	
@media only screen and (max-width: 500px) {
   .leistungen {width: 240px;; margin: 0px auto;}
	}
	
/*-----------------------------------------------------------------------------------------------------------------------------------------------------*/
/* Neue Seite 2026*/

.container {
  position: relative;
  width: 100%;
  height: 200px;
  line-height: 200px;
  display: flex;
  justify-content: flex-end;
  font-size: 80px;
  font-family:Arial;
  color:#444444;
  font-weight:bold;
}

.bannertext1 {
  position: absolute;
  right: 330px;
  visibility: visible;
}
.bannertext2 {
  position: absolute;
  right: 330px;
  visibility: hidden;
}  
.bannertext3 {
  position: absolute;
  right: 330px;
  visibility: hidden;
}   

embed.grauverlauf { 
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;      /* Verhindert Lücken durch Inline-Verhalten */
  margin: 0;           /* Entfernt Außenabstand */
  padding: 0;          /* Entfernt Innenabstand */
}

embed.logo { 
  height: 100%;
  object-fit: contain;
  display: block;      /* Verhindert Lücken durch Inline-Verhalten */
  margin: 0;           /* Entfernt Außenabstand */
  padding: 0;          /* Entfernt Innenabstand */
  border: none;
}


@media (max-width: 1200px) {
  .container {
    height: 180px;
    line-height: 180px;
    font-size: 72px;
  }  
  .bannertext1 {
    right: 300px;
  }
  .bannertext2 {
    right: 300px;
  }
  .bannertext3 {
    right: 300px;
  } 
}


@media (max-width: 1100px) {
  .container {
    height: 140px;
    line-height: 140px;
    font-size: 56px;
  }  
  .bannertext1 {
    right: 233px;
    visibility: visible;
  }
  .bannertext2 {
    right: 233px;
    visibility: hidden;
  } 
  .bannertext3 {
    right: 233px;
    visibility: hidden;
  }          
}


@media (orientation: portrait) and (max-width: 850px) {
  .container {
    height: 140px;
    line-height: 140px;
    font-size: 56px;
  }  
  .bannertext1 {
    right: 233px;
    visibility: hidden;
  }
  .bannertext2 {
    right: 233px;
    visibility: visible;
  } 
  .bannertext3 {
    right: 233px;
    visibility: hidden;
  }          
}

@media (orientation: landscape) and (max-width: 850px) {
  .container {
    height: 100px;
    line-height: 100px;
    font-size: 40px;
  }  
  .bannertext1 {
    right: 166px;
    visibility: visible;
  }
  .bannertext2 {
    right: 166px;
    visibility: hidden;
  } 
  .bannertext3 {
    right: 166px;
    visibility: hidden;
  }          
}

@media (orientation: portrait) and (max-width: 720px) {
  .container {
    height: 100px;
    line-height: 100px;
    font-size: 40px;
  }  
  .bannertext1 {
    right: 166px;
    visibility: hidden;
  }
  .bannertext2 {
    right: 166px;
    visibility: visible;
  } 
  .bannertext3 {
    right: 166px;
    visibility: hidden;
  }          
}

@media (orientation: landscape) and (max-width: 620px) {
  .container {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
  }  
  .bannertext1 {
    right: 125px;
    visibility: visible;
  }
  .bannertext2 {
    right: 125px;
    visibility: hidden;
  } 
  .bannertext3 {
    right: 125px;
    visibility: hidden;
  }          
}

@media (orientation: portrait) and (max-width: 520px) {
  .container {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
  }  
  .bannertext1 {
    right: 125px;
    visibility: hidden;
  }
  .bannertext2 {
    right: 125px;
    visibility: visible;
  } 
  .bannertext3 {
    right: 125px;
    visibility: hidden;
  }          
}

@media (orientation: landscape) and (max-width: 450px) {
  .container {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
  }  
  .bannertext1 {
    right: 125px;
    visibility: hidden;
  }
  .bannertext2 {
    right: 125px;
    visibility: visible;
  } 
  .bannertext3 {
    right: 125px;
    visibility: hidden;
  }          
}

@media (max-width: 350px) {
  .container {
    height: 80px;
    line-height: 80px;
    font-size: 28px;
  }  
  .bannertext1 {
    right: 125px;
    visibility: hidden;
  }
  .bannertext2 {
    right: 125px;
    visibility: hidden;
  } 
  .bannertext3 {
    right: 125px;
    visibility: visible;
  }          
}

/*-- _m Seite --*/

@media (orientation: portrait) and (max-width: 660px) {		
  #kalenderfeld1_m {
  width: 472px;
  }
  .box_m {
    visibility: visible;
  }
  .box_pc {
    visibility: hidden;
  }
  .zeitleiste_r {
    visibility: hidden;
  } 
  .uhrzeit_r {
    visibility: hidden;
  }
  .zeit_r {
    visibility: hidden;
  }
}