/*
Theme Name:   Richter Haus und Hof
Theme URI:    https://rhuh.de
Description:  Child-Theme für Twenty Twenty-Five, gebaut für die Richter Haus und Hof GbR in Kirchberg an der Jagst. Farben, Schriften und Abstände werden zentral über die theme.json gesteuert – hier stehen nur Dinge, die sich mit theme.json nicht abbilden lassen.
Author:       Richter Haus und Hof GbR
Template:     twentytwentyfive
Version:      1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Text Domain:  richter-haus-und-hof
*/

/* ------------------------------------------------------------------
   1. Feste Kontaktleiste auf dem Handy
   Sichtbar nur unter 782px (WordPress-Mobil-Grenze). Wird in der
   functions.php als .rhh-mobil-leiste ausgegeben.

   Die Aufteilung ist absichtlich 2:1 – das Formular bekommt doppelt so
   viel Fläche wie die E-Mail, weil dort Fotos mitgeschickt werden können
   und die Anfrage strukturiert ankommt.
------------------------------------------------------------------ */

.rhh-mobil-leiste {
	display: none;
}

@media (max-width: 781px) {
	.rhh-mobil-leiste {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 999;
		display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 1px;
		background: var(--wp--preset--color--marke-dunkel);
		box-shadow: 0 -2px 12px rgb(0 0 0 / 18%);
	}

	.rhh-mobil-leiste a {
		padding: 0.9rem 0.5rem;
		font-family: var(--wp--preset--font-family--body);
		font-size: 1rem;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
	}

	.rhh-mobil-leiste a:first-child {
		background: var(--wp--preset--color--akzent-dunkel);
		color: #fff;
	}

	.rhh-mobil-leiste a:last-child {
		background: var(--wp--preset--color--marke-hell);
		color: #fff;
	}

	/* Platz schaffen, damit die Leiste den Fußbereich nicht überdeckt. */
	body {
		padding-bottom: 3.4rem;
	}
}

/* ------------------------------------------------------------------
   1b. Links auf dunklen Flächen
   Die globale Linkfarbe (#a8560e) ist für weiße und sandfarbene
   Hintergründe gedacht – dort erreicht sie 5,25:1. Auf Dunkelgrün fällt
   sie auf 1,9:1 und ist damit unlesbar. Deshalb hier ein warmes Beige:
   8,8:1 auf Waldgrün dunkel, 6,3:1 auf Waldgrün.

   Buttons sind ausgenommen, die haben ihre eigene Farbgebung.
   Diese Regel greift auch für Blöcke, die später dazukommen – man muss
   also nicht daran denken, die Linkfarbe jedes Mal von Hand zu setzen.
------------------------------------------------------------------ */

.has-marke-background-color a:not(.wp-block-button__link),
.has-marke-dunkel-background-color a:not(.wp-block-button__link),
.wp-block-cover a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--akzent-hell);
}

.has-marke-background-color a:not(.wp-block-button__link):hover,
.has-marke-dunkel-background-color a:not(.wp-block-button__link):hover,
.wp-block-cover a:not(.wp-block-button__link):hover,
.has-marke-background-color a:not(.wp-block-button__link):focus,
.has-marke-dunkel-background-color a:not(.wp-block-button__link):focus,
.wp-block-cover a:not(.wp-block-button__link):focus {
	color: #fff;
}

/* ------------------------------------------------------------------
   2. E-Mail-Adresse im Kopfbereich
------------------------------------------------------------------ */

.rhh-header-kontakt a {
	text-decoration: none;
	white-space: nowrap;
}

.rhh-header-kontakt a:hover,
.rhh-header-kontakt a:focus {
	text-decoration: underline;
}

/* ------------------------------------------------------------------
   3. Leistungs-Kacheln
   Die Kachel ist komplett klickbar, nicht nur die Überschrift.
------------------------------------------------------------------ */

.rhh-kachel {
	height: 100%;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.rhh-kachel:hover,
.rhh-kachel:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgb(34 73 52 / 14%);
}

/* ------------------------------------------------------------------
   4. Vorher/Nachher
   Zwei Bilder nebeneinander mit Beschriftung. Kein JavaScript, keine
   Schieberegler – funktioniert überall und lädt sofort.
------------------------------------------------------------------ */

.rhh-vorher-nachher figcaption {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-gedaempft);
}

/* ------------------------------------------------------------------
   5. Kleine Label-Zeile über Überschriften ("Seit 2019 in der Region")
------------------------------------------------------------------ */

.rhh-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
}

/* ------------------------------------------------------------------
   6. Formular-Grundstyling
   Greift für Fluent Forms und für native WordPress-Formularfelder,
   damit die Felder nicht wie ein Fremdkörper wirken.
------------------------------------------------------------------ */

.rhh-formular input[type="text"],
.rhh-formular input[type="email"],
.rhh-formular input[type="tel"],
.rhh-formular textarea,
.rhh-formular select,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform textarea,
.fluentform select {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 2px solid #cfd6d0;
	border-radius: 4px;
	background: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: 1.05rem;
}

.rhh-formular input:focus,
.rhh-formular textarea:focus,
.fluentform input:focus,
.fluentform textarea:focus {
	border-color: var(--wp--preset--color--marke);
	outline: 2px solid var(--wp--preset--color--akzent);
	outline-offset: 1px;
}

/* ------------------------------------------------------------------
   7. Sichtbarer Fokusrahmen für Tastaturbedienung
------------------------------------------------------------------ */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   8. Druckansicht – Kunden drucken Kontaktseiten tatsächlich aus
------------------------------------------------------------------ */

@media print {
	.rhh-mobil-leiste,
	.wp-block-navigation,
	.wp-block-buttons {
		display: none !important;
	}
}