
	.frame {
		position: relative;
		top: 70px;
        display: none;
	}

    #testJS { padding: 30px; display: block; }


    #mobileMenu { position: fixed; z-index: 2; width: 100%; }
    #navBar { position: fixed; z-index: 2; width: 100%; }

    .carouselImage { 
        position: absolute;
        top: 0px;
        display: none;
        width: 100%;
        height: 100%; 
    }


    .carouselImage img { 
        width: 100%; 
        height: 100%;
        object-fit: cover;
        object-position: center center;
    }

	#startContainer {
        height: 100%;
    }

    #startterminContainer h1, h2, h3 {
        font-size: 20px;
    }

    .ueberschrift {
         border-width: 1px; border-bottom-style: solid; border-color: brown; padding-top: 10px; 
    }

    img {
        width: 90%;
        margin: auto;
    }


    #endeContainer {
        display: flex;
    }



@media (min-width:601px) {
	#startContainer {
		display: grid;
 		grid-template-columns: 1fr 50fr 1fr 12fr 1fr;	
 		grid-template-rows: 1fr 15fr 30fr 40fr 1fr 4fr 1fr;	
	    gap: 10px;
	}

   #startWillkommenCaption {
  		grid-column: 2 / span 3;
  		grid-row: 1; 
    }

   #startCarousel {
  		grid-column: 1 / span 5;
  		grid-row: 2 / span 3; 
    }

   #startTermin { 
       	grid-column: 4;
  		grid-row: 3;
  		background-color: white;
        z-index: 2;
   }

   #startWillkommenText {
   	    grid-column: 2 / span 3;
  		grid-row: 6;   	
   }

   #heikuLogo {
        max-width: 250px;
   }

   #aboutusText #endeContainer{
        padding: 10px 0px 10px 0px;
    }


   h2 {
/*        padding-right: 20px; */
        padding-right: 10px;
    }

   h3 {
        font-style: italic;
/*        padding-right: 20px; */
        padding-right: 10px;
    }
    
    .blogText {
        vertical-align: top;
        width: 100%;
/*        padding-right: 20px; */
    }


    .tabelle2 { 
	        display: grid;
	        grid-template-columns: 5fr 5fr;	
            gap: 10px;
            padding: 10px;
    }

    .tabellenZeile2Links { 
	    grid-column: 1;
    }

    .tabellenZeile2Rechts { 
	    grid-column: 2;
    }

    .imageBox2 {
        display: block;
        justify-content: left;
        padding: 20px 0px 10px 0px;
    }

    .imageBox2 img {
        padding: 0px 20px 0px 0px;
        max-height: 300px;
        max-width: 48%;
        width: auto;
    }

    .imageLine {
        overflow: auto;
        display: flex;
    }

    .imageBox1 {
        display: block;
        padding: 20px 0px 10px 0px;
        height: 300px;
        max-width: 50%;
        object-fit: contain;
    }

    .imageBox1 img {
        padding: 0px 20px 0px 0px;
    }
}



@media (max-width:600px) {
	#startContainer {
		display: grid;
 		grid-template-columns: 32fr;	
 		grid-template-rows: 1fr 8fr 2fr;	
	    gap: 10px;
	}

   #startWillkommenCaption {
  		grid-column: 1;
  		grid-row: 1; 
    }

   #startCarousel {
  		grid-column: 1;
  		grid-row: 2; 
    }

   #startWillkommenText {
       	grid-column: 1;
  		grid-row: 3;   	
   }

   #startTermin { 
   	    display: none;   	
   }

   #aboutusText #endeContainer {
        padding: 10px 20px 10px 20px;
   }


   h2 {
        padding-left: 5px; 
        padding-right: 5px;
    }

   h3 {
        font-style: italic;
        padding-left: 5px; 
        padding-right: 5px;
    }
    
    .blogText {
        padding-left: 5px; 
        padding-right: 5px;
    }

    .tabelle2 { 
	    display: grid;
	    grid-template-columns: 25fr 25fr;	
        gap: 5px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .tabellenZeile2Links { 
	    grid-column: 1;
    }

    .tabellenZeile2Rechts { 
	    grid-column: 2;
    }

    .imageBox1 .imageBox2 {
        display: block;
        padding: 10px;
    }


    img {
        width: 90%;
        margin: auto;
        padding: 0px 10px 10px 10px;

    }
}  /* Ende Handy */





