/* W4 Pflege – Theme-Stile. Farben, Schriften und Abstände kommen als Tokens aus theme.json. */

:root {
	--w4-blau: var(--wp--preset--color--blau);
	--w4-blau-dunkel: var(--wp--preset--color--blau-dunkel);
	--w4-petrol: var(--wp--preset--color--petrol);
	--w4-petrol-dunkel: var(--wp--preset--color--petrol-dunkel);
	--w4-hellblau: var(--wp--preset--color--hellblau);
	--w4-hellblau-12: var(--wp--preset--color--hellblau-12);
	--w4-hellblau-25: var(--wp--preset--color--hellblau-25);
	--w4-weiss: var(--wp--preset--color--weiss);
	--w4-fokus: var(--w4-blau);
	--w4-radius: 5px;
	--w4-dauer: 200ms;
	--w4-kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
	--w4-leiste: 0px;
}

html { scroll-padding-top: 1rem; }
body { -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; }

p, li { hyphens: auto; -webkit-hyphens: auto; }
/* Überschriften nicht automatisch trennen, das liest sich in Versalien schlecht */
h1, h2, h3, h4 { hyphens: manual; -webkit-hyphens: manual; }
p, li { overflow-wrap: break-word; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
.w4-lesetext p, .w4-leistung__text p { max-width: 66ch; }

/* Fokus: immer sichtbar, Farbe passend zur Fläche */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--w4-fokus);
	outline-offset: 3px;
	border-radius: 2px;
}
.has-blau-background-color, .has-blau-dunkel-background-color, .has-navy-247-background-color { --w4-fokus: var(--w4-hellblau); }
.has-petrol-background-color, .has-petrol-dunkel-background-color, .has-lila-247-background-color { --w4-fokus: var(--w4-weiss); }
.has-hellblau-background-color { --w4-fokus: var(--w4-blau-dunkel); }

/* Sprunglink */
.skip-link.screen-reader-text:focus { background: var(--w4-weiss); color: var(--w4-blau); font-size: 1.25rem; padding: 1rem 1.5rem; z-index: 100000; }

/* Knöpfe: groß genug, klares Feedback */
.wp-element-button, .wp-block-button__link {
	min-height: 3.5rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	transition: background-color var(--w4-dauer) var(--w4-kurve), color var(--w4-dauer) var(--w4-kurve), transform 120ms var(--w4-kurve);
}
.wp-block-button__link:active { transform: translateY(1px); }
.wp-block-button__link.has-weiss-background-color:hover,
.wp-block-button__link.has-weiss-background-color:focus-visible { background-color: var(--w4-hellblau-12) !important; color: var(--w4-blau) !important; }
.wp-block-button__link.has-petrol-background-color:hover,
.wp-block-button__link.has-petrol-background-color:focus-visible { background-color: var(--w4-petrol-dunkel) !important; }
.wp-block-button__link.has-blau-background-color:hover,
.wp-block-button__link.has-blau-background-color:focus-visible { background-color: var(--w4-blau-dunkel) !important; }

/* Telefon-Symbol */
.w4-btn-telefon .wp-block-button__link::before {
	content: "";
	width: 1.25em;
	height: 1.25em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--w4-telefon) center / contain no-repeat;
	mask: var(--w4-telefon) center / contain no-repeat;
}
.w4-btn-telefon .wp-block-button__link { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Das Motiv: die Kachel aus dem W4-Logo */
.is-style-kachel img,
.wp-block-group.is-style-kachel {
	-webkit-mask: var(--w4-kachel) center / 100% 100% no-repeat;
	mask: var(--w4-kachel) center / 100% 100% no-repeat;
}
.wp-block-image.is-style-kachel img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kopfzeile ---------- */
.w4-kopf { position: relative; z-index: 20; }
.w4-kopf__zeile { gap: 1.5rem; }
.w4-kopf__logo { margin: 0; flex: none; }
.w4-kopf__logo img { width: 88px !important; height: auto; display: block; }
.w4-kopf__logo a { display: block; border-radius: 12px; }
.w4-kopf__rechts { gap: 1.5rem; }

.w4-menue .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 3rem;
	padding: 0.25rem 0.75rem;
	text-decoration: none;
	font-weight: 500;
	border-radius: var(--w4-radius);
	box-shadow: inset 0 -4px 0 transparent;
	transition: box-shadow var(--w4-dauer) var(--w4-kurve), background-color var(--w4-dauer) var(--w4-kurve);
}
.w4-menue .wp-block-navigation-item__content:hover { background-color: rgba(255, 255, 255, 0.14); }
.w4-menue .current-menu-item > .wp-block-navigation-item__content,
.w4-menue [aria-current="page"] { box-shadow: inset 0 -4px 0 var(--w4-hellblau); }

/* Menü-Knopf mit Text „Menü“ und Symbol */
.w4-menue .wp-block-navigation__responsive-container-open {
	min-height: 3rem;
	padding: 0.5rem 1rem;
	gap: 0.6rem;
	align-items: center;
	border: 2px solid var(--w4-blau);
	border-radius: var(--w4-radius);
	font-size: var(--wp--preset--font-size--text);
	font-weight: 500;
	color: var(--w4-blau);
	background: var(--w4-weiss);
}
.w4-menue .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 1.25rem;
	height: 0.9rem;
	background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat, linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.w4-menue .wp-block-navigation__responsive-container-open:hover { background: var(--w4-hellblau-12); }

/* Offenes Menü: große Ziele auf Dunkelblau */
.w4-menue .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.5rem clamp(1.5rem, 4vw, 3rem) 6rem;
}
.w4-menue .is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 6rem !important; }
.w4-menue .is-menu-open .wp-block-navigation__container { gap: 0.5rem !important; }
.w4-menue .is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--gross);
	line-height: 1.1;
	min-height: 3.5rem;
	padding: 0.25rem 0;
}
.w4-menue .is-menu-open .wp-block-navigation-item__content:hover { background: none; text-decoration: underline; }
.w4-menue .is-menu-open .current-menu-item > .wp-block-navigation-item__content { box-shadow: inset 0 -4px 0 var(--w4-hellblau); }
.w4-menue .is-menu-open { --w4-fokus: var(--w4-hellblau); }
/* Schließen-Knopf: Text „Schließen“ (kommt von WordPress) mit Kreuz, wie der Menü-Knopf */
.w4-menue .wp-block-navigation__responsive-container-close {
	top: 1rem; right: 1rem;
	display: flex; align-items: center; gap: 0.6rem;
	min-height: 3rem; padding: 0.5rem 1rem;
	border: 2px solid currentColor; border-radius: var(--w4-radius);
	font-size: var(--wp--preset--font-size--text); font-weight: 500; line-height: 1;
}
.w4-menue .wp-block-navigation__responsive-container-close::before {
	content: "\00d7"; font-size: 1.75rem; font-weight: 400; line-height: 0.8;
}
.w4-menue .wp-block-navigation__responsive-container-close svg { width: 1.25rem; height: 1.25rem; }

/* Menü bis 1023 px eingeklappt (Kern-Umschaltung liegt sonst bei 600 px) */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.w4-menue .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.w4-menue .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.w4-menue .is-menu-open .wp-block-navigation__responsive-container-close { display: flex; }
	.w4-menue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
	.w4-menue .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 781.98px) {
	.w4-kopf__logo img { width: 64px !important; }
	.wp-block-buttons.w4-kopf__telefon { display: none; }
}

/* ---------- Anruf-Leiste (nur mobil) ---------- */
.wp-block-group.w4-anrufleiste { display: none; }
@media (max-width: 781.98px) {
	:root { --w4-leiste: calc(4.5rem + env(safe-area-inset-bottom)); }
	body { padding-bottom: var(--w4-leiste); }
	.wp-block-group.w4-anrufleiste {
		display: flex;
		position: fixed;
		inset: auto 0 0 0;
		z-index: 50;
		padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
		margin: 0 !important;
		--w4-fokus: var(--w4-hellblau);
	}
	.w4-anrufleiste__knoepfe { width: 100%; gap: 0.5rem; flex-wrap: nowrap; }
	.w4-anrufleiste__anrufen { flex: 1 1 auto; min-width: 0; }
	.w4-anrufleiste__anrufen .wp-block-button__link { width: 100%; }
	.w4-anrufleiste__kontakt { flex: none; }
	.w4-anrufleiste .wp-block-button__link { min-height: 3.5rem; padding: 0.5rem 1rem; font-size: 1.125rem; }
	.w4-anrufleiste__wort { font-weight: 700; }
}
@media (max-width: 429.98px) {
	.w4-anrufleiste__wort { display: none; }
}

/* ---------- Hero ---------- */
.w4-hero { overflow: hidden; }
.w4-hero__spalten { gap: var(--wp--preset--spacing--40); margin-bottom: 0; }
.w4-hero__titel {
	color: var(--w4-weiss);
	font-size: clamp(2.75rem, 1rem + 5.4vw, 5.5rem);
	margin: 0 0 var(--wp--preset--spacing--40);
	letter-spacing: -0.01em;
	line-height: 1 !important;
}
.w4-markiert {
	background: var(--w4-blau);
	color: var(--w4-weiss);
	padding: 0 0.12em;
	margin-left: -0.12em;
	border-radius: 0.06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.w4-hero__text { padding-block: var(--wp--preset--spacing--50); }
.w4-hero__spalten { min-height: min(64vh, 38rem); }
.w4-btn-gross .wp-block-button__link { font-size: var(--wp--preset--font-size--mittel); font-weight: 700; min-height: 4rem; padding-inline: 1.5rem; }
.w4-btn__klein { font-weight: 500; }
.w4-hero__bildspalte { position: relative; align-self: flex-end !important; }
.w4-hero__bildspalte::before {
	content: "";
	position: absolute;
	left: 2%;
	right: -14%;
	top: 6%;
	bottom: -8%;
	background: var(--w4-hellblau);
	-webkit-mask: var(--w4-kachel) center / 100% 100% no-repeat;
	mask: var(--w4-kachel) center / 100% 100% no-repeat;
}
.w4-hero__bild { position: relative; margin: 0; }
.w4-hero__bild img { display: block; width: 100%; height: auto; }

@media (max-width: 781.98px) {
	.w4-hero { padding-top: var(--wp--preset--spacing--40) !important; }
	.w4-hero__text { padding-block: 0; }
	.w4-hero__spalten { min-height: 0; }
	.wp-block-buttons.w4-hero__knoepfe { display: none; }
	.w4-hero__titel { margin-bottom: var(--wp--preset--spacing--30); }
	.w4-hero__bildspalte { width: 86%; margin-left: auto; margin-right: -4%; }
	.w4-hero__bildspalte::before { right: -10%; }
}

/* ---------- Orte ---------- */
.w4-orte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
}
.w4-orte li {
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1;
	padding: 0.7em 0.9em 0.62em;
	margin: 0;
	-webkit-mask: var(--w4-kachel) center / 100% 100% no-repeat;
	mask: var(--w4-kachel) center / 100% 100% no-repeat;
}
.w4-orte .is-gross { font-size: var(--wp--preset--font-size--gross); }
.w4-orte .is-mittel { font-size: var(--wp--preset--font-size--mittel); }
.w4-orte .is-klein { font-size: var(--wp--preset--font-size--text); }
.w4-orte .is-weiss { background: var(--w4-weiss); color: var(--w4-blau); }
.w4-orte .is-hell { background: var(--w4-hellblau); color: var(--w4-blau-dunkel); }
.w4-orte .is-petrol { background: var(--w4-petrol); color: var(--w4-weiss); }

/* ---------- Dienst ---------- */
.w4-dienst__titel { margin: 0; }
.w4-aussage { font-weight: 500; line-height: 1.4; margin-top: 0; }
@media (min-width: 782px) {
	.w4-dienst__titel { position: sticky; top: 2rem; }
}

/* ---------- Leistungen ---------- */
.w4-leistungen { display: grid; gap: var(--wp--preset--spacing--60); }
.w4-leistung {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin: 0 !important;
}
.w4-leistung:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.w4-leistung:nth-child(even) .w4-leistung__bild { order: 2; }
.w4-leistung__bild { margin: 0; aspect-ratio: 1 / 0.97; }
.w4-leistung__titel { margin: 0 0 1rem; font-size: var(--wp--preset--font-size--gross); }
.w4-leistung__text p { margin: 0; }

@media (max-width: 781.98px) {
	.w4-leistung, .w4-leistung:nth-child(even) { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--30); }
	.w4-leistung:nth-child(even) .w4-leistung__bild { order: 0; }
	.w4-leistung__bild { width: 78%; max-width: 26rem; }
	.w4-leistung:nth-child(even) .w4-leistung__bild { margin-left: auto; }
}

/* Auswahl-Ansicht (per Skript, ab 900 px) */
.w4-leistungen.ist-auswahl {
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: var(--wp--preset--spacing--50);
	align-items: start;
}
.w4-leistungen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	grid-row: 1;
	grid-column: 1;
}
.w4-leistungen__reiter {
	all: unset;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 1rem;
	width: 100%;
	min-height: 4.5rem;
	padding: 0.5rem 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--roboto-condensed);
	font-weight: 700;
	text-transform: uppercase;
	font-size: clamp(1.75rem, 0.9rem + 1.7vw, 2.6rem);
	line-height: 1;
	color: var(--w4-hellblau-25);
	transition: color var(--w4-dauer) var(--w4-kurve);
}
.w4-leistungen__reiter br { display: none; }
.w4-leistungen__reiter::before {
	content: "";
	flex: none;
	width: 0.7em;
	height: 0.68em;
	background: currentColor;
	-webkit-mask: var(--w4-kachel) center / 100% 100% no-repeat;
	mask: var(--w4-kachel) center / 100% 100% no-repeat;
	transform: scale(0.55);
	transition: transform var(--w4-dauer) var(--w4-kurve);
}
.w4-leistungen__reiter:hover { color: var(--w4-weiss); }
.w4-leistungen__reiter[aria-expanded="true"] { color: var(--w4-weiss); }
.w4-leistungen__reiter[aria-expanded="true"]::before { transform: scale(1); background: var(--w4-blau-dunkel); }
.w4-leistungen__inhalt { padding: 0.25rem 0 1.25rem calc(0.7em + 1rem); font-size: var(--wp--preset--font-size--text); }
.w4-leistungen__reiter + .w4-leistungen__inhalt { padding-left: calc(clamp(1.75rem, 0.9rem + 1.7vw, 2.6rem) * 0.7 + 1rem); }
.w4-leistungen__inhalt p { margin: 0; max-width: 46ch; }
.w4-leistungen__inhalt:not([hidden]) { animation: w4-einblenden 320ms var(--w4-kurve); }
.w4-leistungen__reiter:focus-visible { outline: 3px solid var(--w4-weiss); outline-offset: 4px; }
.w4-leistungen.ist-auswahl .w4-leistung,
.w4-leistungen.ist-auswahl .w4-leistung:nth-child(even) {
	grid-column: 2;
	grid-row: 1;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--30);
}
.w4-leistungen.ist-auswahl .w4-leistung[hidden] { display: none; }
.w4-leistungen.ist-auswahl .w4-leistung__bild { order: 0; width: 100%; aspect-ratio: 1.45 / 1; }
.w4-leistungen.ist-auswahl .w4-leistung__text { display: none; }
.w4-leistungen.ist-auswahl .w4-leistung:not([hidden]) { animation: w4-einblenden 320ms var(--w4-kurve); }
@keyframes w4-einblenden { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Pageflow-Geschichten ---------- */
.w4-geschichten__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: var(--wp--preset--spacing--50); }
.w4-geschichten__kopf h2 { margin: 0; max-width: 18em; }
.w4-geschichten {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
}
.w4-geschichte {
	aspect-ratio: 1 / 0.97;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	text-align: center;
	padding: 12%;
	margin: 0 !important;
	transition: transform 260ms var(--w4-kurve);
}
.w4-geschichte:hover { transform: translateY(-4px); }
.w4-geschichte { container-type: inline-size; }
/* Titelgröße an die Kachelbreite gekoppelt, damit „VERHINDERUNGS-“ nie über den Rand läuft */
.w4-geschichte h3 { margin: 0; line-height: 1.05; font-size: min(2.125rem, 11.5cqi) !important; display: flex; align-items: center; justify-content: center; }
.w4-geschichte .wp-block-buttons { margin: 0; justify-content: center; }
@media (max-width: 1023.98px) {
	.w4-geschichten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.w4-geschichte { aspect-ratio: 1.7 / 1; padding: 7% 9%; }
}
@media (max-width: 559.98px) {
	.w4-geschichten { grid-template-columns: 1fr; }
	.w4-geschichte { aspect-ratio: auto; min-height: 12rem; padding: 2.5rem 2rem; }
}

/* ---------- Fotos ---------- */
.w4-fotos {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(9rem, 16vw, 15rem);
	gap: 1rem;
}
.w4-foto { margin: 0 !important; height: 100%; }
.w4-foto:nth-child(1) { grid-column: 1 / span 6; grid-row: span 2; }
.w4-foto:nth-child(2) { grid-column: 7 / span 3; }
.w4-foto:nth-child(3) { grid-column: 10 / span 3; }
.w4-foto:nth-child(4) { grid-column: 7 / span 3; }
.w4-foto:nth-child(5) { grid-column: 10 / span 3; }
@media (max-width: 781.98px) {
	.w4-fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: 0.75rem; }
	.w4-foto:nth-child(n) { grid-column: auto; grid-row: auto; }
	.w4-foto:nth-child(1) { grid-column: 1 / -1; grid-row: span 2; }
}

/* Überschriften in schmalen Spalten: Größe an die Spaltenbreite gekoppelt, damit lange Wörter ganz bleiben */
.w4-dienst .wp-block-column:first-child, .w4-zeile .wp-block-column:first-child, .w4-247-text .wp-block-column:first-child { container-type: inline-size; }
.w4-dienst__titel, .w4-zeile__titel, .w4-247-text h2 { font-size: min(var(--wp--preset--font-size--gross), 11.5cqi) !important; }
h1, h2, h3, h4 { overflow-wrap: normal; word-break: normal; }

/* Zweispaltige Textabschnitte erst ab 1024 px nebeneinander, sonst werden die Überschriften zu schmal */
@media (max-width: 1023.98px) {
	.w4-dienst .wp-block-columns, .w4-zeile, .w4-247-text .wp-block-columns { flex-wrap: wrap !important; }
	.w4-dienst .wp-block-column, .w4-zeile .wp-block-column, .w4-247-text .wp-block-column { flex-basis: 100% !important; }
	.w4-dienst__titel { position: static; }
}

/* ---------- Seite „Dein neuer Job“ ---------- */
.w4-hero--job .w4-hero__titel { margin-bottom: var(--wp--preset--spacing--30); }
.w4-hero--job .w4-hero__titel { position: relative; z-index: 1; }
.w4-hero__schaukeln { margin: 0 auto !important; max-width: 1000px !important; position: relative; }
/* Die Seile laufen bis zur Oberkante der Fläche, damit die Schaukeln nicht in der Luft hängen */
.w4-hero__schaukeln::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% - 2px);
	height: 100vh;
	background: var(--w4-seile) left bottom / 100% auto no-repeat;
	pointer-events: none;
}
.w4-hero__schaukeln img { display: block; width: 100%; height: auto; }
.w4-zeile { padding-block: var(--wp--preset--spacing--40); border-top: 2px solid var(--w4-hellblau); margin: 0 auto !important; }
.w4-zeile:first-child { border-top: 0; padding-top: 0; }
.w4-zeile:last-child { padding-bottom: 0; }
.w4-zeile__titel { margin: 0; }
.w4-zeile .w4-lesetext p { margin: 0; }

.w4-job-karten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.w4-job-karte {
	margin: 0 !important;
	container-type: inline-size;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* Überschriften beider Kacheln einer Reihe auf gleicher Höhe */
	justify-content: flex-start;
	text-align: center;
	/* großzügiger Innenabstand, damit nichts in die runden Ecken der Kachel ragt */
	padding: clamp(3rem, 11%, 5rem) clamp(2.25rem, 13%, 5.5rem);
	min-height: 19rem;
}
.w4-job-karte h3 { margin: 0 0 1.25rem; font-size: min(var(--wp--preset--font-size--gross), 12cqi); }
.w4-job-karte p { margin: 0; max-width: 34ch; }
.w4-job-karte .w4-liste { width: fit-content; max-width: 100%; text-align: left; }
.w4-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.w4-liste li { position: relative; padding-left: 1.6rem; margin: 0; }
.w4-liste li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.5em;
	width: 0.7rem;
	height: 0.68rem;
	background: currentColor;
	-webkit-mask: var(--w4-kachel) center / 100% 100% no-repeat;
	mask: var(--w4-kachel) center / 100% 100% no-repeat;
}
@media (max-width: 781.98px) {
	.w4-job-karten { grid-template-columns: minmax(0, 1fr); }
	.w4-job-karte { min-height: 0; }
}

/* ---------- Formulare ---------- */
.w4-formular-kasten {
	max-width: 46rem;
	margin-inline: auto !important;
	padding: clamp(2rem, 5vw, 3.5rem);
	border-radius: 24px;
	--w4-fokus: var(--w4-blau-dunkel);
}
.w4-formular-kasten h2 { margin: 0 0 var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--gross); }
.w4-formular__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1.5rem; }
.w4-formular__feld { margin: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.w4-formular__feld.is-breit, .w4-formular__knopf { grid-column: 1 / -1; }
.w4-formular__feld label { font-weight: 500; font-size: var(--wp--preset--font-size--klein); }
.w4-formular__feld input,
.w4-formular__feld textarea {
	box-sizing: border-box;
	width: 100%;
	min-height: 3.5rem;
	padding: 0.75rem 1rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--text);
	color: var(--wp--preset--color--eingabe);
	background: var(--w4-weiss);
	/* Kein sichtbarer Rahmen (Wunsch); transparent, damit er im Kontrastmodus erscheint */
	border: 2px solid transparent;
	border-radius: var(--w4-radius);
}
.w4-formular__feld textarea { resize: vertical; min-height: 9rem; }
.w4-formular__feld [aria-invalid="true"] { border-color: var(--w4-blau-dunkel); border-width: 3px; box-shadow: 0 0 0 3px var(--w4-weiss); }
.w4-formular__knopf { margin-top: 0.5rem; }
.w4-formular__knopf .wp-block-button__link { cursor: pointer; min-width: 12rem; font-size: var(--wp--preset--font-size--mittel); font-weight: 700; }
.w4-formular__falle { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.w4-formular__meldung { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border-radius: var(--w4-radius); background: var(--w4-weiss); color: var(--w4-blau-dunkel); font-weight: 500; border-left: 6px solid var(--w4-blau-dunkel); }
.w4-formular__meldung p { margin: 0 0 0.5rem; }
.w4-formular__meldung ul { margin: 0; padding-left: 1.25rem; }
@media (max-width: 559.98px) {
	.w4-formular__form { grid-template-columns: 1fr; }
	.w4-formular-kasten { border-radius: 16px; }
}

/* ---------- Kontakt ---------- */
.w4-kontakt__spalten { margin: 0 !important; gap: 0 !important; }
.w4-kontakt__angaben {
	position: relative;
	padding: var(--wp--preset--spacing--60) clamp(1.5rem, 5vw, 5rem) 0 max(clamp(1.5rem, 4vw, 3rem), calc((100vw - 1200px) / 2));
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.w4-kontakt__titel { font-size: var(--wp--preset--font-size--gross); line-height: 1 !important; margin: 0 0 var(--wp--preset--spacing--30); max-width: 14em; }
.w4-kontakt__angaben > p { max-width: 34em; margin-top: 0; }
.w4-kontakt__liste { margin: var(--wp--preset--spacing--30) 0 0; }
.w4-kontakt__marke { font-size: var(--wp--preset--font-size--text); letter-spacing: 0.04em; margin: 1.5rem 0 0.25rem; padding-top: 1.5rem; border-top: 2px solid var(--w4-petrol); }
.w4-kontakt__wert { margin: 0; line-height: 1.5; }
.w4-kontakt__telefon { font-size: var(--wp--preset--font-size--mittel); }
.w4-kontakt__telefon { font-weight: 700; padding-block: 0.4rem; }
.w4-kontakt__formular { padding: var(--wp--preset--spacing--60) max(clamp(1.5rem, 4vw, 3rem), calc((100vw - 1200px) / 2)) var(--wp--preset--spacing--60) clamp(1.5rem, 4vw, 4rem); }
.w4-kontakt__formular .w4-formular-kasten { max-width: none; }
.w4-kontakt__formular .w4-formular__form { grid-template-columns: 1fr; }
/* Überschrift links auf gleicher Höhe wie die im Formularkasten rechts */
@media (min-width: 782px) {
	.w4-kontakt__angaben { padding-top: calc(var(--wp--preset--spacing--60) + clamp(2rem, 5vw, 3.5rem)); }
}
@media (max-width: 781.98px) {
	.w4-kontakt__angaben { padding: var(--wp--preset--spacing--50) clamp(1.5rem, 4vw, 3rem); }
	.w4-kontakt__formular { padding: var(--wp--preset--spacing--50) clamp(1rem, 4vw, 3rem); }
}

/* ---------- Seite 24/7 ---------- */
.w4-geschichten--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; max-width: 60rem; margin-inline: auto !important; }
.w4-geschichten--zwei .w4-geschichte { aspect-ratio: 1.7 / 1; padding: 7% 9%; }
@media (max-width: 559.98px) {
	.w4-geschichten--zwei { grid-template-columns: 1fr; }
	.w4-geschichten--zwei .w4-geschichte { aspect-ratio: auto; padding: 2.5rem 2rem; }
}
.w4-markiert.is-lila { background: var(--wp--preset--color--lila-247); }
.w4-hero--247 .w4-hero__spalten { min-height: min(56vh, 32rem); }
.w4-hero__zeichen figure { margin: 0 auto; max-width: 22rem; }
.w4-hero__zeichen img { display: block; width: 100%; height: auto; }
.w4-originalschreibung { text-transform: none; }
.has-navy-247-background-color .w4-geschichte.has-weiss-background-color { --w4-fokus: var(--wp--preset--color--navy-247); }
.wp-block-button__link.has-lila-247-background-color:hover,
.wp-block-button__link.has-lila-247-background-color:focus-visible { background-color: var(--wp--preset--color--navy-247) !important; }
.wp-block-button__link.has-weiss-background-color.has-navy-247-color:hover,
.wp-block-button__link.has-weiss-background-color.has-navy-247-color:focus-visible { color: var(--wp--preset--color--navy-247) !important; }
@media (max-width: 781.98px) {
	.w4-hero__zeichen { order: -1; }
	.w4-hero__zeichen figure { max-width: 9rem; margin: 0; }
	.w4-hero--247 .w4-hero__spalten { min-height: 0; }
}

/* ---------- Platzhalter ---------- */

/* ---------- Fußzeile ---------- */
.w4-fuss a { color: inherit; }
.w4-fuss__spalten { align-items: center !important; }
.w4-fuss__logo { margin: 0; max-width: 22rem; }
.w4-fuss__logo img { width: 100%; height: auto; }
.w4-fuss__name { font-family: var(--wp--preset--font-family--roboto-condensed); font-weight: 700; text-transform: uppercase; line-height: 1.15; margin: 0 0 1.5rem; }
.w4-fuss__daten { gap: 0.5rem 2rem; }
.w4-fuss__daten p { margin: 0; }
.w4-fuss__daten a { display: inline-block; min-height: 2.75rem; line-height: 2.75rem; }
.w4-fuss__links { margin-top: 2rem; font-size: var(--wp--preset--font-size--klein); }
.w4-fuss__links .wp-block-navigation-item__content { display: inline-flex; align-items: center; min-height: 3rem; text-decoration: underline; }
@media (max-width: 781.98px) {
	.w4-fuss__logo { max-width: 9rem; }
}

/* ---------- Einblenden beim Scrollen (nur mit Skript, nicht bei reduzierter Bewegung) ---------- */
.w4-js .w4-einblenden { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--w4-kurve), transform 600ms var(--w4-kurve); transition-delay: var(--w4-verzoegerung, 0ms); }
.w4-js .w4-einblenden.ist-sichtbar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.w4-js .w4-einblenden { opacity: 1; transform: none; }
	.w4-geschichte:hover { transform: none; }
}

/* Kein Abstand zwischen Inhalt und Fußzeile (sonst zeigt sich ein dunkler Streifen). */
.wp-site-blocks > footer, .wp-site-blocks > .w4-fuss-bereich { margin-block-start: 0 !important; }

/* 24/7: Fotos unten im gleichen Navy wie der Kopfbereich */
.w4-hero--247 ~ .w4-fotos-bereich { background-color: var(--wp--preset--color--navy-247) !important; }

/* Lebensfreude-Kacheln mit Teasertext */
.w4-geschichte { --w4-txt: clamp(1.05rem, 0.6rem + 1.8cqi, 1.25rem); }
.w4-geschichte__text { margin: 0; max-width: 34em; font-size: var(--w4-txt); line-height: 1.45; margin-top: 0.15em; }
/* Titel, Text und Knopf haben gleiche Abstände (1rem) und stehen als Block mittig in der Kachel */
.w4-geschichten--zwei .w4-geschichte { gap: 1rem; }
@media (min-width: 1024px) {
	.w4-geschichten--zwei .w4-geschichte { aspect-ratio: 1.45 / 1; }
}
@media (min-width: 560px) and (max-width: 1023.98px) {
	.w4-geschichten--zwei .w4-geschichte { aspect-ratio: auto; min-height: 17rem; padding: 3rem 2.5rem; }
}


/* 24/7: Überschrift „Moderne Pflege“ in der lila Kachelform wie die Kacheln darunter */
.w4-247-blase { aspect-ratio: 1.35 / 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12%; margin: 0 !important; }
.w4-247-blase h2 { margin: 0; line-height: 1.05; text-align: center; }
@media (max-width: 781.98px) {
	.w4-247-blase { aspect-ratio: auto; padding: 3rem 2.25rem; }
}

/* Offene Angaben in der Datenschutzerklärung: deutlich sichtbar, bis W4 sie ausfüllt */

/* Lange Rechtstexte: auf dem Handy nie breiter als der Bildschirm (nur Scrollen nach oben/unten) */
.w4-recht, .w4-recht * { overflow-wrap: anywhere; }
.w4-recht h2 { overflow-wrap: break-word; }
@media (max-width: 599.98px) {
	.w4-recht h2 { font-size: clamp(1.25rem, 5.6vw, 1.75rem); }
}

/* Sehr schmale Handys (320 px): lange Einwort-Titel der Leistungen bleiben im Bild */
@media (max-width: 359.98px) {
	.w4-leistung__titel { font-size: clamp(1.4rem, 7.2vw, 1.75rem); }
}