/*
##############################################################
# RESPONSIVE STYLES
##############################################################
*/

/* Global: Bilder responsiv */
img {
	max-width: 100%;
	height: auto;
}

img[src*="pixel_title"] {
	height: 1px;
}

/* Hamburger-Button: auf Desktop versteckt */
.nav-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 28px;
	color: #009900;
	cursor: pointer;
	padding: 5px 15px;
	line-height: 40px;
}

/*
##############################################################
# CONTENT LAYOUT KLASSEN
##############################################################
*/

/* Muster A: Bild + Text nebeneinander */
.content-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.content-col-img {
	flex: 0 0 110px;
}

.content-col-text {
	flex: 1;
}

/* Muster B: Zertifikat-Grid */
.cert-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	text-align: center;
}

.cert-card {
	padding: 10px;
}

.cert-card img.cert-img {
	max-width: 150px;
	width: 100%;
	height: auto;
}

/* Muster C: Kontakt-Info Zeile */
.contact-row {
	display: flex;
	gap: 20px;
	align-items: flex-start;
}

.contact-col {
	flex: 1;
}

/* Muster D: Formular */
.form-group {
	display: flex;
	gap: 10px;
	margin-bottom: 10px;
	align-items: flex-start;
}

.form-label {
	flex: 0 0 45%;
}

.form-field {
	flex: 1;
}

.form-field input[type="text"],
.form-field textarea {
	width: 100%;
	box-sizing: border-box;
}

.form-buttons {
	display: flex;
	gap: 5px;
	flex-wrap: wrap;
	align-items: center;
}

.form-buttons img {
	cursor: pointer;
}


/*
##############################################################
# TABLET (max-width: 900px)
##############################################################
*/

@media (max-width: 900px) {
	#navigation {
		font-size: 20px;
	}

	.nav-links {
		gap: 10px;
	}

	.Anavigation, .AnavigationActive {
		font-size: 20px;
	}

	#headercontenttitle {
		padding: 10px;
	}

	#headercontenttitle1 {
		max-width: 250px;
	}

	#headercontenttitle2 {
		max-width: 350px;
	}
}


/*
##############################################################
# MOBILE (max-width: 600px)
##############################################################
*/

@media (max-width: 600px) {

	/* Header: Logo und Titel untereinander */
	#headercontent {
		flex-direction: column;
		align-items: center;
		text-align: center;
		min-height: auto;
		padding: 10px;
	}

	#headercontentlogo {
		flex: none;
		padding: 10px 0;
		width: 120px;
	}

	#headercontenttitle {
		text-align: center;
		padding: 0 10px 10px;
	}

	#headercontenttitle1,
	#headercontenttitle2 {
		margin-left: auto;
		margin-right: auto;
		max-width: 80%;
	}

	/* Header-Top: Menü oben, Copyright unten, linksbündig */
	#headertop {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 6px 10px;
		gap: 2px;
	}

	#headerimprint {
		order: -1;
		text-align: left;
		margin-left: 0;
	}

	/* Navigation: Hamburger-Menu */
	.nav-toggle {
		display: block;
		width: 100%;
		text-align: center;
	}

	.nav-links {
		display: none;
		flex-direction: column;
		gap: 0;
		padding-bottom: 10px;
	}

	.nav-links.nav-open {
		display: flex;
	}

	.nav-links a {
		padding: 8px 0;
		border-top: 1px solid rgba(0, 153, 0, 0.2);
	}

	#navigation {
		height: auto;
		line-height: normal;
		padding: 5px 0;
	}

	.Anavigation, .AnavigationActive {
		font-size: 20px;
	}

	/* Content: weniger Padding */
	#contentcontainer {
		padding: 10px;
	}

	/* Muster A: untereinander */
	.content-row {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.content-col-img {
		flex: none;
	}

	.content-col-text {
		text-align: left;
	}

	/* Muster B: 1-spaltig */
	.cert-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Muster C: Kontakt untereinander */
	.contact-row {
		flex-direction: column;
	}

	/* Footer: halbe Höhe */
	#footer {
		height: 12px;
	}

	/* Muster D: Formular gestapelt */
	.form-group {
		flex-direction: column;
		gap: 4px;
	}

	.form-label {
		flex: none;
	}

	.form-field {
		width: 100%;
	}
}