/*
Theme Name: PBS Planungsbüro Suhle
Theme URI: https://suhle.com/
Author: PBS Planungsbüro Suhle
Description: Responsives Theme für das Planungsbüro Suhle in Brandenburg an der Havel. Verwaltung über das Plugin "PBS Website-Verwaltung" (Menü "Website").
Version: 1.6.0
Requires at least: 6.2
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pbs-suhle
*/

/* ==========================================================================
   1. Grundlagen
   ========================================================================== */

:root {
	--brick: #8b1a1a;
	--brick-deep: #5f1010;
	--ink: #22252a;
	--ink-soft: #4a4f57;
	--paper: #eff0f1;
	--mist: #dcdddf;
	--line: #c3c6ca;
	--white: #fff;
	--hdr-bg: #fff;
	--ftr-bg: var(--ink);
	--ftr-text: #d7d9dc;
	--hero-bg: var(--paper);
	--body-bg: #fff;
	--band-bg: var(--brick);

	--font-head: "Bahnschrift", "DIN Alternate", "DIN Next", "Segoe UI Semibold", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
	--font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--wrap: 72rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--space: clamp(2.5rem, 6vw, 5rem);
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--body-bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 1.0625rem;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

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

a {
	color: var(--brick);
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--brick-deep);
}

p {
	margin: 0 0 1.1em;
}

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

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

.skip-link {
	position: absolute;
	left: 1rem;
	top: -4rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	background: var(--ink);
	color: var(--white);
}

.skip-link:focus {
	top: 0.5rem;
}

.wrap {
	width: 100%;
	max-width: calc(var(--wrap) + 2 * var(--gutter));
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ==========================================================================
   2. Überschriften und die Maßlinie
   ========================================================================== */

h1,
h2,
h3,
h4 {
	font-family: var(--font-head);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.005em;
	color: var(--ink);
	text-wrap: balance;
}

/* Maßlinie: eine rote Linie mit Endstrichen unter dem Titel, wie in einer Bauzeichnung. */
.dim {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	padding-bottom: 0.65em;
	margin-top: 0;
	margin-bottom: 0.9em;
}

.dim::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 10px;
	border-inline: 2px solid var(--brick);
	background: linear-gradient(var(--brick), var(--brick)) center / 100% 2px no-repeat;
}

/* ==========================================================================
   3. Hinweisleiste und Kopfbereich
   ========================================================================== */

.notice {
	background: var(--ink);
	color: var(--white);
	font-size: 0.9375rem;
}

.notice p {
	margin: 0;
	padding: 0.55rem 0;
}

.notice a {
	color: var(--white);
	margin-left: 0.4em;
}

.site-header {
	background: var(--hdr-bg);
	border-top: 6px solid var(--brick);
	border-bottom: 1px solid var(--line);
}

.site-header__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 2rem;
	padding-block: 0.9rem;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 0.8rem;
	color: var(--ink);
	text-decoration: none;
}

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

.brand__logo {
	display: block;
	width: auto;
	max-height: 3.25rem;
}

.brand__mark {
	display: block;
	flex: none;
}

.brand__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.brand__pbs {
	font-family: var(--font-head);
	font-size: 1.65rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--brick);
}

.brand__name {
	font-family: var(--font-head);
	font-size: 0.95rem;
	color: var(--ink-soft);
	margin-top: 0.15rem;
}

/* Hauptnavigation */
.primary-nav .menu,
.primary-nav .menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-nav a {
	display: block;
	font-family: var(--font-head);
	font-size: 1.05rem;
	font-weight: 500;
	color: var(--ink);
	text-decoration: none;
}

.primary-nav a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current_page_item > a,
.primary-nav .current_page_ancestor > a {
	color: var(--brick);
}

.nav-toggle {
	display: none;
}

.sub-toggle {
	display: none;
}

/* Mobile Navigation (unter 62rem) */
@media (max-width: 61.99rem) {
	.nav-toggle {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		min-height: 2.75rem;
		padding: 0.4rem 0.9rem;
		border: 2px solid var(--ink);
		background: var(--white);
		color: var(--ink);
		font: 600 1rem var(--font-head);
		cursor: pointer;
	}

	.nav-toggle__bars,
	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		display: block;
		width: 1.25rem;
		height: 2px;
		background: currentcolor;
	}

	.nav-toggle__bars {
		position: relative;
	}

	.nav-toggle__bars::before,
	.nav-toggle__bars::after {
		content: "";
		position: absolute;
		left: 0;
	}

	.nav-toggle__bars::before {
		top: -6px;
	}

	.nav-toggle__bars::after {
		top: 6px;
	}

	.js .primary-nav {
		display: none;
	}

	.js .primary-nav.is-open {
		display: block;
	}

	.primary-nav {
		flex: 1 0 100%;
		border-top: 1px solid var(--line);
		margin-top: 0.25rem;
	}

	.primary-nav .menu > li {
		position: relative;
		border-bottom: 1px solid var(--mist);
	}

	.primary-nav .menu > li > a {
		padding: 0.8rem 3.5rem 0.8rem 0;
	}

	.primary-nav .menu ul {
		display: none;
		padding: 0 0 0.75rem 1rem;
	}

	.primary-nav li.is-open > ul {
		display: block;
	}

	.primary-nav .menu ul a {
		padding: 0.5rem 0;
		font-size: 1rem;
		font-weight: 400;
	}

	.js .sub-toggle {
		position: absolute;
		top: 0.2rem;
		right: 0;
		display: block;
		width: 2.75rem;
		height: 2.75rem;
		border: 0;
		background: transparent;
		color: var(--ink);
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
	}

	.sub-toggle::before {
		content: "+";
	}

	li.is-open > .sub-toggle::before {
		content: "\2212";
	}

	/* Ohne JavaScript bleibt alles lesbar: Untermenüs sichtbar. */
	html:not(.js) .primary-nav .menu ul {
		display: block;
	}
}

/* Desktop-Navigation */
@media (min-width: 62rem) {
	.primary-nav .menu {
		display: flex;
		flex-wrap: wrap;
		gap: 0.25rem 1.6rem;
	}

	.primary-nav .menu > li {
		position: relative;
	}

	.primary-nav .menu > li > a {
		padding: 0.55rem 0;
		border-bottom: 3px solid transparent;
	}

	.primary-nav .menu > li:hover > a,
	.primary-nav .menu > li:focus-within > a,
	.primary-nav .menu > .current-menu-item > a,
	.primary-nav .menu > .current-menu-ancestor > a,
	.primary-nav .menu > .current_page_item > a,
	.primary-nav .menu > .current_page_ancestor > a {
		border-bottom-color: var(--brick);
	}

	.primary-nav .menu > li > ul {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 60;
		display: none;
		width: max-content;
		min-width: 17rem;
		max-width: 22rem;
		padding: 0.5rem 0;
		background: var(--white);
		border: 1px solid var(--line);
		border-top: 3px solid var(--brick);
		box-shadow: 0 10px 24px rgba(34, 37, 42, 0.12);
	}

	.primary-nav .menu > li:hover > ul,
	.primary-nav .menu > li:focus-within > ul {
		display: block;
	}

	.primary-nav .menu > li.has-many > ul {
		column-count: 2;
		column-gap: 0;
		max-width: none;
		width: 38rem;
	}

	.primary-nav .menu > li:nth-last-child(-n + 3) > ul {
		left: auto;
		right: 0;
	}

	.primary-nav .menu ul li {
		break-inside: avoid;
	}

	.primary-nav .menu ul li {
		border-bottom: 1px solid var(--mist);
	}

	.primary-nav .menu ul li:last-child {
		border-bottom: 0;
	}

	.primary-nav .menu > li.has-many > ul > li {
		margin-inline: 0.6rem;
	}

	.primary-nav .menu ul a {
		padding: 0.45rem 1.1rem;
		font-size: 0.98rem;
		font-weight: 400;
		line-height: 1.3;
	}

	.primary-nav .menu ul a:hover {
		background: var(--paper);
	}
}

/* ==========================================================================
   4. Schaltflächen
   ========================================================================== */

.btn {
	display: inline-block;
	min-height: 2.75rem;
	padding: 0.7rem 1.4rem;
	border: 2px solid var(--brick);
	background: var(--brick);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.btn:hover {
	background: var(--brick-deep);
	border-color: var(--brick-deep);
	color: var(--white);
}

.btn--quiet {
	background: transparent;
	border-color: var(--ink);
	color: var(--ink);
}

.btn--quiet:hover {
	background: transparent;
	border-color: var(--brick);
	color: var(--brick);
}

/* ==========================================================================
   5. Startseite
   ========================================================================== */

.hero {
	background: var(--hero-bg);
	padding-block: clamp(2rem, 5vw, 4.5rem);
	overflow: hidden;
}

.hero__grid {
	display: grid;
	gap: 2.5rem;
	align-items: center;
}

.hero__title {
	font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem);
	line-height: 1.1;
	margin-bottom: 1.1rem;
}

.hero__lead {
	max-width: 36rem;
	font-size: 1.125rem;
	color: var(--ink-soft);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
}

.hero__figure {
	--off: 0.75rem;
	position: relative;
	isolation: isolate;
	margin: 0 var(--off) var(--off) 0;
}

.hero__figure::before {
	content: "";
	position: absolute;
	inset: var(--off) calc(-1 * var(--off)) calc(-1 * var(--off)) var(--off);
	z-index: -1;
	background: var(--brick);
}

.hero__track {
	position: relative;
	aspect-ratio: 807 / 522;
	background: var(--mist);
	overflow: hidden;
}

.hero__track img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Slider: Bilder liegen übereinander, nur das aktive ist sichtbar. */
.js .hero-slider .hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.9s ease;
}

.js .hero-slider .hero__slide.is-active {
	opacity: 1;
}

.hero-slider__ctrl {
	display: none;
}

.js .hero-slider__ctrl {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	background: linear-gradient(transparent, rgba(20, 22, 25, 0.62));
}

.hero-slider__btn {
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
	background: rgba(20, 22, 25, 0.45);
	color: var(--white);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}

.hero-slider__btn:hover {
	background: var(--brick);
	border-color: var(--brick);
}

.hero-slider__btn:focus-visible,
.hero-slider__dots button:focus-visible {
	outline: 3px solid var(--white);
	outline-offset: 2px;
}

.hero-slider__play::before {
	content: "";
	display: block;
	width: 0.7rem;
	height: 0.8rem;
	margin: 0 auto;
	border-inline: 0.22rem solid currentcolor;
}

.hero-slider__play.is-paused::before {
	width: 0;
	height: 0;
	border-inline: 0;
	border-block: 0.4rem solid transparent;
	border-left: 0.7rem solid currentcolor;
	margin-left: 0.7rem;
}

.hero-slider__dots {
	display: flex;
	gap: 0.55rem;
	margin: 0 0.4rem;
	padding: 0;
	list-style: none;
}

.hero-slider__dots li {
	margin: 0;
	padding: 0;
}

.hero-slider__dots button {
	position: relative;
	width: 0.8rem;
	height: 0.8rem;
	padding: 0;
	border: 2px solid var(--white);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.hero-slider__dots button::after {
	content: "";
	position: absolute;
	inset: -0.5rem;
}

.hero-slider__dots button[aria-current="true"] {
	background: var(--white);
}

@media (min-width: 62rem) {
	.hero__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		gap: 4rem;
	}

	.hero__figure {
		--off: 1.25rem;
	}
}

.quote {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(2rem, 4vw, 3rem);
}

.quote blockquote {
	margin: 0;
	max-width: 44rem;
}

.quote p {
	margin: 0 0 0.5rem;
	font-family: var(--font-head);
	font-size: clamp(1.35rem, 1rem + 1.4vw, 2rem);
	line-height: 1.25;
	font-weight: 500;
	color: var(--ink);
	text-wrap: balance;
}

.quote cite {
	font-style: normal;
	color: var(--ink-soft);
}

.quote footer::before {
	content: "– ";
}

.block {
	padding-block: var(--space);
}

.block__title {
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
	margin-bottom: 1.75rem;
}

.block__more {
	margin: 2rem 0 0;
}

.centers__list,
.service__list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.centers__list {
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.center {
	position: relative;
	padding-top: 1rem;
	border-top: 2px solid var(--ink);
}

.center:hover {
	border-top-color: var(--brick);
}

.center__title {
	margin: 0 0 0.6rem;
	font-size: 1.3rem;
}

.center__title a,
.tile__title a,
.child-card__title a {
	color: inherit;
	text-decoration: none;
}

.center__title a::after,
.tile__title a::after,
.child-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.center__title a:hover,
.tile__title a:hover,
.child-card__title a:hover {
	color: var(--brick);
	text-decoration: underline;
}

.center p {
	margin: 0;
	color: var(--ink-soft);
}

.refs {
	background: var(--paper);
}

.refs__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.5rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ref__link {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.ref__img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--mist);
}

.ref__link:hover .ref__img {
	outline: 3px solid var(--brick);
	outline-offset: -3px;
}

.ref__cap {
	display: block;
	padding-top: 0.6rem;
	line-height: 1.3;
}

.ref__title {
	display: block;
	font-family: var(--font-head);
	font-size: 1.1rem;
	font-weight: 600;
}

.ref__cat {
	display: block;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.service__list {
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.tile {
	position: relative;
	padding: 1.4rem 1.5rem 1.5rem;
	border: 1px solid var(--line);
	background: var(--white);
}

.tile:hover {
	border-color: var(--brick);
}

.tile__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
}

.tile p {
	margin: 0;
	color: var(--ink-soft);
}

.contact-band {
	background: var(--band-bg);
	color: var(--white);
	padding-block: var(--space);
}

.contact-band__grid {
	display: grid;
	gap: 2rem;
	align-items: start;
}

@media (min-width: 52rem) {
	.contact-band__grid {
		grid-template-columns: 1fr 1fr;
		gap: 4rem;
	}
}

.contact-band__title {
	margin: 0 0 0.75rem;
	color: var(--white);
	font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
}

.contact-band p {
	max-width: 32rem;
}

.contact-band a {
	color: var(--white);
}

/* Kontaktdaten (Startseite, Fußzeile, Kontaktseite) */
.contact {
	font-style: normal;
}

.contact__addr {
	margin-bottom: 0.9rem;
}

.contact__list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1.25rem;
	margin: 0;
}

.contact__list dt {
	font-weight: 600;
}

.contact__list dd {
	margin: 0;
}

.entry-content .contact {
	padding: 1.25rem 1.5rem;
	background: var(--paper);
	border-left: 4px solid var(--brick);
	margin-bottom: 2rem;
}

/* ==========================================================================
   6. Unterseiten
   ========================================================================== */

.page-head {
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.5rem, 3.5vw, 2.5rem) clamp(0.5rem, 1.5vw, 1rem);
}

.page-head h1 {
	margin-bottom: 0.9rem;
	font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
	overflow-wrap: anywhere;
}

.page-head__meta {
	margin: 0 0 1rem;
	color: var(--ink-soft);
}

.crumbs {
	margin-bottom: 0.9rem;
	font-size: 0.9rem;
}

.crumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--ink-soft);
}

.crumbs li:not(:last-child)::after {
	content: "/";
	margin-left: 0.5rem;
	color: var(--line);
}

.crumbs a {
	color: var(--ink-soft);
}

.page-body {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	padding-block: clamp(2rem, 5vw, 4rem);
}

.page-main {
	min-width: 0;
	flex: 1;
}

.page-aside {
	order: 2;
}

@media (min-width: 62rem) {
	.page-body.has-aside {
		display: grid;
		grid-template-columns: 17rem minmax(0, 1fr);
		gap: 4rem;
		align-items: start;
	}

	.page-aside {
		order: 0;
	}
}

.section-nav__title {
	margin: 0 0 0.75rem;
	padding-bottom: 0.6rem;
	border-bottom: 2px solid var(--ink);
	font-size: 1.15rem;
}

.section-nav__title a {
	color: inherit;
	text-decoration: none;
}

.section-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.section-nav li ul {
	padding-left: 0.9rem;
}

.section-nav a {
	display: block;
	padding: 0.35rem 0 0.35rem 0.75rem;
	border-left: 3px solid var(--mist);
	color: var(--ink);
	font-size: 0.98rem;
	line-height: 1.35;
	text-decoration: none;
}

.section-nav a:hover {
	border-left-color: var(--brick);
	color: var(--brick);
}

.section-nav .current_page_item > a {
	border-left-color: var(--brick);
	color: var(--brick);
	font-weight: 600;
}

/* Textinhalte */
.entry-content {
	max-width: 46rem;
	overflow-wrap: break-word;
}

.page-main--wide .entry-content {
	max-width: none;
}

.entry-content > :first-child {
	margin-top: 0;
}

.entry-content h2 {
	margin: 2.2em 0 0.6em;
	font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem);
}

.entry-content h3 {
	margin: 1.9em 0 0.5em;
	font-size: 1.3rem;
}

.entry-content h4 {
	margin: 1.6em 0 0.4em;
	font-size: 1.1rem;
}

.entry-content ul,
.entry-content ol {
	margin: 0 0 1.3em;
	padding-left: 1.3em;
}

.entry-content li {
	margin-bottom: 0.4em;
	padding-left: 0.2em;
}

.entry-content li::marker {
	color: var(--brick);
}

.entry-content img {
	display: block;
	margin-block: 1.5rem;
}

.entry-content blockquote {
	margin: 1.75rem 0;
	padding: 0 0 0 1.25rem;
	border-left: 4px solid var(--brick);
	font-family: var(--font-head);
	font-size: 1.25rem;
	line-height: 1.35;
}

.entry-content blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-style: normal;
	color: var(--ink-soft);
}

.entry-content table {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 1.5rem 0;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: 0.98rem;
}

.entry-content th,
.entry-content td {
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry-content th {
	background: var(--mist);
	font-family: var(--font-head);
}

.entry-content hr {
	margin: 2rem 0;
	border: 0;
	border-top: 1px solid var(--line);
}

.entry-content .alignleft {
	float: left;
	margin: 0.3rem 1.5rem 1rem 0;
}

.entry-content .alignright {
	float: right;
	margin: 0.3rem 0 1rem 1.5rem;
}

.entry-content .aligncenter {
	margin-inline: auto;
}

.entry-content figcaption,
.wp-caption-text {
	font-size: 0.9rem;
	color: var(--ink-soft);
}

/* A–Z-Leiste der Schadstoffdatenbank */
.pbs-az {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin: 1.5rem 0 2rem;
}

.pbs-az span {
	display: inline-block;
	min-width: 2.2rem;
	padding: 0.2rem 0.5rem;
	border: 1px solid var(--mist);
	color: var(--line);
	text-align: center;
	font-family: var(--font-head);
}

.pbs-az span:has(a) {
	border-color: var(--ink);
}

.pbs-az a {
	display: block;
	color: var(--ink);
	text-decoration: none;
}

.pbs-az a:hover {
	color: var(--brick);
}

.edit-link {
	margin-top: 2rem;
	font-size: 0.9rem;
}

/* Übersichtskarten der Unterseiten */
.child-grid {
	margin-top: 3rem;
}

.child-grid ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.child-card {
	position: relative;
	padding: 1.1rem 1.25rem 1.25rem;
	border: 1px solid var(--line);
	background: var(--white);
}

.child-card:hover {
	border-color: var(--brick);
}

.child-card__title {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
}

.child-card p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--ink-soft);
}

/* Referenzen */
.ref-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 2rem;
}

.chip {
	min-height: 2.5rem;
	padding: 0.35rem 1rem;
	border: 2px solid var(--ink);
	background: var(--white);
	color: var(--ink);
	font: 500 1rem var(--font-head);
	cursor: pointer;
}

.chip:hover {
	border-color: var(--brick);
	color: var(--brick);
}

.chip.is-active {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--white);
}

.refs__grid--page {
	margin-top: 0.5rem;
}

.ref[hidden] {
	display: none;
}

.ref-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.ref-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

/* Großansicht */
.lightbox {
	width: min(96vw, 64rem);
	max-width: none;
	padding: 0;
	border: 0;
	background: var(--ink);
	color: var(--white);
}

.lightbox::backdrop {
	background: rgba(20, 22, 25, 0.85);
}

.lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 1.25rem;
}

.lightbox__title {
	margin: 0;
	font-family: var(--font-head);
	font-size: 1.15rem;
}

.lightbox__btn,
.lightbox__nav {
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	background: transparent;
	color: var(--white);
	font-size: 2rem;
	line-height: 1;
	cursor: pointer;
}

.lightbox__btn:hover,
.lightbox__nav:hover {
	background: rgba(255, 255, 255, 0.14);
}

.lightbox__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	padding: 0 0.5rem;
	min-height: 40vh;
}

.lightbox__img {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	max-width: 100%;
	max-height: 72vh;
	width: auto;
	height: auto;
	object-fit: contain;
}

.lightbox__count {
	margin: 0;
	padding: 0.5rem 1.25rem 0.9rem;
	font-size: 0.9rem;
	color: var(--mist);
}

.lightbox[data-single] .lightbox__nav,
.lightbox[data-single] .lightbox__count {
	visibility: hidden;
}

/* ==========================================================================
   7. Fußzeile
   ========================================================================== */

.site-footer {
	background: var(--ftr-bg);
	color: var(--ftr-text);
	font-size: 0.98rem;
}

.site-footer a {
	color: var(--white);
}

.footer__grid {
	display: grid;
	gap: 2.5rem;
	padding-block: var(--space);
}

@media (min-width: 52rem) {
	.footer__grid {
		grid-template-columns: 1.4fr 1fr 1fr;
	}
}

.footer__title {
	margin: 0 0 1rem;
	color: var(--white);
	font-size: 1.15rem;
}

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

.footer__links li {
	margin-bottom: 0.35rem;
}

.footer__kammer img {
	display: block;
	margin-bottom: 0.75rem;
	background: var(--white);
	padding: 0.35rem;
}

.footer__kammer p {
	max-width: 16rem;
}

.footer__legal {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer__legal-in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-block: 1rem;
}

.footer__legal-in p {
	margin: 0;
}

.footer-nav .menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.contact-band :focus-visible,
.site-footer :focus-visible,
.lightbox :focus-visible,
.notice :focus-visible {
	outline-color: var(--white);
}

/* ==========================================================================
   8. Bewegung und Druck
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}

@media print {
	.notice,
	.site-header,
	.page-aside,
	.site-footer,
	.ref-filter,
	.skip-link {
		display: none !important;
	}

	body {
		font-size: 11pt;
	}

	.entry-content {
		max-width: none;
	}
}


/* ==========================================================================
   9. Kennzahlen, Animationen
   ========================================================================== */

.stats {
	background: var(--white);
	border-bottom: 1px solid var(--line);
	padding-block: clamp(1.75rem, 4vw, 3rem);
}

.stats__list {
	display: grid;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.stat {
	padding-left: 1rem;
	border-left: 4px solid var(--brick);
}

.stat__num {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);
	line-height: 1;
	font-weight: 600;
	color: var(--brick);
	font-variant-numeric: tabular-nums;
}

.stat__label {
	display: block;
	margin-top: 0.35rem;
	color: var(--ink-soft);
}

@media (min-width: 40rem) {
	.stats__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Bewegung nur, wenn gewünscht und JavaScript läuft. */
@media (prefers-reduced-motion: no-preference) {
	/* Hero: Titel, Maßlinie und Bild bauen sich beim Laden auf. */
	.js .hero__title,
	.js .hero__lead,
	.js .hero__actions {
		animation: pbs-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.js .hero__lead { animation-delay: 0.25s; }
	.js .hero__actions { animation-delay: 0.4s; }

	.js .hero__title::after {
		transform-origin: left center;
		animation: pbs-measure 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.js .hero__track {
		animation: pbs-wipe 1s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	.js .hero__figure::before {
		animation: pbs-offset 0.8s 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}

	@keyframes pbs-rise {
		from { opacity: 0; transform: translateY(14px); }
	}

	@keyframes pbs-measure {
		from { transform: scaleX(0); }
	}

	@keyframes pbs-wipe {
		from { clip-path: inset(0 100% 0 0); }
		to { clip-path: inset(0 0 0 0); }
	}

	@keyframes pbs-offset {
		from { transform: translate(calc(-1 * var(--off)), calc(-1 * var(--off))); opacity: 0; }
	}

	/* Einblenden beim Scrollen: nur Elemente, die JS markiert hat. */
	.js [data-reveal] {
		opacity: 0;
		transform: translateY(18px);
		transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: calc(var(--i, 0) * 70ms);
	}

	.js [data-reveal].is-in {
		opacity: 1;
		transform: none;
	}

	/* Maßlinie zeichnet sich, wenn die Überschrift sichtbar wird. */
	.js .block__title.dim::after {
		transform-origin: left center;
		transform: scaleX(0);
		transition: transform 0.8s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.js .block__title.dim.is-in::after {
		transform: scaleX(1);
	}

	/* Hover: Karten heben sich, Bilder zoomen, Buttons bewegen sich. */
	.center,
	.tile,
	.child-card {
		transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	}

	.tile:hover,
	.child-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 24px rgba(34, 37, 42, 0.12);
	}

	.center:hover {
		transform: translateY(-3px);
	}

	.ref__link {
		overflow: hidden;
	}

	.ref__img {
		transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	}

	.ref__link:hover .ref__img,
	.ref__link:focus-visible .ref__img {
		transform: scale(1.05);
	}

	.btn {
		transition: background-color 0.15s, border-color 0.15s, color 0.15s, transform 0.15s;
	}

	.btn:hover {
		transform: translateY(-2px);
	}

	.primary-nav .menu > li > a {
		transition: color 0.15s;
	}
}

/* ==========================================================================
   10. Inhalte aus dem Seiten-Baukasten
   ========================================================================== */

.pbs-cols {
	display: grid;
	gap: 0 2.5rem;
	margin-bottom: 1.1em;
}

@media (min-width: 48rem) {
	.pbs-cols {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.entry-content .pbs-img {
	margin: 0 0 1.5rem;
}

.entry-content .pbs-img img {
	display: block;
	width: 100%;
	height: auto;
}

.entry-content .pbs-img--medium { max-width: 34rem; }
.entry-content .pbs-img--small { max-width: 18rem; }

.entry-content .pbs-img figcaption {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--ink-soft);
}

.pbs-imgtext {
	display: grid;
	gap: 1.25rem 2rem;
	align-items: start;
	margin-bottom: 1.5rem;
}

.pbs-imgtext__img img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 48rem) {
	.pbs-imgtext {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	.pbs-imgtext--right .pbs-imgtext__img {
		order: 2;
	}

	.pbs-imgtext--right {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	}
}

.entry-content .pbs-gallery {
	display: grid;
	gap: 0.75rem;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	padding: 0;
	margin: 0 0 1.5rem;
	list-style: none;
}

.pbs-gallery a {
	display: block;
	overflow: hidden;
}

.pbs-gallery img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.pbs-gallery a:hover img {
	transform: scale(1.05);
}

.pbs-btnrow {
	margin: 1.25rem 0;
}

.entry-content .pbs-download a {
	display: grid;
	gap: 0.15rem 1rem;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	padding: 0.9rem 1.1rem;
	border: 1px solid var(--line);
	border-left: 4px solid var(--brick);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.entry-content .pbs-download a:hover {
	border-color: var(--brick);
	box-shadow: 0 6px 16px rgba(34, 37, 42, 0.1);
}

.pbs-download strong { color: var(--brick); }
.pbs-download span { grid-column: 1; color: var(--ink-soft); font-size: 0.95rem; }
.pbs-download em { grid-column: 2; grid-row: 1; font-style: normal; font-size: 0.85rem; color: var(--ink-soft); }

.entry-content .pbs-stats {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	padding: 0;
	margin: 0 0 1.5rem;
	list-style: none;
}

.pbs-spacer--s { height: 1rem; }
.pbs-spacer--m { height: 2.5rem; }
.pbs-spacer--l { height: 4.5rem; }

.entry-content .pbs-divider {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2rem 0;
}

/* ==========================================================================
   11. Seitengestaltung: Abschnitte, Inhaltsübersicht, Hinweise, Dateien
   ========================================================================== */

.entry-content > .pbs-intro .lead,
.entry-content > p.lead {
	font-size: 1.25rem;
	line-height: 1.55;
	color: var(--ink);
}

.pbs-intro {
	margin-bottom: 1.75rem;
}

/* Inhaltsübersicht */
.pbs-toc {
	margin: 0 0 2.5rem;
	padding: 1.1rem 1.4rem 1.2rem;
	background: var(--paper);
	border-left: 4px solid var(--brick);
}

.pbs-toc__title {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--font-head);
	font-size: 1.1rem;
	font-weight: 600;
}

.entry-content .pbs-toc ol {
	display: grid;
	gap: 0.15rem 2rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: toc;
}

.pbs-toc li {
	margin: 0;
	padding: 0;
	counter-increment: toc;
}

.pbs-toc a {
	display: block;
	padding: 0.3rem 0;
	color: var(--ink);
	text-decoration: none;
	border-bottom: 1px solid var(--mist);
}

.pbs-toc a::before {
	content: counter(toc) ".";
	display: inline-block;
	min-width: 1.7rem;
	color: var(--brick);
	font-family: var(--font-head);
	font-weight: 600;
}

.pbs-toc a:hover {
	color: var(--brick);
}

@media (min-width: 48rem) {
	.entry-content .pbs-toc ol {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Abschnitte */
.pbs-sec {
	margin-top: clamp(2rem, 4vw, 3rem);
	padding-top: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--line);
	scroll-margin-top: 6rem;
}

.pbs-sec:first-of-type {
	margin-top: 0;
}

.entry-content .pbs-sec > h2,
.entry-content > h2 {
	position: relative;
	display: block;
	width: fit-content;
	max-width: 100%;
	margin: 0 0 1.1rem;
	padding-bottom: 0.6em;
}

.entry-content .pbs-sec > h2::after,
.entry-content > h2::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 10px;
	border-inline: 2px solid var(--brick);
	background: linear-gradient(var(--brick), var(--brick)) center / 100% 2px no-repeat;
}

.entry-content h3 {
	padding-left: 0.75rem;
	border-left: 4px solid var(--brick);
	line-height: 1.2;
}

.entry-content h4 {
	font-family: var(--font-head);
	color: var(--brick);
}

/* Listen: eigene Aufzählungszeichen */
.entry-content ul:not(.pbs-gallery):not(.pbs-stats):not([class]) {
	list-style: none;
	padding-left: 0;
}

.entry-content ul:not(.pbs-gallery):not(.pbs-stats):not([class]) > li {
	position: relative;
	padding-left: 1.4rem;
}

.entry-content ul:not(.pbs-gallery):not(.pbs-stats):not([class]) > li::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.72em;
	width: 0.5rem;
	height: 0.5rem;
	background: var(--brick);
}

.entry-content ol > li::marker {
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--brick);
}

/* Tabellen */
.entry-content table {
	border: 1px solid var(--line);
}

.entry-content th,
.entry-content td {
	border-width: 0 0 1px;
}

.entry-content th {
	background: var(--ink);
	color: var(--white);
}

.entry-content tbody tr:nth-child(even) td {
	background: var(--paper);
}

/* Zitate und Bilder */
.entry-content blockquote {
	padding: 1.1rem 1.4rem;
	background: var(--paper);
}

.entry-content > img,
.entry-content p > img,
.entry-content .pbs-img img {
	box-shadow: 0 6px 20px rgba(34, 37, 42, 0.14);
}

/* Links auf Dateien erhalten ein Etikett (PDF, Excel, Word) */
.entry-content a[href$=".pdf" i],
.entry-content a[href$=".xls" i],
.entry-content a[href$=".xlsx" i],
.entry-content a[href$=".doc" i],
.entry-content a[href$=".docx" i],
.entry-content a[href$=".zip" i] {
	text-decoration: none;
	border-bottom: 1px solid currentcolor;
}

.entry-content a[href$=".pdf" i]::before,
.entry-content a[href$=".xls" i]::before,
.entry-content a[href$=".xlsx" i]::before,
.entry-content a[href$=".doc" i]::before,
.entry-content a[href$=".docx" i]::before,
.entry-content a[href$=".zip" i]::before {
	display: inline-block;
	margin-right: 0.5em;
	padding: 0.05em 0.4em;
	background: var(--brick);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 0.72em;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.4;
	vertical-align: 0.1em;
}

.entry-content a[href$=".pdf" i]::before { content: "PDF"; }
.entry-content a[href$=".xls" i]::before,
.entry-content a[href$=".xlsx" i]::before { content: "XLS"; background: #1f6b3a; }
.entry-content a[href$=".doc" i]::before,
.entry-content a[href$=".docx" i]::before { content: "DOC"; background: #1d4f91; }
.entry-content a[href$=".zip" i]::before { content: "ZIP"; background: var(--ink-soft); }

.entry-content .pbs-download a::before { content: none; }
.entry-content .pbs-download a { border-bottom: 1px solid var(--line); }

/* Hinweisbox */
.pbs-callout {
	display: grid;
	gap: 0.25rem;
	margin: 1.75rem 0;
	padding: 1.1rem 1.4rem;
	background: var(--paper);
	border-left: 5px solid var(--ink-soft);
}

.pbs-callout--info { border-left-color: #1d4f91; background: #eef3fa; }
.pbs-callout--tipp { border-left-color: #1f6b3a; background: #eef6f0; }
.pbs-callout--wichtig { border-left-color: var(--brick); background: #f8eeee; }

.pbs-callout__title {
	font-family: var(--font-head);
	font-size: 1.1rem;
	font-weight: 600;
}

.pbs-callout p:last-child {
	margin-bottom: 0;
}

/* Aufklappbereiche */
.pbs-acc {
	margin: 1.5rem 0;
	border-top: 1px solid var(--line);
}

.pbs-acc details {
	border-bottom: 1px solid var(--line);
}

.pbs-acc summary {
	position: relative;
	padding: 1rem 3rem 1rem 0.25rem;
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.pbs-acc summary::-webkit-details-marker {
	display: none;
}

.pbs-acc summary::after {
	content: "+";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	translate: 0 -50%;
	width: 1.75rem;
	height: 1.75rem;
	border: 2px solid var(--brick);
	color: var(--brick);
	font-size: 1.3rem;
	line-height: 1.45;
	text-align: center;
}

.pbs-acc details[open] summary::after {
	content: "–";
	background: var(--brick);
	color: var(--white);
}

.pbs-acc summary:hover {
	color: var(--brick);
}

.pbs-acc__body {
	padding: 0 0.25rem 1.25rem;
}

/* Karten */
.entry-content .pbs-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	margin: 1.75rem 0;
	padding: 0;
	list-style: none;
}

.pbs-card {
	display: flex;
	flex-direction: column;
	padding: 1.25rem 1.35rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--brick);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pbs-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(34, 37, 42, 0.12);
}

.pbs-card__title {
	margin: 0 0 0.4rem;
	font-family: var(--font-head);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.2;
}

.pbs-card p {
	margin: 0 0 0.75rem;
	color: var(--ink-soft);
}

.pbs-card__link {
	margin-top: auto;
	font-weight: 600;
}

.entry-content .pbs-card ul,
.entry-content .pbs-cards,
.entry-content .pbs-cards > li {
	padding-left: 0;
}

.entry-content .pbs-cards > li::before {
	content: none;
}

/* Download-Bibliothek */
.pbs-files {
	margin: 1.5rem 0 2.5rem;
}

.pbs-files__group {
	margin: 0 0 2rem;
}

.pbs-files__title {
	margin: 0 0 0.75rem;
	font-family: var(--font-head);
	font-size: 1.3rem;
}

.entry-content .pbs-files__list {
	display: grid;
	gap: 0.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-content .pbs-files__list > li {
	margin: 0;
	padding: 0;
}

.entry-content .pbs-files__list > li::before {
	content: none;
}

.entry-content a.pbs-file[href] {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 0.15rem 1rem;
	align-items: center;
	padding: 0.8rem 1rem;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--ink);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.entry-content a.pbs-file[href]::before {
	content: none;
	display: none;
}

.entry-content a.pbs-file[href]:hover {
	border-color: var(--brick);
	box-shadow: 0 6px 16px rgba(34, 37, 42, 0.1);
	transform: translateX(3px);
}

.pbs-file__type {
	grid-row: 1 / span 2;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3.4rem;
	background: var(--brick);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.05em;
}

.pbs-file__type[data-t="XLS"], .pbs-file__type[data-t="XLSX"] { background: #1f6b3a; }
.pbs-file__type[data-t="DOC"], .pbs-file__type[data-t="DOCX"] { background: #1d4f91; }
.pbs-file__type[data-t="ZIP"] { background: var(--ink-soft); }

.pbs-file__name {
	font-family: var(--font-head);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.25;
}

.pbs-file__desc {
	grid-column: 2;
	color: var(--ink-soft);
	font-size: 0.95rem;
	line-height: 1.4;
}

.pbs-file__size {
	grid-column: 3;
	grid-row: 1 / span 2;
	font-size: 0.85rem;
	color: var(--ink-soft);
	white-space: nowrap;
}

@media (max-width: 36rem) {
	.entry-content a.pbs-file[href] {
		grid-template-columns: auto 1fr;
	}

	.pbs-file__size {
		grid-column: 2;
		grid-row: auto;
	}
}

/* Hinweis: Formular im Textbereich */
.entry-content .pbsf {
	margin-top: 1.5rem;
	padding: clamp(1.1rem, 3vw, 1.75rem);
	background: var(--paper);
	border-top: 4px solid var(--brick);
}

/* Mobiles Menü: feine Trennlinien */
@media (max-width: 61.99rem) {
	.primary-nav .menu ul li {
		border-bottom: 1px solid var(--mist);
	}

	.primary-nav .menu ul li:last-child {
		border-bottom: 0;
	}
}

@media print {
	.hero-slider__ctrl,
	.pbs-toc {
		display: none;
	}
}

/* ==========================================================================
   12. Seitenkopf mit Titelbild, Kontaktband, weitere Bausteine
   ========================================================================== */

.page-head__lead {
	max-width: 44rem;
	margin: 0 0 1.25rem;
	color: var(--ink-soft);
	font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem);
	line-height: 1.55;
}

.page-head--visual {
	padding-bottom: 0;
	overflow: hidden;
}

.page-head--visual .page-head__in {
	display: grid;
	gap: 0 2.5rem;
	align-items: end;
}

.page-head--visual .page-head__text {
	padding-bottom: clamp(1.25rem, 3vw, 2rem);
}

.page-head__visual {
	margin: 0;
	border-top: 5px solid var(--brick);
}

.page-head__visual img {
	display: block;
	width: 100%;
	height: clamp(9rem, 28vw, 15rem);
	object-fit: cover;
}

@media (min-width: 52rem) {
	.page-head--visual .page-head__in {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 34%);
	}

	.page-head__visual img {
		height: 14rem;
	}
}

/* Kontaktband */
.cta-band {
	margin-top: var(--space);
	background: var(--band-bg);
	color: var(--white);
}

.cta-band__in {
	display: grid;
	gap: 1.25rem 3rem;
	align-items: center;
	padding-block: clamp(2rem, 5vw, 3.25rem);
}

@media (min-width: 52rem) {
	.cta-band__in {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

.cta-band h2 {
	margin: 0 0 0.4rem;
	color: var(--white);
	font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem);
}

.cta-band p {
	max-width: 42rem;
	margin: 0;
}

.cta-band .cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cta-band .btn--light {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}

.cta-band .btn--light:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--brick);
}

.cta-band .btn--ghost {
	background: transparent;
	border-color: var(--white);
	color: var(--white);
}

.cta-band .btn--ghost:hover {
	background: var(--white);
	color: var(--ink);
}

.page-body + .cta-band,
.page-body ~ .cta-band {
	margin-top: 0;
}

/* Ablauf in Schritten (nur wo es wirklich eine Reihenfolge gibt) */
.entry-content ol.pbs-steps {
	counter-reset: step;
	display: grid;
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.entry-content ol.pbs-steps > li {
	position: relative;
	margin: 0;
	padding: 0 0 1.6rem 3.75rem;
	counter-increment: step;
}

.entry-content ol.pbs-steps > li::before {
	content: counter(step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	background: var(--brick);
	color: var(--white);
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 600;
}

.entry-content ol.pbs-steps > li::after {
	content: "";
	position: absolute;
	top: 2.7rem;
	bottom: 0.2rem;
	left: 1.2rem;
	width: 2px;
	background: var(--line);
}

.entry-content ol.pbs-steps > li:last-child {
	padding-bottom: 0;
}

.entry-content ol.pbs-steps > li:last-child::after {
	display: none;
}

.pbs-steps__title {
	display: block;
	margin-bottom: 0.2rem;
	font-family: var(--font-head);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.pbs-steps__text {
	margin: 0;
	color: var(--ink-soft);
}

/* Merkmale mit Haken */
.entry-content ul.pbs-checks {
	display: grid;
	gap: 0.6rem 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
	margin: 1.25rem 0 2rem;
	padding: 0;
	list-style: none;
}

.entry-content ul.pbs-checks > li {
	position: relative;
	margin: 0;
	padding: 0.8rem 1rem 0.8rem 3rem;
	background: var(--paper);
	border-left: 3px solid var(--brick);
	line-height: 1.5;
}

.entry-content ul.pbs-checks > li::before {
	content: "";
	position: absolute;
	top: 0.95rem;
	left: 1.15rem;
	width: 0.45rem;
	height: 0.85rem;
	border: solid var(--brick);
	border-width: 0 3px 3px 0;
	transform: rotate(40deg);
}

/* Zitat */
.entry-content blockquote.pbs-quote {
	margin: 2rem 0;
	padding: 1.25rem 1.75rem 1.25rem 2rem;
	background: var(--paper);
	border: 0;
	border-left: 6px solid var(--brick);
	font-family: var(--font-head);
	font-size: clamp(1.2rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.4;
}

.entry-content blockquote.pbs-quote p {
	margin: 0;
}

.entry-content blockquote.pbs-quote cite {
	display: block;
	margin-top: 0.6rem;
	color: var(--ink-soft);
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-style: normal;
}

/* Tabelle */
.pbs-table-wrap {
	margin: 1.5rem 0 2rem;
	overflow-x: auto;
}

.entry-content .pbs-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.45;
}

.entry-content .pbs-table caption {
	padding-bottom: 0.5rem;
	font-family: var(--font-head);
	font-size: 1.15rem;
	font-weight: 600;
	text-align: left;
}

.entry-content .pbs-table th,
.entry-content .pbs-table td {
	padding: 0.65rem 0.9rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.entry-content .pbs-table thead th {
	background: var(--ink);
	border-bottom: 0;
	color: var(--white);
	font-family: var(--font-head);
	font-weight: 600;
}

.entry-content .pbs-table tbody tr:nth-child(even) {
	background: var(--paper);
}

.entry-content .pbs-table .is-num {
	font-variant-numeric: tabular-nums;
	text-align: right;
	white-space: nowrap;
}

/* Preise / Kennzahlen im Text */
.entry-content .pbs-prices {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: 1.5rem 0 2rem;
	padding: 0;
	list-style: none;
}

.entry-content .pbs-prices > li {
	margin: 0;
	padding: 1.25rem 1.25rem 1.1rem;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 4px solid var(--brick);
}

.entry-content .pbs-prices > li::before {
	content: none;
}

.pbs-prices__value {
	display: block;
	font-family: var(--font-head);
	font-size: 2rem;
	font-weight: 600;
	line-height: 1.1;
}

.pbs-prices__label {
	display: block;
	margin-top: 0.35rem;
	color: var(--ink-soft);
	line-height: 1.4;
}

/* Bild im Text mit Rahmenversatz */
.pbs-imgtext__img img {
	box-shadow: 0.6rem 0.6rem 0 var(--mist);
}

@media (max-width: 47.99rem) {
	.pbs-imgtext__img img {
		box-shadow: 0.4rem 0.4rem 0 var(--mist);
	}
}

/* Kleines Bild in Originalgröße neben Text */
.pbs-imgtext--thumb {
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
}

.pbs-imgtext--thumb .pbs-imgtext__img img {
	width: auto;
	max-width: 100%;
}

@media (min-width: 48rem) {
	.pbs-imgtext--thumb,
	.pbs-imgtext--thumb.pbs-imgtext--right {
		grid-template-columns: auto minmax(0, 1fr);
	}

	.pbs-imgtext--thumb.pbs-imgtext--right {
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

/* ==========================================================================
   13. Linkliste (Gesetzestexte u. a.)
   ========================================================================== */
.entry-content ul.pbs-linklist {
	list-style: none;
	margin: 1.2rem 0 2rem;
	padding: 0;
	border-top: 1px solid var(--line, #d9dbde);
}
.entry-content ul.pbs-linklist > li {
	display: grid;
	grid-template-columns: minmax(8.5rem, 13rem) 1fr;
	align-items: baseline;
	gap: .2rem 1.5rem;
	margin: 0;
	padding: .8rem .2rem;
	border-bottom: 1px solid var(--line, #d9dbde);
}
.entry-content ul.pbs-linklist > li::before { content: none; display: none; }
.entry-content ul.pbs-linklist > li > a { font-weight: 600; justify-self: start; }
.entry-content ul.pbs-linklist > li > span { color: var(--ink-soft, #55595f); }
@media (max-width: 640px) {
	.entry-content ul.pbs-linklist > li { grid-template-columns: 1fr; }
}

/* ==========================================================================
   14. Seitenraster mit rechter Spalte, Blocksatz, lückenlose Raster
   ========================================================================== */

:root { --wrap: 78rem; }

.page-body.has-side {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas: "main" "side" "nav";
	gap: 2.5rem;
	align-items: start;
}
.page-body.has-side > .page-main { grid-area: main; }
.page-body.has-side > .page-side { grid-area: side; }
.page-body.has-side > .page-aside { grid-area: nav; order: 0; }

@media (min-width: 62rem) {
	.page-body.has-side {
		grid-template-columns: minmax(0, 1fr) 19rem;
		grid-template-areas: "main side";
		gap: 3.5rem;
	}
	.page-body.has-side.has-aside {
		grid-template-columns: 16rem minmax(0, 1fr);
		grid-template-areas: "nav main" "nav side";
		column-gap: 3rem;
		row-gap: 2.5rem;
	}
}

@media (min-width: 76rem) {
	.page-body.has-side.has-aside {
		grid-template-columns: 16rem minmax(0, 1fr) 18rem;
		grid-template-areas: "nav main side";
	}
}

.page-side {
	display: grid;
	gap: 1.25rem;
}
@media (min-width: 62rem) {
	.page-side { position: sticky; top: 1.25rem; }
}

.side-card {
	padding: 1.4rem 1.4rem 1.5rem;
	background: var(--paper);
	border-top: 4px solid var(--brick);
}
.side-card__title {
	margin: 0 0 0.6rem;
	font-size: 1.2rem;
	line-height: 1.2;
}
.side-card__title a { color: inherit; text-decoration: none; }
.side-card__text { margin: 0 0 1rem; color: var(--ink-soft); }
.side-card--contact { background: var(--ink); color: #fff; }
.side-card--contact .side-card__title { color: #fff; }
.side-card--contact .side-card__text { color: rgba(255, 255, 255, 0.78); }
.side-card--contact a:not(.btn) { color: #fff; }
.side-card__list { margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: 0.98rem; line-height: 1.45; }
.side-card__list li { padding: 0.45rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); }
.side-card__list li:first-child { border-top: 0; }
.side-card__list span { display: block; font-size: 0.8rem; opacity: 0.7; }
.side-card__links { margin: 0; padding: 0; list-style: none; }
.side-card__links li { border-top: 1px solid var(--line); }
.side-card__links li:first-child { border-top: 0; }
.side-card__links a {
	display: block;
	padding: 0.5rem 0;
	color: var(--ink);
	font-size: 0.97rem;
	line-height: 1.3;
	text-decoration: none;
}
.side-card__links a:hover { color: var(--brick); }

/* Inhalt füllt seine Spalte */
.entry-content { max-width: none; }

/* Blocksatz mit Silbentrennung (ab Tablet-Breite; auf dem Handy bleibt der Text linksbündig) */
.entry-content p {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}
@media (min-width: 48rem) {
	.entry-content p { text-align: justify; }
}
.entry-content p.lead,
.entry-content .pbs-btnrow,
.entry-content .edit-link,
.entry-content .pbs-card p,
.entry-content .pbs-steps p,
.entry-content .pbs-quote p,
.entry-content .pbs-toc p,
.entry-content .pbs-prices p,
.entry-content .pbs-stats p,
.entry-content .pbs-download p,
.entry-content figcaption,
.entry-content caption {
	text-align: left;
	hyphens: manual;
}

/* Raster ohne Lücken: die letzte Zeile füllt die volle Breite */
.entry-content ul.pbs-checks,
.entry-content .pbs-cards,
.entry-content .pbs-prices,
.entry-content .pbs-stats,
.child-grid ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}
.entry-content ul.pbs-checks { gap: 0.6rem 1rem; }
.entry-content ul.pbs-checks > li { flex: 1 1 16rem; }
.entry-content .pbs-cards > li { flex: 1 1 14rem; }
.entry-content .pbs-prices > li { flex: 1 1 12rem; }
.entry-content .pbs-stats > li { flex: 1 1 9rem; }
.child-grid ul > li { flex: 1 1 16rem; }
.page-children { padding-bottom: clamp(2rem, 5vw, 4rem); }
.page-children .child-grid { margin-top: 0; }

/* Karten mit Link: ganze Karte klickbar, Text ohne Unterstreichung */
.entry-content .pbs-card > a {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}
.entry-content .pbs-card > a:hover .pbs-card__title { color: var(--brick); }
.entry-content .pbs-card > a::before { content: none; display: none; }

/* ==========================================================================
   15. Referenzen als lückenloses, asymmetrisches Mosaik
   ========================================================================== */

.refs__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* Ohne JavaScript: Breite nach Seitenverhältnis, jede Zeile füllt sich bis zum Rand */
.refs__grid > .ref {
	flex: calc(var(--ar, 1.33) * 100) 1 calc(var(--ar, 1.33) * 13rem);
	min-width: 0;
	position: relative;
	overflow: hidden;
	background: var(--mist);
}

/* Mit JavaScript: Zeilen werden berechnet, alle Zeilen sind gleich breit und je Zeile gleich hoch */
.refs__grid.is-justified > .ref { flex: none; }

.ref__link { position: relative; }

.ref__img {
	aspect-ratio: var(--ar, 1.33);
	height: auto;
	transition: transform 0.5s ease;
}
.ref__link:hover .ref__img { transform: scale(1.04); outline: 0; }

.ref__cap {
	position: absolute;
	inset: auto 0 0 0;
	padding: 2.4rem 0.9rem 0.75rem;
	color: #fff;
	background: linear-gradient(to top, rgba(20, 22, 26, 0.82), rgba(20, 22, 26, 0));
	pointer-events: none;
}
.ref__title { font-size: 1.05rem; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.ref__cat { color: rgba(255, 255, 255, 0.85); font-size: 0.85rem; }
.ref__link:focus-visible { outline: 3px solid var(--brick); outline-offset: -3px; }

@media (prefers-reduced-motion: reduce) {
	.ref__img { transition: none; }
	.ref__link:hover .ref__img { transform: none; }
}

@media (max-width: 40rem) {
	.ref__cat { display: none; }
	.ref__title { font-size: 0.92rem; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto; }
	.ref__cap { padding: 1.8rem 0.65rem 0.55rem; }
}


/* ==========================================================================
   16. Bild + Text ohne Leerraum, Links in neuem Tab
   ========================================================================== */
.pbs-imgtext {
	align-items: center;
}
.pbs-imgtext__img img {
	max-height: 24rem;
	object-fit: cover;
}
.pbs-imgtext--thumb .pbs-imgtext__img img {
	max-height: none;
}
.entry-content .pbs-imgtext__text p,
.entry-content .pbs-cols p {
	text-align: left;
	hyphens: manual;
}
.entry-content .pbs-imgtext__text > :last-child {
	margin-bottom: 0;
}

@media (min-width: 48rem) {
	.pbs-imgtext:not(.pbs-imgtext--thumb),
	.pbs-imgtext--right:not(.pbs-imgtext--thumb) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

/* Kontaktband der Startseite: Button */
.contact-band .btn--light {
	background: var(--white);
	border-color: var(--white);
	color: var(--ink);
}
.contact-band .btn--light:hover {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--brick);
}
.contact-band__more {
	margin-top: 1.25rem;
}