body {
	 font-family: Arial, Helvetica, sans-serif; }


.fett { font-weight: bold     }


 h1 { 
       background-color: black;
       color: white;
	   font-size : 2.5em ;
	   margin-bottom : 0px ;
	   margin-top :  0px  ;
	   font: Arial, sans-serif;
	   padding-top : 0.3em ;
	   padding-bottom: 0.2em;
	   padding-left : 0.2em;
    }
	
	 h2 { 
       background-color: black;
       color: white;
	   font-size : 1em;                         /*    1em */
	   margin-top : 0px;
	   font: Arial, sans-serif;
	   padding-top : 0.3em ;
	   padding-bottom: 0.2em;
	   padding-left : 0.2em;
    }
	


	
  .butt {
  background-color: #000090 ;
  border: none;
  color: white;
  padding: 25px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
   width: 20%;
  height: 30px;
  font-size: 1.5em;

	}
	.buttB 
	{   width: 30%;	}
	.buttK
	{width: 16%;}
	
  .Butt1	{
	background-color: #0000FF ;}  
	
	
	/* Handy 60..62, in beiden */
	


	
@media (max-width: 65em)   {
	.flexi {
  display: flex;
  gap: 0em 3em;	

 flex-direction: column; 
 .big= 100%  }
 .dsk { display : none; } 
<!-- .gross {  font-size:2em;}    -->

  h1  {font-size : 3em } 			
 h2  {font-size : 1.5em } 	
 body {
	 font-family: Arial, Helvetica, sans-serif;
	 font-size: 1.5em;
}
 fg  {  font-size : 2 em}

  
}

	
@media (max-width: 100em) and (min-width : 65em ) {
	.flexi {
  display: flex;
  gap: 3em 3em; 
  flex-direction: row; }
 .dsg { 
	       display : none;  } 
}


  


@media (min-width: 100em) {
	.flexi {
  display: flex;
  gap: 10em 10em;
  flex-direction: row; }
  .dsg { 
	       display : none;  }

}


.rechts {
  float: right;}
  
.links {
  float: left;}


	
	
  /* #########################################################  Route desktop ####################################################### */
	
@media  (min-width : 65em ) {
.container { 
  height:100vh; 
  display: grid; 
  grid-template-rows: 1fr 2fr 1fr 1fr; 
  grid-template-columns: 15% 13%  1fr 2% 12% 2% 12% 5px;   

  column-gap : 0; 
} 


@media (min-width: 90em) {
.container
 {grid-template-columns: 15% 13%  1fr 2% 20% 2% 20% 10px }     <!-- 506px>
} 
 
karte {
  grid-column-start:3; 
  grid-column-end:4; 
  grid-row-start:1; 
  grid-row-end:5; 
}

header { 
  background:black; 
  grid-column-start:1; 
  grid-column-end:9; 
  grid-row-start:1; 
  grid-row-end:2; 
} 
headerR  {
	background:black; 
    grid-column-start:4; 
    grid-column-end:10; 
    grid-row-start:1; 
    grid-row-end:2; 

} 

menu { 
  background:white; 
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:2; 
  grid-row-end:4; 

} 
Orte { 
  background:white; 
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:2; 
  grid-row-end:4; 
} 



rechts1
{ 
  background:white; 
  grid-column-start:5; 
  grid-column-end:6; 
  grid-row-start:2; 
  grid-row-end:4; 
  row-gap : 2em;
  column-gap : 2em;
}

rechts2
{ 
  background:white; 
  grid-column-start:7; 
  grid-column-end:8; 
  grid-row-start:2; 
  grid-row-end:4; 
  row-gap : 2em;
  column-gap : 2em;
}

headerH { display: none } 
OrteL { display: none }
OrteR { display: none }
MenuH { display: none }
KarteH {display: none}
Bildunten {display : none}
}

 



	


  /* #########################################################  Route handy ####################################################### */
	
@media  (max-width : 65em ) {
	
.container { 
  height:100vh; 
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  grid-template-columns: 50% 50% ;  
  column-gap : 0; 
} 

 
karte { display:none}
header {  display : none;} 
headerR  {	display : none}
Orte {   display: none} 
Menu {   display: none} 

KarteH {
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:4; 
  grid-row-end:5; 
}





headerH {
	background:white; 
    grid-column-start:1; 
    grid-column-end:3; 
    grid-row-start:1; 
    grid-row-end:2; 
} 


menuH { 
  background:white; 
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:2; 
  grid-row-end:3; 

} 
Orte {  display: none} 

OrteL { 
  background:white; 
  grid-column-start:1; 
  grid-column-end:2; 
  grid-row-start:3; 
  grid-row-end:4;  
  font-size: 2em;
} 
OrteR { 
  background:white; 
  grid-column-start:2; 
  grid-column-end:3; 
  grid-row-start:3; 
  grid-row-end:4;  
  font-size: 2em;
} 

 rechts1 { 
   background:white; 
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:5; 
  grid-row-end:6;  
  font-size: 2em;
  }

rechts2 { 
   background:white; 
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:6; 
  grid-row-end:7;  
  font-size: 2em;
  }
Bildunten  {
  grid-column-start:1; 
  grid-column-end:3; 
  grid-row-start:7; 
  grid-row-end:8; 
}


}