body { /* seitenspezifische Anpassung von <body> */    
    overflow-y: auto;
    overflow-x: hidden;
	background-color: #FAF3D2; /* damit wird die Farbe des Seiteninhalts definiert */
}

/* Wrapper, der den Viewport (abzgl. Menü) füllt und zentriert */
main.Seitenmitte {
    min-height: calc(100svh - 130px - 40px); /* Menü + oberer/unterer Body-Rand */
    margin-top: 130px;                       /* Platz für die fixe Menüleiste */
    padding: 2rem 0;
    text-align: center;
	color: #090907;
}

/* Überschriften */
h1 { margin-bottom: 1em; } /* font-size variabel */
h2 { text-align: center; } /* font-size variabel */

/* Container für die drei Bilder */
.bilderreihe {
    display: flex;
    justify-content: center;
	flex-direction: row;  /* Bilder nebeneinander */
    align-items: flex-start;
    gap: 30px; /* Abstand zwischen den Bildern */
    margin: 0 auto;
    flex-wrap: wrap; /* erlaubt Umbruch */
}

/* Bilder: feste Höhe, flexible Breite */
.bilderreihe img {
    height: 180px; /* feste Höhe */
    width: auto;   /* Breite passt sich an */
    cursor: help;
}

.Textbehaelter {
    margin: 30px auto 30px auto; /* Abstand vom Menü + unten */    
    padding: 0 15px;
}

/* Normale Absätze */
.Textbehaelter p { /* font-size variabel */
    text-align: justify;
    margin-bottom: 1em;
	line-height: 1.6;
	color: #090907;
}

/* Rechte Absätze (z. B. Quellen) */
.Textbehaelter p.rechts { /* font-size variabel */
    text-align: right;
    font-style: italic;
}

/* ============================= */
/*       RESPONSIVE DESIGN      */
/* ============================= */

@media (max-width: 400px) {
    
    .Menuleiste {
        flex-direction: column; /* UL1 über UL2 */
        align-items: center;
        gap: 10px; /* kleiner Abstand */
    }
    
    .Menuleiste li.aktuelle_Seite { font-size: 0.8em; }    
    .Menuleiste a { font-size: 0.8em; }
	
	h2 {font-size: 0.9em;}
    
    /* Bilder nebeneinander, auch bei kleinen Bildschirmen */
    .bilderreihe {
        gap: 10px; /* kleiner Abstand */
    }
    .bilderreihe img {
        height: 80px; /* deutlich kleiner */
    }
    
    .Textbehaelter { width: 90%; }
    .Textbehaelter p { font-size: 0.8em; }    
    .Textbehaelter p.rechts { font-size: 0.6em; }
    
}

@media (min-width: 400px) and (max-width: 700px) {
    h1 { font-size: 1.2em; } 
	h2 { font-size: 1em; } 
  
    /* Bilder nebeneinander, auch bei kleinen Bildschirmen */
    .bilderreihe {
        flex-direction: row; /* nebeneinander */
        align-items: center;
        gap: 10px; /* kleinerer Abstand */
        overflow-x: auto; /* Horizontales Scrollen möglich */
    }
    
    .bilderreihe img {
        height: 120px; /* kleinere Höhe */
        width: auto;  /* Breite flexibel */
    }

    .Textbehaelter { width: 80%; }    
    .Textbehaelter p { font-size: 0.9em; }    
    .Textbehaelter p.rechts { font-size: 0.75em; }
}

@media (min-width: 700px) { /* Tablet quer */
    h1 { font-size: 1.5em; } 
	h2 { font-size: 1.2em; } 
    .bilderreihe img {height: 150px;} /* etwas kleinere Höhe */
    .Textbehaelter { width: 70%; }
    .Textbehaelter p { font-size: 1.2em; }    
    .Textbehaelter p.rechts { font-size: 1em; }
}

@media (min-width: 1000px) {
    h1 { font-size: 1.8em; } 
	h2 { font-size: 1.5em; } 
	.bilderreihe {
		display: block;
		margin: 0 auto;
		text-align: center;
	}
    .Textbehaelter { width: 60%; }
	.Textbehaelter p { font-size: 1.3em; } 
	.Textbehaelter p.rechts { font-size: 1.1em; }
}

@media screen and (min-width: 1400px) { /* breiter Bildschirm */
	h1 { font-size: 2em; } 
	h2 { font-size: 1.7em; } 
	.Textbehaelter p { font-size: 1.4em; } 
	.Textbehaelter p.rechts { font-size: 1.2em; }
    .bilderreihe img { height: 200px; } /* Originalhöhe */    
}