* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--body-bg-color); /* 129876 2var: 12AA83 1var:0FB98E cyan */  
  color: #EEE;
  font-size: 20px;
  line-height: 1.6em;
}
body {
  /*font-family: 'Majandra', sans-serif;*/
  font-family: var(--font-family);
}
h1 {
	display:inline;
  margin: 32px 0;
  font-weight: 300;
  font-size: 200%;
}
h2{
	letter-spacing: 10px;
}
p {
  margin: 0 0 16px 0;
}
.wrapper {
	display: flex;
	/*height: 100%; zuvor 2023 */
	/*max-height: 100vh;*/ /* abhängig von zeile 67: content: max-height: 240vh; */
	align-self: stretch;
}
/* linx nur im formular - wenn geschickt */
.linx{
text-decoration: none;
}
.linx a{
color: yellow;
}
.linx a:hover{
	color: orange;
}
.active a {color: #E3E012;} /* aktiver menupunkt gelb */
.active1 a {color: orange /*#FFA500;*/} /* aktiver menupunkt orange */
.active2 a {color: #FFF ;background-color: #FFA500;} /* aktiver menupunkt orange-weiss */
.active3 a {background-color: #0FB98E; color: #FFF} /* aktiver menupunkt grünlich heller */
.active4 a {background-color: #037976; color: #FFF} /* aktiver menupunkt cyan dunkler */
.active44 a {background-color: #037976;} /* aktiver menupunkt cyan dunkler */
.active5 a{color: #0FB98E}

.content {
  flex: 1 1 100%;
  padding: 40px 30px 10px 100px; /* text von oben */
  font-family: var(--font-family);
  /*<!--box-shadow: 0 0 5px rgba(0,0,0,1);-->*/
  transition: all .3s;
max-width: 1400px; margin: 20px;   
margin-left: auto; margin-right: auto;  /* h-zentrieren */

  background-image: var(--body-bg-verlauf); /*overflow-y: hidden; */
  background-repeat: no-repeat;
  max-height: 400vh;/* 300vh reicht eigentlich ,, zuvor: min-hight: 100vh - PQ 2024*/
  height: fit-content; /* geht auch min-content  https://wiki.selfhtml.org/wiki/CSS/Tutorials/Boxmodell/Gr%C3%B6%C3%9Fenangaben#min-content */
}

.center-flex {
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  text-align: center;
}

.pic-style{
	max-width: 1200px;
	max-height: 900px;
	border: #EEE dashed 10px; 
}
.pic-respo {
	position: relative;
    max-width: 100%;
    max-height: 80vh;
	/*object-fit: scale-down;
	display:block*/
}
.txt-respo{
	font-family: var(--font-family);
	font-size: 100px;	
	position: absolute;
	text-align: center;
	top: 40%;
   left: 40%; /* vorher 35% */
   text-shadow: -1px 0 1px black, 0 1px 1px black, 1px 0 1px black, 0 -1px 1px black;
/*margin: auto; */
}
.txt-start {text-decoration: none;}
.txt-start a:link {color: #FFF;}
.txt-start a:hover {color: #000;}

.form-left{
	padding-left: 100px;
}
.form-anzeige {
	/*left: -70px;*/
}
.form-abstand {
	margin-left: 25px;
}
.kontaktpos{margin-left: 15%;}	
@media all and (max-width: 920px) {
.framepos{max-width: 450px;}
.content {
  max-height: 540vh;
  height: fit-content; 
}
}
@media all and (max-width: 680px) { 
	.content {
	  padding: 15px 10px 10px 15px; /* text von oben */
	}
	.form-left{
		padding-left: 0px;
	}	

.txt-respo{
	font-size: 70px;
   left: 15%;
}
.form-anzeige {
	display: none;
}	
.form-abstand {
	margin-left: 10px;
}
.text-left{
		/*margin-left: 0px; */text-align: left;
}
.kontaktpos{margin-left: 0%;
}
.content {
  max-height: 740vh;
  height: fit-content; 
}

} 

@media all and (max-width: 500px) { 

header {
	/*padding-top: 15px;
	min-height: 80px; */
	font-size: 18px;	
	}
.txt-respo{
	font-size: 50px;
	text-align: left;
   left: 5%;
}

.form-anzeige {
	display: none;
}
.form-abstand {
	margin-left: 5px;
}
.framepos{max-width: 250px;}
.content {
  max-height: 1540vh;
  height: fit-content; 
}
}