/*
 * SLZ-Maschinenbau: Aussehen. Werte gemessen an der alten Website (getComputedStyle, analyse/DESIGN-IST.md,
 * analyse/messwerte/kopf-fuss-mass.json): Kopf, Menüs, Seitenrahmen, Beitrag, Archive, Fuß. Lädt nach inhalt.css.
 *
 * Breiten (gemessen): ab 1440 Desktop | 1280–1439 Desktop eng | 1024–1279 Tablet quer | 768–1023 Tablet
 * | 480–767 Mobil | bis 479 Mobil klein
 */

/* Schriften, Grundwerte (Farben, Rand), Fließtext und alle Blöcke im Inhalt: inhalt.css (gilt auch im Editor) */

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

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

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

.icon { display: inline-block; width: 1em; height: 1em; flex: none; }

/* Sprunglinks: erst bei Tastaturfokus sichtbar */
.sprunglink {
	position: absolute;
	top: 6px;
	left: 6px;
	z-index: 100000;
	padding: 6px 12px;
	background: #fff;
	color: var(--farbe-akzent);
	transform: translateY(-300px);
}
.sprunglink:focus { transform: none; }

/* Sichtbarer Fokus nur bei Tastaturbedienung (analyse/abweichungen.md 1.5) */
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }

/* ---------- Kopf (Innenseiten) ---------- */

.kopf {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	color: var(--farbe-hell);
}

.kopf__bild {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	background: #232321;
}
.kopf__bilddatei {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 50%;
}
.kopf__bild::after { /* Überlagerung #232321, Deckkraft 0,7 */
	content: "";
	position: absolute;
	inset: 0;
	background: #232321;
	opacity: 0.7;
}

.kopf__leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 129px;
	padding: 22px 70px;
}
.kopf__links { display: flex; align-items: center; min-width: 0; }
.kopf__rechts { display: flex; align-items: center; }

.kopf__logo {
	display: block;
	flex: none;
	margin-right: 25.5px;
	padding: 4px;
	background: #fff;
	line-height: 0;
}
.kopf__logo img, .kopf__logobild { width: auto; height: 60px; }

/* Hauptmenü (ab 1280 px) */
.hauptmenue__liste {
	display: flex;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}
.hauptmenue__punkt { position: relative; }
.hauptmenue__link {
	position: relative;
	display: block;
	margin: 0;
	padding: 16.2px 16.2px 18.2px;
	border: 0;
	background: none;
	color: var(--farbe-hell);
	font: 400 18px/27px var(--schrift-titel);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
}
/* Unterstrich unter dem Text: wächst beim Überfahren aus der Mitte, bleibt bei der aktuellen Seite und ihren Eltern */
.hauptmenue__link::after {
	content: "";
	position: absolute;
	left: 16.2px;
	right: 16.2px;
	bottom: 14.2px;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}
.hauptmenue__punkt:hover > .hauptmenue__link::after,
.hauptmenue__punkt:focus-within > .hauptmenue__link::after,
.hauptmenue__punkt.ist-aktiv > .hauptmenue__link::after { transform: scaleX(1); }

/* Überlauf „⋮“ (Werte aus der alten Website: ab 1454 px alle Punkte, darunter wandern die letzten in „⋮“) */
.hauptmenue__mehr { display: none; }
.hauptmenue__mehrknopf { height: 59.4px; padding: 16.2px; color: var(--farbe-hell); }
.hauptmenue__mehrknopf::after { display: none; }
.hauptmenue__mehrsymbol { width: 4px; height: 15px; }
.untermenue--mehr > .untermenue__punkt { display: none; }

@media (max-width: 1453px) {
	.kopf:not(.kopf--start) {
		& .hauptmenue__liste > .kann-ueberlaufen:nth-last-child(2) { display: none; }
		& .hauptmenue__mehr { display: block; }
		& .untermenue--mehr > .untermenue__punkt:last-child { display: block; }
	}
}
@media (max-width: 1439px) {
	.hauptmenue__link { padding-left: 14.4px; padding-right: 14.4px; }
	.hauptmenue__link::after { left: 14.4px; right: 14.4px; }
}
@media (max-width: 1346px) {
	.kopf:not(.kopf--start) {
		& .hauptmenue__liste > .kann-ueberlaufen:nth-last-child(3) { display: none; }
		& .untermenue--mehr > .untermenue__punkt { display: block; }
	}
}

/* Untermenüs (Desktop): öffnen bei Hover und Tastaturfokus */
.untermenue {
	position: absolute;
	top: 80.2px;
	left: -10.2px;
	z-index: 30;
	width: 210px;
	margin: 0;
	padding: 14px 0;
	list-style: none;
	background: var(--flaeche-menue);
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}
.untermenue::before { /* Brücke über die Lücke zwischen Menüpunkt und Untermenü */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	height: 19px;
}
.hauptmenue__punkt:hover > .untermenue,
.hauptmenue__punkt:focus-within > .untermenue,
.untermenue__punkt:hover > .untermenue,
.untermenue__punkt:focus-within > .untermenue { opacity: 1; visibility: visible; }

.untermenue--mehr { left: auto; right: 0; }
.untermenue--seite { top: -14px; left: 100%; }
.untermenue--seite::before { display: none; }

.untermenue__punkt { position: relative; }
.untermenue__link {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 9.1px 22.4px;
	border: 0;
	background: none;
	color: var(--farbe-fuss-text);
	font: 400 14px/21px var(--schrift-text);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s ease;
}
.hat-unter > .untermenue__link { padding-right: 30.8px; }
.untermenue__link:hover,
.untermenue__link:focus-visible,
.untermenue__punkt.ist-aktiv > .untermenue__link { color: #fff; }
.untermenue__pfeil {
	position: absolute;
	top: 50%;
	right: 22.4px;
	width: 10px;
	height: 10px;
	transform: translateY(-50%);
}

/* Knopf „Kontakt“ im Kopf */
.knopf--kopf {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 46px;
	padding: 13px 28px 11px;
	overflow: hidden;
	background: var(--farbe-hell);
	color: #171A21;
	font: 400 16px/22px var(--schrift-titel);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}
.knopf__inhalt { display: inline-flex; align-items: center; transition: transform 0.3s ease; }
.knopf__symbol { width: 14px; height: 10.9px; margin-right: 8.32px; }
/* Hover wie live: Inhalt rückt 19 px nach links, der Pfeil (14 px, 25 px vom Rand) wird nur eingeblendet */
.knopf__pfeil {
	position: absolute;
	top: 50%;
	right: 25px;
	width: 14px;
	height: 9.8px;
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity 0.3s ease;
}
.knopf--kopf:hover,
.knopf--kopf:focus-visible { background: #fff; color: var(--farbe-ueberschrift); }
.knopf--kopf:hover .knopf__inhalt,
.knopf--kopf:focus-visible .knopf__inhalt { transform: translateX(-19px); }
.knopf--kopf:hover .knopf__pfeil,
.knopf--kopf:focus-visible .knopf__pfeil { opacity: 1; }

.kopf__burger {
	display: none;
	width: 22.8px;
	height: 17.6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--farbe-hell);
	cursor: pointer;
}
.kopf__burger .icon { width: 100%; height: 100%; }

/* Seitentitel: bei einzeiligem Titel 354 px hoch (bis 1279: 239, bis 1023: 189, bis 767: 127, bis 479: 121);
   jede weitere Titelzeile macht den Kopf um eine Zeilenhöhe höher (live z. B. 228 → 259 px bei 390 px) */
.kopf__titel {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: 105px 15px 147px;
}
.kopf__h1 {
	margin: 0;
	color: var(--farbe-hell);
	font: 400 51px/102px var(--schrift-titel);
	text-align: center;
	text-transform: uppercase;
}

/* KI-Kennzeichnung (EU-Icon) unten rechts im Titelbild: dort liegt kein anderes Element (Kodex Abschnitt 2, 1.2.2 a) */
.ki-hinweis {
	position: absolute;
	right: 24px;
	bottom: 20px;
	z-index: 1;
	line-height: 0;
}
.ki-hinweis__icon { width: auto; height: 24px; }

@media (max-width: 1279px) {
	.kopf__leiste { height: 115px; padding: 15px 30px; }
	.kopf__logo { margin-right: 0; }
	.hauptmenue, .knopf--kopf { display: none; }
	.kopf__burger { display: block; }
	.kopf__titel { padding-top: 60px; padding-bottom: 87px; }
	.kopf__h1 { font-size: 46px; line-height: 92px; }
}
@media (max-width: 1023px) {
	.kopf__titel { padding-bottom: 87px; }
	.kopf__h1 { font-size: 38px; line-height: 42px; }
}
@media (max-width: 767px) {
	.kopf__leiste { height: 107px; padding: 12px 30px; }
	.kopf__titel { padding-top: 36px; padding-bottom: 56px; }
	.kopf__h1 { font-size: 30px; line-height: 35px; }
	.ki-hinweis { right: 12px; bottom: 10px; }
	.ki-hinweis__icon { height: 18px; }
}
@media (max-width: 479px) {
	.kopf__leiste { padding: 12px 20px; }
	.kopf__titel { padding-top: 35px; padding-bottom: 55px; }
	.kopf__h1 { font-size: 26px; line-height: 31px; }
}

/* ---------- Kopf der Startseite ----------
 * Weiß, Menü und Burger dunkel, Logo ohne weißes Feld, Knopf „Kontakt“ dunkel. Höhe 124,4 px (1280–1439: 121, bis
 * 1279: 107, bis 767: 100, bis 479: 99), Inhalt senkrecht mittig. Ab 1280 px wird die Menüzeile nach etwa einer
 * Bildschirmhöhe (wie live ab 776 px Scrollhöhe) zur festen weißen Leiste, 80,4 px hoch, mit Schatten; sie gleitet in
 * 0,3 s von oben herein (assets/js/kopf.js setzt die Klasse). Überlauf „⋮“ erst unter 1340 px, nur für „Kontakt“. */
.kopf--start {
	z-index: 50; /* die feste Leiste liegt über dem Inhalt */
	height: 124.4px;
	background: #fff;
	color: var(--farbe-ueberschrift);

	& .kopf__leiste { height: 100%; padding-block: 0; background: #fff; }
	& .kopf__logo { margin-right: 65.5px; padding: 0; background: none; }
	& .hauptmenue__link, & .hauptmenue__mehrknopf, & .kopf__burger { color: var(--farbe-ueberschrift); }
	& .knopf--kopf { background: var(--farbe-ueberschrift); color: #fff; }
	& .knopf--kopf:is(:hover, :focus-visible) { background: #28333D; color: #fff; }
}
@media (min-width: 1280px) {
	.ist-leiste .kopf--start .kopf__leiste {
		position: fixed;
		inset: 0 0 auto;
		z-index: 50;
		height: 80.4px;
		box-shadow: 0 0 6px rgba(0, 9, 18, 0.06);
		animation: slz-leiste-ein 0.3s ease;
	}
	.admin-bar.ist-leiste .kopf--start .kopf__leiste { top: 32px; }
}
@keyframes slz-leiste-ein { from { translate: 0 -100%; } }
@media (max-width: 1439px) {
	.kopf--start { height: 121px; }
	.kopf--start .hauptmenue__link { padding-block: 14.4px 16.4px; }
	.kopf--start .hauptmenue__link::after { bottom: 12.4px; }
}
@media (max-width: 1339px) {
	.kopf--start {
		& .hauptmenue__liste > .kann-ueberlaufen:nth-last-child(2) { display: none; }
		& .hauptmenue__mehr { display: block; }
		& .untermenue--mehr > .untermenue__punkt:last-child { display: block; }
	}
}
@media (max-width: 1279px) {
	.kopf--start { height: 107px; }
}
@media (max-width: 767px) {
	.kopf--start { height: 100px; }
	.kopf--start .kopf__leiste { padding-block: 0; }
}
@media (max-width: 479px) {
	.kopf--start { height: 99px; }
}

/* ---------- Mobilmenü (popover, bis 1279 px) ----------
 * Fünf Stufen wie gemessen (analyse/messwerte/mobilpanel*.json): bis 479 | 480–600 | 601–767 | 768–1023 | 1024–1279.
 * Ab 768 px liegt die Kopfzeile über dem Panel, die Menüliste ist senkrecht um 30 % (ab 1024: 25 %) der Höhe
 * zentriert wie live, rechts eine dunklere Spalte (40 % bzw. 30 % der Breite).
 * Korrektur (analyse/abweichungen.md 1.17): Live überdeckt die Liste dabei den Firmennamen, wenn sie für den Platz
 * über dem Mittelpunkt zu lang ist. Hier wird sie in einem Bereich zentriert, der unter der Kopfzeile beginnt und
 * symmetrisch um denselben Mittelpunkt liegt (Anchor-Positionierung, kein JavaScript); passt sie nicht hinein,
 * beginnt sie direkt unter der Kopfzeile (safe center). Sonst bleibt die Lage wie live. */

.mobilmenue {
	position: fixed;
	inset: 0 0 auto;
	width: 100%;
	max-width: none;
	height: 0;
	max-height: none;
	margin: 0;
	padding: 0;
	overflow: hidden auto;
	border: 0;
	background: var(--flaeche-dunkel);
	color: var(--farbe-fuss-text);
	transition: height 0.45s cubic-bezier(0.5, 1, 0.89, 1), display 0.45s allow-discrete, overlay 0.45s allow-discrete;
}
.mobilmenue:popover-open { height: 100dvh; }
@starting-style {
	.mobilmenue:popover-open { height: 0; }
}
.mobilmenue::backdrop { background: transparent; }

.mobilmenue__kopf {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 20px;
}
.mobilmenue__firma { flex: 0 1 752.3px; min-width: 0; }
.mobilmenue__name {
	margin: 0;
	color: var(--farbe-hell);
	font: 400 22.5px/28.13px var(--schrift-titel);
}
.mobilmenue__untertitel { margin: 0; font: 400 13px/17px var(--schrift-text); }
.mobilmenue__zu {
	display: inline-flex;
	align-items: center;
	flex: none;
	margin-left: 10px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--farbe-hell);
	font: 400 17px/17px var(--schrift-text);
	cursor: pointer;
}
.mobilmenue__zutext { display: none; margin-right: 15.3px; color: #ABAFB2; }
.mobilmenue__zusymbol { width: 17px; height: 17px; }

.mobilmenue__nav { position: relative; z-index: 2; margin: 30px 20px; }
.mobilmenue__liste, .mobilmenue__unter { margin: 0; padding: 0; list-style: none; }
.mobilmenue__link {
	display: inline-block;
	padding: 3px 0;
	color: inherit;
	font: 400 22px/33px var(--schrift-titel);
	text-decoration: none;
	vertical-align: top;
	transition: color 0.3s ease;
}
.mobilmenue__punkt.ist-aktiv > .mobilmenue__link,
.mobilmenue__link:hover,
.mobilmenue__auf[open] > .mobilmenue__schalter { color: var(--farbe-hell); }
.mobilmenue__punkt:has(> .mobilmenue__auf[open]) > .mobilmenue__link { color: var(--farbe-hell); }

/* Pfeil neben dem Menüpunkt öffnet das Untermenü; das Untermenü erscheint darunter in voller Breite.
   Live sitzt der Pfeil rechtsbündig im Innenabstand des Links (44/48/56/60 px), daher der Abstand links. */
.mobilmenue__auf { display: inline; }
.mobilmenue__schalter {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 36px; /* live: Pfeil-Fläche oben bündig, etwas niedriger als der Link */
	margin-left: 28px;
	color: inherit;
	vertical-align: top;
	list-style: none;
	cursor: pointer;
}
.mobilmenue__schalter::-webkit-details-marker { display: none; }
.mobilmenue__pfeil { width: 16px; height: 11.2px; }
.mobilmenue__unter { display: block; padding: 9px 0 6px 16px; }
.mobilmenue__unter .mobilmenue__punkt { padding: 4.8px 0; }
.mobilmenue__unterlink { /* inline-block oben: Zeile so hoch wie der Link, nicht durch die Grundlinie gestreckt */
	display: inline-block;
	vertical-align: top;
	color: inherit;
	font: 400 16px/24px var(--schrift-text);
	letter-spacing: 0.6px;
	text-decoration: none;
}
.mobilmenue__unter .mobilmenue__schalter { width: 12px; height: 24px; margin-left: 10px; }
.mobilmenue__unter .mobilmenue__pfeil { width: 11px; height: 11px; }

@media (min-width: 480px) {
	.mobilmenue__kopf { padding: 35px 30px; }
	.mobilmenue__name { font-size: 24px; line-height: 30px; }
	.mobilmenue__zutext { display: inline; }
	.mobilmenue__zusymbol { width: 19px; height: 19px; }
	.mobilmenue__nav { margin: 48px 30px 30px; }
	.mobilmenue__link { font-size: 24px; line-height: 36px; }
	.mobilmenue__schalter { width: 18.9px; height: 39px; margin-left: 29.1px; }
	.mobilmenue__pfeil { width: 18.6px; height: 13px; }
	.mobilmenue__unter { padding: 9.6px 0 6.4px 17px; }
	.mobilmenue__unter .mobilmenue__punkt { padding: 5.1px 0; }
	.mobilmenue__unterlink { font-size: 17px; line-height: 25.5px; }
}
@media (min-width: 601px) {
	.mobilmenue__link { font-size: 28px; line-height: 42px; }
	.mobilmenue__schalter { height: 46px; margin-left: 37.1px; }
	.mobilmenue__unter { padding-left: 18px; }
	.mobilmenue__unter .mobilmenue__punkt { padding: 5.4px 0; }
	.mobilmenue__unterlink { font-size: 18px; line-height: 27px; }
}
@media (min-width: 768px) {
	.mobilmenue::before { /* dunklere Spalte rechts */
		content: "";
		position: absolute;
		inset: 0 0 0 auto;
		z-index: 1;
		width: 40%;
		background: #171A21;
	}
	.mobilmenue__kopf { position: absolute; inset: 0 0 auto; anchor-name: --mobilmenue-kopf; }
	.mobilmenue__name { font-size: 25.5px; line-height: 31.88px; }
	.mobilmenue__untertitel { font-size: 14px; line-height: 18px; }
	.mobilmenue__nav { /* Bereich von der Unterkante der Kopfzeile (K) bis 60 % der Höhe minus K: Mitte bei 30 % */
		position: absolute;
		top: anchor(--mobilmenue-kopf bottom);
		bottom: calc(140% - anchor(--mobilmenue-kopf bottom));
		left: 30px;
		display: flex;
		flex-direction: column;
		justify-content: safe center;
		width: calc((100% - 60px) * 0.57);
		margin: 0;
	}
	.mobilmenue__link { padding: 5px 0; font-size: 30px; line-height: 45px; }
	.mobilmenue__schalter { width: 20.3px; height: 49px; margin-left: 39.7px; }
	.mobilmenue__pfeil { width: 20px; height: 14px; }
	.mobilmenue__unter { padding: 10.2px 0 6.8px 22.8px; }
	.mobilmenue__unter .mobilmenue__punkt { padding: 7.6px 0; }
	.mobilmenue__unterlink { font-size: 19px; line-height: 28.5px; }
}
@media (min-width: 1024px) {
	.mobilmenue::before { width: 30%; }
	.mobilmenue__nav { bottom: calc(150% - anchor(--mobilmenue-kopf bottom)); width: calc((100% - 60px) * 0.68); }
}
/* Ohne Anchor-Positionierung: Kopfzeile im Fluss, Liste direkt darunter (überdeckt nie) */
@supports not (anchor-name: --a) {
	@media (min-width: 768px) {
		.mobilmenue__kopf { position: relative; }
		.mobilmenue__nav { position: relative; inset: auto; display: block; margin: 0 30px 30px; }
	}
}
@media (min-width: 1280px) {
	.mobilmenue { display: none; }
}

/* ---------- Inhalt: Rahmen und Grundelemente (gemessen: analyse/messwerte/inhalt/*.json) ----------
 * Fließtext 17/28,9 (bis 1023: 17/26,9, bis 767: 16/25,3, bis 479: 15/23). Seitenrahmen oben/unten
 * 120,7/125,8 px, bis 1279: 90, bis 1023: 80, bis 767: 60, bis 479: 50; seitlich der Seitenrand (--rand). */

.seite { padding: 120.7px var(--rand) 125.8px; }
/* Leistung: Beitragsbild in Originalgröße (850 px), darunter Abstand 2 em (bis 1279: 1,5 em) */
.leistung__bild { margin: 0 0 2em; }
.leistung__bild img { display: block; width: auto; max-width: 100%; height: auto; }

/* ---------- Beitrag (analyse/messwerte/inhalt/beitrag-*.json) ----------
 * Spalte 840 px (65,12 % der Inhaltsbreite), bis 1023 volle Breite. Oben 68 px, unten wie die Seiten. */

.beitrag { padding: 68px var(--rand) 125.8px; }
.beitrag__spalte { width: 65.1163%; margin: 0 auto; }
.beitrag__inhalt::after { content: ""; display: block; clear: both; } /* umflossene Bilder (alignleft) einschließen */
.beitrag__inhalt > :last-child:not(.wp-caption) { margin-bottom: 0; } /* Bild mit Unterschrift behält 1 em wie live */

/* Beitragsnavigation: Linie, darunter älterer (links) und neuerer Beitrag (rechts) */
.beitrag__navigation {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 30px;
	margin-top: 1.8em;
	padding-top: 3em;
	border-top: 1px solid #D8D8D2;
	font-family: var(--schrift-titel);
}
.beitrag__nachbar { display: block; text-decoration: none; }
.beitrag__nachbar--weiter { grid-column: 2; text-align: right; }
.beitrag__richtung {
	position: relative;
	top: 2px; /* live liegt die Schrift 2 px tiefer (Icon-Font im selben Zeilenkasten verschiebt die Grundlinie) */
	display: block;
	color: var(--farbe-meta);
	font: 400 15px/18px var(--schrift-titel);
	letter-spacing: 0.7px;
	text-transform: uppercase;
}
/* Winkel 5 × 9 px an der Grundlinie (verschiebt die Schrift nicht), 2 px angehoben wie live */
.beitrag__winkel { position: relative; top: -2px; width: 5px; height: 9px; margin: 0 2px 0 10px; vertical-align: baseline; }
.beitrag__winkel--links { margin: 0 10px 0 2px; transform: scaleX(-1); }
.beitrag__nachbartitel {
	display: block;
	margin-top: 12px;
	color: var(--farbe-ueberschrift);
	font: 400 19px/24.7px var(--schrift-titel);
	letter-spacing: 0.35px;
	text-transform: uppercase;
	transition: color 0.3s ease;
}

/* Ähnliche Beiträge: drei Spalten, orangefarbener Punkt, Titel und Datum */
.aehnliche { margin-top: 5em; }
.aehnliche__titel {
	margin: 0 0 1em;
	color: var(--farbe-ueberschrift);
	font: 400 35px/38px var(--schrift-titel);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.aehnliche__liste { display: flex; flex-wrap: wrap; margin: 0 -30px 0 0; padding: 0; list-style: none; }
.aehnliche__eintrag { position: relative; width: calc(33.3333% - 30px); margin: 0 30px 30px 0; padding-left: 1.5em; }
.aehnliche__eintrag::before {
	content: "";
	position: absolute;
	top: 0.75em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--farbe-akzent);
}
.aehnliche__name {
	margin: 0;
	font: 400 19px/28px var(--schrift-titel);
	letter-spacing: 0.35px;
	text-transform: uppercase;
}
.aehnliche__name a { display: block; color: var(--farbe-ueberschrift); text-decoration: none; transition: color 0.3s ease; }
.aehnliche__datum { margin: 5.2px 0 0; font: 400 13px/19.5px var(--schrift-text); }
.aehnliche__datum a { display: inline-block; color: var(--farbe-meta); text-decoration: none; }

@media (max-width: 1279px) {
	.seite { padding-top: 90px; padding-bottom: 90px; }
	.beitrag { padding-bottom: 90px; }
	.aehnliche { margin-top: 4em; }
	.aehnliche__titel { font-size: 28px; line-height: 30.4px; }
	.aehnliche__name { font-size: 18px; line-height: 26.5px; }
	.leistung__bild { margin-bottom: 1.5em; }
}
@media (max-width: 1023px) {
	.seite { padding-top: 80px; padding-bottom: 80px; }
	.beitrag { padding-bottom: 80px; }
	.beitrag__spalte { width: auto; }
	.aehnliche { margin-top: 3em; }
	.aehnliche__titel { font-size: 26px; line-height: 30px; }
	.aehnliche__name { line-height: 22px; }
}
@media (max-width: 767px) {
	.seite { padding-top: 60px; padding-bottom: 60px; }
	.beitrag { padding-top: 64px; padding-bottom: 60px; }
	.beitrag__navigation { margin-top: 1.4em; padding-top: 2.5em; }
	.beitrag__nachbartitel { margin-top: 8px; font-size: 18px; line-height: 23.4px; }
	.aehnliche { margin-top: 2.8em; }
	.aehnliche__titel { font-size: 21px; line-height: 26px; }
	.aehnliche__liste { margin-right: -20px; }
	.aehnliche__eintrag { width: calc(50% - 20px); margin: 0 20px 20px 0; }
	.aehnliche__name { font-size: 17px; line-height: 19px; }
}
@media (max-width: 600px) {
	.aehnliche__eintrag { width: calc(100% - 20px); }
}
@media (max-width: 479px) {
	.seite { padding-top: 50px; padding-bottom: 50px; }
	/* Überschriften mit Silbentrennung wie live (nur bis 479 px) */
	h1, h2, h3, h4, h5, h6, .beitrag__nachbartitel { hyphens: auto; }
	.beitrag { padding-top: 45px; padding-bottom: 50px; }
	.beitrag__navigation { column-gap: 16px; }
	.beitrag__nachbartitel { margin-top: 5px; font-size: 17px; line-height: 22.1px; }
	.aehnliche { margin-top: 2.5em; }
	.aehnliche__titel { line-height: 24px; }
	.aehnliche__name { line-height: 20px; }
}

/* Fuß-Variante „Default“ (Startseite, Kontakt): Trennlinie 25 px höher (bis 1279: 20, bis 1023: 15, bis 767: 10),
   Copyright 15 px, unten 30,5 px (bis 1023: 27,4, bis 767: 14,5); live 525 statt 548 px hoch (1440) */
.fuss--standard {
	& .fuss__unten { padding-top: 26.5px; padding-bottom: 30.5px; }
	& .fuss__copyright { padding-top: 27.5px; font-size: 15px; }
}
@media (max-width: 1279px) { .fuss--standard .fuss__unten { padding-top: 21.5px; } }
@media (max-width: 1023px) { .fuss--standard .fuss__unten { padding-top: 21.5px; padding-bottom: 27.4px; } .fuss--standard .fuss__copyright { padding-top: 24.5px; } }
@media (max-width: 767px) { .fuss--standard .fuss__unten { padding-top: 17.9px; padding-bottom: 14.5px; } .fuss--standard .fuss__copyright { padding-top: 14.5px; } }

/* ---------- Knopf „nach oben“ (alle Seiten) ----------
 * Wie live: rechts unten, #1E2831, Pfeil weiß; erscheint ab 150 px Scrollhöhe (assets/js/kopf.js), gleitet dabei in
 * 0,3 s hoch und blendet ein. 59,5 px, 34 px vom rechten und 102 px vom unteren Rand (bis 1279: 42,5 px, 17/17;
 * bis 767: 40, 16/16; bis 479: 37,5, 15/15, dort nur Einblenden). */
.nach-oben {
	position: fixed;
	right: 34px;
	bottom: 102px;
	z-index: 40;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 59.5px;
	height: 59.5px;
	background: var(--farbe-ueberschrift);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	translate: 0 170px;
	transition: translate 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
.ist-gescrollt .nach-oben { opacity: 1; visibility: visible; translate: 0 0; }
.nach-oben__pfeil { width: 12px; height: 14px; }
@media (max-width: 1279px) {
	.nach-oben { right: 17px; bottom: 17px; width: 42.5px; height: 42.5px; translate: none; }
	.nach-oben__pfeil { width: 10.5px; height: 12.25px; }
}
@media (max-width: 767px) {
	.nach-oben { right: 16px; bottom: 16px; width: 40px; height: 40px; }
}
@media (max-width: 479px) {
	.nach-oben { right: 15px; bottom: 15px; width: 37.5px; height: 37.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.nach-oben { transition: none; }
}

/* ---------- Fuß ---------- */

.fuss {
	padding-top: 100px;
	background: var(--flaeche-dunkel);
	color: var(--farbe-fuss-text);
	font: 400 18px/26.56px var(--schrift-titel);
}
.fuss a { color: inherit; text-decoration: none; transition: color 0.3s ease; }
.fuss a:hover, .fuss a:focus-visible { color: var(--farbe-hell); }
.fuss :where(p) { margin: 0; }

.fuss__haupt { padding: 12px var(--rand); }
.fuss__spalten { display: grid; grid-template-columns: 1fr 1fr; column-gap: 30px; }
.fuss__spalte { min-width: 0; padding-bottom: 12.5px; }

.fuss__titel {
	margin: 8px 0 23px;
	color: var(--farbe-hell);
	font: 400 26.35px/31.99px var(--schrift-titel);
	letter-spacing: 0.55px;
	text-transform: uppercase;
}
.fuss__adresse { margin-bottom: 25px; }
.fuss__zeile { display: block; }
.fuss__zeile--mail + .fuss__zeile--mail { margin-top: 19px; }
.fuss__zeile--telefon { margin-top: 37px; }
/* oben ausgerichtet, damit das Symbol die Zeile nicht erhöht; Text beginnt wie live 23,8 px rechts */
.fuss__symbol { position: relative; top: 3.4px; width: 18px; height: 14px; margin-right: 5.8px; vertical-align: top; }
.fuss__firma + .fuss__firma { margin-top: 18px; }
.fuss__linie {
	width: 30%;
	height: 0;
	margin: 23.9px 0 24.1px;
	border: 0;
	border-top: 1px solid #7A7A7A;
}

.fuss__unten { padding: 51.5px var(--rand) 28px; }
.fuss__copyright {
	padding-top: 28px;
	border-top: 1px solid #4A4C52;
	color: #ABAFB2;
	font: 400 16px/26.56px var(--schrift-text);
}
.fuss__marke { color: var(--farbe-fuss-text); }

@media (max-width: 1279px) {
	.fuss { padding-top: 75px; }
	.fuss__spalten { grid-template-columns: calc(26.99% - 21.8px) calc(26.99% - 21.8px); }
	.fuss__titel { margin: 7px 0 23.9px; font-size: 23px; line-height: 27.92px; }
	.fuss__firma + .fuss__firma { margin-top: 18px; }
	.fuss__linie { width: 31.25%; margin: 24px 0 24.2px; }
	.fuss__unten { padding: 41.6px var(--rand) 27.5px; }
	.fuss__copyright { padding-top: 27.5px; font-size: 15px; }
}
@media (max-width: 1023px) {
	.fuss { padding-top: 70px; }
	.fuss__titel { margin: 3.8px 0 17.2px; line-height: 27px; }
	.fuss__adresse { margin-bottom: 17.8px; }
	.fuss__zeile--mail + .fuss__zeile--mail { margin-top: 11.8px; }
	.fuss__zeile--telefon { margin-top: 29.7px; }
	.fuss__spalte { padding-bottom: 9px; }
	.fuss__firma + .fuss__firma { margin-top: 10.7px; }
	.fuss__linie { margin: 20.4px 0 20.5px; }
	.fuss__unten { padding: 36.4px var(--rand) 24.5px; }
	.fuss__copyright { padding-top: 24.5px; }
}
@media (max-width: 767px) {
	/* 480–767 (gemessen: analyse/messwerte/kopf-fuss-zwischen.json): einspaltig, Rand 30, Zeilen 18/26,56 */
	.fuss { padding-top: 54px; }
	.fuss__haupt { padding-top: 11.25px; padding-bottom: 11.25px; }
	.fuss__spalten { grid-template-columns: 1fr; }
	.fuss__spalte + .fuss__spalte { margin-top: 30.2px; }
	.fuss__spalte { padding-bottom: 0; }
	.fuss__spalte:last-child { padding-bottom: 8.25px; }
	.fuss__titel { margin: 0 0 16.2px; font-size: 19px; line-height: 23px; }
	.fuss__spalte:first-child .fuss__titel { margin-top: 26.5px; }
	.fuss__adresse { margin-bottom: 11.7px; }
	.fuss__zeile--mail + .fuss__zeile--mail { margin-top: 11.8px; }
	.fuss__zeile--telefon { margin-top: 11.8px; }
	.fuss__firma + .fuss__firma { margin-top: 10.8px; }
	.fuss__linie { width: 100%; margin: 20.4px 0 20.4px; }
	.fuss__unten { padding: 27.9px var(--rand) 14.6px; }
	.fuss__copyright { padding-top: 14.5px; font-size: 15px; line-height: 21px; }
}
@media (max-width: 479px) {
	.fuss { padding-top: 54px; font-size: 18px; line-height: 24.9px; }
	.fuss__haupt { padding-top: 11.25px; padding-bottom: 11.25px; }
	.fuss__spalten { grid-template-columns: 1fr; }
	.fuss__spalte + .fuss__spalte { margin-top: 28.9px; }
	.fuss__spalte { padding-bottom: 0; }
	.fuss__spalte:last-child { padding-bottom: 8.25px; }
	.fuss__titel { margin: 0 0 17px; font-size: 19px; line-height: 22px; }
	.fuss__spalte:first-child .fuss__titel { margin-top: 23.5px; }
	.fuss__adresse { margin-bottom: 11.7px; }
	.fuss__zeile--mail + .fuss__zeile--mail { margin-top: 11.8px; }
	.fuss__zeile--telefon { margin-top: 11.8px; }
	.fuss__firma + .fuss__firma { margin-top: 10.8px; }
	.fuss__linie { width: 100%; margin: 20.4px 0 20.4px; }
	.fuss__unten { padding: 26.9px var(--rand) 14.6px; }
	.fuss__copyright { padding-top: 14.5px; font-size: 15px; line-height: 21px; }
}

/* ---------- Nur für Screenreader ---------- */

.unsichtbar {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Archive: Blog-Übersicht, Kategorie, Suche (analyse/messwerte/inhalt/blog--blog.json,
 * kategoriearchiv--category_allgemein.json, suche--*.json) ----------
 * Spalte 840 px wie der Beitrag (65,12 %), bis 1023 volle Breite; Rahmen oben/unten wie .seite. */

.archiv__spalte { width: 65.1163%; margin: 0 auto; }

/* Blog: Karten mit Datum und Titel, 4 Spalten, Abstand 30 px (bis 767: 20) */
.karten { display: flex; flex-wrap: wrap; margin: 0 -30px -45px 0; padding: 0; list-style: none; }
.karte { width: 25%; padding: 0 30px 30px 0; }
.karte__inhalt { padding-bottom: 15px; }
.karte__datum { margin: 0; font: 400 13px/19.5px var(--schrift-text); }
.karte__datum a { color: var(--farbe-meta); text-decoration: none; }
.karte__titel {
	color: var(--farbe-ueberschrift);
	margin: 12px 0 0;
	font: 400 24px/29.1px var(--schrift-titel);
	letter-spacing: 0.55px;
	text-transform: uppercase;
}
.karte__titel a { display: block; color: var(--farbe-ueberschrift); text-decoration: none; }

/* Kategorie und Suche: Titel, Meta (Kategorie • Datum), Auszug, „+“ */
.eintrag { margin-bottom: 44.2px; }
.eintrag__titel {
	margin: 0;
	color: var(--farbe-ueberschrift);
	font: 400 35px/38px var(--schrift-titel);
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.eintrag__titel a { color: inherit; text-decoration: none; }
.eintrag__meta {
	display: flex;
	flex-wrap: wrap;
	margin: 18.7px 0 0;
	color: var(--farbe-meta);
	font: 400 13px/19.5px var(--schrift-text);
}
.eintrag__metapunkt a { color: inherit; text-decoration: none; }
/* Punkt zwischen den Angaben (live ein Zeichen der Icon-Schrift, hier ein Kreis in Textfarbe) */
.eintrag__metapunkt:not(:last-child)::after {
	content: "";
	display: inline-block;
	width: 2.875px;
	height: 2.875px;
	margin: 0 9.76px;
	border-radius: 50%;
	background: var(--farbe-meta);
	vertical-align: middle;
}
.eintrag__meta .eintrag__kategorie { color: var(--farbe-akzent); transition: color 0.3s ease; }
.eintrag__meta .eintrag__kategorie:hover { color: var(--farbe-akzent-hover); }
.eintrag__auszug { margin-top: 16.15px; }
.eintrag__auszug p { margin: 0; }
.eintrag__mehr { margin: 0; }
.eintrag__plus {
	display: inline-block;
	width: 25.2px;
	height: 25.2px;
	margin-top: 28.8px;
	color: var(--farbe-ueberschrift);
}
.eintrag__plus .icon { display: block; width: 100%; height: 100%; }

/* Paginierung: Kästchen 52 px (bis 1023: 42, bis 767: 40), aktuelle Seite in Akzentfarbe, Hover hell */
.paginierung__liste {
	margin-top: 47.6px;
	font: 400 17px/28.9px var(--schrift-titel);
}
.paginierung__seite {
	display: inline-block;
	width: 52px;
	height: 52px;
	margin: 2px 5px 2px 0;
	border: 1px solid #D8D8D2;
	color: var(--farbe-ueberschrift);
	line-height: 52px;
	text-align: center;
	text-decoration: none;
	vertical-align: top;
	transition: background-color 0.3s ease;
}
a.paginierung__seite:hover, a.paginierung__seite:focus-visible { background: #F5F5F1; }
.paginierung__seite.current { border-color: var(--farbe-akzent); background: var(--farbe-akzent); color: #fff; }
.paginierung__seite.dots { width: 46px; border: 0; }
.paginierung__pfeil { position: relative; top: 1.5px; width: 14px; height: 9.8px; vertical-align: middle; } /* live 1,5 px tiefer */
.paginierung__pfeil--zurueck { transform: scaleX(-1); }

/* Suche ohne Treffer: Hinweis, Link, Suchfeld (Fläche ohne Rahmen der .seite, innen 102 px, bis 767: 57) */
.seite.archiv--leer { padding-top: 102px; padding-bottom: 102px; }
.keine-treffer { max-width: 588px; margin: 0 auto; text-align: center; }
.keine-treffer__titel {
	margin: 0;
	color: var(--farbe-ueberschrift);
	font: 700 57px/57px var(--schrift-titel); /* live fett: synthetisches Fett (DESIGN-IST 2) */
	letter-spacing: 0.5px;
	text-transform: uppercase;
}
.keine-treffer__text { margin: 39px 0 43px; padding: 0 99.95px; color: #797C7F; }
.keine-treffer__text a { color: var(--farbe-akzent); text-decoration: none; transition: color 0.3s ease; }
.keine-treffer__text a:hover { color: var(--farbe-akzent-hover); }
.suchfeld { position: relative; width: 410px; max-width: 100%; margin: 0 auto; }
.suchfeld__eingabe {
	width: 100%;
	height: 44.5px;
	margin: 0;
	padding: 10.78px 16.8px 10.78px 46.2px;
	border: 1px solid var(--farbe-ueberschrift);
	border-radius: 0;
	background: #fff;
	color: var(--farbe-ueberschrift);
	font: 400 14px/21px var(--schrift-text);
	appearance: none;
}
.suchfeld__eingabe::placeholder { color: var(--farbe-meta); opacity: 1; }
.suchfeld__knopf {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52.7px;
	height: 44.5px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--farbe-text);
	cursor: pointer;
}
.suchfeld__symbol { width: 16.7px; height: 16.7px; }

/* ---------- 404 (analyse/messwerte/inhalt/404--nicht-vorhanden.json) ---------- */

.fehlerseite { position: relative; margin: 0 var(--rand); padding: 178.5px 0 195.5px; text-align: center; }
.fehlerseite > :not(.fehlerseite__form) { position: relative; }
.fehlerseite__zahl {
	margin: 0;
	color: var(--farbe-ueberschrift);
	font: 700 270px/270px var(--schrift-titel);
}
.fehlerseite__titel {
	margin: 20px 0 0;
	color: var(--farbe-ueberschrift);
	font: 700 47px/51.7px var(--schrift-titel);
	letter-spacing: 0.75px;
	text-transform: uppercase;
}
.fehlerseite__text { margin: 17px 0 43px; color: #797C7F; }
.fehlerseite__knopf {
	display: inline-flex;
	align-items: center;
	gap: 17px;
	padding: 18px 25px 16px 37px;
	background: var(--farbe-akzent);
	color: #fff;
	font: 400 18px/22px var(--schrift-titel);
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease;
}
.fehlerseite__knopf:hover, .fehlerseite__knopf:focus-visible { background: var(--farbe-akzent-hover); }
.fehlerseite__pfeil { width: 15px; height: 10.5px; }
/* Schmuckformen: Lage in Prozent der Fläche wie live (gelb oben rechts, orange links, Ring unter dem Knopf) */
.fehlerseite__form { position: absolute; line-height: 0; }
.fehlerseite__form .icon { width: 100%; height: 100%; }
.fehlerseite__form--gelb { top: 24%; right: 23%; width: 60px; height: 60px; color: #F4C212; }
.fehlerseite__form--orange { top: 47%; left: 23%; width: 36px; height: 36px; color: var(--farbe-akzent); }
.fehlerseite__form--ring { bottom: 14%; left: 38%; width: 140px; height: 140px; }
.fehlerseite__form--ring::before {
	content: "";
	position: absolute;
	inset: 6.8px;
	border: 16px solid #FAF8F7;
	border-radius: 50%;
}

@media (max-width: 1279px) {
	.karte__inhalt { padding-bottom: 0; }
	.karten { margin-bottom: -30px; }
	.karte__titel { margin-top: 10px; font-size: 20px; line-height: 24.3px; }
	.eintrag__titel { font-size: 28px; line-height: 30.4px; }
	.fehlerseite { padding-top: 76.5px; padding-bottom: 93.5px; }
	.fehlerseite__knopf { padding: 16px 26px 14px 36px; font-size: 17px; }
}
@media (max-width: 1023px) {
	.archiv__spalte { width: auto; }
	.karte { width: 50%; }
	.karte__titel { margin-top: 8px; line-height: 27px; }
	.eintrag { margin-bottom: 42.5px; }
	.eintrag__titel { font-size: 26px; line-height: 30px; }
	.eintrag__meta { margin-top: 17px; }
	.eintrag__plus { margin-top: 21.6px; }
	.paginierung__liste { margin-top: 42.5px; }
	.paginierung__seite { width: 42px; height: 42px; line-height: 39px; }
	.paginierung__seite.dots { width: 46px; }
	.fehlerseite { padding-top: 68px; padding-bottom: 76.5px; }
	.fehlerseite__zahl { font-size: 200px; line-height: 170px; }
	.fehlerseite__text { margin: 15px 0 27px; }
}
@media (max-width: 767px) {
	.karten { margin: 0 -20px -30px 0; }
	.karte { padding: 0 20px 20px 0; }
	.karte__inhalt { padding-bottom: 10px; }
	.karte__titel { margin-top: 6px; font-size: 18px; line-height: 23px; }
	.eintrag { margin-bottom: 30px; }
	.eintrag__titel { font-size: 21px; line-height: 24px; }
	.eintrag__meta { margin-top: 15px; }
	.eintrag__auszug { margin-top: 9px; }
	.eintrag__plus { margin-top: 12.6px; }
	.paginierung__liste { margin-top: 30.6px; }
	.paginierung__seite { width: 40px; height: 40px; line-height: 40px; }
	.seite.archiv--leer { padding-top: 57px; padding-bottom: 57px; }
	.keine-treffer__titel { font-size: 26px; line-height: 26px; }
	.keine-treffer__text { margin: 18px 0 22px; padding: 0; }
	.suchfeld { width: auto; }
	.suchfeld__eingabe { height: 42.5px; padding: 9px 18px 9px 45px; font-size: 15px; line-height: 22.5px; }
	.suchfeld__knopf { width: 46.8px; height: 42.5px; }
	.fehlerseite { padding-top: 57px; padding-bottom: 60px; }
	.fehlerseite__form { display: none; }
	.fehlerseite__zahl { font-size: 120px; line-height: 96px; }
	.fehlerseite__titel { margin-top: 18px; font-size: 37px; line-height: 40.7px; letter-spacing: 0; }
	.fehlerseite__text { margin: 13px 0 21px; }
	.fehlerseite__knopf { padding: 14px 25px 12px 35px; }
}
@media (max-width: 600px) {
	.karte { width: 100%; }
}