* {
	margin: 0px;
	padding: 0px;  
  font-family:Arial, Helvetica, sans-serif; 
}

html {	
    width: auto;
    margin: 0px;
    padding: 0px;
    border: none;
    background-color: rgb(240, 240, 240);
}

/*-------------------------------- container - Beginn -------------------------------------------------------------------------------------------------------------------*/
.container {
    display:grid;    
    grid-template-rows: repeat(100, 1vh);
    grid-template-columns: repeat(100, 1vw);
}
/*-------------------------------- container - Ende --------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- wrapper - Beginn --------------------------------------------------------------------------------------------------------------------*/
.wrapper {
  display: grid;  
  grid-template-rows: repeat(100, 1vh);
  grid-template-columns: repeat(100, 1vw);
  grid-row-start: 1;
  grid-row-end: 13;
  grid-column-start:  1;
  grid-column-end: 101;
  background-color: rgb(34, 65, 117);
}
/*-------------------------------- wrapper - ENDE -----------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- headAsideLeft - Beginn ---------------------------------------------------------------------------------------------------------------*/
/*.headAsideLeft
{
  grid-column-start:  1;
  grid-column-end: 2;
}
/*-------------------------------- headAsideLeft - Ende -----------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- headAsideRight - Beginn --------------------------------------------------------------------------------------------------------------*/

/*.headAsideRight
{
  grid-column-start:  99;
  grid-column-end: 101;
}
/*-------------------------------- headAsideRight - Ende ----------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- header - Beginn ----------------------------------------------------------------------------------------------------------------------*/

.header {
    grid-column-start:  1;
    grid-column-end: 55;
    grid-row-start: 1;  
    grid-row-end: 60;    
    color:rgb(240, 240, 240);
    text-align: left;    
}

.HausArztPrax {   
    margin-top: 1vh;   
    font-size: 1.2em;    
    margin-left: 1vb;      
}
/*-------------------------------- header - Ende ------------------------------------------------------------------------------------------------------------------------*/
/*-------------------------------- nav - Beginn -------------------------------------------------------------------------------------------------------------------------*/

.nav {    
    grid-column-start: 67;
    grid-column-end: 101;
    grid-row-start: 6;
    grid-row-end: 60;    
    color:rgb(240, 240, 240);    
}

#start
{ 
 	background:url("./images/MENU_S_70p.png") center center no-repeat;
  top: 1vh;
	width: 105px;
	height: 7.4vh;		
	position: absolute;
	display:block;
	z-index:100;
	opacity:0;	
	cursor:pointer;	 
/*	filter:alpha(opwacity=0);*/	  
}

#startUpper
{
	background:url("./images/MENU_70p.png") center center no-repeat;
  top: 1vh;
	width: 105px;
	height: 7.4vh;		
	position:absolute;
	display:block;
	z-index:99;	
	opacity:1;
	cursor:pointer;
/*	filter:alpha(opacity=100);*/	  
}

#dropdown
{
	display:none;
	background-color: rgb(240, 240, 240);
	border: 1px rgb(34, 65, 117) solid;	
	/*width:210px;*/
  width: 14.4em;
	top: 6.6vh;
  /*margin-left: 1.9vw;*/
  position: absolute;
	font-size:0.9em;
	z-index:101;	
	opacity:1;  
/*	filter:alpha(opacity=100);*/	
  left: -12vb;
}

#start:hover div, #menu:hover div
{	
	display:block;
	text-decoration:none;	
}

#homemenu, #UnsereLeistungen, #UnsereSprachen, #ImpressumMenu, 
#DantenschutzMenu, #contactusmenu, #VideosprechstundeMenu
{
	color:rgb(34, 65, 117);	
	display:block;
	text-decoration:none;
}

#homemenu:link, #UnsereLeistungen:link, #UnsereSprachen:link, #ImpressumMenu:link,
#DantenschutzMenu:link, #contactusmenu:link, #VideosprechstundeMenu:link
{
	position:relative;	
	width:190px;
	display:block;
	padding:5px 5px 5px 5px;
	text-decoration:none;
}

#homemenu:hover, #UnsereLeistungen:hover, #UnsereSprachen:hover, #ImpressumMenu:hover,
#DantenschutzMenu:hover, #contactusmenu:hover, #VideosprechstundeMenu:hover,
#homemenu:active, #UnsereLeistungen:active, #UnsereSprachen:active, #ImpressumMenu:active,
#DantenschutzMenu:active, #contactusmenu:active, #VideosprechstundeMenu:active
{
  color: rgb(240, 240, 240);
	background-color:rgb(34, 65, 117);
  border: 2px rgb(240, 240, 240) solid;	
}

.headAsideLeft {
  display: none;
}

.headAsideRight {
  display: none;
}
/*-------------------------------- nav - Ende ---------------------------------------------------------------------------------------------------------------------------*/
/*################################ wrapper - ENDE #######################################################################################################################*/
/*-------------------------------- main - Beginn ------------------------------------------------------------------------------------------------------------------------*/
.main {
    grid-column-start: 2;
    grid-column-end: 99;
    grid-row-start: 14;
    grid-row-end: 96;
    color: rgb(34, 65, 117);
    font-size: 1em;    
    overflow: auto;    
}

.mainAsideLeft {    
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 2;
    grid-row-end: 3;    
}

.mainAsideRight {
    grid-column-start: 99;
    grid-column-end: 101;
    grid-row-start: 2;
    grid-row-end: 3;
}

#content {
  position: relative;  
  width: 95vw;
  top: 2vh;
  left: 1vw;
  right: 0vb;    
  text-align: left; 
}

p.contentHome {
   font-size: 1.2em;
   font-weight: bold;
   text-align: center;   
   padding: 0 0 0 1vw;
   border-bottom: 2px solid rgb(34, 65, 117);

}

.texte_Arzt
{  
  padding: 4vh 0 4vh 0;  
  border-bottom: 1px solid rgb(34, 65, 117);    
}

.texte_Adresse {
  padding: 4vh 0 4vh 0; 
  border-bottom: 1px solid rgb(34, 65, 117);
}

.texte_Tel_EMail {
  padding: 4vh 0 4vh 0; 
  border-bottom: 1px solid rgb(34, 65, 117);
}

.texte_Uni_Koeln {
  width: 95vw;
  padding: 4vh 0 4vh 0; 
  border-bottom: 1px solid rgb(34, 65, 117);
}

td.text1, td.text2
{
  font-weight:bold;  
}

td.text1, td.text3
{
	padding:0px 0px 0px 0px;
	width:50Vw;
	text-align:left;
	vertical-align:top;	  
}

td.text2, td.text4
{
	padding:0px 0px 0px 0px;
	width:50vw;
	text-align:right;
	vertical-align:top;	
}

td.text5
{
	padding:0px 0px 0px 0px;	
	text-align:left;
	vertical-align:top;	  
}

a.foot:link, a.foot:visited, a.foot:focus, a.foot:active
{
	font-family:Arial, Helvetica, sans-serif;
	font-size:1em;
	font-weight:lighter;
	text-decoration:none;	
	text-align:center; 
	color:rgb(240, 240, 240); 
  background-color:rgb(34, 65, 117);
}

a.foot:hover
{
	background-color:rgb(240, 240, 240); 
	color:rgb(34, 65, 117);
}

a.EMail:link, a.EMail:visited, a.EMail:focus, a.EMail:active, 
a.Lehrpraxis:link, a.Uni_Koeln:link, a.Videolink:link,
a.Lehrpraxis:visited, a.Uni_Koeln:visited, a.Videolink:visited,
a.Lehrpraxis:focus, a.Uni_Koeln:focus, a.Videolink:focus,
a.Lehrpraxis:active, a.Uni_Koeln:active, a.Videolink:active 
{
	color:rgb(34, 65, 117);
  background-color:rgb(240, 240, 240);
}

a.EMail:hover, a.Lehrpraxis:hover, a.Uni_Koeln:hover, a.Videolink:hover, .submiting
{
	background-color:rgb(34, 65, 117); 
	color:rgb(240, 240, 240);
}

hr {
  border: 1px solid rgb(34, 65, 117);
}

.ListLeistungen {  
  padding: 4vh 0 0 2vw; 
}

.lang {
  padding: 4vh 0 0 0;  
}

.LangText {
  text-align: left;
  padding: 0 0 0 2vw;
}

.impressumText {
  padding: 4vb 0 0 0;  
  width: 95vw;
}

td.impressumText1 {  
	text-align:left;
	vertical-align:top;	  
  font-weight:bold;
}

td.impressumText2 {
	text-align:left;
	vertical-align:top;	  
}

.qrVideoText {
  text-align: left;
  width: 96vw;
  padding: 0 0 0 0vb;
}

.QR {
  width: 42vw;
  height: auto;
  padding-left: 12.8vb;
  /*padding: 0 0 0 9vb;*/
}

.formular {
  font-size: 0.8em;
  padding: 2vh 0 0 0;  
}

.formTerminRezept {
  padding: 4vw 0 0 0;
}

.nachricht {
  width: 100%;  
}

#res
{
  border:none; 
  background-color:rgb(240, 240, 240);
  text-align:center; 
  border:none;  
}

.submiting {
  width: 35vw;
}

#arrowflash
{
  background:url("./images/redarrow.png") center center no-repeat;
  position:absolute;
  height:17px;
  width:46px;
  z-index:20;
}
/*-------------------------------- main - Ende --------------------------------------------------------------------------------------------------------------------------*/

/*-------------------------------- footer - Beginn ----------------------------------------------------------------------------------------------------------------------*/
.footer {
  grid-column-start: 1;
  grid-column-end: 101;
  /*grid-row-start: 3;
  grid-row-end: 4;*/

  grid-row-start: 96;
  grid-row-end: 101;

  background-color: rgb(34, 65, 117);
  color:rgb(240, 240, 240);
}
p.copyright {
  font-size: 0.7em;
  font-weight:lighter;
	text-align:center;
	right:auto;
	bottom:auto;	
	padding-top: 2vh;         

}

/*-------------------------------- footer - Ende --------------------------------------------------------------------------------------------------------------------------*/
/*################################ container - Ende #######################################################################################################################*/



/*################################# Styles für portrait schmaler Smartphones ##############################################################################################*/
/*------------------------------------------------------------------------------------------------------- @media (min-height: 384px) and (orientation: landscape) - BEGINN */
/* !!!! 384 / 2 = max-width: 192px bei 2x Skarierung !!!*/
@media (max-width: 192px) and (orientation: portrait) {
#start {
    background:url("./images/MENU_50p.png") center center no-repeat;
  }


#startUpper {
    background:url("./images/MENU_S_50p.png") center center no-repeat;
  }    
}
/*--------------------------------------------------------------------------------------------------------- @media (min-height: 384px) and (orientation: landscape) - ENDE */

/*################################# Styles für horizontal gedrehte Smartphones ############################################################################################*/
/*------------------------------------------------------------------------------- @media (min-height: 360px) and (max-width: 1000px) and (orientation: landscape) - BEGINN */
@media (min-height: 90px) and (max-height: 480px) and (max-width: 1000px) and (orientation: landscape) {
  /* Styles für das horizontal gedrehte Handy */

  .main {
    display:grid;    
    grid-template-rows: 0vh 100vh 0vh;
    grid-template-columns: repeat(100, 1%);
  }

  #start {
    background:url("./images/MENU_S_70p.png") center center no-repeat;
    top: -1vh; 
    left: 85vw;
    height: 16vh;
  }

  #startUpper {
    background:url("./images/MENU_70p.png") center center no-repeat;
    top: -1vh; 
    left: 85vw;
    height: 16vh;
  }

  #dropdown
  {    
    left: -15.5vw;  
    top: 15vh;    
  }

  .QR{
    width: 20vw;    
    padding-left: 37.7vw;
  }

  .wrapper{
    background-color:rgb(240, 240, 240);
  }

  .footer {
    display: none;
  }
}
/*----------------------------------------------------------------------------------- @media (min-height: 360px) and (max-width: 1000px) and (orientation: landscape) - ENDE */

/*################################# Styles für Displays und Tablets mit width <= 1280 #######################################################################################*/

/*------------------------------------------------------------ @media (min-width: 600px) and (max-width: 999px) and (min-height: 600px) and (orientation: portrait) - BEGINN */
@media (min-width: 600px) and (max-width: 999px) and (min-height: 600px) and (orientation: portrait) {
  #dropdown {    
    left: -14vw;  
    top: 6vh;    
    }
    
    .QR {
    width: 23vw;    
    padding-left: 36.3vw;
    }
  }
/*---------------------------------------------------------------- @media (min-width: 600px) and (max-width: 999px) and (min-height: 600px) and (orientation: portrait) - ENDE */

/*------------------------------------------------------------------------------------ @media (min-width: 700px) and (min-height: 1366px) and (orientation: portrait) - BEGINN */
@media (min-width: 700px) and (min-height: 1366px) and (orientation: portrait) {
  #dropdown {    
    left: -14vw;  
    top: 6vh;    
    }
    
    .QR {
    width: 23vw;    
    padding-left: 36.3vw;
    }
  }
/*-------------------------------------------------------------------------------------- @media (min-width: 700px) and (min-height: 1366px) and (orientation: portrait) - ENDE */

/*------------------------------------------------------------------------------------ @media (min-width: 2160px) and (min-height: 3840px) and (orientation: portrait) - BEGINN */
@media (min-width: 2160px) and (min-height: 3840px) and (orientation: portrait) {
  #dropdown {    
    left: 0vw;  
    top: 4.7vh;    
    }

  #start {
    background:url("./images/MENU_S.png") center center no-repeat;
    top: 1vh; 
    }

  #startUpper {
    background:url("./images/MENU.png") center center no-repeat;
    top: 1vh; 
    }

    .QR {
    width: 23vw;    
    padding-left: 36.3vw;
    }
  }
/*-------------------------------------------------------------------------------------- @media (min-width: 2160px) and (min-height: 3840px) and (orientation: portrait) - ENDE */

/*------------------------------------------------------------------------------------ @media (min-width: 1032px) and (min-height: 1376px) and (orientation: portrait) - BEGINN */
@media (min-width: 1032px) and (min-height: 1376px) and (orientation: portrait) {
  #dropdown {    
    left: 0vw;  
    top: 4.7vh;    
    }

  #start {
    background:url("./images/MENU_S.png") center center no-repeat;
    top: 1vh; 
    }

  #startUpper {
    background:url("./images/MENU.png") center center no-repeat;
    top: 1vh; 
    }

    .QR {
    width: 23vw;    
    padding-left: 36.3vw;
    }
  }
/*-------------------------------------------------------------------------------------- @media (min-width: 1032px) and (min-height: 1376px) and (orientation: portrait) - ENDE */

/*------------------------------------------------------------------------------------ @media (min-width: 1024px) and (min-height: 1366px) and (orientation: portrait) - BEGINN */
@media (min-width: 1024px) and (min-height: 1366px) and (orientation: portrait) {
  #dropdown {    
    left: 0vw;  
    top: 4.7vh;    
    }

  #start {
    background:url("./images/MENU_S.png") center center no-repeat;
    top: 1vh; 
    }

  #startUpper {
    background:url("./images/MENU.png") center center no-repeat;
    top: 1vh; 
    }

    .QR {
    width: 23vw;    
    padding-left: 36.3vw;
    }
  }
/*-------------------------------------------------------------------------------------- @media (min-width: 1024px) and (min-height: 1366px) and (orientation: portrait) - ENDE */

/*------------------------------------------------------------ @media (min-width: 700px) and (max-width: 1280px) and (min-height: 600px) and (orientation: landscape) - BEGINN */
@media (min-width: 700px) and (max-width: 1280px) and (min-height: 600px) and (orientation: landscape) {
  #dropdown {    
    left: -8vw;  
    top: 7.5vh;   
    }    
    
    .QR {
    width: 13vw;    
    padding-left: 41.3vw;
    }
  }
/*-------------------------------------------------------------- @media (min-width: 700px) and (max-width: 1280px) and (min-height: 600px) and (orientation: landscape) - ENDE */

/*-------------------------------------------------------------------------------------- @media (min-width: 600px) and (max-width: 1000px) and (orientation: portrait) - BEGINN */
@media (min-width: 600px) and (max-width: 1000px) and (orientation: portrait) {
  #dropdown {    
    left: -10vw;  
    top: 6vh;    
    }
    
    .QR {
    width: 16vw;    
    padding-left: 40vw;
    }
  }
/*---------------------------------------------------------------------------------------- @media (min-width: 600px) and (max-width: 1000px) and (orientation: portrait) - ENDE */

/*------------------------------------- @media (min-width: 800px) and (max-width: 1280px) and (min-height: 600px) and (max-height: 680px) and (orientation: landscape) - BEGINN */
@media (min-width: 800px) and (max-width: 1280px) and (min-height: 600px) and (max-height: 680px) and (orientation: landscape) {
  #start {
    background:url("./images/MENU_50p.png") center center no-repeat;
  }


  #startUpper {
    background:url("./images/MENU_S_50p.png") center center no-repeat;
  }    

  #dropdown {    
    left: -8vw;  
    top: 6.5vh;   
    }    
    
    .QR {
    width: 13vw;    
    padding-left: 41.3vw;
    }
  }
/*--------------------------------------------- (min-width: 800px) and (max-width: 1280px) and (min-height: 600px) and (max-height: 680px) and (orientation: landscape) - ENDE */

/*################################# Styles für Displays und Tablets >= 1280 ###################################################################################################*/

/*----------------------------------------------------------- @media (min-width: 1280px) and (min-height: 600px) and (max-height: 1000px) and (orientation: landscape) - BEGINN */
@media (min-width: 1280px) and (min-height: 600px) and (max-height: 1000px) and (orientation: landscape) {  
  
  .header {
    grid-column-start:  26;
    grid-column-end: 55;
  }
  
  #start {
    background:url("./images/MENU_70p.png") center center no-repeat;
  }


  #startUpper {
    background:url("./images/MENU_S_70p.png") center center no-repeat;
  }    

  #dropdown {    
    left: -8vw;  
    top: 6.5vh;   
    }    
  
  .HausArztPrax {     
    font-size: 1.4em;       
  }
    .main {
    grid-column-start: 25;
    grid-column-end: 75;   
    font-size: 1.3em;      
  }

  .mainAsideLeft {
    grid-column-start:  1;
    grid-column-end: 10;
    grid-row-start: 14;
    grid-row-end: 96;   
    background-color: rgb(240, 240, 240);     
  }

  #GinKgoLeft {
    background:url("./images/Shape_Ginkgo_75.png") center center no-repeat;
    position:relative;
    display:block;
    padding: 0 0 0 20vw;
    height:80vh;
    width: 8vw;   
    opacity: 0.1; 
  }
  .mainAsideRight {
    grid-column-start:  74;
    grid-column-end: 101;
    grid-row-start: 14;
    grid-row-end: 96;        
  }

  #GinKgoRight {
    background:url("./images/Shape_Ginkgo_R_75.png") center center no-repeat;
    position:relative;
    display:block;
    padding: 0 0 0 18vw;
    height:80vh;
    width: 8vw;
    opacity: 0.1; 
  }   
  
   #content {             
   margin-left: 0.8vw;
   width: 45vw;
  }  
  
  .contentHome {
    width: 47vw;     
  }

  p.contentHome {
    font-size: 1.1em;
  }

  .text1, .text2, .text3, .text4 {
    font-size: 0.9em;
  }

  .texte_Arzt, .texte_Adresse, .texte_Tel_EMail, .texte_Uni_Koeln, .ListLeistungen {  
    width: 48vw;   
    font-size: 0.9em; 
  }
  
  .lang {    
    width: 48vw;
    font-size: 0.8em;
  }

  .QR{
    width: 12vw;    
    padding-left: 18.3vw;
  }
 
  .impressumText{
    width: 48vw;
    font-size: 0.8em;
  }
 
  .formTerminRezept {
    width: 44vw;
    font-size: 0.8em;
  }

  .ListLeistungen {
    font-size: 0.8em;
  }

  p.copyright {
    font-size: 1.2em; 
  }
}
/*------------------------------------------------------------- @media (min-width: 1280px) and (min-height: 600px) and (max-height: 1000px) and (orientation: landscape) - ENDE */

/*------------------------------------------------------------------------------------ @media (min-width: 1280px) and (min-height: 1001) and (orientation: landscape) - BEGINN */
@media (min-width: 1280px) and (min-height: 1001px) and (orientation: landscape) {
  .header {
    grid-column-start:  30;
    grid-column-end: 55;
  }

  .HausArztPrax {       
    font-size: 1.8em;     
  }

  #start {
    background:url("./images/MENU_S.png") center center no-repeat;
    top: 1vh; 
  }

  #startUpper {
    background:url("./images/MENU.png") center center no-repeat;
    top: 1vh; 
  }

  #dropdown
  {    
    left: 0vw;  
    /*top: 5.5vh;    */
  }

  .main {
    grid-column-start: 29;
    grid-column-end: 73;   
    font-size: 1.3em;      
  }

  .mainAsideLeft {
    grid-column-start:  1;
    grid-column-end: 10;
    grid-row-start: 14;
    grid-row-end: 96;   
    background-color: rgb(240, 240, 240);     
  }

  #GinKgoLeft {
    background:url("./images/Shape_Ginkgo.png") center center no-repeat;
    position:relative;
    display:block;
    padding: 0 0 0 20vw;
    height:80vh;
    width: 8vw;   
    opacity: 0.1; 
  }
  .mainAsideRight {
    grid-column-start:  74;
    grid-column-end: 101;
    grid-row-start: 14;
    grid-row-end: 96;        
  }

  #GinKgoRight {
    background:url("./images/Shape_Ginkgo_R.png") center center no-repeat;
    position:relative;
    display:block;
    padding: 0 0 0 18vw;
    height:80vh;
    width: 8vw;
    opacity: 0.1; 
  }    

  #content {             
   margin-left: 0.8vw;
   width: 40vw;
  }  
  
  .contentHome {
    width: 39.5vw; 
  }

  .texte_Arzt, .texte_Adresse, .texte_Tel_EMail, .texte_Uni_Koeln, .ListLeistungen {  
    width: 40vw;    
  }
  
  .lang {    
    width: 40vw;
  }

  .QR{
    width: 10vw;    
    padding-left: 15.7vw;
  }
 
  .impressumText{
    width: 40vw;
  }
 
  .formTerminRezept {
    width: 40vw;
  }

  p.copyright {
    font-size: 1.2em; 
  }
}
/*-------------------------------------------------------------------------------------- @media (min-width: 1280px) and (min-height: 1001) and (orientation: landscape) - ENDE */

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