/* -----------------------------------------------------------------------------

                Grid-System 

-----------------------------------------------------------------------------*/


/*  GRID SECTIONS  ============================================================================= */
.section {clear: both;padding: 0;display: block; margin-left: auto;margin-right: auto; width:100%; max-width:1000px;}

.group:before,  /*  Gruppierung der Spalten */
.group:after {content:"";display:table;}
.group:after {clear:both;}
.group {zoom:1; /* For IE 6/7 (trigger hasLayout) */}

.col {display: block;float:left;margin:0;} /*  GRID COLUMN SETUP  */


/*  =============================================================================

Zwei Spalten 50/50

============================================================================= */



.span_1_of_2 { width: 50%; display:table-cell; vertical-align:middle; text-align:center; }
.span_2_of_2 { width: 50%; display:table-cell; vertical-align:middle; text-align:center; }

.inner-element img { text-align:center; width:400px; max-width:75%; box-shadow:4px 4px 7px var(--schatten); }
.inner-element h4,
.inner-element p { line-height:1; height:50px; }



/*  GO FULL WIDTH AT LESS THAN 720 PIXELS */

@media only screen and (max-width: 900px) {
	.span_1_of_2 { width: 100%; }
	.span_2_of_2 { margin-top:40px; width: 100%; }
}


/*  =============================================================================

Zwei Drittel / Ein Drittel Spalte 

============================================================================= */
.grid_2zu1_links {width: 65%;}
.grid_2zu1_rechts {width: 33%;}

.grid_2zu1_links p {text-align:justify; padding-right:3%;}
.grid_2zu1_links ul {padding-right:3%;}
.grid_2zu1_links h3 {margin-top:0;}

@media only screen and (max-width: 720px) {
	.grid_2zu1_rechts {width: 100%;}
	.grid_2zu1_links {width: 100%;}
	.grid_2zu1_links p,
	.grid_2zu1_links ul {padding-right:0;}
}


/*   Zentriert für:  Bilder Startseite */
.zentriert { display:flex; justify-content: center;}
.zentriert img {width:100%; height:auto; }
.bildunterschrift { text-align:right; font-size: 80%; margin-top:7px; padding:0; line-height:1; }


/*   Infotext für:  SIEDLUNGSGESCHICHTE /  DeBOERNER AKTUELL  /  KONTAKT */
.infotext {font-size: 80%;}
.infotext { border-left: 1px solid #bfbfbf;padding-left:4px;margin-left:4px; }
.infotext h5 { margin: 0 0 0 5px; padding-bottom:5px; font-weight:600; }
.infotext ul { padding:0; margin:0 0 0 3%; line-height:1.5; }
.infotext p{ margin:0; }
.infotext li { line-height:1.5; list-style: none;}

.einelinie { display:inline; list-style: none; }



@media only screen and (max-width: 720px) {
	.zentriert img {float:none; display: block; margin-left: auto; margin-right: auto; }
	.infotext { margin: 0; padding: 0; border-left: 0px solid; text-align:center; }
	.infotext { margin-top:40px;width: 100%; text-align:left; }
}



/*  =============================================================================

DRITTELSPALTEN

============================================================================= */

.grid_drittel { width: 33%; margin-bottom: 30px;}

@media only screen and (max-width: 720px) {
	.grid_drittel{ width:100%  }
}



/*  =============================================================================

SECHS SPALTEN

============================================================================= */

.grid_sechstel { width: 15.3%; margin-right:1% }

@media only screen and (max-width: 900px) {
	.grid_sechstel { width: 30.3%; margin: 2% 0% 1% 2%;}
}

@media only screen and (max-width: 640px) {
	.grid_sechstel { margin: 1% 0 1% 0%; width: 100%; }
}