/*reset*/


* {
 padding: 0;
 margin: 0;
}

html, body {
	height: 100%;
	width: 100%;
}

.smoothscroll { scroll-behavior: smooth;}

img {
  max-width: 100%;
  height: auto;
}

.nicht_dargestellt {
display: none;
}

#wrapper {
	width: 100%;
	height: 100%;
	position: relative;
	clear: left;
}

#header {
	width: 100%;
	border-bottom: 2px solid black;
    background-color: white;
    position: fixed;
    top: 0px;
}


/* hide toggle */

.toggle {
    display: none;
  }

.navigation, .navigation-footer {
	display: flex;
	justify-content: flex-start;
	flex-direction: row;
    align-items: center;
	margin: 0 auto 0 auto;
    width: 1050px;
    height: 5rem;
}

.navigation li, .navigation-footer li {
    flex-basis: content;
	list-style-type: none;
	list-style-position: outside;
	list-style-image: none;
    padding: 1rem 1rem 1rem 1rem;
}

.navigation li a, .navigation-footer li a {
  display:inline-block;
  width: calc(100% - 2rem);
  color: black;
  text-align: center;
  text-decoration: none;
  border: none;
  height: auto;
}


#main {
    width: 100%;
    margin-top: calc(5rem + 2px);
}

article {    scroll-snap-align: start; 
    scroll-margin: 0;  /* nicht nötig */ }

.Textseite-Container {    
margin: 0 auto 0 auto;
    padding: 3rem 0 3rem 0   ;
    width: 1050px; }

.article-Inhalt { 	
    margin: 0 auto 0 auto;
    padding: 3rem 0 3rem 0   ;
    width: 1050px;
}

.Flex-Div {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;}   

/* Überaum gesucht*****Überaumg esucht*****Überaum gesucht*****Überaum gesucht */

#Ueberaum-gesucht {
background-color: #cbd5e9;
}

#Ueberaum-gesucht-Inhalt {
    display: grid;
    grid-template-rows: min-content 1fr;
    grid-template-columns: 1fr 1fr;
 }
 
#Titel-Ueberaum-gesucht {
  grid-column: 1 / 2;
  grid-row:    1 / 2;
  padding: 0 1rem 0 0;
  height: min-content;
  }


  
#Untertitel { 
  grid-column: 1 / 2;
  grid-row:    2 / 3;
    padding: 0 1rem 0 0;
}



#Bild-Ueberaum {  
  grid-column: 2 / 3;
  grid-row:    1 / 3; 
  }

/* Vorstellungen*****Vorstellungen*****Vorstellungen*****Vorstellungen */  

.Text-Titel-articels { text-align: center; margin: 0 0 3rem 0;}
#Kontakt2 {padding-top: 3rem; }
 
.Text-Box-Item {
    background-color:#f3f3f3 ;
    flex-basis: calc(25% - 3rem);
    padding: 1rem 1rem 1rem 1rem;
    height: 6rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;   
     }
     
 
     
.Text-Box-Item:nth-child(4) { justify-content: center; }
     

.Text-in-Items {
text-align: center;
height: auto;
} 



/* Geben*****Geben*****Geben*****Geben */ 

#Geben {
background-color: #cbd5e9;
}

#Geben .Text-Box-Item {
    background-color:#ecf0ff;
    flex-basis: calc(33.33% - 3rem);   
    justify-content: center; 
     }

#Geben p.Text-in-Items {margin-top: 1rem; }       

/* Kontakt*****Kontakt*****Kontakt*****Kontakt */ 

.kein-margin-bottom {margin-bottom: 0; }

.Kontaktangaben {
width: 100%;
background-color: #cbd5e9;
border: 1px solid black;
margin: 0 0 2rem 0;
display: flex;
justify-content: center; 
align-content: center;
}

.Kontaktangaben:nth-child(7){ margin: 0 0 1rem 0; } 

.Kontaktangaben a { height: 4rem; width: 100%; text-align: center; }

.Messenger-Button {height: 2rem; width: auto; margin: 1rem auto 1rem auto;}
.Kontaktangaben:hover .Messenger-Button {height: 2.2rem; width: auto; margin: 0.9rem auto 0.9rem auto;}
.Messenger-Erklärung {width: 100%; margin: 0 0 2rem 0;}
.Linktext-Kontaktangaben {display:inline; line-height: 4rem;}

.Formular-Padding {padding: 1rem 0 1rem 0; }

/* footer*****footer*****footer*****footer */ 
  
#footer {
 background-color: #39343a;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}

#footer p {color: white; }

#footer_item_1 {
align-self: center;
}

#footer_item_2 {
align-self: center;
  margin-left: 1rem;
  margin-right: calc(22vw - 1rem);
}

/* Datenschutz*****Datenschutz*****Datenschutz*****Datenschutz*****Datenschutz */ 

.Textseite-Container ul { margin-left: 1rem; }
.Textseite-Container h2 { margin-top: 1rem; }

/*******über Full-HD*******über Full-HD*******über Full-HD************/

@media only screen and (min-width: 1920px) {


}

/*******Desktop*******Desktop*******Desktop************/



@media only screen and (max-width: 1440px) {
.navigation, .navigation-footer { width: 70vw;}
.Textseite-Container { width: 70vw; }
.article-Inhalt {width: 70vw; }
}


@media only screen and (max-width: 1279px) {
.navigation, .navigation-footer { width: 80vw;}
.Textseite-Container { width: 80vw; }
.article-Inhalt {width: 80vw; }
}

/*******Tablet*******Tablet*******Tablet*******Tablet*******/

@media only screen and (max-width: 900px) {
#wrapper {width: 100%; min-height: 100%;}
.navigation, .navigation-footer { width: calc(100vw - 3rem);}
.Textseite-Container { width: calc(100vw - 3rem);}
.article-Inhalt { width: calc(100vw - 3rem);}
#Kontakt-Inhalt {padding-bottom: 0;}
}
  
  
/*******Burgermenu*******Burgermenu*******Burgermenu*******/
  

@media only screen and (max-width: 750px)  {
	
	#header {display: flex; justify-content: space-between;}
	
	#Website_Titel {display: flex; flex-direction: column; justify-content: center; align-items: flex-end;}	
	#Schriftzug_MARKUS-TEPE { margin: 0 -0.7rem 0 0;}
	#Schriftzug_Malerei-u-Grafik { margin: 0 -0.5rem 0 0;}
	h1 {font-size: 1.5rem; }
	h2 {font-size: 1rem;}
	
	.toggle {display: block; margin: 0; padding: 0 1rem 0 1rem; font-size: 3rem; height: 4rem;}
	#header a {color: #7e7d7b;}
	#header .open { align-self: center;}
	#header a:hover { color: #663333;}
	.toggle:link {text-decoration: none;}
	.toggle:visited {text-decoration: none;}
  	.toggle:focus {text-decoration: none;}
	.toggle:hover {text-decoration: none;}
  	.toggle:active {text-decoration: none;}

    .navigation { width: calc(100% - 2rem);}    
    
    #nav {
      transition: transform .3s ease-in-out;
      top: 0;
      bottom: 0;
      min-height: 100%; /* override Safari bug */
      position: fixed; /* or choose `absolute` depending on desired behavior*/
      width: 300px;
      left: 0px;
      transform: scaleX(0);
	  transform-origin: left;
	  background-color: white;
	  z-index: 202;
	  border-right: solid 1px #7e7d7b;
    }

    #nav:target {transform: scaleX(1); transform-origin: left;}
	
    .close {text-align: right; display: block; text-decoration: none; font-size: 3rem; margin: 0 1rem 0 0;}
	.close:focus {text-decoration: none;}
	.close:hover {text-decoration: none;}
	.navigation {flex-direction: column; }
    .navigation li { width: calc(100% - 2rem); padding: 0;}
    .navigation li a {height: 1.1rem; padding: 1rem; }    
	.navigation li:not(:last-child)  { border-bottom: 1px solid black;}
    
#main {
    margin-top: calc(4rem + 2px);
}
 

 
    
}

@media only screen and (max-width: 630px) {
.Text-Box-Item {flex-basis: calc(50% - 2.5rem); }
.Text-Box-Item:nth-child(1), .Text-Box-Item:nth-child(2) {margin-bottom: 1rem;}
#Geben .Text-Box-Item {margin-bottom: 0;}
}
  
@media only screen and (max-width: 550px) {
.navigation { width: calc(100% - 2rem);}
.navigation-footer { width: calc(100% - 2rem);}
.Textseite-Container { width: calc(100% - 2rem);}
.article-Inhalt  { width: calc(100% - 2rem);}
#Ueberaum-gesucht-Inhalt {grid-template-rows: auto auto auto; grid-template-columns: 1fr ;}
#Titel-Ueberaum-gesucht { grid-column: 1 / 2;grid-row:    1 / 2;   padding: 0 0 1rem 0; }
#Untertitel {  grid-column: 1 / 2; grid-row:    2 / 3;   padding: 0 0 0 0;}
#Bild-Ueberaum {  grid-column: 1 / 2;grid-row:    3 / 4; width: 80%; margin: 3rem auto 0 auto;}
}

/*******Handy*******Handy*******Handy*******Handy*******/

@media only screen and (max-width: 480px) {
#nav { width: 240px;}
#Bild-Ueberaum { width: 100%; margin: 3rem auto 0 auto;}
#Geben .Text-Box-Item { flex-basis: 100%; margin-bottom: 1rem; }
.Text-Box-Item {flex-basis: calc(100% - 0.5rem); margin-bottom: 1rem; height: 4rem;}
}