/* ################ */
/* literatur.css	*/
/* ################ */

 * { box-sizing: border-box; }

.content-literatur {
	margin: 0;
	/*font-family: Arial, sans-serif;
	padding-bottom:10px; */
	flex: 1; 
	font-size: 1em;
	text-align: left;
	margin: 0 0; 
	flex: 1; 
	flex-direction: column;
	padding: 0;
	min-height: 0; /* Wichtig: Erlaubt dem Container innerhalb von Flexbox zu schrumpfen */
	overflow-y: auto; /* Aktiviert den vertikalen Scrollbalken nur hier */
	display: block;   /* 'block' ist für reinen Textfluss oft besser als 'flex' */
}
	
/* Styling des Scrollbalkens (optional, für eine schönere Optik) */
.content-literatur::-webkit-scrollbar {
	width: 12px;
}
.content-literatur::-webkit-scrollbar-thumb {
    background: #2c539e; 
    border-radius: 4px;
}
.content-literatur::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}

h2 {
	margin:0;
	padding: 20px 0;
	text-align: center;
	font-size:1.4em;
	font-weight:bold;
}

h3 {
	padding: 0;
	margin: 2% 0 4% 0 ;
	font-size: 1.2em;
	font-weight: bold;
}

.lit-sonst-p {
	padding: 0;
	margin: 3% 0 1% 4%;
	font-size: 1.2em;
	font-weight: bold;
}

.lit-links {
	float: left;
	width: 42%;
	margin: 0 4% 0 4%;
	text-align: left;
}

.lit-rechts {
	float: left;
	width: 45%;
	margin: 0 1% 0 4%;
	text-align: left;
}
.lit-unten-links {
	float: left;
	width: 42%;
	margin:  0 4% 2% 4%;
	text-align: left;
}
.lit-unten-rechts {
	float: left;
	width: 45%;
	margin: 0 1% 2% 4%;
	text-align: left;
}
.lit-komp p {
	margin: 0;
	padding: 0;
	text-align: left;
	font-weight: bold;
}
.lit-werk p {
	margin: 0;
	padding: 0 0 4px 0; 
	font-weight: normal;
}
.lit-ueberschr {
	margin:0;
	padding: 3%;
	text-align: center;
	font-size:1.2em;
	font-weight:bold;
}

/* ################# */
/* MEDIA-QUERIES	 */
/* ################# */

@media (pointer: coarse) { .content-literatur::-webkit-scrollbar { width: 0px; } }
@media (max-width: 1280px) { .mq-indicator::after { content: "1280"; } }
@media (max-width: 1024px) { .mq-indicator::after { content: "1024"; } }

/* Tablet und Desktop hochkant */
@media(max-width:800px){
	
	.lit-links {
		width: 96%;
		margin-left: 4%;
		margin-bottom: 3%;
	}
	.lit-rechts {
		width: 96%;
		margin-left: 4%;
		margin-bottom: 5%;
	}

	.lit-unten-links {
		width: 96%;
		margin-left: 4%;
	}
	.lit-unten-rechts {
		width: 96%;
		margin-left: 4%;
	}
	.mq-indicator::after { content: "TDH"; }
}

/* Tablet hochkant */
@media(max-width:800px) and (pointer: coarse)  {
	
	.content-literatur h2 { font-size: 1.8em;  }
	.content-literatur h3 { font-size: 1.6em;  }
	.lit-komp p { font-size: 1.2em; }
	.lit-werk p { font-size: 1.2em; }
	
	.lit-links 			{ width: 86%; margin-left: 10%;	}
	.lit-rechts 		{ width: 86%; margin-left: 10%;	}
	.lit-unten-links 	{ width: 86%; margin-left: 10%;	}
	.lit-unten-rechts 	{ width: 86%; margin-left: 10%;	}
	.lit-sonst-p	 	{ font-size: 1.6em; margin-left: 10%;	}
	
	.mq-indicator::after { content: "TH"; }
}

/* Tablet quer */
@media (min-width: 800px) and (max-width: 1334px) and (orientation: landscape) and (pointer: coarse) {
	.lit-komp p { font-size: 1.2em; }
	.lit-werk p { font-size: 1.2em; }
	.mq-indicator::after { content: "TQ"; }
}

/* Handy quer */
@media (min-width: 380px) and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) { .mq-indicator::after { content: "HQ"; } }

/* Handy hochkant */
@media (max-width: 480px) {
	
	.content-literatur h3 { font-size: 1.4em;  }
	.lit-komp p { font-size: 1em; }
	.lit-werk p { font-size: 1em; }
	
	.lit-links 			{ width: 84%; margin-left: 8%;	}
	.lit-rechts 		{ width: 84%; margin-left: 8%;	}
	.lit-unten-links 	{ width: 84%; margin-left: 8%;	}
	.lit-unten-rechts 	{ width: 84%; margin-left: 8%;	}
	.lit-sonst-p	 	{ font-size: 1.4em; margin-left: 8%;	}
	
	.lit-komp p { font-size: 1.1em; }
	.lit-werk p { font-size: 1.1em; }
	.mq-indicator::after { content: "HH"; }
}