/* ############ */
/* kontakt.css  */
/* ############ */

.kontakt-content {
	margin: 0;
	/*font-family: Arial, sans-serif;
	padding-bottom:10px; */
	flex: 1; 
	font-size: 1em;
	text-align: center;
	margin: 0 0; 
	flex: 1; 	
	flex-direction: column;
	padding: 0 0 20px 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) */
.kontakt-content::-webkit-scrollbar {
	width: 12px;
}
.kontakt-content::-webkit-scrollbar-thumb {
    background: #2c539e; 
    border-radius: 4px;
}
.kontakt-content::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.05);
}

.kontakt-content h1 {
	margin-top: 5%;
	padding: 0;
	font-size:1.2em;
	font-weight:bold;
}
.kontakt-form {
	float: left;
	width: 60%;
	height:480px;
	margin-left: 5%;
	margin-top: 3%;
	text-align: left;
}
.kontakt-bild {
	float: left;
	width: 30%;
	margin: 5% 0 0 5%;
	height: 380px;
	text-align: center;
}

.kontakt-content img{
	width: 50%;
}
	
.kontakt-content h2 {
	font-size: 1.4em;
	font-weight: bold;
}
.kontakt-content p {
	margin: 0;
}

.kontakt-form {
	width:60%;
	margin-top: 3%;
	text-align: left;
}
input {
	width: 70%;
	padding: 3px;
	margin: 2px 0 25px 0;
}
textarea {
	width: 100%; 
	height:200px; 
}

.form_button {
	margin: 12px 0 0 5px;
	width:30%;
	background: blue;
	background: linear-gradient(135deg, #2c539e 0%, #3486bc 17%, #3687c4 41%, #2b699b 54%, #3980c6 78%, #2c539e 100%);
	color: white;
	border-radius: 6px;
	cursor: pointer;
}

/* ############### */
/* Media Queries   */
/* ############### */
@media (pointer: coarse)   { .kontakt-content::-webkit-scrollbar { width: 0px; } }
@media (max-width: 1280px) { .mq-indicator::after { content: "1280"; } }
@media (max-width: 1024px) { .mq-indicator::after { content: "1024"; } }
/*
@media (max-width: 1024px) and (pointer: coarse) {
	
	
		.mq-indicator::after { content: "1024 TAB"; }
}
*/

/* Tablet und Desktop hochkant */
@media(max-width: 800px) {
	
	.kontakt-content {
		margin: 0;
		padding: 0;
		width: 100%;
	}
	.kontakt-form {
		width: 72%;
	}
	
	input {
		width: 95%;
	}
	textarea {
		width: 95%; 
	}

	.kontakt-content img{
		margin: 5% 0 5% 0;
		padding: 0;
		width: 75%;
	}
	
	.kontakt-bild {
		width: 20%;
		margin: 7% 0 5% 0;
		padding: 0;
	}

	.mq-indicator::after { content: "TDH"; }
}

/* Tablet hochkant */
@media(max-width:800px) and (pointer: coarse)  { 

	.kontakt-content h2 {
		margin: 5% 0 0 0;
		font-size: 1.6em;
	}
	.kontakt-form {
		width: 60%;
		margin: 5% 0 0 5%;
	}
	input {
		width: 80%;
	}
	textarea {
		width: 80%; 
	}
	.kontakt-content img {
		width: 70%;
	}
	
	.kontakt-bild {
		width: 30%;
		margin: 7% 0 0 0; 
	}
	
	.mq-indicator::after { content: "TH"; } 
}

/* Tablet quer */
@media (min-width: 800px) and (max-width: 1334px) and (orientation: landscape) and (pointer: coarse) { 

	.kontakt-content h2 {
		margin: 3% 0 0 0;
		font-size: 1.6em;
	}
	.kontakt-form {
		float: left;
		width: 55%;
		height:480px;
		margin-left: 5%;
		margin: 1% 0 3% 5%;
	}
	
	.kontakt-content img{
		width: 40%;
		margin: 4% 0 0 0; 
	}
	
	.kontakt-bild {
		width: 35%;
		margin: 25px 0 0 0; 
		padding: 0;
	}
	
	input {
		width:80%;
		padding: 4px;
	}
	textarea {
		width: 80%; 
	}

	.mq-indicator::after	{ content: "TQ"; } 
	
}


/* Handy quer */
@media (min-width: 380px) and (max-width: 1024px) and (orientation: landscape) and (pointer: coarse) {

	.kontakt-form {
		width: 60%;
		margin: 0 0 5% 5%;
	}
	
	input {
		width:75%;
	}
	textarea {
		width: 75%; 
	}
	.kontakt-bild {
		margin: 2% 0 0 0; 
	}
	.mq-indicator::after { content: "HQ"; } 
}

/* Handy hochkant */
@media (max-width: 480px) { 

	.kontakt-form {
		width: 65%;
		margin: 1% 0 3% 5%;
	}

	input {
		width: 95%;
		margin: 2px 0 15px 0;
	}
	textarea {
		width: 95%; 
	}
	
	.kontakt-bild {
		margin: 6% 0 0 0; 
	}
	.mq-indicator::after { content: "HH"; } 
}