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

.container {
    display: flex;
	flex-wrap: wrap; /* sorgt dafür, dass die Container umgebrochen werden, wenn der Platz nicht reicht */
	justify-content: space-between; /* nebeneinander, aber mit Abstand */	
	margin-top: 120px;
	gap: 20px;
	color: #090907;    
    width: 100%;
}

/* Bild und Text nebeneinander */
.Bildbehaelter {
    width: 30%; /* Du kannst auch kleinere Breiten anpassen */
    text-align: center;
}

.Bildbehaelter img {
	height: 400px;
	width: auto;
	margin-top: 50px;
}

.Blick_ins_Buch {
	display:inline-block; 
	/* padding: variabel */
	color: #FAF3D2;
	background-color: #1a1a1a;			
	border:1px solid #090907; 
	border-radius:.5rem; 
	text-decoration:none; 
	font-weight:bold;
	margin: 1em;
}
.Blick_ins_Buch:hover { 
	color: #FCD355;
	background-color: #090907; 
}

.Textbehaelter {
    width: 65%; /* Du kannst auch kleinere Breiten anpassen */
    text-align: left;
    padding-left: 5%;
    padding-right: 5%;
}

.Textbehaelter h1 {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 0.5em;	
}

.Textbehaelter h2 {
	text-align: center;
	margin-bottom: 1em;	
}

.Textbehaelter h3 {
	text-align: center; /* für die Übersetzungen des Untertitels */
	font-style: italic;
	line-height: 1em;
}

.Textbehaelter p {
	margin-bottom: 0.5em;
	text-align: justify;
}

/* Buttonbehaelter bleibt unterhalb */
.Buttonbehaelter {
    width: 100%;
    text-align: center;
    margin-top: 0; /* Abstand nach oben */
    margin-bottom: 0; /* optionaler Abstand nach unten */
}

.Buttonbehaelter .shop-button {
    display: inline-block;  /* Button als Inline-Block anzeigen */
    background-color: #1a1a1a;
	color: #FAF3D2;
    font-weight: bold;    
    border-radius: 12px;
    text-align: center;
    text-decoration: none; /* Entfernt die Standard-Unterstreichung */
	width: 180px;
	font-size: 1.5em;
	padding: 15px;
	margin-bottom: 1em;
}

.Buttonbehaelter .shop-button:hover {    
    text-decoration: underline;
	color: #FCD355;	
}




/* ============================= */
/*   Anpassung an die Bildschirmbreite     */
/* ============================= */

@media (max-width: 400px) {    
	.container {
        flex-direction: column; /* Blöcke untereinander auf kleinen Bildschirmen */
        align-items: center;
    }	
	.Bildbehaelter, .Textbehaelter { width: 96%; } /* Breite anpassen */ 
	.Bildbehaelter img { height: 100px; margin-top: 5px; }
	.Blick_ins_Buch {font-size: 1em; padding: 0.3em;}
	.Textbehaelter h1 {font-size: 1.1em; text-align: center; margin-top: 0px;}
	.Textbehaelter h2 {font-size: 0.7em; line-height: 1.2em;}
	.Textbehaelter h3 {font-size: 0.6em; margin-bottom: 1.5em;}
	.Textbehaelter p {font-size: 0.7em; line-height: 1.2em;}
	.Buttonbehaelter .shop-button {
		width: 120px;
		font-size: 0.8em;
		padding: 5px;	
	}
}

@media (min-width: 400px) and (max-width: 700px) {
	.container {
        flex-direction: column; /* Blöcke untereinander auf kleinen Bildschirmen */
        align-items: center;
    }	
	.Bildbehaelter, .Textbehaelter { width: 90%; } /* Breite anpassen */
	.Bildbehaelter img { height: 200px; margin-top: 10px; }
	.Blick_ins_Buch {font-size: 1.1em; padding: 0.4em;}
	.Textbehaelter h1 {font-size: 1.2em; margin-top: 0px;}
	.Textbehaelter h2 {font-size: 0.9em; line-height: 1.2em;}
	.Textbehaelter h3 {font-size: 0.8em; margin-bottom: 1.6em;}
	.Textbehaelter p {font-size: 0.9em; line-height: 1.4em;}
	.Buttonbehaelter .shop-button {
		width: 140px;
		font-size: 0.9em;
		padding: 7px;	
	}
}

@media (min-width: 700px) { /* Tablet quer */
	.Bildbehaelter img { height: 300px; margin-top: 30px; margin-left: 10px; }
	.Blick_ins_Buch {font-size: 0.8em; padding: 0.3em;}		/* kleine Schrift, weil der Bildschirm halbiert wird */
	.Textbehaelter h1 {font-size: 1.4em;}
	.Textbehaelter h2 {font-size: 1.1em; line-height: 1.2em;}
	.Textbehaelter h3 {font-size: 0.9em; margin-bottom: 1.7em;}
	.Textbehaelter p {font-size: 0.9em; line-height: 1.3em;}
	.Buttonbehaelter .shop-button {
		width: 150px;
		font-size: 1em;
		padding: 9px;	
	}
}

@media (min-width: 1000px) {
	.Bildbehaelter img { height: 350px; margin-top: 40px; }
	.Blick_ins_Buch {font-size: 1em; padding: 0.5em;}
	.Textbehaelter h1 {font-size: 1.5em;}
	.Textbehaelter h2 {font-size: 1.2em; line-height: 1.2em;}
	.Textbehaelter h3 {font-size: 1.1em; margin-bottom: 1.8em;}
	.Textbehaelter p {font-size: 1.1em; line-height: 1.3em;}
	.Buttonbehaelter .shop-button {
		width: 160px;
		font-size: 1.4em;
		padding: 12px;	
	}
}

@media screen and (min-width: 1400px) { /* breiter Bildschirm */
	.Bildbehaelter img { height: 400px; margin-top: 50px; }
	.Blick_ins_Buch {font-size: 1.2em; padding: 0.6em;}
	.Textbehaelter h1 {font-size: 1.8em;}
	.Textbehaelter h2 {font-size: 1.4em; line-height: 1.3em;}
	.Textbehaelter h3 {font-size: 1.2em; margin-bottom: 1.9em;}
	.Textbehaelter p {font-size: 1.3em; line-height: 1.5em;}
	.Buttonbehaelter .shop-button {
		width: 180px;
		font-size: 1.5em;
		padding: 15px;	
	}
}