/* ############ */
/* dirigent.css	*/
/* ############ */

.content-dirigent {
    flex: 1; 
	font-size:1em;
	text-align:left;
	max-width: 100%; 
	margin: 0 auto; 
    flex: 1; 
    flex-direction: column;
    padding: 10px;
    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-dirigent::-webkit-scrollbar {
    width: 12px;
}
.content-dirigent::-webkit-scrollbar-thumb {
    background: #2c539e; 
    border-radius: 4px;
}
.content-dirigent::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}
.content-dirigent p {
	margin-bottom:2%;
}
.content-dirigent img {
	float: right; 
	padding: 0 30px 0 0;
	max-width: 100%; 
	height: auto;	
}

.dirigent-links {
	float: left;
	width: 62%;
	padding: 30px 0 0 40px;
}
.dirigent-rechts {
	float: right;
	width: 22%;
	margin:0;
	margin-top: 10%;
	text-align: left;
}
.dirigent-rechts img {
	width: 80%;
}
.dirigent-links h2 {
	margin: 0;
	margin-top: 0;
	padding: 0;
 	font-size:1.2em;
	font-weight:bold;
}
.dirigent-links h3 {
	margin: 18px 0 0 0;
	padding: 0;
 	font-size:1.1em;
	font-weight:bold;
}

.dirigent-links p {
	margin: 0;
	padding: 12px 0 0 0;
 	font-size: 1.1em;
	font-weight: normal;
}

/* ############# */
/* Media Queries */
/* ############# */

@media (pointer: coarse)   { .content-dirigent::-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){
	
	.content-dirigent {
		margin: 0 5% 0 5%
	}
	.content-dirigent img {
		float: none;
		padding: 0;
	}
	
	.dirigent-links {
		float: none;
		width: 100%;
		font-size:1.2em;
		padding: 0;
		margin: 0;
	}
	
	.dirigent-rechts {
		float: none;
		width: 100%;
		margin: 0;
		padding: 0;
		margin-top: 5%;
		text-align: center;
	}
	.dirigent-links h2 {
		font-size:1.3em; 
	}
	.dirigent-links h3 {
		font-size:1.2em; 
	}
	.dirigent-rechts img {
		width: 25%;
		margin: 0 0 20px 0;
	
	}
	.dirigent-links p {
		margin: 0;
		padding: 8px 0 0 0;
		font-size: 1em; 
	}
	
	.content-dirigent::-webkit-scrollbar {
		width: 0;
	}
	
	.mq-indicator::after { content: "TDH"; }
}

/* Tablet quer */
@media (min-width: 800px) and (max-width: 1334px) and (orientation: landscape) and (pointer: coarse) {
	
	.content-dirigent h2 {
		font-size: 1.3em;
	}
	.content-dirigent h3 {
		font-size: 1.2em;
	}
	.dirigent-links p  { font-size: 1.1em;  }
	.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-dirigent {	margin: 0 5px 0 5px; }
	.dirigent-links h2 { font-size: 1.1em;  }
	.dirigent-links h3 { font-size: 1em;    }	
	.dirigent-links p  { font-size: 0.9em;  }
	
	.mq-indicator::after { content: "HH"; }
}