html {
	scrollbar-face-color: #1a2b3c; /* dunkel */
	scrollbar-arrow-color: #b2b2b2; /* hell */
}

body {
    font-family: Arial, Verdana, Helvetica, sans-serif;
    color: #000000;
	font-size: 16px;
	line-height: 150%; 
	background-repeat: repeat;
    background-attachment: fixed;
	background-position: left top;          
	background-image: url("../img/hintergrund.jpg");  	
    background-color: #F1F1F1;	
    /*background-size: 100% 20%;  */
}

#hintergrund {
	position:relative;
	width:980px;
	height: 980px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 10px;
	margin-bottom: 10px;
	overflow: visible;
	visibility: visible;
}

#navi-oben {
   position: fixed;
   top: 0px;
   left: 0px;
   height: auto;
   width: 100%;
   padding: 0px;
   margin: 0px;
   font-weight: normal;
   color: #E7E6E6; /*#290100;*/
   overflow: visible;
   visibility: visible;   
}

#kopf {
    position: fixed; /*auf Server */
    /* position:absolute;*/ /* zur Bearbeitung */	
    top: 53px;
	left: 0px;
    /* margin-left: auto;
   	margin-right: auto;*/
    width: 100%; /* 980px; */
    padding: 3px;
    margin: 0px;
    height: 108px;
    Color: #333333;
	Font-Size: xx-large;
    Font-Style: normal;
    Font-Weight: bolder;
    Font-Variant: normal;
    font-family: "Times New Roman", Times, serif;
    background-color: #DDDEE0;
    /* border-bottom-style: double;
    border-bottom-color: #000080; */
}

#umschliessung {
   	position: absolute;
   	top: 350px;
   	left: 0px;
   	height: auto;
   	width: 100%;
   	padding-bottom: 30px;
   	margin: 0px;
   	overflow: visible;
   	visibility: visible;
   	color: #636363;
	background-repeat: repeat;
	background-attachment: fixed;
	background-position: left top;     
    background-image: url(../img/hintergrund_hell.jpg);
   	background-color: #F1F1F1;   
}

#content {
    display: flex;
    flex-direction: column;  /* stapelt die Kinder untereinander */
    align-items: center;      /* zentriert #textBottom horizontal */
    gap: 20px;                /* Abstand zwischen den Zeilen */
    margin-top: 0px;
    position: relative;
    top: -50px;
    left: 8%;
    width: clamp(60%, 3vw, 80%);
    font-weight: normal;
    color: #290100;
    background-color: #FFFFFF; /*#BFE8BB; */
    visibility: visible;
    height: auto;
    max-height: none;
    overflow: visible;
    padding-top: 20px;
    padding-right: 30px;
    padding-left: 30px;
    padding-bottom: 30px;
    box-shadow: 0px 0px 40px #303030;
}

/* Obere Zeile mit zwei Boxen nebeneinander */
.mittig {
  display: flex;
  gap: clamp(20px, 5vw, 100px); /* dynamischer Abstand zwischen den Boxen */
}

#textLeft,
#textRight {
  padding: 20px;
  width: 200px; /* feste oder prozentuale Breite möglich */
  box-sizing: border-box;
  text-align: center;
}

/* Untere Box mittig 
#textBottom {  
  	padding: 30px;
	width: 100%;
  				/* width: clamp(200px, 40vw, 500px);  dynamische Breite */
  	/*text-align: center;
}
*/


/*
#textLinks {
	position: relative;
	top: 35px;
	padding-left: clamp(10px, 3vw, 100px);		
	width: 260px; 
	height: auto;
	color: #290100;
}

#textRechts {
	position: relative;
	top: -280px;
	padding-right: clamp(10px, 3vw, 100px);	
	width: 260px; 
	height: auto;
	color: #290100;
}


#textMitte {
	position: relative;
	top: -230px;
	left: 5%;
	width: 90%; 
	height: auto;
	color: #290100;
}
*/

#kontakt {
   position: absolute;
   top: 30px;
   right: 0px;
   height: auto;
   width: 22%;
   padding-bottom: 30px;
   margin: 0px;
   overflow: visible;
   visibility: visible;
   color: #636363;
   /*background-color: #F1F1F1;
   display: table-header-group;*/
}

#pfeil {
	position:fixed; /* auf Server */
	/*position:absolute;*/ /* zur Bearbeitung */
	width:95px;
	padding:10px;
	margin:0px;
	height: auto;
	border: 0px none;
	visibility: visible;
	right: 2%;
	bottom: 10px;
}

#footer {
	position:fixed; /* auf Server */
	/*position:absolute;*/ /* zur Bearbeitung */
	left: 0px;
	height: auto;
	width:100%;
	padding:0px;
	margin:0px;
	font-weight: normal;
	color: #E7E6E6; /*#290100;*/
	overflow: visible;
	visibility: visible;
	bottom: 0px;	
	font-size: 0.9em;
	background-color: #003882; /*#427A9D;*/
}


/* für unterschiedliche Bildschirmbreiten*/
/* für Mobile 1024 - 860 - 640*/

/*
@media all and (max-width: 600px) {
	.mittig {
		flex-direction: column;
		align-items: center;
	}	
	#kontakt { display: table-footer-group; position: relative; left: 50px;}	
}
*/

@media (max-width:980px){ 
	.mittig {
		flex-direction: column;
		align-items: center;
	}
	
	/*#content { display: table-caption; width: 200%;}  */
	#content { width: clamp(70%, 3vw, 80%); max-height: none; min-height: 1050px}	
	/* #textLinks {position: relative; left: 0%; margin-left: auto; margin-right: auto;}
	#textRechts {position: relative; top: 50px; left: 0%; margin-left: auto; margin-right: auto;}
	#textMitte {position: relative; top: 80px; left: 0%; margin-left: auto; margin-right: auto;} */
	#kontakt { display: table-footer-group; position: relative; left: 50%;}	
	
	body { font-size: 24px; }
	#footer { font-size: 22px; }
	
	#kopf { height: 125px; }
}



@media all and (max-width:1134px){ 
	/*#umschliessung { top:860px; }
	#navi-oben { visibility: hidden; }*/
}