/*
Theme Name: Elektriker Region Zürich
Theme URI: https://elektriker-region-zuerich.ch
Author: Stromkreis GmbH
Author URI: https://www.stromkreis.ch
Description: Eigenständiges Theme für elektriker-region-zuerich.ch. Seriöse, schnelle Gestaltung mit Systemschriften, ohne Webfonts, ohne externe Anfragen und ohne jQuery.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: elektriker-region-zuerich
*/

/* =========================================================
   1. Werte (Farbwelt: Nachtpetrol, Kupfer, Funke)
   Alle Text- und Hintergrundpaare erfüllen WCAG AA (geprüft mit Python).
   ========================================================= */
:root {
	--erz-night: #0a2a33;
	--erz-deep: #061f26;
	--erz-petrol: #0e5560;
	--erz-link: #0b6370;
	--erz-link-hover: #084b55;
	--erz-copper: #a6421a;
	--erz-copper-dark: #8c3513;
	--erz-copper-bright: #e4743a;
	--erz-spark: #f4c74f;
	--erz-mist: #eaf3f4;
	--erz-sand: #f7f3ec;
	--erz-ink: #10262c;
	--erz-muted: #455a60;
	--erz-line: #d3e0e2;
	--erz-sandline: #e6dfd1;
	--erz-field: #5e767d;
	--erz-placeholder: #5b7076;
	--erz-light: #d5e7ea;
	--erz-light-muted: #a9c7cd;
	--erz-focus: #0b6370;

	--erz-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--erz-max: 1180px;
	--erz-gutter: 1rem;
	--erz-radius: 14px;
	--erz-radius-sm: 10px;
	--erz-shadow-sm: 0 1px 2px rgba(10, 42, 51, 0.06), 0 6px 18px -10px rgba(10, 42, 51, 0.18);
	--erz-shadow-md: 0 2px 4px rgba(10, 42, 51, 0.07), 0 16px 32px -14px rgba(10, 42, 51, 0.28);
	--erz-header-h: 4rem;
}

/* =========================================================
   2. Grundlagen
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 5.5rem;
}

body {
	margin: 0;
	font-family: var(--erz-font);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--erz-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
svg {
	max-width: 100%;
	height: auto;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--erz-night);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.018em;
	text-wrap: balance;
}

h2 {
	font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.3rem);
}

h3 {
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

p,
ul,
ol,
figure {
	margin: 0;
}

a {
	color: var(--erz-link);
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--erz-link-hover);
	text-decoration-thickness: 0.14em;
}

:focus-visible {
	outline: 3px solid var(--erz-focus);
	outline-offset: 3px;
}

/* Auf dunklem Grund gelber Fokusrahmen */
.erz-hero,
.erz-page-head,
.erz-footer,
.erz-section--navy,
.erz-band--dark,
.erz-contact__box {
	--erz-focus: var(--erz-spark);
}

[id] {
	scroll-margin-top: 5.5rem;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.erz-skip {
	position: absolute;
	left: 1rem;
	top: -5rem;
	z-index: 1000;
	padding: 0.75rem 1.25rem;
	border-radius: 0 0 var(--erz-radius-sm) var(--erz-radius-sm);
	background: var(--erz-night);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.15s ease;
}

.erz-skip:focus {
	top: 0;
	color: #fff;
	--erz-focus: var(--erz-spark);
}

.erz-main {
	display: block;
}

.erz-main:focus {
	outline: none;
}

/* =========================================================
   3. Layout
   ========================================================= */
.erz-container {
	width: 100%;
	max-width: calc(var(--erz-max) + 2 * var(--erz-gutter));
	margin-inline: auto;
	padding-inline: var(--erz-gutter);
}

.erz-container.erz-prose {
	max-width: calc(46rem + 2 * var(--erz-gutter));
}

.erz-section {
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

/* Zwei helle Abschnitte hintereinander: Abstand nicht doppelt */
.erz-section:not(.erz-section--warm):not(.erz-section--navy) + .erz-section:not(.erz-section--warm):not(.erz-section--navy) {
	padding-top: 0;
}

.erz-section--warm {
	background: var(--erz-sand);
}

.erz-section--navy {
	background: var(--erz-night);
	color: var(--erz-light);
}

.erz-section--navy h2,
.erz-section--navy h3 {
	color: #fff;
}

.erz-section--navy a {
	color: #fff;
}

.erz-section--navy .erz-lead,
.erz-section--navy p {
	color: var(--erz-light);
}

/* Vertikaler Rhythmus */
.erz-container > * + *,
.erz-card > * + *,
.erz-note > * + *,
.erz-split > div > * + *,
.erz-prose > * + *,
.erz-contact__box > * + *,
.erz-contact__form > * + *,
.erz-cta-box > * + *,
.erz-quickform > * + * {
	margin-top: 1rem;
}

.erz-head > * + * {
	margin-top: 0.75rem;
}

.erz-container > .erz-head + *,
.erz-container > .erz-grid,
.erz-container > .erz-split,
.erz-container > .erz-steps,
.erz-container > .erz-faq,
.erz-container > .erz-contact,
.erz-container > .erz-table,
.erz-container > .erz-note,
.erz-container > .erz-cta-box,
.erz-container > .erz-chips,
.erz-container > .wp-block-buttons {
	margin-top: 2rem;
}

.erz-container > h2:not(:first-child) {
	margin-top: 2.5rem;
}

.erz-container > h3:not(:first-child) {
	margin-top: 1.75rem;
}

.erz-container > p,
.erz-container > .wp-block-list {
	max-width: 68ch;
}

.erz-container > .erz-chips,
.erz-container > .erz-hero__facts {
	max-width: none;
}

.erz-head {
	max-width: 46rem;
}

.erz-head--center {
	margin-inline: auto;
	text-align: center;
}

.erz-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--erz-link);
}

.erz-eyebrow::before {
	content: "";
	flex: none;
	width: 1.5rem;
	height: 2px;
	background: var(--erz-copper-bright);
}

.erz-head--center .erz-eyebrow {
	justify-content: center;
}

.erz-lead {
	max-width: 62ch;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--erz-muted);
}

.erz-head--center .erz-lead {
	margin-inline: auto;
}

/* Raster */
.erz-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
}

/* Zweispaltig */
.erz-split {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

/* =========================================================
   4. Schaltflächen
   ========================================================= */
.wp-block-buttons,
.wp-block-buttons.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
}

.wp-block-button {
	margin: 0;
}

.wp-block-button .wp-block-button__link,
.erz-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.875rem;
	padding: 0.65rem 1.4rem;
	border: 2px solid var(--erz-copper);
	border-radius: var(--erz-radius-sm);
	background: var(--erz-copper);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.wp-block-button .wp-block-button__link:hover,
.erz-btn:hover {
	border-color: var(--erz-copper-dark);
	background: var(--erz-copper-dark);
	color: #fff;
}

.wp-block-button .wp-block-button__link:active,
.erz-btn:active {
	transform: translateY(1px);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link {
	border-color: var(--erz-night);
	background: transparent;
	color: var(--erz-night);
}

.wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	background: var(--erz-night);
	color: #fff;
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.85);
	background: transparent;
	color: #fff;
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	border-color: #fff;
	background: #fff;
	color: var(--erz-night);
}

.wp-block-button.is-style-white .wp-block-button__link {
	border-color: #fff;
	background: #fff;
	color: var(--erz-night);
}

.wp-block-button.is-style-white .wp-block-button__link:hover {
	border-color: var(--erz-spark);
	background: var(--erz-spark);
	color: var(--erz-night);
}

/* Standardknopf auf dunklem Grund: helles Kupfer mit dunkler Schrift (Kontrast 4,9 bis 5,6) */
.erz-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.erz-band--dark .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.erz-section--navy .wp-block-button:not([class*="is-style-"]) .wp-block-button__link,
.erz-page-head .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	border-color: var(--erz-copper-bright);
	background: var(--erz-copper-bright);
	color: var(--erz-deep);
}

.erz-hero .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.erz-band--dark .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.erz-section--navy .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover,
.erz-page-head .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	border-color: var(--erz-spark);
	background: var(--erz-spark);
	color: var(--erz-deep);
}

/* Dunkle Umrandung auf dunklem Grund wäre unsichtbar */
.erz-section--navy .wp-block-button.is-style-outline-dark .wp-block-button__link,
.erz-band--dark .wp-block-button.is-style-outline-dark .wp-block-button__link {
	border-color: rgba(255, 255, 255, 0.85);
	color: #fff;
}

.erz-section--navy .wp-block-button.is-style-outline-dark .wp-block-button__link:hover,
.erz-band--dark .wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	background: #fff;
	color: var(--erz-night);
}

/* =========================================================
   5. Kopfbereich (Mobil zuerst)
   ========================================================= */
.erz-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--erz-line);
}

@media (min-width: 601px) {
	.admin-bar .erz-header {
		top: 46px;
	}
}

@media (min-width: 783px) {
	.admin-bar .erz-header {
		top: 32px;
	}
}

.erz-header__bar {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: var(--erz-header-h);
}

.erz-brand {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	margin-right: auto;
	color: var(--erz-night);
	text-decoration: none;
	min-width: 0;
}

.erz-brand:hover {
	color: var(--erz-night);
}

.erz-brand__mark {
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 11px;
}

.erz-brand__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.erz-brand__name {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.012em;
}

.erz-brand__sub {
	margin-top: 0.15rem;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--erz-muted);
}

/* Telefon-Symbol in der Leiste (nur Mobil und Tablet) */
.erz-header__tel {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius-sm);
	color: var(--erz-night);
	text-decoration: none;
}

.erz-header__tel:hover {
	background: var(--erz-mist);
	color: var(--erz-night);
}

.erz-header__offer {
	display: none;
}

/* Zwischen mobiler Kontaktleiste und Desktopmenü bleibt die Offerte direkt erreichbar. */
@media (min-width: 900px) and (max-width: 1199.98px) {
	.erz-header__offer {
		display: inline-flex;
		flex: none;
	}
}

.erz-burger {
	display: inline-flex;
	align-items: center;
	flex: none;
	gap: 0.55rem;
	height: 2.75rem;
	padding: 0 0.85rem;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius-sm);
	background: #fff;
	color: var(--erz-night);
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.erz-burger:hover {
	background: var(--erz-mist);
}

.erz-burger__bars,
.erz-burger__bars::before,
.erz-burger__bars::after {
	display: block;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.erz-burger__bars {
	position: relative;
}

.erz-burger__bars::before,
.erz-burger__bars::after {
	content: "";
	position: absolute;
	left: 0;
}

.erz-burger__bars::before {
	top: -6px;
}

.erz-burger__bars::after {
	top: 6px;
}

.erz-header.is-open .erz-burger__bars {
	background: transparent;
}

.erz-header.is-open .erz-burger__bars::before {
	transform: translateY(6px) rotate(45deg);
}

.erz-header.is-open .erz-burger__bars::after {
	transform: translateY(-6px) rotate(-45deg);
}

/* Aufklappfläche (Mobil): unter der Leiste, volle Breite */
.erz-header__panel {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100vh - var(--erz-header-h));
	max-height: calc(100dvh - var(--erz-header-h));
	overflow-y: auto;
	padding: 0.25rem var(--erz-gutter) 1.5rem;
	background: #fff;
	border-bottom: 1px solid var(--erz-line);
	box-shadow: 0 18px 28px -16px rgba(10, 42, 51, 0.35);
}

@media (max-width: 1199.98px) {
	.js .erz-header:not(.is-open) .erz-header__panel {
		display: none;
	}

	/* Ohne JavaScript steht das Menü offen unter der Leiste */
	html:not(.js) .erz-header {
		position: static;
	}

	html:not(.js) .erz-header__bar {
		flex-wrap: wrap;
	}

	html:not(.js) .erz-burger {
		display: none;
	}

	html:not(.js) .erz-header__panel {
		position: static;
		flex: 0 0 100%;
		max-height: none;
		padding-inline: 0;
		box-shadow: none;
		border: 0;
	}
}

/* Kleine Telefone: kompaktere Marke, Menüknopf nur als Symbol */
@media (max-width: 399.98px) {
	.erz-brand {
		gap: 0.55rem;
	}

	.erz-brand__mark {
		width: 36px;
		height: 36px;
	}

	.erz-brand__name {
		font-size: 0.9375rem;
	}

	.erz-burger {
		justify-content: center;
		width: 2.75rem;
		padding: 0;
	}

	.erz-burger__label {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}

.erz-menu,
.erz-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.erz-menu > li {
	position: relative;
	border-bottom: 1px solid var(--erz-line);
}

.erz-menu a {
	display: block;
	padding: 0.85rem 0;
	color: var(--erz-ink);
	font-weight: 600;
	text-decoration: none;
}

.erz-menu a:hover {
	color: var(--erz-link);
}

.erz-menu .menu-item-has-children > a {
	padding-right: 3.25rem;
}

.erz-menu [aria-current="page"],
.erz-menu .current-menu-item > a,
.erz-menu .current-menu-ancestor > a,
.erz-menu .current-menu-parent > a {
	color: var(--erz-copper);
}

.erz-subtoggle {
	position: absolute;
	top: 0.55rem;
	right: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: var(--erz-radius-sm);
	background: transparent;
	color: var(--erz-night);
	cursor: pointer;
}

.erz-subtoggle:hover {
	background: var(--erz-mist);
}

.erz-subtoggle svg {
	transition: transform 0.2s ease;
}

.erz-menu .is-open > .erz-subtoggle svg {
	transform: rotate(180deg);
}

.erz-menu .sub-menu {
	display: none;
	margin: 0 0 0.75rem 0.25rem;
	padding-left: 0.9rem;
	border-left: 2px solid var(--erz-line);
}

.erz-menu .is-open > .sub-menu {
	display: block;
}

html:not(.js) .erz-menu .sub-menu {
	display: block;
}

.erz-menu .sub-menu a {
	padding: 0.55rem 0;
	font-weight: 500;
}

.erz-header__cta {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.erz-header__cta .erz-btn {
	width: 100%;
}

/* Im Mobilmenü zeigt das Symbol in der Leiste den Anruf, die Nummer im Panel entfällt */
.erz-phone {
	display: none;
}

.erz-phone svg,
.erz-header__tel svg {
	flex: none;
	max-width: none;
}

/* =========================================================
   6. Hero (ohne Foto: Verlauf plus Leiterbahnen-Muster)
   ========================================================= */
.erz-hero,
.erz-page-head,
.erz-band--dark {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	color: #fff;
	background: linear-gradient(135deg, #061f26 0%, #0a3640 48%, #0e5560 100%);
}

.erz-hero::before,
.erz-page-head::before,
.erz-band--dark::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/pattern-dark.svg") 0 0 / 360px 360px repeat;
	opacity: 0.1;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(100deg, transparent 10%, #000 85%);
	mask-image: linear-gradient(100deg, transparent 10%, #000 85%);
}

/* Leiterbahn am unteren Rand */
.erz-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	height: 4px;
	background: linear-gradient(90deg, var(--erz-copper-bright) 0, var(--erz-spark) 22%, rgba(244, 199, 79, 0) 70%);
}

.erz-hero {
	padding-block: clamp(3.25rem, 2rem + 6vw, 7rem);
}

.erz-hero .erz-eyebrow,
.erz-page-head .erz-eyebrow,
.erz-band--dark .erz-eyebrow {
	color: var(--erz-spark);
}

.erz-hero h1 {
	max-width: 22ch;
	margin-top: 0.9rem;
	color: #fff;
	font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.75rem);
	line-height: 1.07;
	letter-spacing: -0.025em;
}

.erz-hero__lead {
	max-width: 40rem;
	margin-top: 1.25rem;
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--erz-light);
}

.erz-hero .wp-block-buttons {
	margin-top: 2rem;
}

/* Aufbau: .erz-hero.erz-hero--split > .erz-container mit Textgruppe und Kurzformular. */
.erz-hero--split > .erz-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
	gap: 2.5rem;
}

.erz-hero--split > .erz-container > * {
	min-width: 0;
	margin-top: 0;
}

.erz-hero--split .erz-quickform {
	width: 100%;
	box-shadow: var(--erz-shadow-md);
}

.wp-block-list.erz-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
	font-size: 0.9375rem;
	color: var(--erz-light);
}

.wp-block-list.erz-hero__facts li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0.3rem 0.9rem 0.3rem 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(6, 31, 38, 0.35);
}

.wp-block-list.erz-hero__facts li::before {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--erz-spark);
}

/* =========================================================
   7. Kopfband der Unterseiten und Brotkrumen
   ========================================================= */
.erz-page-head {
	padding-block: clamp(1.5rem, 1rem + 2.5vw, 3rem) clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
}

.erz-page-head__title {
	max-width: 24ch;
	margin-top: 1.25rem;
	color: #fff;
	font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3rem);
	line-height: 1.1;
	letter-spacing: -0.022em;
}

.erz-page-head__lead {
	max-width: 44rem;
	margin-top: 1rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--erz-light);
}

.erz-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.875rem;
	line-height: 1.4;
}

.erz-crumbs li {
	display: inline-flex;
	align-items: center;
	margin: 0;
	color: var(--erz-light);
}

.erz-crumbs li + li::before {
	content: "›";
	margin: 0 0.55rem;
	color: var(--erz-light-muted);
}

.erz-crumbs a {
	color: var(--erz-light);
	text-decoration-color: rgba(213, 231, 234, 0.55);
}

.erz-crumbs a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.erz-crumbs [aria-current="page"] {
	color: #fff;
	font-weight: 600;
}

/* =========================================================
   8. Karten
   ========================================================= */
.erz-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.4rem 1.4rem;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius);
	background: #fff;
	box-shadow: var(--erz-shadow-sm);
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.erz-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 1.4rem;
	width: 2.5rem;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--erz-copper-bright);
}

.erz-card:has(.erz-card__link a):hover {
	border-color: #8fb2b8;
	box-shadow: var(--erz-shadow-md);
	transform: translateY(-2px);
}

.erz-card h2,
.erz-card h3 {
	color: var(--erz-night);
	font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.erz-card p {
	color: var(--erz-muted);
}

.erz-card .wp-block-list {
	color: var(--erz-ink);
}

.erz-card a {
	position: relative;
	z-index: 1;
}

.erz-card__link {
	margin-top: auto !important;
	padding-top: 1.1rem;
}

.erz-card .erz-card__link a {
	position: static;
	z-index: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	font-weight: 600;
	text-decoration: none;
}

.erz-card__link a::before {
	content: "→" / "";
	order: 2;
	transition: transform 0.2s ease;
}

@supports not (content: "a" / "") {
	.erz-card__link a::before {
		content: "→";
	}
}

.erz-card__link a:hover::before {
	transform: translateX(3px);
}

/* Ganze Karte klickbar */
.erz-card__link a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: var(--erz-radius);
}

.erz-card__link a:focus-visible {
	outline: none;
}

.erz-card__link a:focus-visible::after {
	outline: 3px solid var(--erz-focus);
	outline-offset: 3px;
}

.erz-section--navy .erz-card {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
	box-shadow: none;
}

.erz-section--navy .erz-card h3 {
	color: #fff;
}

.erz-section--navy .erz-card p,
.erz-section--navy .erz-card .wp-block-list {
	color: var(--erz-light);
}

.erz-section--navy .erz-card a {
	color: var(--erz-spark);
}

/* Ratgeber: Karten behalten die grossflächigen Links und Fokusrahmen der Leistungskarten. */
.erz-article-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
}

.erz-article-card {
	min-width: 0;
	border-top: 3px solid var(--erz-petrol);
	overflow-wrap: anywhere;
}

.erz-article-card::before {
	display: none;
}

.erz-article-card:focus-within {
	border-color: var(--erz-link);
	box-shadow: var(--erz-shadow-md);
}

.erz-article-meta {
	color: var(--erz-muted);
	font-size: 0.875rem;
	line-height: 1.5;
}

.erz-page-head .erz-article-meta {
	color: var(--erz-light);
}

.erz-related {
	background: var(--erz-sand);
	border-top: 1px solid var(--erz-sandline);
}

.erz-related ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	padding: 0;
	list-style: none;
}

.erz-related li {
	min-width: 0;
}

.erz-related a {
	display: flex;
	align-items: center;
	min-height: 3rem;
	height: 100%;
	padding: 1rem 1.25rem;
	border: 1px solid var(--erz-field);
	border-radius: var(--erz-radius-sm);
	background: #fff;
	font-weight: 600;
	overflow-wrap: anywhere;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.erz-related a:hover {
	background: var(--erz-night);
	color: #fff;
}

/* =========================================================
   9. Aufruf (Band)
   ========================================================= */
.erz-band {
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
	background: var(--erz-mist);
	border-top: 1px solid var(--erz-line);
}

.erz-band .erz-container {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.erz-band .erz-container > * + * {
	margin-top: 0;
}

.erz-band h2 {
	font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2rem);
}

.erz-band p {
	max-width: 44rem;
	margin-top: 0.6rem;
	color: var(--erz-muted);
}

.erz-band .wp-block-buttons {
	flex: none;
}

.erz-band.erz-band--dark {
	border-top: 0;
	background: linear-gradient(135deg, #061f26 0%, #0a3640 48%, #0e5560 100%);
}

.erz-band--dark h2 {
	color: #fff;
}

.erz-band--dark p {
	color: var(--erz-light);
}

/* =========================================================
   10. Inhaltsbausteine
   ========================================================= */

/* Listen */
.wp-block-list {
	padding-left: 1.25rem;
}

.wp-block-list li {
	margin-top: 0.4rem;
	padding-left: 0.2rem;
}

.wp-block-list li:first-child {
	margin-top: 0;
}

.wp-block-list li::marker {
	color: var(--erz-copper);
}

/* Ablauf */
.erz-steps {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: minmax(0, 1fr);
	counter-reset: erz-step;
}

.erz-step {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 1rem;
	align-items: start;
	padding: 1.25rem 1.25rem 1.35rem;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius);
	background: #fff;
	counter-increment: erz-step;
}

.erz-step::before {
	content: counter(erz-step);
	display: grid;
	grid-row: 1 / span 2;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--erz-night);
	color: #fff;
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 0 0 4px var(--erz-mist);
}

.erz-step > * + * {
	margin-top: 0.4rem;
}

.erz-step p {
	color: var(--erz-muted);
}

.erz-section--warm .erz-step {
	border-color: var(--erz-sandline);
}

.erz-section--navy .erz-step {
	border-color: rgba(255, 255, 255, 0.16);
	background: rgba(255, 255, 255, 0.06);
}

.erz-section--navy .erz-step::before {
	background: var(--erz-spark);
	color: var(--erz-night);
	box-shadow: none;
}

/* Häufige Fragen */
.erz-faq {
	max-width: 52rem;
	border-top: 1px solid var(--erz-line);
}

.erz-faq .wp-block-details {
	border-bottom: 1px solid var(--erz-line);
}

.erz-faq summary {
	position: relative;
	display: block;
	padding: 1.1rem 3rem 1.1rem 0;
	color: var(--erz-night);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.erz-faq summary::-webkit-details-marker {
	display: none;
}

.erz-faq summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0.5rem;
	width: 0.65rem;
	height: 0.65rem;
	border-right: 2px solid var(--erz-copper);
	border-bottom: 2px solid var(--erz-copper);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.erz-faq details[open] > summary::after {
	transform: translateY(-25%) rotate(-135deg);
}

.erz-faq summary:hover {
	color: var(--erz-link);
}

.erz-faq summary:focus-visible {
	outline-offset: -2px;
}

.erz-faq details > :not(summary) {
	padding: 0 3rem 1.25rem 0;
	color: var(--erz-muted);
}

.erz-faq details > p {
	margin: 0;
}

/* Hinweisboxen */
.erz-note {
	position: relative;
	max-width: 52rem;
	padding: 1.15rem 1.25rem 1.2rem 3.4rem;
	border: 1px solid var(--erz-line);
	border-left: 4px solid var(--erz-link);
	border-radius: var(--erz-radius-sm);
	background: var(--erz-mist);
	color: var(--erz-ink);
}

.erz-note::before {
	content: "i";
	position: absolute;
	top: 1.15rem;
	left: 1.1rem;
	display: grid;
	place-items: center;
	width: 1.55rem;
	height: 1.55rem;
	border-radius: 50%;
	background: var(--erz-link);
	color: #fff;
	font-size: 0.9rem;
	font-weight: 700;
	font-style: italic;
	line-height: 1;
}

.erz-note h3 {
	font-size: 1.0625rem;
	line-height: 1.35;
}

.erz-note p {
	color: var(--erz-ink);
}

.erz-note--warn {
	border-color: #ecd3a3;
	border-left-color: var(--erz-copper);
	background: #fff4e0;
}

.erz-note--warn::before {
	content: "!";
	background: var(--erz-copper);
	font-style: normal;
}

.erz-note a {
	color: var(--erz-link-hover);
}

.erz-note--warn a {
	color: var(--erz-copper-dark);
}

/* Anfrage-Box mitten im Text */
.erz-cta-box {
	--erz-focus: var(--erz-link);
	max-width: 52rem;
	padding: clamp(1.25rem, 3vw, 2rem);
	border: 1px solid var(--erz-line);
	border-left: 5px solid var(--erz-copper);
	border-radius: var(--erz-radius-sm);
	background: var(--erz-mist);
	color: var(--erz-ink);
	box-shadow: var(--erz-shadow-sm);
}

.erz-cta-box:focus-within {
	border-left-color: var(--erz-link);
	box-shadow: var(--erz-shadow-md);
}

.erz-cta-box h3 {
	color: var(--erz-night);
	font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.3rem);
}

.erz-cta-box p {
	color: var(--erz-muted);
}

.erz-cta-box .wp-block-buttons {
	margin-top: 1.1rem;
	align-items: stretch;
}

.erz-cta-box .wp-block-button {
	flex: 1 1 14rem;
	min-width: 0;
}

.erz-cta-box .wp-block-button .wp-block-button__link {
	width: 100%;
	height: 100%;
	text-decoration: none;
}

/* Helle Box auch innerhalb dunkler Abschnitte: eigene Button- und Fokusfarben. */
.erz-cta-box .wp-block-button:not([class*="is-style-"]) .wp-block-button__link {
	border-color: var(--erz-copper);
	background: var(--erz-copper);
	color: #fff;
}

.erz-cta-box .wp-block-button:not([class*="is-style-"]) .wp-block-button__link:hover {
	border-color: var(--erz-copper-dark);
	background: var(--erz-copper-dark);
	color: #fff;
}

.erz-cta-box .wp-block-button.is-style-outline-dark .wp-block-button__link {
	border-color: var(--erz-night);
	background: transparent;
	color: var(--erz-night);
}

.erz-cta-box .wp-block-button.is-style-outline-dark .wp-block-button__link:hover {
	background: var(--erz-night);
	color: #fff;
}

.erz-prose > .erz-cta-box,
.erz-prose .erz-cta-box {
	margin-top: 2rem;
}

/* Dezenter Verweis auf einen passenden Ratgeber; bleibt im normalen Textfluss. */
.erz-ratgeber-hint {
	padding-inline-start: 0.85rem;
	border-inline-start: 2px solid currentColor;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--erz-muted);
}

/* Beitragsdatum */
.erz-meta {
	margin: 0;
	color: var(--erz-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.erz-card .erz-meta {
	margin-bottom: 0.15rem;
}

/* Chips (Linklisten) */
.wp-block-list.erz-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0;
	list-style: none;
}

.erz-chips li {
	margin: 0;
	padding: 0;
}

.erz-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0.4rem 1.1rem;
	border: 1.5px solid #9fb8bd;
	border-radius: 999px;
	background: #fff;
	color: var(--erz-night);
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.erz-chips a:hover {
	border-color: var(--erz-night);
	background: var(--erz-night);
	color: #fff;
}

.erz-section--navy .erz-chips a {
	border-color: rgba(255, 255, 255, 0.4);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}

.erz-section--navy .erz-chips a:hover {
	border-color: var(--erz-spark);
	background: var(--erz-spark);
	color: var(--erz-night);
}

/* Kurze Fakten (Haken) */
.wp-block-list.erz-facts {
	padding: 0;
	list-style: none;
}

.erz-facts li {
	position: relative;
	margin: 0;
	padding-left: 2rem;
}

.erz-facts li + li {
	margin-top: 0.65rem;
}

.erz-facts li::before {
	content: "";
	position: absolute;
	top: 0.28rem;
	left: 0;
	width: 1.35rem;
	height: 1.35rem;
	border-radius: 50%;
	background: var(--erz-link);
}

.erz-facts li::after {
	content: "";
	position: absolute;
	top: 0.56rem;
	left: 0.49rem;
	width: 0.36rem;
	height: 0.66rem;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Tabellen */
.wp-block-table.erz-table {
	margin-bottom: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius-sm);
	background: #fff;
}

.erz-table table {
	width: 100%;
	min-width: 22rem;
	margin: 0;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 0.9688rem;
}

.erz-table table th,
.erz-table table td {
	padding: 0.8rem 1rem;
	border: 0;
	border-bottom: 1px solid var(--erz-line);
	text-align: left;
	vertical-align: top;
}

.erz-table table thead {
	border: 0;
}

.erz-table table th {
	background: var(--erz-night);
	color: #fff;
	font-weight: 600;
}

.erz-table table tbody tr:nth-child(even) td {
	background: #f4f9f9;
}

.erz-table table tbody tr:last-child td {
	border-bottom: 0;
}

.erz-table table tbody td:first-child {
	font-weight: 600;
	color: var(--erz-night);
}

.erz-table figcaption {
	padding: 0.75rem 1rem;
	border-top: 1px solid var(--erz-line);
	color: var(--erz-muted);
	font-size: 0.875rem;
	text-align: left;
}

/* Fliesstext (Rechtstexte, Ratgeber) */
.erz-prose {
	max-width: 46rem;
}

.erz-prose h2 {
	margin-top: 2.25rem;
	font-size: clamp(1.4rem, 1.2rem + 0.9vw, 1.8rem);
}

.erz-prose h3 {
	margin-top: 1.75rem;
}

.erz-prose > h2:first-child,
.erz-prose > h3:first-child {
	margin-top: 0;
}

.erz-prose a {
	text-decoration: underline;
}

.erz-prose .wp-block-list li + li {
	margin-top: 0.5rem;
}

/* Lose Blöcke direkt im Inhalt (ohne Abschnitt) */
.erz-content > :where(p, h2, h3, h4, ul, ol, blockquote, figure, .wp-block-buttons, .wp-block-details) {
	width: min(100% - 2 * var(--erz-gutter), 46rem);
	margin: 1.25rem auto;
}

.erz-content > :where(h2, h3, h4) {
	margin-top: 2rem;
}

/* =========================================================
   11. Kontakt und Formular
   ========================================================= */
.erz-contact {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr);
}

.erz-contact__box {
	padding: 1.75rem 1.5rem;
	border-radius: var(--erz-radius);
	background: linear-gradient(160deg, var(--erz-night) 0%, #0b3a44 100%);
	color: var(--erz-light);
}

.erz-contact__box h2,
.erz-contact__box h3 {
	color: #fff;
}

.erz-contact__box h2 {
	font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem);
}

.erz-contact__box a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.5);
}

.erz-contact__box a:hover {
	color: var(--erz-spark);
	text-decoration-color: currentColor;
}

.erz-contact__box p {
	color: var(--erz-light);
}

.erz-contact__box a[href^="tel:"],
.erz-contact__box a[href^="mailto:"] {
	font-size: 1.125rem;
	font-weight: 600;
}

.erz-contact__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--erz-link);
}

.erz-contact__box .erz-contact__label {
	color: var(--erz-spark);
}

.erz-contact__box .erz-contact__label:not(:first-child) {
	margin-top: 1.5rem;
}

.erz-contact__box .erz-contact__label + * {
	margin-top: 0.25rem;
}

.erz-contact__form {
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--erz-line);
	border-radius: var(--erz-radius);
	background: #fff;
	box-shadow: var(--erz-shadow-sm);
}

.erz-form {
	display: block;
}

.erz-form label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--erz-night);
	font-size: 0.9688rem;
	font-weight: 600;
	line-height: 1.4;
}

.erz-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.erz-form select,
.erz-form textarea {
	display: block;
	width: 100%;
	min-height: 2.875rem;
	padding: 0.65rem 0.85rem;
	border: 1.5px solid var(--erz-field);
	border-radius: var(--erz-radius-sm);
	background: #fff;
	color: var(--erz-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.erz-form textarea {
	min-height: 9rem;
	resize: vertical;
}

.erz-form ::placeholder {
	color: var(--erz-placeholder);
	opacity: 1;
}

.erz-form input:not([type="checkbox"]):not([type="radio"]):hover,
.erz-form select:hover,
.erz-form textarea:hover {
	border-color: var(--erz-night);
}

.erz-form input:focus-visible,
.erz-form select:focus-visible,
.erz-form textarea:focus-visible {
	border-color: var(--erz-link);
	outline: 3px solid var(--erz-focus);
	outline-offset: 1px;
	box-shadow: none;
}

.erz-form input[type="checkbox"],
.erz-form input[type="radio"] {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0.2rem 0.6rem 0 0;
	flex: none;
	accent-color: var(--erz-link);
}

.erz-form p,
.erz-form .erz-form__row,
.erz-form .erz-field {
	margin: 0 0 1.1rem;
}

.erz-form .erz-form__row--2 {
	display: grid;
	gap: 1.1rem;
	grid-template-columns: minmax(0, 1fr);
}

.erz-form .erz-form__row--2 > * {
	margin: 0;
}

.erz-form .erz-form__consent,
.erz-form .erz-form__check {
	display: flex;
	align-items: flex-start;
}

.erz-form .erz-form__consent label,
.erz-form .erz-form__check label {
	margin: 0;
	font-weight: 400;
}

.erz-form .erz-form__hint,
.erz-form small {
	display: block;
	margin-top: 0.35rem;
	color: var(--erz-muted);
	font-size: 0.875rem;
	line-height: 1.45;
}

.erz-form .required,
.erz-form abbr[title] {
	color: var(--erz-copper);
	text-decoration: none;
}

.erz-form button[type="submit"],
.erz-form input[type="submit"] {
	min-width: 12rem;
}

.erz-notice {
	margin: 0 0 1.25rem;
	padding: 0.95rem 1.2rem;
	border: 1px solid var(--erz-line);
	border-left-width: 4px;
	border-radius: var(--erz-radius-sm);
	background: var(--erz-mist);
	color: var(--erz-ink);
	font-weight: 500;
}

.erz-notice--ok {
	border-color: #9fcdb1;
	border-left-color: #2e7d4f;
	background: #e6f4ea;
	color: #14442a;
}

.erz-notice--err {
	border-color: #eab0ab;
	border-left-color: #b3261e;
	background: #fdecea;
	color: #6b1510;
}

/* Fehler bleiben auch in hellen Formularen innerhalb dunkler Abschnitte lesbar. */
.erz-notice.erz-form__summary {
	--erz-focus: #6b1510;
	border: 2px solid #b3261e;
	border-left-width: 5px;
	background: #fdecea;
	color: #6b1510;
	overflow-wrap: anywhere;
}

.erz-form__summary:focus {
	outline: 3px solid #6b1510;
	outline-offset: 3px;
}

.erz-notice.erz-form__summary p,
.erz-notice.erz-form__summary a,
.erz-notice.erz-form__summary a:hover {
	color: #6b1510;
}

.erz-form__summary a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
}

.erz-form__summary ul {
	margin-block: 0.5rem 0;
	padding-inline-start: 1.4rem;
}

.erz-form__summary li + li {
	margin-top: 0.35rem;
}

.erz-field--error {
	--erz-focus: #6b1510;
	padding: 0.75rem;
	border: 2px solid #b3261e;
	border-radius: var(--erz-radius-sm);
	background: #fdecea;
	color: var(--erz-ink);
}

.erz-field-error,
.erz-form .erz-field-error {
	margin: 0.4rem 0 0;
	color: #6b1510;
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.5;
}

.erz-form input[aria-invalid="true"]:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.erz-form select[aria-invalid="true"],
.erz-form textarea[aria-invalid="true"] {
	--erz-focus: #6b1510;
	border: 2px solid #b3261e;
	background: #fff8f7;
	color: var(--erz-ink);
}

.erz-form input[aria-invalid="true"][type="checkbox"],
.erz-form input[aria-invalid="true"][type="radio"] {
	outline: 2px solid #b3261e;
	outline-offset: 2px;
}

.erz-form input[aria-invalid="true"]:focus,
.erz-form select[aria-invalid="true"]:focus,
.erz-form textarea[aria-invalid="true"]:focus {
	outline: 3px solid #6b1510;
	outline-offset: 3px;
}

/* Kurzformular (Shortcode erz_schnellanfrage) */
.erz-quickform {
	--erz-focus: var(--erz-link);
	padding: 1.4rem 1.25rem 1.5rem;
	border: 1px solid var(--erz-line);
	border-top: 4px solid var(--erz-copper-bright);
	border-radius: var(--erz-radius);
	background: #fff;
	color: var(--erz-ink);
	box-shadow: var(--erz-shadow-sm);
}

/* Der Shortcode kann in einer gleichnamigen Gutenberg-Gruppe liegen. */
.erz-quickform .erz-quickform {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.erz-quickform .erz-form a:not(.erz-btn) {
	color: var(--erz-link);
}

.erz-quickform .erz-form a:not(.erz-btn):hover {
	color: var(--erz-link-hover);
}

.erz-quickform__title {
	color: var(--erz-night);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -0.01em;
}

.erz-quickform .erz-form button[type="submit"] {
	width: 100%;
	min-width: 0;
}

/* Feste Kontaktleiste nur unter 900 Pixel; genug Platz bis zum letzten Footer-Link. */
.erz-mobilebar {
	display: none;
}

@media (max-width: 899.98px) {
	:root {
		--erz-mobilebar-space: calc(5.5rem + env(safe-area-inset-bottom, 0px));
	}

	html {
		scroll-padding-bottom: var(--erz-mobilebar-space);
	}

	body {
		padding-bottom: var(--erz-mobilebar-space);
	}

	.erz-mobilebar {
		position: fixed;
		inset: auto 0 0;
		z-index: 90;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.75rem;
		padding: 0.75rem max(1rem, env(safe-area-inset-right, 0px)) calc(0.75rem + env(safe-area-inset-bottom, 0px)) max(1rem, env(safe-area-inset-left, 0px));
		border-top: 1px solid var(--erz-field);
		background: #fff;
		box-shadow: 0 -4px 18px rgba(10, 42, 51, 0.12);
	}

	.erz-mobilebar .erz-btn {
		min-width: 0;
		min-height: 3rem;
		padding-inline: 0.5rem;
	}

	.erz-mobilebar__phone {
		border-color: var(--erz-night);
		background: var(--erz-night);
	}

	.erz-mobilebar__phone:hover {
		border-color: var(--erz-petrol);
		background: var(--erz-petrol);
	}

	/* Auch Checkboxen, Absenden und Links im Formular bleiben ohne Überlagerung bedienbar.
	   Der Body-Abstand bleibt erhalten, damit der Fokuswechsel keinen Layoutsprung auslöst. */
	body:has(form:focus-within, input:focus, select:focus, textarea:focus, [contenteditable]:focus) .erz-mobilebar {
		display: none;
	}
}

.erz-notice p + p {
	margin-top: 0.5rem;
}

/* Honeypot: für Menschen und Hilfstechnik unsichtbar */
.hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0;
	pointer-events: none;
}

/* =========================================================
   12. Fussbereich
   ========================================================= */
.erz-footer {
	position: relative;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem) 1.5rem;
	background: var(--erz-deep);
	color: var(--erz-light);
	font-size: 0.9688rem;
}

.erz-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--erz-copper-bright) 0, var(--erz-spark) 22%, rgba(244, 199, 79, 0) 70%);
}

.erz-footer a {
	color: var(--erz-light);
	text-decoration-color: rgba(213, 231, 234, 0.45);
}

.erz-footer a:hover {
	color: #fff;
	text-decoration-color: currentColor;
}

.erz-footer__grid {
	display: grid;
	gap: 2rem;
	grid-template-columns: minmax(0, 1fr);
}

.erz-footer .erz-brand--footer,
.erz-footer .erz-brand--footer:hover {
	color: #fff;
	text-decoration: none;
}

.erz-brand--footer .erz-brand__sub {
	color: var(--erz-light-muted);
}

.erz-footer__claim {
	max-width: 24rem;
	margin-top: 1rem;
	color: var(--erz-light-muted);
}

.erz-footer__title {
	margin: 0 0 0.9rem;
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.3;
	text-transform: uppercase;
}

.erz-footer__address {
	margin: 0 0 0.75rem;
	font-style: normal;
	line-height: 1.6;
}

.erz-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.erz-footer__list li + li {
	margin-top: 0.45rem;
}

.erz-footer__list a {
	display: inline-block;
	padding-block: 0.1rem;
}

.erz-footer__legal {
	display: grid;
	gap: 0.5rem;
	margin-top: 2.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: var(--erz-light-muted);
	font-size: 0.875rem;
}

.erz-footer__legal a {
	color: var(--erz-light);
}

/* =========================================================
   13. Fehlerseite, Seitennummerierung
   ========================================================= */
.erz-404 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}

.erz-404::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url("assets/img/pattern-light.svg") 0 0 / 360px 360px repeat;
	opacity: 0.12;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(260deg, #000 0%, transparent 70%);
	mask-image: linear-gradient(260deg, #000 0%, transparent 70%);
}

.erz-404__title {
	max-width: 18ch;
	font-size: clamp(2rem, 1.4rem + 3vw, 3.5rem);
}

.erz-404 .erz-lead {
	margin-top: 1rem;
}

.erz-404 .wp-block-buttons {
	margin-top: 2rem;
}

.erz-404__phone {
	margin-top: 1.75rem;
	color: var(--erz-muted);
}

.pagination .nav-links,
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 2rem;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.9rem;
	border: 1.5px solid #9fb8bd;
	border-radius: var(--erz-radius-sm);
	color: var(--erz-night);
	font-weight: 600;
	text-decoration: none;
}

a.page-numbers:hover {
	border-color: var(--erz-night);
	background: var(--erz-night);
	color: #fff;
}

.page-numbers.current {
	border-color: var(--erz-night);
	background: var(--erz-night);
	color: #fff;
}

/* =========================================================
   14. Ab 640 Pixel
   ========================================================= */
@media (min-width: 640px) {
	:root {
		--erz-gutter: 1.5rem;
	}

	.erz-grid {
		gap: 1.5rem;
	}

	.erz-grid--2,
	.erz-grid--3,
	.erz-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.erz-steps {
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	}

	.erz-step {
		display: block;
		padding: 1.5rem 1.35rem 1.5rem;
	}

	.erz-step::before {
		margin-bottom: 1rem;
	}

	.erz-step > * + * {
		margin-top: 0.5rem;
	}

	.erz-form .erz-form__row--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.erz-contact__box {
		padding: 2rem 1.75rem;
	}

	.erz-contact__form {
		padding: 2rem 1.75rem;
	}

	.erz-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 2.5rem 2rem;
	}

	.erz-footer__legal {
		grid-template-columns: repeat(2, auto);
		justify-content: space-between;
	}

	.erz-footer__esti {
		grid-column: 1 / -1;
	}

}

/* =========================================================
   15. Ab 900 Pixel
   ========================================================= */
@media (min-width: 900px) {
	:root {
		--erz-gutter: 2rem;
	}

	.erz-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.erz-hero--split > .erz-container {
		grid-template-columns: minmax(0, 1.15fr) minmax(20rem, 1fr);
		gap: clamp(2rem, 4vw, 4rem);
	}

	.erz-split {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 3.5rem;
	}

	.erz-split--flip > :first-child {
		order: 2;
	}

	.erz-band .erz-container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 3rem;
	}

	.erz-contact {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: 2rem;
		align-items: start;
	}

	.erz-contact__box {
		padding: 2.25rem 2rem;
	}

	.erz-contact__form {
		padding: 2.25rem 2.25rem;
	}

	.erz-crumbs ol {
		font-size: 0.9063rem;
	}
}

/* =========================================================
   16. Ab 1120 Pixel: vier Spalten; ab 1200 Pixel: Hauptmenü ausgeklappt
   (die Leiste braucht mit sechs Menüpunkten etwa 1170 Pixel)
   ========================================================= */
@media (min-width: 1120px) {
	.erz-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	:root {
		--erz-header-h: 4.75rem;
	}

	.erz-footer__grid {
		grid-template-columns: 1.5fr 1.15fr 1fr 0.9fr 0.8fr;
		gap: 2.25rem;
	}

	.erz-header__bar {
		max-width: calc(1320px + 2 * var(--erz-gutter));
		gap: 1.5rem;
	}

	.erz-brand {
		flex: none;
	}

	.erz-header__tel,
	.erz-burger {
		display: none;
	}

	.erz-header__panel {
		position: static;
		display: flex;
		flex: 1 1 auto;
		align-self: stretch;
		align-items: stretch;
		justify-content: flex-end;
		gap: 1.25rem;
		max-height: none;
		padding: 0;
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}

	.erz-nav {
		display: flex;
		align-items: stretch;
	}

	.erz-menu {
		display: flex;
		align-items: stretch;
		gap: 0.1rem;
	}

	.erz-menu > li {
		display: flex;
		align-items: center;
		border-bottom: 0;
	}

	.erz-menu a {
		position: relative;
		padding: 0.55rem 0.62rem;
		border-radius: 8px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.erz-menu > li > a::after {
		content: "";
		position: absolute;
		left: 0.62rem;
		right: 0.62rem;
		bottom: 0.2rem;
		height: 2px;
		background: var(--erz-copper-bright);
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.2s ease;
	}

	.erz-menu > li > a:hover::after,
	.erz-menu > li:hover > a::after,
	.erz-menu > li > a[aria-current="page"]::after,
	.erz-menu > .current-menu-item > a::after,
	.erz-menu > .current-menu-ancestor > a::after,
	.erz-menu > .current-menu-parent > a::after {
		transform: scaleX(1);
	}

	.erz-menu .menu-item-has-children > a {
		padding-right: 0.35rem;
	}

	.erz-subtoggle {
		position: static;
		width: 1.75rem;
		height: 1.75rem;
		margin-left: -0.1rem;
		border-radius: 6px;
	}

	.erz-menu .sub-menu {
		position: absolute;
		top: 100%;
		left: -0.5rem;
		z-index: 20;
		display: block;
		min-width: 18.5rem;
		margin: 0;
		padding: 0.5rem;
		border: 1px solid var(--erz-line);
		border-top: 3px solid var(--erz-copper-bright);
		border-radius: 0 0 var(--erz-radius-sm) var(--erz-radius-sm);
		background: #fff;
		box-shadow: var(--erz-shadow-md);
		visibility: hidden;
		opacity: 0;
		transform: translateY(6px);
		transition: opacity 0.15s ease, transform 0.15s ease;
	}

	/* Der Header setzt .js früh; bis site.js bereit ist, bleibt der CSS-Rückfall aktiv. */
	html:not(.js) .erz-menu .menu-item-has-children:hover > .sub-menu,
	html:not(.js) .erz-menu .menu-item-has-children:focus-within > .sub-menu,
	.erz-nav:not(.is-ready) .menu-item-has-children:hover > .sub-menu,
	.erz-nav:not(.is-ready) .menu-item-has-children:focus-within > .sub-menu,
	.js .erz-nav.is-ready .menu-item-has-children.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: none;
		transition-delay: 0s;
	}

	.erz-menu .sub-menu a {
		padding: 0.65rem 0.9rem;
		font-weight: 500;
		white-space: normal;
	}

	.erz-menu .sub-menu a:hover {
		background: var(--erz-mist);
		color: var(--erz-link-hover);
	}

	.erz-header__cta {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		margin-top: 0;
	}

	.erz-header__cta .erz-btn {
		width: auto;
		min-height: 2.75rem;
		padding-inline: 1.2rem;
		white-space: nowrap;
	}

	.erz-phone {
		display: inline-flex;
		align-items: center;
		gap: 0.5rem;
		color: var(--erz-night);
		font-weight: 600;
		white-space: nowrap;
		text-decoration: none;
	}

	.erz-phone:hover {
		color: var(--erz-link);
	}

	/* Unter 1340 Pixel nur das Symbol, die Nummer steht in der Beschriftung */
	.erz-phone__text {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

}

@media (min-width: 1340px) {
	.erz-phone__text {
		position: static;
		width: auto;
		height: auto;
		margin: 0;
		overflow: visible;
		clip: auto;
	}
}

/* =========================================================
   17. Bewegung, Hochkontrast, Druck
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0s !important;
	}

	.erz-card:has(.erz-card__link a):hover {
		transform: none;
	}
}

@media (forced-colors: active) {
	.erz-burger__bars,
	.erz-burger__bars::before,
	.erz-burger__bars::after,
	.erz-facts li::before {
		background: CanvasText;
	}

	.wp-block-list.erz-hero__facts li::before {
		background: Highlight;
	}
}

@media print {
	.erz-header,
	.erz-mobilebar,
	.erz-quickform,
	.erz-cta-box,
	.erz-skip,
	.erz-band,
	.erz-footer__grid,
	.wp-block-buttons {
		display: none !important;
	}

	.erz-hero,
	.erz-page-head {
		background: none !important;
		color: #000 !important;
	}

	.erz-hero h1,
	.erz-page-head__title,
	.erz-page-head__lead,
	.erz-hero__lead {
		color: #000 !important;
	}

	body {
		padding-bottom: 0;
		font-size: 11pt;
	}
}