/*
 * ParaCon - Feinheiten, die theme.json nicht abbilden kann.
 *
 * Alles, was als Farbe, Schriftgroesse oder Abstand ausdrueckbar ist, steht in
 * theme.json und NICHT hier. Hier stehen nur Zustaende, Bewegung und die zwei
 * Bauteile, fuer die es keinen Kernblock gibt: Slider und Kurse-Klappmenue.
 */

/* --- 1. Tastaturbedienung -------------------------------------------------
 * Ausdrueckliche Vorgabe, und eine berechtigte: Wer mit der Tastatur navigiert,
 * ist ohne sichtbaren Fokus verloren. Nicht wegoptimieren.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--akzent);
	outline-offset: 3px;
}

/* --- 2. Kopfzeile ----------------------------------------------------------
 * WICHTIG: sticky sitzt auf dem Template-Part, NICHT auf .pc-kopf.
 * Gemessen am 28.08.2026: .pc-kopf steckt in einem <header> von exakt der
 * eigenen Höhe (67 px). Ein sticky-Element kann seinen Elternkasten nicht
 * verlassen — es hatte damit null Weg und war ab dem zweiten Bildschirm weg.
 * Auf dem Telefon ist diese Leiste die einzige Navigation; die Startseite ist
 * dort 16.400 px hoch.
 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}
.pc-kopf {
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--wp--preset--color--linie);
}
.pc-kopf .pc-logo img { height: 38px; width: auto; display: block; }

.pc-menue { display: flex; align-items: center; gap: 28px; }
.pc-menue a {
	font-size: 16px;
	color: var(--wp--preset--color--primaer);
	padding-bottom: 3px;
}
.pc-menue a:hover { border-bottom: 2px solid var(--wp--preset--color--akzent); }
.pc-menue .pc-hervor { border-bottom: 2px solid var(--wp--preset--color--akzent); }

/* --- 3. Kurse-Klappmenue ---------------------------------------------------
 * Kein Fertigbauteil: Der Navigationsblock kann kein Untermenue, das sowohl
 * bei Zeigerkontakt als auch bei Klick oeffnet und dabei aria-expanded fuehrt.
 */
.pc-klapp { position: relative; }
.pc-klapp > button {
	font: inherit;
	font-size: 16px;
	color: var(--wp--preset--color--primaer);
	background: none;
	border: 0;
	padding: 0 0 3px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pc-klapp > button::after {
	content: "";
	width: 7px; height: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform .18s ease;
}
.pc-klapp > button[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
.pc-klapp > button:hover { border-bottom: 2px solid var(--wp--preset--color--akzent); }

.pc-panel {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 290px;
	background: var(--wp--preset--color--grund-hell);
	border: 1px solid var(--wp--preset--color--linie);
	box-shadow: 0 16px 40px rgba(81, 52, 32, .12);
	display: none;
}
.pc-panel[data-offen="ja"] { display: block; }
.pc-panel a {
	display: block;
	padding: 11px 20px;
	font-size: 16px;
	color: var(--wp--preset--color--primaer);
}
.pc-panel a:hover { background: var(--wp--preset--color--grund-warm); }
.pc-panel .pc-trenner { border-top: 1px solid var(--wp--preset--color--linie); }

/* --- 4. Slider -------------------------------------------------------------
 * Ueberblendung ueber die Deckkraft, kein Schieben. Kein Slider-Plugin: Die
 * Vorgabe "Ladezeit unter einer Sekunde" vertraegt keins, und die Logik sind
 * keine 60 Zeilen.
 */
.pc-slider {
	position: relative;
	height: 100svh;
	min-height: 540px;
	background: var(--wp--preset--color--bildgrund);
	overflow: hidden;
}
.pc-folie {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity .9s ease;
}
.pc-folie[data-aktiv="ja"] { opacity: 1; }
.pc-folie[aria-hidden="true"] { pointer-events: none; }
.pc-folie img,
.pc-folie figure {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
.pc-folie img { object-fit: cover; }
.pc-folie::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top,
		rgba(30, 19, 12, .9) 0%,
		rgba(30, 19, 12, .5) 45%,
		rgba(30, 19, 12, .14) 100%);
}
.pc-folie-text {
	position: absolute;
	left: 0; right: 0; bottom: 132px;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	color: #ffffff;
}
.pc-folie-text :is(h1, p.pc-aussage) {
	color: #ffffff;
	font-size: var(--wp--preset--font-size--ueberschrift);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
	max-width: 20ch;
	margin: 0 0 28px;
}
.pc-folie-text .wp-block-button__link,
.pc-folie-text .pc-knopf {
	background: #ffffff;
	color: var(--wp--preset--color--primaer);
	padding: 17px 30px;
	font-size: 17px;
	font-weight: 600;
	border-radius: 0;
	display: inline-block;
}
.pc-folie-text .wp-block-button__link:hover,
.pc-folie-text .pc-knopf:hover { background: #f0e7e0; }

.pc-steuer {
	position: absolute;
	left: 0; right: 0; bottom: 48px;
	z-index: 3;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.pc-strich {
	width: 44px; height: 4px;
	background: rgba(255, 255, 255, .35);
	border: 0;
	padding: 0;
	cursor: pointer;
}
.pc-strich[aria-current="true"] { background: #ffffff; }
.pc-pause {
	margin-left: 12px;
	font: inherit;
	font-size: 15px;
	color: #ffffff;
	background: none;
	border: 1px solid rgba(255, 255, 255, .45);
	padding: 6px 14px;
	cursor: pointer;
}
.pc-pause:hover { background: rgba(255, 255, 255, .12); }

/* --- 5. Einblenden beim Scrollen ------------------------------------------- */
[data-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s ease, transform .7s ease;
}
[data-reveal][data-sichtbar="ja"] { opacity: 1; transform: none; }

/* --- 6. Wiederkehrende Bausteine ------------------------------------------- */
.pc-label {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--mitte);
}
.pc-band-dunkel .pc-label { color: var(--wp--preset--color--akzent); }

.hinweis {
	border-left: 2px solid var(--wp--preset--color--akzent);
	padding: 4px 0 4px 20px;
}
.pc-kennzahl {
	font-size: var(--wp--preset--font-size--kennzahl);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--akzenttext-hell);
}
.pc-band-warm .pc-kennzahl { color: var(--wp--preset--color--akzenttext-warm); }
.pc-band-dunkel .pc-kennzahl { color: var(--wp--preset--color--akzenttext-dunkel); }

/* Textlink mit Unterstrich - die Auszeichnung des Designs fuer Verweise im
   Fliesstext. Keine Unterstreichung, sondern eine echte Linie mit Abstand. */
.pc-verweis {
	border-bottom: 2px solid var(--wp--preset--color--akzent);
	padding-bottom: 5px;
}
.pc-verweis:hover { border-bottom-color: var(--wp--preset--color--primaer); }
.pc-band-dunkel .pc-verweis:hover { border-bottom-color: #ffffff; }

/* Raster: das min(...) verhindert Ueberlauf unter 330 px Fensterbreite. */
.pc-raster {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
	gap: 32px;
}
.pc-zweispalter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

/* Bildverhaeltnisse laut Vorgabe. Randlos, ohne Rahmen, ohne Rundung. */
.pc-bild-karte img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; }
.pc-bild-portraet img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.pc-bild-quadrat img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }

/* --- 7. Dunkles Band ------------------------------------------------------- */
.pc-band-dunkel {
	background: var(--wp--preset--color--primaer);
	color: var(--wp--preset--color--text-dunkel);
}
.pc-band-dunkel :is(h1, h2, h3, h4, p, li, dt, dd) { color: var(--wp--preset--color--text-dunkel); }
.pc-band-dunkel a { color: #ffffff; }

/* --- 8. Wer weniger Bewegung will, bekommt weniger Bewegung ---------------- */
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
	.pc-folie { transition: none; }
}

/* --- 9. Anfrageformular ----------------------------------------------------
 * Steht im dunklen Band. Die Felder muessen dort lesbar sein, ohne dass ein
 * weisser Kasten das Band zerschneidet.
 */
.pc-formular { margin-top: 40px; max-width: 560px; }
.pc-formular p { margin: 0 0 20px; }
.pc-formular label {
	font-size: 15px;
	color: var(--wp--preset--color--text-dunkel-2);
	display: inline-block;
	margin-bottom: 6px;
}
.pc-formular :is(input[type="text"], input[type="email"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	font: inherit;
	font-size: 17px;
	color: #ffffff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(198, 154, 119, .55);
	padding: 14px 16px;
	border-radius: 0;
}
.pc-formular select option { color: #1b1109; background: #ffffff; }
.pc-formular button {
	font: inherit;
	font-size: 17px;
	font-weight: 600;
	color: var(--wp--preset--color--primaer);
	background: #ffffff;
	border: 0;
	padding: 17px 30px;
	cursor: pointer;
}
.pc-formular button:hover { background: #f0e7e0; }
.pc-formular button[disabled] { opacity: .6; cursor: default; }
.pc-antwort { font-size: 15px; color: var(--wp--preset--color--akzent); }

/* Der Honigtopf gegen Automaten. Nicht display:none - manche Automaten
   erkennen genau das und lassen das Feld dann aus. */
.pc-honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Anker fuer die Kopfzeilenverweise: Die Kopfzeile klebt oben und wuerde sonst
   die Ueberschrift des angesprungenen Abschnitts verdecken. */
.pc-anker { scroll-margin-top: 90px; }

.pc-kernsatz { font-size: var(--wp--preset--font-size--kernsatz); line-height: 1.3; letter-spacing: -0.015em; }

/* --- 10. Kopfzeile auf kleinen Bildschirmen --------------------------------
 * Hier steht die EINZIGE Umschaltgrenze des Themes. Sonst ist alles fluide, wie
 * die Designvorgabe es verlangt — aber ein Menü mit zehn Verweisen lässt sich
 * nicht fluide auf 375 px bringen. Gemessen: Die Leiste lief über und war auf
 * dem Telefon nicht bedienbar.
 */
.pc-kopf-innen {
	max-width: 1200px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* Der Umschaltknopf ist auf großen Bildschirmen nicht vorhanden. */
.pc-menue-schalter { display: none; }

@media (max-width: 900px) {
	.pc-menue-schalter {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		/* 44 px Kantenlänge: kleiner trifft man mit dem Daumen nicht zuverlässig. */
		min-height: 44px;
		padding: 10px 14px;
		font: inherit;
		font-size: 16px;
		color: var(--wp--preset--color--primaer);
		background: none;
		border: 1px solid var(--wp--preset--color--linie);
		cursor: pointer;
	}
	.pc-balken,
	.pc-balken::before,
	.pc-balken::after {
		display: block;
		width: 20px;
		height: 2px;
		background: currentColor;
		transition: transform .2s ease, opacity .2s ease;
	}
	.pc-balken { position: relative; }
	.pc-balken::before,
	.pc-balken::after { content: ""; position: absolute; left: 0; }
	.pc-balken::before { top: -6px; }
	.pc-balken::after  { top: 6px; }

	/* Geöffnet wird aus den drei Strichen ein Kreuz. */
	.pc-menue-schalter[aria-expanded="true"] .pc-balken { background: transparent; }
	.pc-menue-schalter[aria-expanded="true"] .pc-balken::before { transform: translateY(6px) rotate(45deg); }
	.pc-menue-schalter[aria-expanded="true"] .pc-balken::after  { transform: translateY(-6px) rotate(-45deg); }

	.pc-menue {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--wp--preset--color--grund-hell);
		border-top: 1px solid var(--wp--preset--color--linie);
		box-shadow: 0 16px 40px rgba(81, 52, 32, .12);
		max-height: calc(100svh - 80px);
		overflow-y: auto;
	}
	.pc-menue[data-offen="ja"] { display: flex; }
	.pc-menue > a,
	.pc-klapp > button {
		display: flex;
		align-items: center;
		min-height: 48px;
		padding: 12px 24px;
		border-bottom: 1px solid var(--wp--preset--color--linie);
		width: 100%;
	}
	.pc-menue > a:hover,
	.pc-klapp > button:hover { border-bottom: 1px solid var(--wp--preset--color--linie); }
	.pc-menue .pc-hervor { border-bottom: 1px solid var(--wp--preset--color--linie); }

	/* Das Untermenü klappt hier in den Fluss statt zu schweben — ein
	   schwebendes Panel hätte auf 375 px keinen Platz. */
	.pc-klapp { position: static; }
	.pc-panel {
		position: static;
		min-width: 0;
		border: 0;
		box-shadow: none;
		background: var(--wp--preset--color--grund-warm);
	}
	.pc-panel a {
		min-height: 48px;
		display: flex;
		align-items: center;
		padding: 12px 24px 12px 40px;
	}

	.pc-kopf-innen { position: relative; gap: 16px; }

	/* Der Slider braucht auf dem Telefon weniger Höhe: 100svh ist dort fast der
	   ganze Bildschirm, und darunter kommt nichts mehr in Sicht. */
	.pc-slider { height: 78svh; min-height: 460px; }
	.pc-folie-text { bottom: 96px; }
	.pc-steuer { bottom: 28px; }
}

/* --- 11. Breite Inhalte einfangen ------------------------------------------
 * Preistabellen sind auf dem Telefon breiter als der Bildschirm. Statt die
 * Seite waagerecht scrollen zu lassen, scrollt die Tabelle in ihrem eigenen
 * Behälter.
 */
.wp-block-table { overflow-x: auto; max-width: 100%; }
.wp-block-table table { min-width: 100%; }
.wp-block-table th,
.wp-block-table td { white-space: nowrap; }

/* Lange Fachwörter dürfen die Spalte nicht sprengen. */
body { overflow-wrap: break-word; }

/* Tap-Ziele im Fließtext: Verweise brauchen genug Fläche. */
@media (pointer: coarse) {
	.pc-verweis, .pc-panel a, .pc-menue a { padding-block: 6px; }
}

/* --- 12. Tap-Ziele im Fließtext --------------------------------------------
 * Gemessen: Telefon- und E-Mail-Verweis im dunklen Kontaktband waren 19 px hoch.
 * Auf dem Telefon trifft man das nicht zuverlässig — ausgerechnet bei der
 * Handlung, auf die die ganze Seite zuläuft.
 */
.pc-band-dunkel a,
.wp-block-group a[href^="tel:"],
.wp-block-group a[href^="mailto:"] {
	display: inline-block;
	min-height: 44px;
	line-height: 44px;
}
/* Innerhalb von Fließtext-Absätzen darf das nicht greifen — dort würde es die
   Zeilen auseinanderreißen. Nur freistehende Verweise sind gemeint. */
.pc-band-dunkel p > a:not(:only-child) {
	display: inline;
	min-height: 0;
	line-height: inherit;
}

/* --- 13. Links müssen als Links erkennbar sein -----------------------------
 * Andreas am 28.08.2026: „links hier irgendwie hervorheben, damit kd auch sieht
 * wo er draufklicken kann. das gilt grundsätzlich."
 *
 * Er hat recht, und es war ein echter Fehler: Die Designvorgabe verlangt zwar
 * „keine Unterstreichung", nennt aber ausdrücklich eine Auszeichnung — eine
 * Linie in Akzentfarbe mit Abstand. Ich hatte die nur auf einzelne Verweise
 * gelegt (.pc-verweis) statt auf alle im Fließtext. Ergebnis: Links waren
 * #513420, Fließtext #5c4634 — praktisch nicht unterscheidbar.
 */
.wp-block-group p a,
.wp-block-group li a,
.wp-block-group dd a,
main p a,
main li a {
	border-bottom: 2px solid var(--wp--preset--color--akzent);
	padding-bottom: 2px;
	font-weight: 600;
}
.wp-block-group p a:hover,
main p a:hover { border-bottom-color: var(--wp--preset--color--primaer); }
.pc-band-dunkel p a:hover,
.pc-band-dunkel li a:hover { border-bottom-color: #ffffff; }

/* Überschriften, die verlinkt sind (Kurskarten), bekommen die Linie nur beim
   Überfahren — sonst konkurriert sie mit der Schriftgröße. */
.wp-block-group h2 a,
.wp-block-group h3 a { border-bottom: 2px solid transparent; padding-bottom: 2px; }
.wp-block-group h2 a:hover,
.wp-block-group h3 a:hover { border-bottom-color: var(--wp--preset--color--akzent); }

/* Ausnahmen: Kopfzeile, Fußzeile und Knöpfe haben ihre eigene Auszeichnung. */
.pc-kopf a, .pc-panel a, .wp-block-button__link, .pc-knopf,
.pc-menue a, footer a {
	border-bottom: 0;
	font-weight: inherit;
	padding-bottom: 0;
}
footer a { border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 2px; }
footer a:hover { border-bottom-color: #ffffff; }

/* --- 14. Einheiten im Raster ------------------------------------------------
 * Jede Kurskarte, jeder Ablaufschritt, jede Kennzahl und jede Person ist ein
 * eigener Kasten. Ohne diesen Container lägen die Bausteine flach im Raster —
 * dann steht das Bild der einen Person neben dem Namen der anderen.
 */
.pc-einheit { display: flex; flex-direction: column; gap: 12px; }
.pc-einheit > * { margin: 0; }
.pc-einheit .wp-block-image { margin-bottom: 4px; }
.pc-einheit h3 { margin-top: 0; }

/* --- 15. Fußzeile ----------------------------------------------------------
 * Andreas am 28.08.2026: „footer fehlt: impressum, datenschutz, kontakt, usw."
 * Vorher stand dort eine einzige Zeile. Die Fußzeile ist auf jeder Seite die
 * letzte Gelegenheit, jemanden zum Kontakt zu bringen — und der Ort, an dem
 * Menschen Impressum und Datenschutz suchen.
 */
.pc-fuss {
	background: var(--wp--preset--color--bildgrund);
	color: var(--wp--preset--color--text-dunkel-3);
	padding: clamp(48px, 7vw, 80px) 24px 32px;
}
.pc-fuss-innen {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 40px;
}
.pc-fuss-titel {
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--akzent);
	margin: 0 0 12px;
}
.pc-fuss p { margin: 0 0 16px; font-size: 16px; line-height: 1.9; }
.pc-fuss a { color: var(--wp--preset--color--text-dunkel); }
.pc-fuss-zeile {
	max-width: 1200px;
	margin: 40px auto 0;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.pc-fuss-zeile p { font-size: 15px; color: var(--wp--preset--color--text-dunkel-3); margin: 0; }

/* Auf Berührgeräten brauchen die vielen Verweise genug Fläche. */
@media (pointer: coarse) {
	.pc-fuss p { line-height: 2.4; }
}

/* --- 16. Seitenüberschriften ------------------------------------------------
 * Andreas am 28.08.2026 zu /behoerdliche/: „überschriften zu groß, überschrift
 * behördliche Berufswaffenträger ist abgeschnitten."
 *
 * Die H1-Größe war für die Sliderzeile gedacht — ein kurzer Satz über einem
 * Vollbild. Die Seitentitel tragen dagegen den Suchbegriff und sind entsprechend
 * lang; „Schießtraining für behördliche Berufswaffenträger in Marl" bei 58 px
 * sprengt jede Zeile. Der Slider behält seine Größe, die Seitentitel bekommen
 * eine eigene, kleinere — und dürfen umbrechen.
 */
main > .wp-block-post-title,
.wp-block-post-title {
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.015em;
	overflow-wrap: break-word;
	hyphens: auto;
	/* KEINE max-width hier. Ein Block mit Breitenbegrenzung bekommt im
	   zentrierten Layout von WordPress automatisch margin-inline:auto und
	   steht dann mittig — zweimal gemessen, zweimal bestätigt. Die
	   Zeilenlänge einer Überschrift regelt ohnehin die Schriftgröße. */
}
/* Lange Fachwörter dürfen in keiner Überschrift überlaufen. */
main :is(h1, h2, h3, h4) {
	overflow-wrap: break-word;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
}
/* Abschnittsüberschriften im Fließtext etwas ruhiger als die Bandüberschriften. */
/* Auch hier keine Breitenbegrenzung: gleiche Falle wie oben. */

/* --- 17. Häufige Fragen ----------------------------------------------------
 * Jede Frage ein abgesetzter Block. Vorher lief alles in einem Fluss, und man
 * musste lesen, um zu erkennen, wo eine Antwort endet.
 */
.pc-frage {
	border-top: 1px solid var(--wp--preset--color--linie);
	padding-top: 24px;
	margin-top: 24px;
}
/* Zweispaltig: Frage links, Antwort rechts.
 *
 * Andreas am 28.08.2026: „warum antworten so nach links zusammengedrungen
 * obwohl noch platz ist?" — Die Antwort hatte eine Lesebreite von 680 px in
 * einem 1200 px breiten Container; rechts blieb die Hälfte leer. Zweispaltig
 * ist die übliche Form für Fragenlisten: Man überfliegt links die Fragen und
 * liest rechts nur die eine, die zählt.
 *
 * Unter 760 px stapelt es sich von selbst — dort ist nebeneinander kein Platz.
 */
.pc-frage {
	display: grid;
	grid-template-columns: minmax(220px, 1fr) minmax(300px, 2fr);
	gap: 12px 40px;
	align-items: start;
}
.pc-frage h3 { margin: 0; max-width: 34ch; }
.pc-frage p { margin: 0; max-width: none; }

@media (max-width: 760px) {
	.pc-frage { grid-template-columns: 1fr; gap: 8px; }
	.pc-frage h3 { max-width: none; }
}
.pc-band-warm .pc-frage { border-top-color: var(--wp--preset--color--linie-warm); }
.pc-band-dunkel .pc-frage { border-top-color: rgba(255, 255, 255, .16); }

/* Karten im Raster beginnen alle oben. Ohne das hängen Karten ohne Bild in der
   Mitte ihrer Zelle und die Titel fluchten nicht. */
.pc-raster { align-items: start; }

/* --- 18. Blocksatz ---------------------------------------------------------
 * Andreas am 28.08.2026: „blocksatz auf der ganzen seite verwenden. zumindest
 * dort wo es sinn macht."
 *
 * DIE SILBENTRENNUNG IST NICHT OPTIONAL. Blocksatz ohne sie zieht die Wörter
 * auseinander, bis zwischen ihnen Löcher stehen — auf schmalen Spalten wird der
 * Text dadurch schlechter lesbar, nicht besser. Genau dieser Fehler trat auf
 * club223.de schon einmal auf; dort zerlegte die Trennung dann auch noch kurze
 * Wörter („Gut-schein"). Deshalb hier dieselbe Bremse: erst ab zehn Zeichen
 * trennen, mindestens vier Zeichen vor und nach dem Trennstrich.
 *
 * WO KEIN BLOCKSATZ: Überschriften, Beschriftungen, Kennzahlen, Preiszeilen,
 * Menü, Fußzeile, Formular und Tabellen. Dort sind die Zeilen zu kurz — eine
 * Zeile mit drei Wörtern im Blocksatz sieht kaputt aus, nicht ordentlich.
 */
main p,
main li,
main dd,
.pc-einheit p,
.pc-frage p {
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	text-wrap: pretty;
}

/* Ausnahmen: alles, was kurz ist oder als Auszeichnung gelesen wird. */
main .pc-label,
main .pc-kennzahl,
main p:has(> .pc-label),
main p:has(> .pc-kennzahl),
main p:has(> strong:only-child),
main .hinweis p,
main .pc-antwort,
main figcaption,
.pc-formular p,
.pc-formular label,
.pc-fuss p,
.pc-menue a,
.pc-panel a,
main blockquote p,
main .wp-block-buttons p {
	text-align: left;
	hyphens: manual;
}

/* Die letzte Zeile eines Absatzes bleibt linksbündig — das ist bei Blocksatz
   der Normalfall und verhindert eine auseinandergezogene Schlusszeile. */
main p { text-align-last: left; }

/* Auf sehr schmalen Bildschirmen wird die Spalte zu eng für Blocksatz: Unter
   rund 40 Zeichen je Zeile entstehen auch mit Trennung sichtbare Löcher. */
@media (max-width: 420px) {
	main p, main li, main dd { text-align: left; }
}

/* --- 19. Seitentitel wirklich linksbündig -----------------------------------
 * Gemessen: Die H1 stand mit margin-left 143 px und margin-right 143 px, also
 * mittig. Ursache ist WordPress' eigene Layout-Regel für direkte Kinder eines
 * zentrierten Containers — sie setzt margin-left/right auf auto und wird nach
 * dem Theme-Stylesheet ausgegeben. Ein Block mit max-width landet dadurch in
 * der Mitte.
 *
 * Deshalb hier eine spezifischere Regel statt !important: zwei Klassen plus
 * Kindkombinator schlagen die Kernregel sauber.
 */
main.wp-block-group > .wp-block-post-title,
.is-layout-constrained > .wp-block-post-title {
	margin-left: 0;
	margin-right: auto;
}


/* --- 20. Einheitliches Layout für ALLE Inhaltsseiten ------------------------
 * Andreas am 28.08.2026 zur Team-Seite: „warum formatierst du nicht alles mit
 * css gleich und ordentlich?"
 *
 * Berechtigt. Die Startseite hatte ihr Raster, die Unterseiten hatten nichts —
 * dort standen Bilder in voller Spaltenbreite mitten im Fließtext, und die
 * Abstände ergaben sich zufällig aus den Blockvorgaben. Ab hier gilt für jede
 * Inhaltsseite dasselbe Regelwerk.
 */

/* Lesbare Zeilenlänge. Über rund 75 Zeichen verliert das Auge die Zeile. */
.entry-content > p,
.entry-content > ul,
.entry-content > ol { max-width: 72ch; }

/* Abstände nach Rang: vor einer Überschrift mehr Luft als danach. So entstehen
   sichtbare Blöcke statt eines gleichmäßigen Textteppichs. */
.entry-content > h2 { margin-top: 56px; margin-bottom: 16px; }
.entry-content > h3 { margin-top: 36px; margin-bottom: 12px; }
.entry-content > p  { margin-top: 0; margin-bottom: 18px; }
.entry-content > h2:first-child,
.entry-content > h3:first-child { margin-top: 0; }

/* Bilder im Fließtext: nie über die volle Breite, immer mit Luft. */
.entry-content > .wp-block-image {
	max-width: 520px;
	margin: 32px 0 40px;
}
.entry-content > .wp-block-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Porträts: quadratisch, halbe Spaltenbreite, direkt über dem Namen. */
.entry-content .pc-bild-quadrat {
	max-width: 320px;
	margin-bottom: 12px;
}
.entry-content .pc-bild-quadrat img { aspect-ratio: 1 / 1; object-fit: cover; }

/* Eine Person = ein Block: Bild, Name, Rolle und Text bleiben zusammen. */
.entry-content .pc-bild-quadrat + h3 { margin-top: 0; }

/* Tabellen bekommen Luft und eine ruhige Linienführung. */
.entry-content .wp-block-table { margin: 28px 0 36px; }
.entry-content .wp-block-table table { border-collapse: collapse; width: auto; }
.entry-content .wp-block-table :is(th, td) {
	padding: 10px 18px 10px 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
	text-align: left;
}
.entry-content .wp-block-table th { font-weight: 600; }

/* Listen: Einzug und Zeilenabstand wie im Fließtext. */
.entry-content ul, .entry-content ol { padding-left: 22px; margin-bottom: 22px; }
.entry-content li { margin-bottom: 8px; }

/* Der Hinweiskasten bekommt überall dieselbe Form. */
.entry-content .hinweis { margin: 28px 0; max-width: 72ch; }

/* Trenner setzen Abschnitte ab, statt nur eine Linie zu ziehen. */
.entry-content .wp-block-separator { margin: 48px 0; max-width: 72ch; }

/* Zitate. */
.entry-content blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--wp--preset--color--akzent);
	max-width: 66ch;
}
.entry-content blockquote p {
	font-size: var(--wp--preset--font-size--zitat);
	line-height: 1.35;
	font-weight: 600;
	color: var(--wp--preset--color--primaer);
}

/* --- 21. Karten im Raster fluchten -----------------------------------------
 * DAS WAR DIE URSACHE FÜR „alles verschoben".
 *
 * WordPress setzt über `:where(.wp-block-group) > * + *` jedem Geschwister
 * AUSSER DEM ERSTEN einen oberen Abstand (block-gap). In einer normalen
 * Spalte ist das richtig — im Raster bekommen dadurch die Karten 2, 3 und 4
 * einen Versatz nach unten, Karte 1 nicht. Gemessen: 24 px Unterschied
 * zwischen „01 Anfrage" und „02 Vorgespräch" in derselben Zeile.
 *
 * Im Raster regelt `gap` die Abstände, nicht die Ränder der Kinder.
 */
.pc-raster > *,
.pc-raster > * + *,
.pc-zweispalter > *,
.pc-zweispalter > * + * {
	margin-top: 0;
	margin-block-start: 0;
}

/* Dasselbe innerhalb einer Karte: Der erste Baustein sitzt oben, die Abstände
   kommen aus dem flex-gap der Karte. */
.pc-einheit > *,
.pc-einheit > * + * {
	margin-top: 0;
	margin-block-start: 0;
}

/* --- 22. Porträts im Team-Raster -------------------------------------------
 * Die Bilder standen mit 630 px Höhe in der Zweispalten-Ansicht — sie
 * dominierten den Abschnitt und drückten die Namen aus dem Blick. Ein Porträt
 * neben einer Kurzbiografie braucht nicht mehr als eine halbe Spalte.
 */
.pc-einheit .pc-bild-quadrat { max-width: 300px; }
.pc-einheit .pc-bild-quadrat img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: auto;
}
/* Der Name sitzt direkt unter dem Bild, ohne Lücke. */
.pc-einheit .pc-bild-quadrat + h3 { margin-top: 12px; }