/*
Theme Name:   Wasserhärte Child
Description:  Child-Theme von Astra für wasserhärte-deutschland.de. Die Gestaltung steht in den Einstellungen von Astra und wird mit tools/einrichten.php gesetzt; hier steht nur, was davon abweicht.
Author:       Reblu GmbH
Template:     astra
Version:      0.7.14
Requires at least: 7.1
Requires PHP: 8.4
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wasserhaerte-child
*/

/*
 * Gestaltung „Frisch“ mit der Navigation aus Entwurf A (E-061, Aufgabe 006b). Vorlage:
 * entwuerfe/006a/b/. Farben, Schrift, Logo, Kopf- und Fußzeile setzen die Einstellungen von
 * Astra (tools/gestaltung/); hier stehen Navigation, Lesebreite, Bausteine und Fokus.
 */
:root {
	--whv-blau: #2f529e;           /* Links und Knöpfe, 7,4 : 1 auf Weiß */
	--whv-blau-tief: #1e3a7a;      /* Hover, Beginn des Verlaufs */
	--whv-blau-ende: #1f6f9e;      /* Ende des Verlaufs, Weiß darauf 5,5 : 1 */
	--whv-tuerkis: #3fb0ac;        /* Türkis der Bildmarke, nur Schmuck */
	--whv-tuerkis-dunkel: #0f766e; /* Symbole und kleine Schrift, 5,5 : 1 */
	--whv-tuerkis-flaeche: #e6f6f5;
	--whv-flaeche: #f3f7fb;
	--whv-text: #1b2540;
	--whv-text-2: #4a5670;
	--whv-warnung: #c2185b;
	--whv-warnung-flaeche: #fdeef3;
	--whv-radius: 16px;
	--whv-radius-klein: 12px;    /* kleine Kästen (seit 018f) */
	--whv-rand: #d5deea;         /* Rand von Karten und Kästen (seit 018f) */
	--whv-weiss: #fff;
	--whv-abstand-klein: 8px;   /* Abstände (seit 018a, E-096) */
	--whv-abstand: 16px;
	--whv-schrift-klein: 13px;  /* Fußnoten (seit 014) */
	--whv-schatten-karte: 0 12px 32px rgb(27 37 64 / 0.14);
	--whv-lesebreite: 1140px;   /* so breit wie der Inhaltsbereich von Astra (Wunsch des Auftraggebers) */
	--whv-breite: 1200px;
	--whv-verlauf: linear-gradient(135deg, var(--whv-blau-tief) 0%, var(--whv-blau) 55%, var(--whv-blau-ende) 100%);
}

/* Bausteine in voller Breite ragen über die Lesebreite hinaus; nichts darf seitlich scrollen. */
.site-content {
	overflow-x: clip;
}

/* Kopf vom Inhalt getrennt: feine Linie und leichter Schatten (Wunsch des Auftraggebers). */
#masthead {
	position: relative;
	z-index: 10;
	border-bottom: 1px solid #d5deea;
	box-shadow: 0 2px 12px rgb(27 37 64 / 0.06);
}

/* Abstand des Inhalts zum Kopf und zur Fußzeile (Wunsch des Auftraggebers). */
.site-content #primary {
	margin-top: 0;
	margin-bottom: 0;
	padding: 56px 0 88px;
}

/* Fokus sichtbar (T-31): 3 px in Blau, auf dunklen Flächen in Weiß. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--whv-blau);
	outline-offset: 3px;
}

:is(.is-style-wasserhaerte-einstieg, .site-footer) :is(a, button, input):focus-visible {
	outline-color: #fff;
}

/* Navigation wie in Entwurf A: Text ohne Pillen, Hover mit heller Fläche, aktueller Punkt
   mit Balken im Verlauf Türkis–Blau (E-061). */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	position: relative;
}

@media (min-width: 922px) {
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		margin: 0 2px;
		padding: 10px 14px;
		line-height: 1.4;
		border-radius: 6px;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover {
		background: var(--whv-flaeche);
	}

	.ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor) > .menu-link {
		border-radius: 0;
	}

	.ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor) > .menu-link::after {
		content: "";
		position: absolute;
		right: 14px;
		bottom: 0;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background: linear-gradient(90deg, var(--whv-tuerkis), var(--whv-blau));
	}

	.ast-builder-menu-1 .main-header-menu .sub-menu {
		padding: 8px;
		border: 0;
		border-radius: 12px;
		box-shadow: 0 12px 32px rgb(27 37 64 / 0.14);
	}

	.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link {
		border-radius: 6px;
	}

	.ast-builder-menu-1 .main-header-menu .sub-menu .menu-link:hover {
		background: var(--whv-flaeche);
	}
}

/* Zwischen Handy-Menü und voller Breite (Tablet quer, kleine Laptops) rutschte „Wasser-Qualität“ in
   eine zweite Zeile; bei 922 px brauchten schon die Wörter allein mehr Platz als da war (014).
   Hier deshalb Logo in Handy-Breite (160 px, E-061), Schrift 15 px und engere Punkte. */
@media (min-width: 922px) and (max-width: 1100px) {
	header .custom-logo-link img {
		width: 160px;
		max-width: 160px;
	}

	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
		margin: 0;
		padding-inline: calc(var(--whv-abstand-klein) * 0.75);
		font-size: 15px;
	}

	.ast-builder-menu-1 .main-header-menu > :is(.current-menu-item, .current-menu-ancestor) > .menu-link::after {
		right: calc(var(--whv-abstand-klein) * 0.75);
		left: calc(var(--whv-abstand-klein) * 0.75);
	}
}

/* Inhalt: Lesebreite, Überschriften, Trennlinien, Bilder. */
.entry-content {
	max-width: var(--whv-lesebreite);
	margin-inline: auto;
}

.entry-content h2::before {
	content: "";
	display: block;
	width: 48px;
	height: 5px;
	margin-bottom: 14px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--whv-tuerkis), var(--whv-blau));
}

.entry-content > h2 {
	margin-top: 2em;
}

/* Mehr Abstand zwischen H1 und Inhalt (Wunsch des Auftraggebers). */
.entry-content h1,
.entry-header .entry-title {
	margin-bottom: 32px;
}

/* Spalten im Inhalt ohne den Innenabstand von Astra (100 px / 80 px), damit Bilder und Karten die
   Breite nutzen. Bilder werden nie größer als ihr Original dargestellt (sonst unscharf): Ist die
   Spalte schmaler, füllen sie sie; untereinander stehen sie in Originalgröße mittig. */
.entry-content > .wp-block-columns {
	padding: 0;
	margin-block: 2.5em;
}

.entry-content .wp-block-column > .wp-block-image {
	text-align: center;
}

.entry-content .wp-block-column > .wp-block-image img {
	width: auto;
	max-width: 100%;
}

.entry-content .wp-block-separator {
	height: 5px;
	margin: 3em 0;
	border: 0;
	background: radial-gradient(circle, var(--whv-tuerkis) 2px, transparent 2.5px) 0 0 / 16px 5px repeat-x;
	opacity: 1;
}

.entry-content .wp-block-image img {
	border-radius: 12px;
}

/* Pfeile, Haken und „Tipp:“ tragen im Inhalt die Farbe der alten Seite (#37abda, 2,6 : 1, E-054);
   sie werden türkis wie im Entwurf. Der Inhalt bleibt unverändert, deshalb überschreibt das CSS
   die Inline-Farbe. */
.entry-content mark.has-inline-color[style*="#37abda"] {
	color: var(--whv-tuerkis-dunkel) !important;
	font-weight: 800;
}

/* Baustein „Einstieg“: Verlauf mit Bogen unten, mittig (Startseite, Gruppe in voller Breite). */
.entry-content > .is-style-wasserhaerte-einstieg {
	max-width: none;
	margin: 0 calc(50% - 50vw) 0;
	padding: 72px 16px 120px;
	background: var(--whv-verlauf);
	color: #fff;
	text-align: center;
	clip-path: ellipse(120% 100% at 50% 0%);
}

.is-style-wasserhaerte-einstieg > * {
	max-width: 860px;
	margin-inline: auto;
}

.is-style-wasserhaerte-einstieg :is(h1, h2, p) {
	color: #fff;
}

.is-style-wasserhaerte-einstieg h1 {
	margin-bottom: 16px;
	font-size: 46px;
	line-height: 1.12;
}

.is-style-wasserhaerte-einstieg p {
	font-size: 18px;
}

.is-style-wasserhaerte-einstieg mark.has-inline-color[style] {
	color: #fff !important;
}

/* Links auf dem Verlauf weiß und unterstrichen (404-Seite, 014). */
.is-style-wasserhaerte-einstieg p a {
	color: #fff;
	text-decoration: underline;
}

/* Die Trennlinie direkt nach dem Einstieg übernimmt der Bogen. */
.is-style-wasserhaerte-einstieg + .wp-block-separator {
	display: none;
}

.home .site-content #primary,
.error404 .site-content #primary {
	padding-top: 0;
}

/* Suchformular ([wasserhaerte_suche], Plugin). */
.wasserhaerte-suche {
	max-width: 640px;
	margin: 28px auto;
	text-align: left;
}

.wasserhaerte-suche__label {
	display: block;
	margin-bottom: 8px;
	font-weight: 800;
	text-align: center;
}

.wasserhaerte-suche__zeile {
	display: flex;
	gap: 6px;
	padding: 6px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 0 0 2px var(--whv-blau);
}

.is-style-wasserhaerte-einstieg .wasserhaerte-suche__zeile {
	box-shadow: 0 12px 32px rgb(10 20 50 / 0.2);
}

/* Feld und Knopf gleich hoch, auch gestapelt auf dem Handy (dort hob flex: 1 die Höhe auf). */
.wasserhaerte-suche .wasserhaerte-suche__feld {
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	min-height: 52px;
	padding: 0 20px;
	border: 0;
	border-radius: 999px;
	background: #fff;
	color: var(--whv-text);
	font-size: 20px;
	font-weight: 700;
}

.wasserhaerte-suche .wasserhaerte-suche__feld:focus-visible {
	outline: 3px solid var(--whv-blau);
	outline-offset: 0;
}

.wasserhaerte-suche .wasserhaerte-suche__knopf {
	flex: 0 0 auto;
	height: 52px;
	min-height: 52px;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--whv-blau);
	color: #fff;
	font-size: 17px;
	font-weight: 800;
	white-space: nowrap;
	cursor: pointer;
}

.wasserhaerte-suche .wasserhaerte-suche__knopf:hover {
	background: var(--whv-blau-tief);
}

/* Suchvorschläge beim Tippen (Plugin, Aufgabe 018a): Liste unter dem Feld im Fluss der Seite,
   nicht darüber schwebend, weil der Einstieg mit `clip-path` alles unter seinem Bogen abschneidet.
   Der aktive Vorschlag hat Fläche und Balken, nicht nur eine Farbe (T-31). */
.wasserhaerte-suche .wasserhaerte-suche__vorschlaege {
	margin: var(--whv-abstand-klein) 0 0;
	padding: var(--whv-abstand-klein) 0;
	list-style: none;
	background: var(--whv-weiss);
	border-radius: var(--whv-radius);
	box-shadow: var(--whv-schatten-karte);
	text-align: left;
}

.wasserhaerte-suche .wasserhaerte-suche__vorschlaege[hidden] {
	display: none;
}

.wasserhaerte-suche .wasserhaerte-suche__vorschlag {
	margin: 0;
	padding: var(--whv-abstand-klein) var(--whv-abstand);
	border-left: 4px solid transparent;
	color: var(--whv-text);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

.wasserhaerte-suche .wasserhaerte-suche__vorschlag:hover,
.wasserhaerte-suche .wasserhaerte-suche__vorschlag.is-aktiv {
	background: var(--whv-flaeche);
}

.wasserhaerte-suche .wasserhaerte-suche__vorschlag.is-aktiv {
	border-left-color: var(--whv-blau);
}

.wasserhaerte-suche .wasserhaerte-suche__bereich {
	color: var(--whv-text-2);
	font-weight: 400;
}

/* Trefferliste der Suche auf der Verzeichnisseite (Plugin, Aufgabe 010). Der Härtebereich steht
   immer als Text da; die Farbmarke ist nur Zusatz (T-31). `.entry-content` davor schlägt die
   Inhaltsbreite, die Astra jedem Kind des Inhalts gibt. */
.entry-content .wasserhaerte-treffer {
	max-width: 900px;
	margin: 0 auto 3em;
}

.entry-content .wasserhaerte-treffer__titel {
	margin: 1.5em 0 0.25em;
}

.wasserhaerte-treffer__zahl {
	color: var(--whv-text-2);
}

.wasserhaerte-treffer__rahmen {
	overflow-x: auto;
}

.entry-content .wasserhaerte-treffer__tabelle {
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
}

.wasserhaerte-treffer__tabelle :is(th, td) {
	padding: 12px 10px;
	border: 0;
	border-bottom: 1px solid #d5deea;
	text-align: left;
	vertical-align: top;
}

.wasserhaerte-treffer__tabelle th {
	color: var(--whv-text-2);
	font-size: 15px;
	font-weight: 800;
	border-bottom-width: 2px;
}

.wasserhaerte-treffer__tabelle tbody tr:hover {
	background: var(--whv-flaeche);
}

:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-treffer__tabelle a {
	color: var(--whv-blau);
	text-decoration: none;
}

:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-treffer__tabelle td:nth-child(2) a {
	font-weight: 700;
}

:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-treffer__tabelle a:hover {
	color: var(--whv-blau-tief);
	text-decoration: underline;
}

.wasserhaerte-treffer__wert {
	white-space: nowrap;
}

.wasserhaerte-treffer__bereich {
	display: inline-block;
	padding: 0 10px;
	border-radius: 999px;
	font-weight: 700;
}

.wasserhaerte-treffer__bereich--weich {
	background: var(--whv-tuerkis-flaeche);
	color: var(--whv-tuerkis-dunkel);
}

.wasserhaerte-treffer__bereich--mittel {
	background: #e8eef8;
	color: var(--whv-blau);
}

.wasserhaerte-treffer__bereich--hart {
	background: var(--whv-warnung-flaeche);
	color: #9c1449;
}

.wasserhaerte-treffer__ohne {
	color: var(--whv-text-2);
}

/* Baustein „Karten“: Teaser-Spalten mit Schatten, Bild oben, Knopf mit Rand. */
.entry-content > .is-style-wasserhaerte-karten {
	width: min(var(--whv-breite), 100vw - 32px);
	max-width: none;
	margin: 4em 0 0 calc(50% - min(var(--whv-breite) / 2, 50vw - 16px));
	gap: 32px;
}

.is-style-wasserhaerte-karten > .wp-block-column {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding: 0 26px 26px;
	background: #fff;
	border-radius: var(--whv-radius);
	box-shadow: 0 10px 30px rgb(27 37 64 / 0.10);
}

.is-style-wasserhaerte-karten > .wp-block-column > .wp-block-image {
	margin: 0 -26px 22px;
}

.is-style-wasserhaerte-karten > .wp-block-column > .wp-block-image img {
	width: 100%;
	border-radius: 0;
}

.is-style-wasserhaerte-karten h3 {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
}

.is-style-wasserhaerte-karten h3::before {
	content: none;
}

/* :is() hebt die Regel über `.ast-single-post .entry-content a` von Astra, das Links unterstreicht. */
:is(.entry-content, .ast-single-post .entry-content) .is-style-wasserhaerte-karten h3 a {
	color: var(--whv-text);
	text-decoration: none;
}

:is(.entry-content, .ast-single-post .entry-content) .is-style-wasserhaerte-karten h3 a:is(:hover, :focus-visible) {
	color: var(--whv-blau);
	text-decoration: underline;
}

.is-style-wasserhaerte-karten p {
	margin: 0 0 6px;
	font-size: 16px;
}

.is-style-wasserhaerte-karten .wp-block-buttons {
	margin-top: auto;
	padding-top: 16px;
}

.is-style-wasserhaerte-karten .wp-block-button__link {
	padding: 12px 22px;
	background: transparent;
	color: var(--whv-blau);
	box-shadow: inset 0 0 0 2px var(--whv-blau);
	font-size: 16px;
}

.is-style-wasserhaerte-karten .wp-block-button__link:hover {
	background: var(--whv-blau);
	color: #fff;
}

/* Baustein „Teaser“: drei Kacheln nach dem Entwurf des Auftraggebers mit den Farben der Site
   (018d, E-089). Jede Kachel ist ein Link; am Handy untereinander. */
.wasserhaerte-teaser {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	max-width: 960px;
	margin: 4em auto 0;
}

@media (max-width: 760px) {
	.wasserhaerte-teaser {
		grid-template-columns: 1fr;
		max-width: 400px;
	}
}

/* :is() hebt die Regel über `.ast-single-post .entry-content a` von Astra, das Links unterstreicht. */
:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-teaser__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: #fff;
	border: 1px solid #d5deea;
	border-radius: var(--whv-radius);
	color: var(--whv-text);
	text-decoration: none;
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.wasserhaerte-teaser__karte:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgb(27 37 64 / 0.14);
}

@media (prefers-reduced-motion: reduce) {
	.wasserhaerte-teaser__karte {
		transition: none;
	}

	.wasserhaerte-teaser__karte:hover {
		transform: none;
	}
}

.wasserhaerte-teaser__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	background: var(--whv-flaeche);
}

.wasserhaerte-teaser__bild > svg {
	width: 82%;
	height: 82%;
}

/* Farben der Bilder: Härtebereiche wie in der Trefferliste (weich Türkis, mittel Blau, hart Rot). */
.wasserhaerte-teaser__akzent,
.wasserhaerte-teaser__weich {
	fill: var(--whv-tuerkis);
}

.wasserhaerte-teaser__blau,
.wasserhaerte-teaser__mittel {
	fill: var(--whv-blau);
}

.wasserhaerte-teaser__tief {
	fill: var(--whv-blau-tief);
}

.wasserhaerte-teaser__hell {
	fill: var(--whv-flaeche);
}

.wasserhaerte-teaser__rand {
	stroke: var(--whv-blau-tief);
}

.wasserhaerte-teaser__hart {
	fill: var(--whv-warnung);
}

.wasserhaerte-teaser__leise {
	fill: var(--whv-text-2);
}

.wasserhaerte-teaser__produkt {
	position: relative;
	width: 78%;
	max-width: 210px;
	aspect-ratio: 1 / 1;
}

.wasserhaerte-teaser__produkt img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 4px 14px rgb(27 37 64 / 0.22);
}

.wasserhaerte-teaser__korb {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32%;
	aspect-ratio: 1 / 1;
	border: 3px solid var(--whv-flaeche);
	border-radius: 50%;
	background: var(--whv-blau);
	box-shadow: 0 3px 8px rgb(27 37 64 / 0.35);
}

.wasserhaerte-teaser__korb svg {
	width: 55%;
	height: 55%;
}

.wasserhaerte-teaser__inhalt {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 18px 18px 20px;
}

.entry-content .wasserhaerte-teaser__inhalt h2 {
	margin: 0;
	color: var(--whv-blau-tief);
	font-size: 1.02rem;
	line-height: 1.3;
}

.entry-content .wasserhaerte-teaser__inhalt h2::before {
	content: none;
}

.wasserhaerte-teaser__inhalt p {
	flex: 1;
	margin: 0;
	color: var(--whv-text-2);
	font-size: 0.86rem;
	line-height: 1.45;
}

.wasserhaerte-teaser__mehr {
	margin-top: 4px;
	color: var(--whv-blau);
	font-size: 0.82rem;
	font-weight: 600;
}

.wasserhaerte-teaser__karte:is(:hover, :focus-visible) .wasserhaerte-teaser__mehr {
	text-decoration: underline;
}

/* Knopf in Blau statt im Türkis des Entwurfs: Weiß auf Türkis hat zu wenig Kontrast. */
.wasserhaerte-teaser__kaufen {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin-top: 2px;
	padding: 9px 14px;
	border-radius: 8px;
	background: var(--whv-blau);
	color: #fff;
	font-size: 0.82rem;
	font-weight: 700;
}

.wasserhaerte-teaser__karte:is(:hover, :focus-visible) .wasserhaerte-teaser__kaufen {
	background: var(--whv-blau-tief);
}

/* Kennzeichnung „Anzeige“: in Kachel 2 und am Produktbild auf „Wasserhärte messen“ (Bild mit
   `sponsored`-Link und Bildunterschrift „Anzeige“), oben links auf dem Bild. */
.wasserhaerte-teaser__anzeige,
.wp-block-image:has(> a[rel~="sponsored"]) > figcaption {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	margin: 0;
	padding: 2px 7px;
	border-radius: 4px;
	background: rgb(27 37 64 / 0.75);
	color: #fff;
	font-size: 0.62rem;
	font-weight: 500;
	letter-spacing: 0.03em;
	line-height: 1.5;
}

/* Die Bildfläche so breit wie das Bild, damit das Schild auf dem Bild sitzt (mittig wie die anderen Bilder). */
.wp-block-image:has(> a[rel~="sponsored"]) {
	position: relative;
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Bausteine „Hinweis“: Block-Stile der Gruppe (Tipp türkis mit Haken, Wichtig mit Ausrufezeichen). */
.wp-block-group:is(.is-style-wasserhaerte-tipp, .is-style-wasserhaerte-wichtig) {
	position: relative;
	margin: 24px 0;
	padding: 20px 24px 20px 72px;
	border-radius: var(--whv-radius);
	background: var(--whv-tuerkis-flaeche);
}

.wp-block-group:is(.is-style-wasserhaerte-tipp, .is-style-wasserhaerte-wichtig)::before {
	content: "✓";
	position: absolute;
	top: 20px;
	left: 20px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--whv-tuerkis-dunkel);
	color: #fff;
	font-weight: 800;
}

.wp-block-group.is-style-wasserhaerte-wichtig {
	background: var(--whv-warnung-flaeche);
}

.wp-block-group.is-style-wasserhaerte-wichtig::before {
	content: "!";
	background: var(--whv-warnung);
}

.wp-block-group:is(.is-style-wasserhaerte-tipp, .is-style-wasserhaerte-wichtig) > :last-child {
	margin-bottom: 0;
}

/* Ortsseite (Plugin, Aufgabe 009): Einstieg direkt unter dem Kopf, darunter überlappend die
   Wert-Karte (Block-Stil der Gruppe) mit Wert, Umrechnung, Symbol, Skala (018b) und Stufentext. */
/* `body.` hebt die Regel über `.ast-plain-container.ast-single-post #primary` von Astra (Handy: 30 px oben). */
body.wasserhaerte-ortsseite .site-content #primary {
	margin-top: 0;
	padding-top: 0;
}

.wasserhaerte-ortsseite .entry-content > .is-style-wasserhaerte-einstieg {
	padding-bottom: 150px;
}

.wp-block-group.is-style-wasserhaerte-wert {
	position: relative;
	max-width: 760px;
	margin: -110px auto 40px;
	padding: 32px 36px;
	border-radius: var(--whv-radius);
	background: #fff;
	box-shadow: 0 16px 40px rgb(27 37 64 / 0.14);
}

.is-style-wasserhaerte-wert h2 {
	margin: 0 0 4px;
	font-size: 22px;
}

.is-style-wasserhaerte-wert p.wasserhaerte-wert {
	margin: 0;
	color: var(--whv-blau);
	font-size: 56px;
	font-weight: 800;
	line-height: 1.1;
}

/* „Kein Wert bekannt“ kleiner, mit rundem i davor (018b); die doppelte Klasse hält die Größe auch
   gegen die Regel für den Wert auf dem Handy. Das i ist Schmuck und wird nicht vorgelesen. */
.is-style-wasserhaerte-wert p.wasserhaerte-wert.wasserhaerte-wert--ohne {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 2px 0 6px;
	color: var(--whv-text);
	font-size: 24px;
}

.is-style-wasserhaerte-wert p.wasserhaerte-wert--ohne::before {
	content: "i" / "";
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border: 2px solid var(--whv-text-2);
	border-radius: 50%;
	background: var(--whv-flaeche);
	color: var(--whv-text-2);
	font-size: 17px;
	font-weight: 800;
	line-height: 1;
}

.is-style-wasserhaerte-wert p.wasserhaerte-umrechnung {
	margin: 4px 0 16px;
	color: var(--whv-text-2);
	font-size: 18px;
}

.is-style-wasserhaerte-wert .wp-block-image {
	margin: 0 0 16px;
}

.wasserhaerte-ortsseite .entry-content > .wp-block-image {
	margin-bottom: 32px;
}

/* Fußnote zum Datenstand am Ende der Ortsseite, über der Fußzeile (014, E-105): klein und unauffällig.
   Astra gibt Gruppen auf oberster Ebene Innenabstand (100 px oben und unten, 30 px seitlich); die Fußnote braucht keinen und steht bündig mit den Karten. */
.wasserhaerte-ortsseite .entry-content > :is(.wasserhaerte-datenstand-gepflegt, .wasserhaerte-datenstand-hinweis) {
	padding: 0;
}

.wasserhaerte-ortsseite .entry-content p.wasserhaerte-datenstand {
	margin: var(--whv-abstand) 0 0;
	color: var(--whv-text-2);
	font-size: var(--whv-schrift-klein);
	line-height: 1.5;
}

.wasserhaerte-ortsseite .entry-content .wasserhaerte-datenstand-gepflegt + .wasserhaerte-datenstand-hinweis p.wasserhaerte-datenstand {
	margin-top: var(--whv-abstand-klein);
}

/* Skala der Ortsseite (Plugin, 018b, [wasserhaerte_skala] und in [wasserhaerte_naehe]): drei Teile
   von 0 bis 25 °dH, der eigene Bereich kräftig. Mit Wert eine Markierung mit Sprechblase, ohne Wert
   ein Rahmen über die Spanne der Umgebung mit Punkten. Die Farbe trägt nie allein die Bedeutung:
   Name und Grenzen stehen darunter, der Wert in der Sprechblase und im Text für `role="img"`. */
.wasserhaerte-skala {
	margin: 22px 0 6px;
}

.wasserhaerte-skala__balken {
	position: relative;
	display: flex;
	gap: 4px;
	height: 14px;
	margin-top: 38px;
}

.wasserhaerte-skala__teil {
	display: block;
	height: 100%;
	border-radius: 7px;
	opacity: 0.28;
}

.wasserhaerte-skala__teil--weich {
	background: var(--whv-tuerkis);
}

.wasserhaerte-skala__teil--mittel {
	background: var(--whv-blau-ende);
}

.wasserhaerte-skala__teil--hart {
	background: var(--whv-blau-tief);
}

.wasserhaerte-skala__teil.ist-aktiv {
	opacity: 1;
}

.wasserhaerte-skala__marke {
	position: absolute;
	top: -6px;
	width: 4px;
	height: 26px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--whv-text);
	box-shadow: 0 0 0 3px #fff;
}

.wasserhaerte-skala__wert,
.wasserhaerte-skala__band-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	border-radius: 999px;
	font-weight: 700;
	line-height: 1.4;
}

.wasserhaerte-skala__wert {
	bottom: 32px;
	padding: 3px 9px;
	background: var(--whv-text);
	color: #fff;
	font-size: 14px;
}

.wasserhaerte-skala__wert::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -5px;
	margin-left: -5px;
	border: 5px solid transparent;
	border-bottom: 0;
	border-top-color: var(--whv-text);
}

/* Am Rand rückt die Sprechblase nach innen, damit sie nicht über die Skala hinausragt. */
.wasserhaerte-skala__marke--links .wasserhaerte-skala__wert,
.wasserhaerte-skala__band--links .wasserhaerte-skala__band-text {
	left: -6px;
	transform: none;
}

.wasserhaerte-skala__marke--rechts .wasserhaerte-skala__wert,
.wasserhaerte-skala__band--rechts .wasserhaerte-skala__band-text {
	right: -6px;
	left: auto;
	transform: none;
}

.wasserhaerte-skala__marke--links .wasserhaerte-skala__wert::after {
	left: 8px;
	margin-left: 0;
}

.wasserhaerte-skala__marke--rechts .wasserhaerte-skala__wert::after {
	right: 8px;
	left: auto;
	margin-left: 0;
}

.wasserhaerte-skala__band {
	position: absolute;
	top: -5px;
	height: 24px;
	border: 2px solid var(--whv-text);
	border-radius: 12px;
	background: rgb(27 37 64 / 0.07);
}

.wasserhaerte-skala__band-text {
	bottom: 31px;
	padding: 2px 8px;
	border: 1px solid #d5deea;
	background: #fff;
	color: var(--whv-text);
	font-size: 13px;
}

.wasserhaerte-skala__punkt {
	position: absolute;
	top: 2px;
	width: 10px;
	height: 10px;
	margin-left: -5px;
	border: 2px solid var(--whv-text);
	border-radius: 50%;
	background: #fff;
}

.wasserhaerte-skala__beschriftung {
	display: flex;
	gap: 4px;
	margin-top: 8px;
	color: var(--whv-text-2);
	font-size: 13px;
	line-height: 1.3;
}

.wasserhaerte-skala__beschriftung span {
	display: block;
}

.wasserhaerte-skala__beschriftung b {
	display: block;
	color: var(--whv-text);
	font-size: 14px;
}

.wasserhaerte-skala__beschriftung span.ist-aktiv b {
	color: var(--whv-blau);
}

/* Plakette des Härtebereichs (Nähe und Umgebung); Weiß darauf mindestens 5,5 : 1. */
.wasserhaerte-plakette {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 999px;
	color: #fff;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
}

.wasserhaerte-plakette--weich {
	background: var(--whv-tuerkis-dunkel);
}

.wasserhaerte-plakette--mittel {
	background: var(--whv-blau-ende);
}

.wasserhaerte-plakette--hart {
	background: var(--whv-blau-tief);
}

/* „Wasserhärte in der Nähe“ in der Wert-Karte ohne Wert ([wasserhaerte_naehe], 018b). */
.wasserhaerte-naehe {
	margin: 18px 0 4px;
}

.is-style-wasserhaerte-wert p.wasserhaerte-naehe__titel {
	margin: 0 0 10px;
	color: var(--whv-text-2);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wasserhaerte-naehe__karten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

/* :is() hebt die Regel über `.ast-single-post .entry-content a` von Astra, das Links unterstreicht. */
:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-naehe__karte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 14px 16px;
	border: 1px solid #d5deea;
	border-radius: 12px;
	background: var(--whv-flaeche);
	color: var(--whv-text);
	text-decoration: none;
}

:is(.entry-content, .ast-single-post .entry-content) a.wasserhaerte-naehe__karte:hover {
	border-color: var(--whv-blau);
	background: #fff;
	color: var(--whv-text);
}

/* Platz für die Beschriftung „Umgebung: …“ über dem Rahmen; der Abstand sitzt am Balken, weil der
   Außenabstand der Skala mit seinem zusammenfällt. */
.wasserhaerte-naehe .wasserhaerte-skala__balken {
	margin-top: 46px;
}

a.wasserhaerte-naehe__karte:focus-visible {
	outline: 3px solid var(--whv-blau);
	outline-offset: 2px;
}

.wasserhaerte-naehe__art {
	color: var(--whv-text-2);
	font-size: 12.5px;
}

.wasserhaerte-naehe__name {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
}

.wasserhaerte-naehe__zeile {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}

.wasserhaerte-naehe__wert {
	color: var(--whv-blau);
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
}

.wasserhaerte-naehe__klein {
	color: var(--whv-text-2);
	font-size: 13px;
}

.wasserhaerte-naehe__mehr {
	margin-top: 6px;
	color: var(--whv-blau);
	font-size: 13.5px;
	font-weight: 600;
}

.is-style-wasserhaerte-wert p.wasserhaerte-naehe__fuss {
	margin: 10px 0 0;
	color: var(--whv-text-2);
	font-size: 13.5px;
}

/* Wasserversorger und Wasserquelle ([wasserhaerte_versorgung], 018f, Entwurf in
   docs/material/versorger-entwurf/): Kasten unter der Skala bzw. unter den Werten aus der Nähe,
   zwei Spalten, mit nur einer Angabe und am Handy eine. Symbole in Türkis, Angaben als echter Text. */
.wasserhaerte-versorgung {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px 18px;
	margin: 20px 0 4px;
	padding: 14px var(--whv-abstand);
	border: 1px solid var(--whv-rand);
	border-radius: var(--whv-radius-klein);
	background: var(--whv-flaeche);
}

.wasserhaerte-versorgung--eins {
	grid-template-columns: 1fr;
}

.wasserhaerte-versorgung__zeile {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
}

.wasserhaerte-versorgung__symbol {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--whv-tuerkis-flaeche);
	color: var(--whv-tuerkis-dunkel);
}

.wasserhaerte-versorgung__symbol svg {
	width: 18px;
	height: 18px;
}

.wasserhaerte-versorgung__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.wasserhaerte-versorgung__art {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--whv-text-2);
}

.wasserhaerte-versorgung__wert {
	font-size: 16px;
	font-weight: 700;
	color: var(--whv-text);
}

.wasserhaerte-versorgung__klein {
	font-weight: 400;
	color: var(--whv-text-2);
}

.wasserhaerte-versorgung a.wasserhaerte-versorgung__wert {
	color: var(--whv-blau);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.wasserhaerte-versorgung a.wasserhaerte-versorgung__wert:hover {
	color: var(--whv-blau-tief);
}

/* Zeichen „↗“ hinter Links in ein neues Fenster (Versorger, Quelle im Datenstand). */
.wasserhaerte-extern {
	display: inline-block;
	margin-left: 4px;
	font-size: 13px;
	text-decoration: none;
}

@media (max-width: 600px) {
	.wasserhaerte-versorgung {
		grid-template-columns: 1fr;
	}
}

/* „Wasserhärte in der Umgebung“ vor „Wasserhärte weitersuchen“ ([wasserhaerte_umgebung], 018b):
   drei Spalten, am Tablet zwei, am Handy eine; jeder Eintrag ein Link. */
.wasserhaerte-umgebung {
	margin: 48px 0 44px;
}

.wasserhaerte-umgebung h3 {
	margin-bottom: 4px;
}

.entry-content p.wasserhaerte-umgebung__hinweis {
	margin: 0 0 16px;
	color: var(--whv-text-2);
	font-size: 15px;
}

.entry-content ul.wasserhaerte-umgebung__liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .wasserhaerte-umgebung__liste li {
	margin: 0;
}

:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-umgebung__eintrag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	padding: 11px 14px;
	border: 1px solid #d5deea;
	border-radius: 12px;
	background: #fff;
	color: var(--whv-text);
	text-decoration: none;
}

:is(.entry-content, .ast-single-post .entry-content) .wasserhaerte-umgebung__eintrag:hover {
	border-color: var(--whv-blau);
	box-shadow: 0 6px 16px rgb(27 37 64 / 0.08);
	color: var(--whv-text);
}

.wasserhaerte-umgebung__eintrag:focus-visible {
	outline: 3px solid var(--whv-blau);
	outline-offset: 2px;
}

.wasserhaerte-umgebung__name {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.25;
}

.wasserhaerte-umgebung__ort {
	display: block;
	color: var(--whv-text-2);
	font-size: 13px;
}

.wasserhaerte-umgebung__wert {
	flex: none;
	color: var(--whv-blau);
	font-size: 16px;
	font-weight: 800;
	text-align: right;
	white-space: nowrap;
}

.wasserhaerte-umgebung__wert .wasserhaerte-plakette {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	text-align: center;
}

@media (max-width: 900px) {
	.entry-content ul.wasserhaerte-umgebung__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.entry-content ul.wasserhaerte-umgebung__liste,
	.wasserhaerte-naehe__karten {
		grid-template-columns: 1fr;
	}

	.wasserhaerte-skala__beschriftung {
		font-size: 12px;
	}
}

/* Fußzeile: Abstand und Lesbarkeit; Farben setzt Astra. */
.site-footer .site-primary-footer-wrap {
	padding-block: 40px;
}

/* Menü „Rechtliches“: Astra setzt nur auf dem Desktop einen Abstand, und nur rechts; auf Handy und
   Tablet standen die Links ohne Abstand („ImpressumDatenschutz“). Jetzt überall gleicher Abstand,
   das Paar genau mittig (014). */
.site-footer .astra-footer-horizontal-menu {
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--whv-abstand-klein) calc(var(--whv-abstand) * 1.5);
}

.site-footer .astra-footer-horizontal-menu .menu-link {
	padding-inline: 0;
}

/* Spalten untereinander (WordPress stapelt unter 782 px): Karten höchstens so breit wie ihr Bild
   (370 px), damit es nicht vergrößert und unscharf wird. */
@media (max-width: 781px) {
	.is-style-wasserhaerte-karten > .wp-block-column {
		width: 100%;
		max-width: 370px;
		margin-inline: auto;
	}
}

/* Handy */
@media (max-width: 921px) {
	/* Astra setzt hier `.ast-plain-container.ast-no-sidebar #primary` auf 0; ohne Abstand stieß die
	   letzte Karte an die Fußzeile (014). Nur unten, oben bleibt es bei Astra bzw. den Regeln oben. */
	body.ast-plain-container .site-content #primary {
		padding-bottom: calc(var(--whv-abstand) * 3.5);
	}

	/* Links der Fußzeile mit Tippfläche von 44 px Höhe (vorher 31 px), sichtbar unverändert. */
	.site-footer .astra-footer-horizontal-menu .menu-link {
		min-height: 44px;
		align-items: center;
	}

	.site-footer .astra-footer-horizontal-menu {
		row-gap: 0;
	}

	.entry-content > .is-style-wasserhaerte-einstieg {
		padding: 40px 16px 72px;
		clip-path: ellipse(160% 100% at 50% 0%);
	}

	.is-style-wasserhaerte-einstieg h1 {
		font-size: 31px;
	}

	.wasserhaerte-suche__zeile {
		flex-direction: column;
		border-radius: 20px;
	}

	.wasserhaerte-suche .wasserhaerte-suche__feld,
	.wasserhaerte-suche .wasserhaerte-suche__knopf {
		border-radius: 14px;
	}

	/* „z. B. 70178 oder Stuttgart“ passt so auch auf 320 px breite Handys ganz ins Feld. */
	.wasserhaerte-suche .wasserhaerte-suche__feld::placeholder {
		font-size: 17px;
	}

	.entry-content > .is-style-wasserhaerte-karten {
		gap: 24px;
	}


	.wp-block-group:is(.is-style-wasserhaerte-tipp, .is-style-wasserhaerte-wichtig) {
		padding: 64px 20px 20px;
	}

	.wasserhaerte-ortsseite .entry-content > .is-style-wasserhaerte-einstieg {
		padding-bottom: 96px;
	}

	.wp-block-group.is-style-wasserhaerte-wert {
		margin-top: -64px;
		padding: 24px 20px;
	}

	.is-style-wasserhaerte-wert p.wasserhaerte-wert {
		font-size: 44px;
	}

	.entry-content :is(.alignleft, .alignright) {
		float: none;
		margin: 8px 0 16px;
	}
}

/* Trefferliste auf dem Handy: jede Zeile ein Block – PLZ und Ortsteil oben, darunter Stadt und
   Wasserhärte. Die Spaltenköpfe bleiben für Screenreader, die Rollen im HTML halten die Tabelle. */
@media (max-width: 600px) {
	.wasserhaerte-treffer__tabelle thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.wasserhaerte-treffer__tabelle tbody tr {
		display: grid;
		grid-template-columns: 4.2em 1fr;
		column-gap: 8px;
		padding: 12px 4px;
		border-bottom: 1px solid #d5deea;
	}

	.wasserhaerte-treffer__tabelle tbody td {
		display: block;
		padding: 0;
		border: 0;
	}

	.wasserhaerte-treffer__tabelle tbody td:nth-child(n + 3) {
		grid-column: 2;
	}
}