/* ==========================================================================
   Arboristas – Theme-Styles
   Farben und Schriften aus dem bisherigen Theme, Raster und Bausteine neu.
   ========================================================================== */

/* ---------- Schriften ---------- */
@font-face {
	font-family: "Londrina Solid";
	src: url("../fonts/londrinasolid-regular.woff2") format("woff2"), url("../fonts/londrinasolid-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-regular.woff2") format("woff2"), url("../fonts/barlow-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-italic.woff2") format("woff2"), url("../fonts/barlow-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Barlow";
	src: url("../fonts/barlow-semibold.woff2") format("woff2"), url("../fonts/barlow-semibold.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ---------- Variablen ---------- */
:root {
	/* Markenfarben (aus dem alten Theme) */
	--dunkel: #233326;
	--dunkel-tief: #18231a;
	--hell: #e2efe5;
	--hell-zart: #f2f7f3;
	--weiss: #fff;
	--akzent: #d34630;
	--akzent-button: #c4402a;   /* etwas dunkler für ausreichend Kontrast mit weißer Schrift */
	--akzent-text: #b8391f;     /* Links auf hellem Grund */
	--akzent-auf-dunkel: #ef7a62;
	--gruen: #239978;
	--gruen-button: #1b7a5f;
	--text: #2c3240;
	--text-leise: #5d6472;
	--linie: rgba(35, 51, 38, .14);
	--gold: #e9a91c;

	/* Schriften */
	--schrift-display: "Londrina Solid", "Arial Narrow", Arial, sans-serif;
	--schrift-text: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;

	/* Größen */
	--fs-basis: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
	--fs-klein: .9375rem;
	--fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.6rem);
	--fs-h2: clamp(1.9rem, 1.4rem + 2vw, 2.9rem);
	--fs-h3: clamp(1.35rem, 1.2rem + .6vw, 1.65rem);

	/* Raster */
	--breite: 75rem;
	--breite-schmal: 47.5rem;
	--rand: clamp(1rem, 4vw, 2rem);
	--abstand: clamp(3rem, 2rem + 4vw, 5.5rem);
	--radius: .75rem;
	--schatten: 0 1px 2px rgba(24, 35, 26, .06), 0 6px 20px rgba(24, 35, 26, .08);

	--header-hoehe: 4.25rem;
	--mobilleiste: 3.5rem;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-hoehe) + 1rem);
}

body {
	margin: 0;
	font-family: var(--schrift-text);
	font-size: var(--fs-basis);
	line-height: 1.7;
	color: var(--text);
	background: var(--hell) url("../img/textur.png");
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--akzent-text); text-underline-offset: .18em; }
a:hover { color: var(--akzent); }

:focus-visible {
	outline: 3px solid var(--akzent);
	outline-offset: 3px;
	border-radius: 4px;
}

h1, h2, h3 {
	font-family: var(--schrift-display);
	font-weight: 400;
	line-height: 1.08;
	color: var(--dunkel);
	letter-spacing: .01em;
	margin: 0 0 .5em;
	text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.15; }
h4 { font-size: 1.1rem; font-weight: 600; margin: 0 0 .4em; }

p { margin: 0 0 1em; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

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

.skip-link {
	position: absolute;
	left: 1rem; top: -4rem;
	z-index: 1000;
	padding: .75rem 1rem;
	background: var(--weiss);
	color: var(--dunkel);
	font-weight: 600;
	border-radius: var(--radius);
}
.skip-link:focus { top: 1rem; }

/* ---------- Raster ---------- */
.container {
	width: 100%;
	max-width: calc(var(--breite) + 2 * var(--rand));
	margin-inline: auto;
	padding-inline: var(--rand);
}
.container--schmal { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); }
.container .container--schmal { padding-inline: 0; margin-inline: 0; }

.abschnitt { padding-block: var(--abstand); }
.abschnitt.hg--hell + .abschnitt.hg--hell,
.abschnitt.hg--weiss + .abschnitt.hg--weiss { padding-top: 0; }

.hg--hell { background: transparent; }
.hg--weiss { background: var(--weiss); }
.hg--dunkel { background: var(--dunkel); color: var(--hell); }
.hg--dunkel h2,
.hg--dunkel h3 { color: var(--weiss); }
.hg--dunkel a { color: var(--akzent-auf-dunkel); }

.abschnitt__titel { margin-bottom: .6em; }
.abschnitt__intro {
	font-size: 1.125em;
	color: var(--text-leise);
	max-width: 46rem;
	margin-top: -.25em;
	margin-bottom: 1.75em;
}

/* ---------- Buttons ---------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55rem;
	min-height: 3rem;
	padding: .7rem 1.35rem;
	border: 0;
	border-radius: .5rem;
	font-family: var(--schrift-display);
	font-size: 1.25rem;
	letter-spacing: .03em;
	line-height: 1.1;
	text-decoration: none;
	color: var(--weiss);
	background: var(--akzent-button);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.button:hover { color: var(--weiss); background: #a9361f; transform: translateY(-1px); }
.button--whatsapp { background: var(--gruen-button); }
.button--whatsapp:hover { background: #156149; }

.kontakt-buttons { display: flex; flex-wrap: wrap; gap: .75rem; }
.kontakt-buttons--zentriert { justify-content: center; }

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--dunkel);
	box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 32px); }

.site-header__leiste {
	display: flex;
	align-items: center;
	gap: 1rem;
	min-height: var(--header-hoehe);
}

.site-logo {
	display: flex;
	align-items: center;
	margin-right: auto;
	color: var(--weiss);
	text-decoration: none;
}
.site-logo:hover { color: var(--weiss); }
.site-logo__bild { max-height: 2.9rem; width: auto; }
.site-logo__schrift {
	font-family: var(--schrift-display);
	font-size: 1.85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	line-height: 1;
}
.site-logo__schrift small { font-size: .55em; vertical-align: .35em; margin-right: .1em; opacity: .85; }

.site-nav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .25rem;
}
.site-nav__liste a {
	display: block;
	padding: .55rem .8rem;
	font-family: var(--schrift-display);
	font-size: 1.2rem;
	line-height: 1;
	letter-spacing: .03em;
	color: var(--hell);
	text-decoration: none;
	border-radius: .4rem;
}
.site-nav__liste a:hover { color: var(--weiss); background: rgba(255, 255, 255, .08); }

/* Aktiver Menüpunkt: helle Pille mit kleiner Tanne */
:root { --tanne: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5 6.6 8.2h2.6L5 13.6h3.1L3.6 19.5H11V23h2v-3.5h7.4l-4.5-5.9H19l-4.2-5.4h2.6z'/%3E%3C/svg%3E"); }
.site-nav__liste > li > a { display: flex; align-items: center; border-radius: .4rem; }
.site-nav__liste > li.current-menu-item > a,
.site-nav__liste > li.current-menu-ancestor > a {
	color: var(--dunkel);
	background: var(--hell);
	padding-left: .65rem;
}
.site-nav__liste > li.current-menu-item > a::before,
.site-nav__liste > li.current-menu-ancestor > a::before {
	content: '';
	flex: none;
	width: .95rem;
	height: 1.1rem;
	margin: -.15rem .35rem 0 0;
	background: currentColor;
	-webkit-mask: var(--tanne) center / contain no-repeat;
	mask: var(--tanne) center / contain no-repeat;
}
/* Steht die Seite selbst oben im Menü, nur diesen Punkt markieren (nicht zusätzlich „Leistungen“) */
.site-nav__liste:has(> li.current-menu-item) > li.current-menu-ancestor:not(.current-menu-item) > a { color: var(--hell); background: none; padding-left: .8rem; }
.site-nav__liste:has(> li.current-menu-item) > li.current-menu-ancestor:not(.current-menu-item) > a::before { content: none; }
.site-nav__liste .sub-menu .current-menu-item > a { color: var(--akzent-auf-dunkel); }

.site-nav__liste li { position: relative; }
.site-nav__liste .sub-menu {
	list-style: none;
	margin: 0;
	padding: .5rem;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 14rem;
	background: var(--dunkel);
	border-radius: 0 0 var(--radius) var(--radius);
	box-shadow: var(--schatten);
	visibility: hidden;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-nav__liste li:hover > .sub-menu,
.site-nav__liste li:focus-within > .sub-menu { visibility: visible; opacity: 1; transform: none; }

.site-nav__kontakt { display: none; }

.header-telefon {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .6rem .9rem;
	border-radius: .4rem;
	background: rgba(255, 255, 255, .08);
	color: var(--weiss);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
}
.header-telefon .icon { width: 1.1rem; height: 1.1rem; color: var(--akzent-auf-dunkel); }
.header-telefon:hover { color: var(--weiss); background: rgba(255, 255, 255, .14); }

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 0;
	border-radius: .5rem;
	background: rgba(255, 255, 255, .08);
	color: var(--weiss);
	cursor: pointer;
}
.menu-toggle .icon { width: 1.75rem; height: 1.75rem; }
.menu-toggle__zu { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__auf { display: none; }
.menu-toggle[aria-expanded="true"] .menu-toggle__zu { display: inline-flex; }
.menu-toggle[aria-expanded="true"] { background: var(--akzent-button); }

@media (max-width: 1100px) {
	.header-telefon__nummer { display: none; }
	.header-telefon { width: 2.3rem; height: 2.3rem; padding: 0; justify-content: center; }
}

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

	.site-nav {
		position: fixed;
		inset: var(--header-hoehe) 0 0 0;
		z-index: 99;
		overflow-y: auto;
		padding: 1rem var(--rand) calc(var(--mobilleiste) + 2rem);
		background: var(--dunkel);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-.5rem);
		transition: opacity .2s ease, transform .2s ease, visibility .2s;
	}
	.admin-bar .site-nav { top: calc(var(--header-hoehe) + var(--wp-admin--admin-bar--height, 46px)); }
	.menu-offen .site-nav { visibility: visible; opacity: 1; transform: none; }
	/* Scroll-Sperre nur am <html>: overflow am <body> würde den Sticky-Header
	   beim gescrollten Zustand aus dem Bild schieben (samt Schließen-Knopf). */
	html.menu-offen { overflow: hidden; }
	/* Header beim offenen Menü immer oben festhalten */
	html.menu-offen .site-header { position: sticky; top: 0; }
	.site-header__leiste { position: relative; z-index: 2; background: var(--dunkel); }
	.site-nav { z-index: 1; }
	.site-nav { height: calc(100vh - var(--header-hoehe)); height: calc(100dvh - var(--header-hoehe)); bottom: auto; overscroll-behavior: contain; }
	.site-nav { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
	.header-telefon { display: none; }

	.site-nav__liste { flex-direction: column; gap: 0; }
	.site-nav__liste a {
		font-size: 1.6rem;
		padding: .75rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, .1);
		border-radius: 0;
	}
	.site-nav__liste > li.current-menu-item > a,
	.site-nav__liste > li.current-menu-ancestor > a { color: var(--akzent-auf-dunkel); background: none; padding-left: 0; border-radius: 0; }
	.site-nav__liste > li > a { border-radius: 0; line-height: 1.2; }
	.site-nav__liste > li > a:hover { background: none; }
	.site-nav__liste:has(> li.current-menu-item) > li.current-menu-ancestor:not(.current-menu-item) > a { padding-left: 0; }
	.site-nav__liste .sub-menu {
		position: static;
		visibility: visible;
		opacity: 1;
		transform: none;
		box-shadow: none;
		padding: 0 0 0 1rem;
		min-width: 0;
	}
	.site-nav__liste .sub-menu a { font-size: 1.3rem; }

	.site-nav__kontakt { display: block; margin-top: 2rem; }
	.site-nav__kontakt .button { flex: 1 1 12rem; }
	.site-nav__zeiten { color: var(--hell); opacity: .8; margin-top: .75rem; font-size: var(--fs-klein); }
}

/* ---------- Kopfbereich (Hero) ---------- */
.hero { position: relative; color: var(--weiss); }
.hero__titel { color: var(--weiss); margin-bottom: .35em; }
.hero__untertitel {
	font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem);
	line-height: 1.45;
	max-width: 38rem;
	margin-bottom: 1.5rem;
	color: var(--hell);
}
.hero .kontakt-buttons { margin-bottom: 1.5rem; }

.hero__punkte {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .45rem;
	font-weight: 600;
}
.hero__punkte + * { margin-top: 1.25rem; }
.hero__punkte li { display: flex; align-items: center; gap: .4rem; }
.hero__punkte .icon { color: var(--akzent-auf-dunkel); }

.hero--bild {
	display: grid;
	min-height: clamp(30rem, 72vh, 46rem);
	align-items: end;
	isolation: isolate;
	background: var(--dunkel-tief);
}
.hero__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}
.hero__picture { display: contents; }
.hero--bild::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(18, 27, 20, .88) 0%, rgba(18, 27, 20, .65) 45%, rgba(18, 27, 20, .1) 100%),
		linear-gradient(0deg, rgba(18, 27, 20, .55) 0%, rgba(18, 27, 20, 0) 45%);
}
.hero--bild .hero__inhalt { padding-block: clamp(3rem, 8vw, 5.5rem); }
.hero--bild .hero__inhalt > * { max-width: 42rem; }

@media (max-width: 700px) {
	.hero--bild { min-height: 0; }
	.hero--bild .hero__bild { position: relative; height: 15rem; z-index: 0; }
	.hero--bild::before { display: none; }
	.hero--bild .hero__inhalt { background: var(--dunkel); padding-block: 1.75rem 2.25rem; }
	.hero .kontakt-buttons .button { flex: 1 1 100%; }

	/* Eigenes Hochkant-Bild: füllt den Kopfbereich, Text unten auf dunklem Verlauf */
	.hero--hochkant { min-height: min(88svh, 48rem); }
	.hero--hochkant .hero__bild { position: absolute; height: 100%; z-index: -2; }
	.hero--hochkant::before {
		display: block;
		background: linear-gradient(0deg, rgba(18, 27, 20, .95) 0%, rgba(18, 27, 20, .82) 38%, rgba(18, 27, 20, .15) 72%, rgba(18, 27, 20, 0) 100%);
	}
	.hero--hochkant .hero__inhalt { background: none; padding-top: 12rem; }
}

.hero--schlicht {
	background: var(--dunkel);
	padding-block: clamp(2.5rem, 2rem + 4vw, 5rem);
	border-bottom: 6px solid var(--akzent);
}

/* Sterne */
.sterne {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin: 1.25rem 0 0;
	color: var(--hell);
	text-decoration: none;
	font-size: var(--fs-klein);
}
.sterne__icons { display: inline-flex; }
.stern { color: rgba(255, 255, 255, .35); }
.stern--voll { color: var(--gold); }
.stern .icon { width: 1.1rem; height: 1.1rem; }

/* Breadcrumbs (Rank Math) */
.breadcrumbs { padding-block: .8rem .2rem; font-size: var(--fs-klein); color: var(--text-leise); }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: .5rem; min-width: 0; }
.breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; white-space: nowrap; }
.breadcrumbs li:last-child { flex-shrink: 1; min-width: 0; }
.breadcrumbs li + li::before { content: '›'; color: var(--text-leise); opacity: .7; }
.breadcrumbs a { color: var(--text-leise); text-decoration: none; }
.breadcrumbs a:hover { color: var(--akzent-text); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.breadcrumbs + .abschnitt,
.breadcrumbs + * > .abschnitt:first-child { padding-top: clamp(1.25rem, .9rem + 1.2vw, 2rem); }

/* ---------- Fließtext ---------- */
.text > *:last-child { margin-bottom: 0; }
.text p,
.text li { max-width: 68ch; }
.text p { margin-bottom: 1.15em; }

/* Ratgeber-Beitrag: Text auf hellem Blatt, größer und ruhiger */
.single-post .abschnitt--inhalt .container--schmal {
	max-width: calc(46rem + 2 * var(--rand));
}
.single-post .abschnitt--inhalt .text {
	background: var(--weiss);
	padding: clamp(1.5rem, 1rem + 3vw, 3.25rem);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	font-size: clamp(1.125rem, 1.05rem + .3vw, 1.25rem);
	line-height: 1.75;
	color: #262b36;
}
.single-post .text h2 {
	font-size: clamp(1.6rem, 1.35rem + 1vw, 2.1rem);
	margin-top: 1.8em;
	margin-bottom: .45em;
}
.single-post .text h2:first-child { margin-top: 0; }
.single-post .text .kontakt-buttons { margin-top: 2rem; }
@media (max-width: 600px) {
	.single-post .abschnitt--inhalt { padding-top: 1.25rem; }
	.single-post .abschnitt--inhalt .container--schmal { padding-inline: .5rem; }
}
.text h2 { margin-top: 1.6em; }
.text h3 { margin-top: 1.4em; }
.text h2:first-child,
.text h3:first-child { margin-top: 0; }
.text ul,
.text ol { padding-left: 1.25em; margin: 0 0 1.25em; }
.text li { margin-bottom: .35em; }
.text ul li::marker { color: var(--akzent); }
.text strong { font-weight: 600; color: var(--dunkel); }
.text img { border-radius: var(--radius); }
.text blockquote {
	margin: 1.5em 0;
	padding: .25em 0 .25em 1.25em;
	border-left: 4px solid var(--akzent);
	font-style: italic;
}
.text .wp-caption { max-width: 100%; margin: 1.5em 0; }
.text .wp-caption-text,
.text figcaption { font-size: var(--fs-klein); color: var(--text-leise); margin-top: .5em; }
.text .alignleft { float: left; margin: .3em 1.5em 1em 0; max-width: 50%; }
.text .alignright { float: right; margin: .3em 0 1em 1.5em; max-width: 50%; }
.text .aligncenter { margin-inline: auto; }
@media (max-width: 600px) {
	.text .alignleft,
	.text .alignright { float: none; max-width: 100%; margin: 1.5em 0; }
}
.text::after { content: ""; display: table; clear: both; }
.lead { font-size: 1.2em; color: var(--dunkel); }

/* ---------- Galerie ---------- */
.galerie {
	display: grid;
	gap: clamp(.5rem, .3rem + 1vw, 1rem);
	grid-template-columns: repeat(var(--spalten, 3), minmax(0, 1fr));
	margin: 1.75em 0;
}
.galerie--spalten-1 { --spalten: 1; }
.galerie--spalten-2 { --spalten: 2; }
.galerie--spalten-3 { --spalten: 3; }
.galerie--spalten-4 { --spalten: 4; }
@media (max-width: 700px) {
	.galerie--spalten-3,
	.galerie--spalten-4 { --spalten: 2; }
}
@media (max-width: 420px) {
	.galerie--spalten-2 { --spalten: 1; }
}
.galerie__bild { margin: 0; }
.galerie__bild a { display: block; overflow: hidden; border-radius: var(--radius); background: var(--dunkel); }
.galerie__bild img {
	width: 100%;
	transition: transform .35s ease, opacity .35s ease;
}
.galerie:not(.galerie--einzeln):not(.galerie--spalten-1) .galerie__bild img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.galerie__bild a:hover img { transform: scale(1.03); opacity: .92; }
.galerie__bild figcaption {
	font-size: var(--fs-klein);
	line-height: 1.4;
	color: var(--text-leise);
	margin-top: .45rem;
}

/* ---------- Punkte ---------- */
.punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
.punkt { display: flex; gap: 1rem; }
.punkt__titel { font-size: 1.35rem; margin-bottom: .2em; }
.punkt p { margin: 0; }

.punkte--haken .punkt__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin-top: .1rem;
	border-radius: 50%;
	background: var(--akzent-button);
	color: var(--weiss);
	flex: none;
}
.punkte--haken .punkt__icon .icon { width: 1.15rem; height: 1.15rem; }

.punkte--nummern { counter-reset: schritt; }
.punkte--nummern .punkt { counter-increment: schritt; }
.punkte--nummern .punkt::before {
	content: counter(schritt);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 50%;
	background: var(--dunkel);
	color: var(--weiss);
	font-family: var(--schrift-display);
	font-size: 1.4rem;
}

.punkte--karten { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.punkte--karten .punkt {
	display: block;
	padding: 1.5rem;
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	border-top: 4px solid var(--akzent);
}
.hg--weiss .punkte--karten .punkt { background: var(--hell-zart); box-shadow: none; }

/* ---------- Kurzantworten ---------- */
.fragen { display: grid; gap: 1rem; }
.frage {
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
}
.hg--weiss .frage { background: var(--hell-zart); box-shadow: none; }
.frage__titel { font-size: clamp(1.4rem, 1.25rem + .6vw, 1.7rem); margin-bottom: .4em; }

/* ---------- Aufklapper (Vertiefung) ---------- */
.aufklapper { display: grid; gap: .75rem; }
.aufklapper__eintrag {
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
}
.hg--weiss .aufklapper__eintrag { background: var(--hell-zart); box-shadow: none; }
.aufklapper__eintrag summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	list-style: none;
}
.aufklapper__eintrag summary::-webkit-details-marker { display: none; }
.aufklapper__eintrag summary h3 { margin: 0; font-size: 1.35rem; }
.aufklapper__eintrag summary::after {
	content: "+";
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--hell);
	color: var(--dunkel);
	font-size: 1.4rem;
	line-height: 1;
	transition: transform .2s ease;
}
.aufklapper__eintrag[open] summary::after { content: "–"; background: var(--akzent-button); color: var(--weiss); }
.aufklapper__inhalt { padding: 0 1.35rem 1.35rem; }

/* ---------- Karten ---------- */
.karten { display: grid; gap: clamp(1rem, .75rem + 1vw, 1.5rem); }
/* höchstens 3 Spalten; einzelne Karten bleiben ein Drittel breit statt voller Breite */
.karten--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, calc((100% - 2 * var(--karten-abstand, 1.5rem)) / 3))), 1fr)); }
.karten--auto { display: flex; flex-wrap: wrap; }
.karten--auto > .karte { flex: 1 1 14.5rem; }
.karten--auto > .karte--gross { flex-basis: 100%; }
/* 5 oder 6 Karten ohne Hervorhebung: 3 pro Reihe statt 4 + 1 */
@media (min-width: 900px) {
	.karten--auto:not(:has(> .karte--gross)):has(> .karte:nth-child(5)) > .karte { flex-basis: calc((100% - 3rem) / 3); }
}
@media (min-width: 900px) {
	.karten--auto .karte--gross .karte__titel { font-size: 2.2rem; }
	.karten--auto .karte--gross:has(.karte__bild) { flex-direction: row; }
	.karten--auto .karte--gross .karte__bild { flex: 0 0 50%; position: relative; min-height: 20rem; }
	.karten--auto .karte--gross .karte__bild img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
	.karten--auto .karte--gross .karte__inhalt { padding: 2rem 2.25rem; justify-content: center; }
	.karten--auto .karte--gross .karte__inhalt p { font-size: 1.1em; max-width: 40rem; }
}
.karte {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	overflow: hidden;
}
.hg--weiss .karte { background: var(--hell-zart); box-shadow: none; }
.karte__bild { display: block; background: var(--dunkel); }
.karte__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.karte__inhalt { display: flex; flex-direction: column; flex: 1; padding: 1.35rem 1.5rem 1.5rem; }
.karte__inhalt p { margin-bottom: .75rem; }
.karte__titel { font-size: 1.55rem; margin-bottom: .35em; hyphens: auto; }
.karten--auto .karte:not(.karte--gross) .karte__titel { font-size: 1.4rem; }
.karte__titel a { color: inherit; text-decoration: none; }
.karte--link .karte__titel a::after { content: ""; position: absolute; inset: 0; }
.karte__mehr {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: auto;
	font-weight: 600;
	color: var(--akzent-text);
}
.karte__mehr .icon { width: 1.1em; height: 1.1em; transition: transform .2s ease; }
.karte--link { transition: transform .2s ease, box-shadow .2s ease; }
.karte--link:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(24, 35, 26, .16); }
.karte--link:hover .karte__mehr .icon { transform: translateX(3px); }
.karte--gross { border-top: 5px solid var(--akzent); }

/* ---------- Kundenstimmen ---------- */
.stimmen { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.stimme {
	margin: 0;
	padding: 1.5rem;
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	display: flex;
	flex-direction: column;
}
.hg--weiss .stimme { background: var(--hell-zart); box-shadow: none; }
.stimme__sterne { display: flex; color: var(--gold); margin-bottom: .75rem; }
.stimme__sterne .icon { width: 1.15rem; height: 1.15rem; }
.stimme__text { margin: 0 0 1rem; font-size: 1.05em; }
.stimme__text p { margin: 0; }
.stimme__text p::before { content: "„"; }
.stimme__text p::after { content: "“"; }
.stimme__wer { margin-top: auto; font-weight: 600; color: var(--dunkel); font-size: var(--fs-klein); }
.stimmen__link { margin-top: 1.5rem; }
.stimmen__link a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }

/* ---------- Orte ---------- */
.regionen { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.region__titel { font-size: 1.75rem; }
.region__titel a { color: var(--dunkel); text-decoration: none; }
.region__titel a:hover { color: var(--akzent); }

.ortsliste { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ortsliste a {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	padding: .45rem .9rem .45rem .7rem;
	background: var(--weiss);
	border-radius: 999px;
	color: var(--dunkel);
	text-decoration: none;
	font-weight: 600;
	font-size: var(--fs-klein);
	box-shadow: 0 1px 2px rgba(24, 35, 26, .08);
}
.ortsliste a .icon { width: 1rem; height: 1rem; color: var(--akzent); }
.ortsliste a:hover { background: var(--dunkel); color: var(--weiss); }
.hg--weiss .ortsliste a { background: var(--hell); box-shadow: none; }

.linkliste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: .5rem;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}
.linkliste a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: .5rem;
	padding: .9rem 1.1rem;
	background: var(--hell-zart);
	border-radius: .5rem;
	color: var(--dunkel);
	font-weight: 600;
	text-decoration: none;
}
.linkliste a .icon { color: var(--akzent); }
.linkliste a:hover { background: var(--dunkel); color: var(--weiss); }

.infobox {
	margin-top: 2rem;
	padding: 1.5rem 1.75rem;
	background: var(--weiss);
	border-left: 5px solid var(--gruen);
	border-radius: 0 var(--radius) var(--radius) 0;
	box-shadow: var(--schatten);
}
.infobox__titel { font-size: 1.5rem; }
.infobox p:last-child { margin-bottom: 0; }

/* ---------- Abschluss-Aufruf ---------- */
.abschnitt--cta {
	background: var(--dunkel);
	color: var(--hell);
	text-align: center;
	border-top: 6px solid var(--akzent);
}
.cta__titel { color: var(--weiss); }
.cta__text { font-size: 1.15em; max-width: 36rem; margin-inline: auto; margin-bottom: 1.75rem; }
.cta__zeiten {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin: 1.25rem 0 0;
	font-size: var(--fs-klein);
	opacity: .85;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--dunkel-tief); color: #c9d6cc; font-size: var(--fs-klein); }
.site-footer a { color: #e7efe9; text-decoration: none; }
.site-footer a:hover { color: var(--akzent-auf-dunkel); text-decoration: underline; }
.site-footer__raster {
	display: grid;
	gap: 2.5rem;
	padding-block: clamp(3rem, 6vw, 4.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 760px) { .site-footer__raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .site-footer__raster { grid-template-columns: 1.2fr 1fr 1fr 1.3fr; } }
.site-footer__marke img { width: 13rem; margin-bottom: 1.25rem; opacity: .9; }
.site-footer__titel { font-size: 1.5rem; color: var(--weiss); margin-bottom: .75em; }
.kontaktliste { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.kontaktliste li { display: flex; gap: .65rem; align-items: flex-start; }
.kontaktliste .icon { width: 1.15rem; height: 1.15rem; margin-top: .15rem; color: var(--akzent-auf-dunkel); }
.site-footer__orte { display: grid; gap: 1.25rem 2rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); align-content: start; }
.site-footer__orte .site-footer__titel { grid-column: 1 / -1; margin-bottom: 0; }
.footer-region__name { font-weight: 600; color: var(--weiss) !important; }
.footer-region ul { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.footer-region li a {
	display: inline-flex;
	align-items: center;
	min-height: 2.3rem;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
}
.footer-region li a:hover { color: var(--weiss); text-decoration: none; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .2); }
/* Footer am Handy: zentriert, Orte als kompakte Kacheln statt langer Liste */
@media (max-width: 759px) {
	.site-footer__raster { text-align: center; gap: 2.25rem; padding-block: 2.75rem 2rem; }
	.site-footer__marke img { width: 10.5rem; margin-inline: auto; margin-bottom: 1rem; }
	.site-footer__marke p { max-width: 22rem; margin-inline: auto; }
	.site-footer__titel { font-size: 1.35rem; }

	.kontaktliste { justify-items: center; gap: .55rem; }
	.kontaktliste li { justify-content: center; text-align: left; }

	.site-footer__orte { display: block; }
	.site-footer__orte .site-footer__titel { margin-bottom: 1rem; }
	.footer-region + .footer-region { margin-top: 1.25rem; }
	.footer-region__name {
		display: inline-block;
		margin-bottom: .5rem;
		font-size: .8rem;
		letter-spacing: .08em;
		text-transform: uppercase;
	}
	.footer-region ul { justify-content: center; }

	.site-footer__unten-inner { flex-direction: column; align-items: center; text-align: center; gap: .6rem; }
	.footer-menu { justify-content: center; }
}
.site-footer__unten { border-top: 1px solid rgba(255, 255, 255, .08); }
.site-footer__unten-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: .5rem 1.5rem;
	padding-block: 1.25rem;
}
.site-footer__unten p { margin: 0; }
.footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.25rem; }

/* ---------- Mobile Kontaktleiste ---------- */
.mobil-kontakt { display: none; }
@media (max-width: 960px) {
	body { padding-bottom: calc(var(--mobilleiste) + env(safe-area-inset-bottom)); }
	.mobil-kontakt {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 110;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding-bottom: env(safe-area-inset-bottom);
		background: var(--dunkel-tief);
		box-shadow: 0 -2px 14px rgba(0, 0, 0, .3);
	}
	.mobil-kontakt a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: .5rem;
		height: var(--mobilleiste);
		color: var(--weiss);
		text-decoration: none;
		font-family: var(--schrift-display);
		font-size: 1.3rem;
		letter-spacing: .03em;
	}
	.mobil-kontakt__anrufen { background: var(--akzent-button); }
	.mobil-kontakt__whatsapp { background: var(--gruen-button); }
	.mobil-kontakt { transition: transform .25s ease; }
	/* ausblenden, solange andere Anruf-/WhatsApp-Buttons sichtbar sind oder das Menü offen ist */
	.mobil-kontakt.ist-versteckt,
	html.menu-offen .mobil-kontakt { transform: translateY(110%); visibility: hidden; transition: transform .25s ease, visibility 0s .25s; }
}

/* ---------- Seitennavigation / Suche ---------- */
.pagination { margin-top: 2.5rem; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers {
	display: inline-flex;
	min-width: 2.75rem;
	height: 2.75rem;
	align-items: center;
	justify-content: center;
	padding: 0 .9rem;
	border-radius: .5rem;
	background: var(--weiss);
	color: var(--dunkel);
	text-decoration: none;
	font-weight: 600;
}
.pagination .page-numbers.current { background: var(--dunkel); color: var(--weiss); }

.search-form { display: flex; gap: .5rem; flex-wrap: wrap; }
.search-form label { flex: 1 1 14rem; }
.search-field {
	width: 100%;
	min-height: 3rem;
	padding: .6rem .9rem;
	font: inherit;
	border: 1px solid var(--linie);
	border-radius: .5rem;
}
.search-submit {
	min-height: 3rem;
	padding: .6rem 1.2rem;
	border: 0;
	border-radius: .5rem;
	background: var(--akzent-button);
	color: var(--weiss);
	font-family: var(--schrift-display);
	font-size: 1.15rem;
	cursor: pointer;
}

/* ---------- Lightbox ---------- */
.lightbox {
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(12, 18, 13, .94);
	color: var(--weiss);
}
.lightbox::backdrop { background: rgba(12, 18, 13, .94); }
.lightbox__buehne {
	position: absolute;
	inset: 3.5rem 1rem 4.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}
.lightbox__buehne img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: .25rem; }
.lightbox__text {
	position: absolute;
	inset: auto 1rem 1.25rem;
	text-align: center;
	font-size: var(--fs-klein);
	color: var(--hell);
	margin: 0;
}
.lightbox__knopf {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: var(--weiss);
	cursor: pointer;
}
.lightbox__knopf:hover { background: rgba(255, 255, 255, .25); }
.lightbox__knopf .icon { width: 1.75rem; height: 1.75rem; }
.lightbox__zu { top: .75rem; right: .75rem; }
.lightbox__zurueck { left: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox__weiter { right: .75rem; top: 50%; transform: translateY(-50%); }
.lightbox--einzeln .lightbox__zurueck,
.lightbox--einzeln .lightbox__weiter { display: none; }

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Druck ---------- */
@media print {
	.site-header,
	.mobil-kontakt,
	.site-footer__orte,
	.abschnitt--cta { display: none; }
	body { background: #fff; padding: 0; }
}

/* Ratgeber: etwas flacherer Bild-Kopf */
.single-post .hero--bild { min-height: clamp(22rem, 52vh, 34rem); }
@media (max-width: 600px) {
	.single-post .abschnitt--inhalt .text { line-height: 1.65; }
}


/* ---------- Telefon am Desktop: Nummer zeigen statt Anruf-Link ---------- */
.nur-maus { display: none; }
@media (hover: hover) and (pointer: fine) {
	.nur-touch { display: none; }
	.nur-maus { display: inline; }
	a[data-nummer] { cursor: copy; }
}
.kontakt-mail {
	margin: .75rem 0 0;
	font-size: var(--fs-klein);
	opacity: .9;
}
.kontakt-buttons--zentriert + .kontakt-mail { text-align: center; }
.hero .kontakt-mail,
.abschnitt--cta .kontakt-mail,
.site-nav .kontakt-mail { color: var(--hell); }
.hero .kontakt-mail a,
.abschnitt--cta .kontakt-mail a,
.site-nav .kontakt-mail a { color: var(--weiss); }
.hero .kontakt-buttons:has(+ .kontakt-mail) { margin-bottom: 0; }
.hero .kontakt-mail { margin-bottom: 1.5rem; }

.hinweis-toast {
	position: fixed;
	left: 50%;
	bottom: 1.5rem;
	z-index: 200;
	max-width: calc(100% - 2rem);
	padding: .9rem 1.25rem;
	border-radius: .6rem;
	background: var(--dunkel-tief);
	color: var(--weiss);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
	font-size: var(--fs-klein);
	transform: translate(-50%, 1rem);
	opacity: 0;
	transition: opacity .2s ease, transform .2s ease;
	pointer-events: none;
}
.hinweis-toast.ist-sichtbar { opacity: 1; transform: translate(-50%, 0); }
.hinweis-toast strong { font-size: 1.15em; letter-spacing: .02em; }

/* Ortsseite: Überschriften über den Ortskacheln */
.ortsliste__titel { font-size: 1.15rem; margin: 0 0 .75rem; }
.ortsliste + .ortsliste__titel { margin-top: 1.75rem; }

/* Footer: Regionen als Kacheln, Ratgeber als Linkliste */
.footer-regionen { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.footer-regionen a {
	display: inline-flex;
	align-items: center;
	min-height: 2.3rem;
	padding: .3rem .85rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .1);
}
.footer-regionen a:hover { color: var(--weiss); text-decoration: none; background: rgba(255, 255, 255, .12); }
.footer-alle { margin: .9rem 0 0; }
.footer-alle a { display: inline-flex; align-items: center; gap: .35rem; }
.footer-alle .icon { width: 1rem; height: 1rem; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.footer-links__haupt a { font-weight: 600; color: var(--weiss); }
@media (max-width: 759px) {
	.footer-regionen { justify-content: center; }
}

/* Handy: Anrufen/WhatsApp gibt es nur in der festen Leiste unten.
   Im Inhalt (Hero, Abschluss-Kasten, Artikel) bleiben nur E-Mail-Zeile und Erreichbarkeit. */
@media (max-width: 960px) {
	.site-main .kontakt-buttons { display: none; }
	.site-main .kontakt-mail { margin-top: 0; }
}

/* ---------- Einsätze (Bild zuerst) ---------- */
.einsaetze {
	display: grid;
	gap: clamp(1rem, .75rem + 1vw, 1.5rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, max(17rem, calc((100% - 3rem) / 3))), 1fr));
}
.einsatz {
	display: flex;
	flex-direction: column;
	background: var(--weiss);
	border-radius: var(--radius);
	box-shadow: var(--schatten);
	overflow: hidden;
}
.einsatz[hidden] { display: none; }
.hg--weiss .einsatz { background: var(--hell-zart); box-shadow: none; }
.einsatz__bild {
	position: relative;
	display: flex;
	aspect-ratio: 4 / 3;
	background: var(--dunkel);
	overflow: hidden;
}
.einsatz__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease, opacity .2s ease;
}
.einsatz__bild:hover img { transform: scale(1.03); opacity: .94; }
.einsatz__bild:focus-visible { outline: 3px solid var(--akzent); outline-offset: -3px; }
.einsatz__halb { position: relative; flex: 1 1 50%; min-width: 0; overflow: hidden; }
.einsatz__halb + .einsatz__halb { border-left: 3px solid var(--weiss); }
.einsatz__marke,
.einsatz__anzahl {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	padding: .25rem .55rem;
	border-radius: .35rem;
	background: rgba(24, 35, 26, .78);
	color: var(--weiss);
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	pointer-events: none;
}
.einsatz__marke { left: .6rem; bottom: .6rem; }
.einsatz__anzahl { right: .6rem; top: .6rem; }
.einsatz__anzahl .icon { width: 1rem; height: 1rem; }
.einsatz__text { padding: .9rem 1.15rem 1.1rem; }
.einsatz__titel { font-size: 1.3rem; margin: 0 0 .2em; hyphens: auto; }
.einsatz__ort {
	display: flex;
	align-items: center;
	gap: .25rem;
	margin: 0;
	font-size: var(--fs-klein);
	color: var(--text-leise);
}
.einsatz__ort .icon { width: 1rem; height: 1rem; color: var(--gruen); flex: none; }
.einsatz__kurz {
	margin: .5rem 0 0;
	font-size: var(--fs-klein);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.einsatz-filter {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-bottom: 1.5rem;
}
.einsatz-filter__knopf {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	min-height: 2.5rem;
	padding: .45rem .95rem;
	border: 1px solid var(--linie);
	border-radius: .4rem;
	background: var(--weiss);
	color: var(--dunkel);
	font: inherit;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.einsatz-filter__knopf span { font-weight: 400; color: var(--text-leise); font-size: .9em; }
.einsatz-filter__knopf:hover { border-color: var(--dunkel); }
.einsatz-filter__knopf[aria-pressed="true"] { background: var(--dunkel); border-color: var(--dunkel); color: var(--weiss); }
.einsatz-filter__knopf[aria-pressed="true"] span { color: var(--hell); }

/* ---------- Text mit Foto („Wer zu Ihnen kommt“) ---------- */
.text-bild { display: grid; gap: clamp(1.25rem, 1rem + 2vw, 3rem); align-items: center; }
.text-bild__bild { margin: 0; border-radius: var(--radius); overflow: hidden; background: var(--dunkel); }
.text-bild__bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 900px) {
	.text-bild { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}