/*
 * Knöpfe „Nachricht per Mail“ und Telefon in Kopf, Kontakt und Fuß; Schrittnummern im Untermenü.
 * Auf dem PC stehen Menü und beide Knöpfe ab 1280 px in einer Zeile (knappere Abstände); reicht der Platz
 * nicht, rutscht ein ganzer Knopf in die nächste Zeile, nie sein Text (Auftraggeber).
 */

@media (min-width: 961px) {
	.menue {
		column-gap: 12px;
	}

	.menue__liste {
		gap: 2px;
	}

	/* v0.1.30 knapper: „So entsteht Ihr Bauprojekt“ ist ≈ 80 px länger als „So arbeiten wir“ (gemessen bei 1440 px:
	   sonst fehlten 25 px und der Telefonknopf rutschte in die zweite Zeile) */
	.menue__link {
		padding: 9px 8px;
		font-size: 0.95rem;
	}

	.menue__mail,
	.menue__telefon {
		padding: 0.6em 0.9em;
		font-size: 0.95rem;
	}
}

/* Laptops (961–1365 px): „Nachricht per Mail“ nur als Briefsymbol, der Text bleibt für Vorleseprogramme. So bleibt
   die Kopfleiste auch bei 1280 px einzeilig (v0.1.30). */
@media (min-width: 961px) and (max-width: 1365px) {
	.menue__mail {
		padding: 0.6em 0.75em;
	}

	.menue__mail span {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

.kopf__mail {
	display: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-left: auto;
	border: 2px solid var(--wein);
	border-radius: 6px;
	color: var(--wein);
}

.kopf__mail .symbol {
	width: 22px;
	height: 22px;
}

/* Kontakt: Knopf neben der Mailadresse; bricht als Ganzes um, wenn der Platz nicht reicht */
.kontakt__mailzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

.knopf--klein {
	padding: 0.5em 1em;
	font-size: 0.92rem;
}

/* Auf dunklem Grund (Fuß, Ablaufkarte) hebt ein goldener Rand den weinroten Knopf ab (Auftraggeber) */
.fuss__mail,
.schritt__knoepfe .knopf--voll {
	border-color: var(--gold);
}

.fuss__mail {
	margin: 4px 8px 0 0;
}

/* Facebook-Knopf im dunklen Fuß: heller Rahmen (nur Link, kein Facebook-Logo, siehe inc/inhalt.php) */
.fuss__facebook {
	margin-top: 10px;
	border-color: rgba(255, 255, 255, 0.7);
	color: var(--weiss);
}

.fuss__facebook:hover {
	border-color: var(--weiss);
	background: var(--weiss);
	color: var(--wein);
}

.fuss__adresse p {
	margin-top: 0;
}

@media (max-width: 960px) {
	.kopf__mail {
		display: inline-flex;
	}

	.kopf__mail + .kopf__anruf {
		margin-left: -14px;
	}

	.menue__mail {
		justify-content: center;
	}
}

/* Handy: Marke, Mail, Telefon und Menüknopf müssen in 360–390 px passen, sonst entsteht seitliches Scrollen */
@media (max-width: 560px) {
	.kopf__innen {
		gap: 8px;
	}

	.kopf__mail,
	.kopf__anruf,
	.menue-knopf {
		width: 44px;
		height: 44px;
	}

	.kopf__mail + .kopf__anruf {
		margin-left: 0;
	}

	.menue-knopf__linien {
		left: 11px;
		top: 21px;
	}
}

@media (max-width: 400px) {
	.marke__text {
		font-size: 0.82rem;
	}
}

/* Untermenü „So entsteht Ihr Bauprojekt“ (bis v0.1.29 „So arbeiten wir“): Schrittnummer in Gold vor dem Titel */
.untermenue__nummer {
	margin-right: 2px;
	color: var(--gold-text);
	font-variant-numeric: tabular-nums;
}