/*reset*/


* {
 padding: 0;
 margin: 0;
}

#wrapper {
	grid-template-rows: 4rem calc((100% - 6.5rem) * 0.35) calc((100% - 6.5rem) * 0.35) calc((100% - 6.5rem) * 0.3) 2.5rem;
}

#Aktuell-Hinweis-Startseite {
	grid-column: 2 / 3;
	grid-row:    2 / 3;
	margin: auto auto auto auto;
	width: 100%;

}

#Aktuell-Hinweis-Startseite section {
padding: 1rem;
background-color: #dfdfdf;
margin-bottom: 0.5rem;
}

.aktuell-Hinweis-Startseite {
	font-family: tahoma, Arial, Verdana, geneva, sans-serif;
  	font-size: 100%;
 }
 
#Aktuell-Hinweis-Startseite  span { font-size: 2rem;
font-weight: 500;}

#Aktuell-Hinweis-Startseite-Sicherheistabstand { background-color: red; height: 1rem;}

#Website_Titel {
	grid-column: 1 / 4;
	grid-row:    4 / 5;
	height: 6rem;	
	margin: 3rem 0 0 0; 
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

#Schriftzug_MARKUS-TEPE {
  margin: 0 0 2rem 22vw;
  height: min-content;
}

#Schriftzug_Malerei-u-Grafik {
  margin: 0 22vw 2rem 0;
  height: min-content;
}

.Text_Titel {
	line-height: 1; 
	vertical-align:baseline;
}

h1 {
	letter-spacing: 0.6rem;
	word-spacing: 0.1rem;
	font-weight: 500;
	color: black;
	font-size: 3.5rem;
}

h2 {
	font-size: 1.7rem;
}

.image-container {
	width: 100%;
	height: auto;
	max-height: calc((100vh - 6.5rem) * 0.35);
  grid-column: 2 / 3;
  grid-row:    3 / 4;
  align-self: end;
  overflow: hidden; 
    display: flex;
  flex-direction: column;
 justify-content: flex-end;}

#bild_startseite {
	width: 100%;
}

.img-Startseite {
	width: 100%;
}

#footer {
  grid-row: 5 / 6;
}

.footer_startseiten_link {
	display: none;
}

@media only screen and (max-width: 1460px)  {
	h1 {font-size: 3.2rem;}
	h2 {font-size: 1.5rem;}
	#Schriftzug_MARKUS-TEPE {margin: 0 0 2rem 20vw;}
	#Schriftzug_Malerei-u-Grafik {margin: 0 20vw 2rem 0;}
}

@media only screen and (max-width: 1280px)  {
	h1 {font-size: 3.1rem;}
	h2 {font-size: 1.3rem;}
	#Schriftzug_MARKUS-TEPE {margin: 0 0 2rem 18vw;}
	#Schriftzug_Malerei-u-Grafik {margin: 0 18vw 2rem 0;}
}

@media only screen and (max-width: 1140px)  {
	h1 {font-size: 2.9rem;}
	h2 {font-size: 1.2rem;}
	#Schriftzug_MARKUS-TEPE {margin: 0 0 2rem 14vw;}
	#Schriftzug_Malerei-u-Grafik {margin: 0 14vw 2rem 0;}
}

@media only screen and (max-width: 980px)  {
#Schriftzug_MARKUS-TEPE {margin: 0 0 2rem 10vw;}
#Schriftzug_Malerei-u-Grafik {margin: 0 10vw 2rem 0;}
}

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

@media only screen and (max-width: 900px) {
#wrapper {
grid-template-rows: 4rem auto minmax(calc(((100vw - 4rem) * 0.725) + 6rem), auto) minmax(14rem, auto) 2.5rem;}	
h1 {font-size: 2.9rem; 	word-spacing: 0rem;}
h2 {font-size: 1.3rem;}
#Schriftzug_MARKUS-TEPE {margin: 0 0 0 0; height: min-content;}
#Schriftzug_Malerei-u-Grafik {margin: 0 0 0 0; height: min-content;}
.image-container {grid-column: 1 / 2; grid-row:    3 / 4; width: calc(100% - 4rem); height: auto; 	max-height: fit-content; margin: 0 2rem 2rem 2rem;   align-self: center;}

#Website_Titel {margin: 2rem 2rem 0 2rem; 	height: 6rem; 	grid-row:    4 / 5;}
#Aktuell-Hinweis-Startseite {grid-column: 1 / 2; margin: 2rem 2rem 1rem 2rem; width: calc(100% - 4rem);}
.aktuell-Hinweis-Startseite {font-weight: 400; font-size: 0.9rem;}
}

@media only screen and (max-width: 840px) {
#Website_Titel {margin: 2rem 2rem 2rem 2rem; flex-direction: column;	align-items: center; }
h2 {font-size: 2rem;}
}


@media only screen and (max-width: 900px) and (orientation: landscape) {
}

@media only screen and (max-width: 900px) and (orientation: portrait) {
}

@media only screen and (max-width: 750px)  {
#wrapper { grid-template-rows: 4rem auto minmax(calc(((100vw - 2rem) * 0.725) + 4rem), auto) minmax(14rem, auto) 2.5rem;}	
.image-container {width: calc(100% - 2rem); margin: 0 1rem 0 1rem;}
#Aktuell-Hinweis-Startseite {margin: 2rem 1rem 1rem 1rem; width: calc(100% - 2rem);}
}


@media only screen and (max-width: 667px)  {
h1 {font-size: 2.5rem;}
h2 {font-size: 1.7rem;}
#Website_Titel {height: 5.5rem;}
}

@media only screen and (max-width: 652px) and (orientation: landscape) {

}

@media only screen and (max-width: 652px) and (orientation: portrait) {

}

@media only screen and (max-width: 652px) and (orientation: portrait) and (max-height: 123vw) {

}

@media only screen and (max-width: 570px) and (orientation: landscape)  {

}

@media only screen and (max-width: 550px) {
#Schriftzug_Malerei-u-Grafik {display: block;}
h1 {font-size: 2.3rem;}
h2 {font-size: 1.6rem;}
#Website_Titel {height: 5rem;}			
}

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

@media only screen and (max-width: 480px) {
h1 {font-size: 2.1rem;}
h2 {font-size: 1.4rem;}
#Website_Titel {height: 4rem;}
}

@media only screen and (max-width: 440px) {
h1 {font-size: 1.9rem;}
h2 {font-size: 1.2rem;}	
}

@media only screen and (max-width: 440px) {
h1 {font-size: 1.6rem;}
}

@media only screen and (max-width: 360px) {
h1 {letter-spacing: 0.5rem;}
h2 {letter-spacing: 0.4rem;}
}

@media only screen and (max-width: 340px) {
h1 {letter-spacing: 0.3rem;}
h2 {letter-spacing: 0.2rem;}	
}

@media only screen and (max-width:240px) {

}