/* Inhaltsblöcke.
 *
 * Jeder Abschnitt bekommt die Form, die zu seiner Rolle im Text gehört:
 * Leistungsbeschreibung, Fallbeispiel, oder Aimées wiederkehrende Abrechnung
 * mit der KI. Der Text selbst bleibt unangetastet.
 */

/* ---------- Rhythmus auf Elementor-Seiten ----------
 * Der senkrechte Rhythmus stand bis zum 19.08.2026 hier im Stylesheet. Juri:
 * „wenn ich die Seiten bei Elementor bearbeite, verschwinden alle Abstände,
 * Elementor hat eigentlich sehr gute Abstandskontrolle" — deshalb steht er
 * jetzt im Innenabstand-Feld jedes Containers, gesetzt von `build_pages.py`
 * (Funktion `abstaende`). Er ist damit im Builder sichtbar und dort auch
 * änderbar.
 *
 * Die Klassen `pvm-flush` und `pvm-tight` sind geblieben: Sie sagen dem
 * Bauskript, welcher Abschnitt keinen und welcher einen kleineren Abstand
 * bekommt. Im Stylesheet steht dazu nichts mehr.
 */

/* ---------- Dunkles Band ----------
 * Ein durchgehender Streifen auf dem Messgrund. Er läuft randlos, sein Inhalt
 * bleibt aber im Raster stehen.
 */

/* Das Raster steckt hier im Innenabstand des Bandes, nicht in einer Breite auf
 * den Kindern. Elementor setzt seinen Kindern selbst `max-width: 100%`; ein
 * Gegenzug darüber wäre ein Spezifitätswettlauf, den die zuletzt geladene
 * Datei gewinnt. Der Innenabstand ist unstrittig.
 */
.e-con.pvm-band {
	padding-inline: max(var(--pvm-gutter), (100% - var(--pvm-container)) / 2);
	background: var(--pvm-ground);
	color: var(--pvm-on-ground);
	border-radius: var(--pvm-radius-lg);
}

/* ---------- Fallbeispiel ----------
 * Aimées ausführliche Fälle sind der stärkste Beleg im ganzen Text. Sie
 * bekommen eine eigene, ruhige Fläche und eine schmalere Satzbreite, damit sie
 * sich wie eine Reportage lesen und nicht wie Fließtext.
 */

/* Beiges Band über die volle Breite — dieselbe Geometrie wie `pvm-band`, nur
 * auf der ruhigen Fläche. Für Abschnitte, die zum vorherigen gehören, aber
 * nicht dieselbe Lautstärke haben sollen.
 */
.e-con.pvm-soft {
	padding-inline: max(var(--pvm-gutter), (100% - var(--pvm-container)) / 2);
	background: var(--pvm-sand);
	border-radius: var(--pvm-radius-lg);
}

.e-con.pvm-case {
	padding-inline: max(var(--pvm-gutter), (100% - var(--pvm-container)) / 2);
	background: var(--pvm-surface);
	border-radius: var(--pvm-radius-lg);
}

/* Der Fließtext läuft über die volle Rasterbreite — auch im Fallbeispiel.
 *
 * Die schmale Lesebreite stand nur dort noch. Neben dem blauen Band, das über
 * die ganze Breite läuft, sah das aus wie ein Fehler: Juri am 20.08.2026 zum
 * Fallbeispiel auf „Strategische Kommunikation" — „warum ist das unten so
 * scheiße?" Jetzt haben Band und Fallbeispiel dieselbe Satzkante.
 */

/* Elementors Kit liefert `--e-global-color-text: #7A7A7A` und
 * `--e-global-typography-text-font-family: "Roboto"` als Werkseinstellung
 * aus und bestimmt damit Farbe und Schrift jedes Absatzes der Seite. Gemessen sind das 4,29:1 auf
 * Weiss und 3,81:1 auf Beige — beides unter der AA-Grenze von 4,5:1. Ink
 * steht bei 17,4:1. Die Regel holt den Fliesstext zurueck in unsere Tokens;
 * `.pvm-band p` und `.pvm-case p` bleiben spezifischer und behalten Vorrang.
 */
.e-con .elementor-widget-text-editor,
.e-con .elementor-widget-text-editor p,
.e-con .elementor-widget-text-editor li {
	color: var(--pvm-text);
	/* Dieselbe Roboto wie im Rest der Seite — unsere selbst gehostete Datei,
	 * nicht eine zufällig auf dem Gerät installierte.
	 */
	font-family: var(--pvm-font-body);
}

.pvm-band h1,
.pvm-band h2,
.pvm-band h3,
.pvm-band h4 {
	color: var(--pvm-on-ground);
}

.pvm-band p,
.pvm-band li,
/* Muss die Ink-Regel für Elementor-Textfelder überbieten (0-2-1), sonst stünde
 * auf dem blauen Band schwarze Schrift bei 2,16:1.
 */
.e-con.pvm-band .elementor-widget-text-editor,
.e-con.pvm-band .elementor-widget-text-editor p,
.e-con.pvm-band .elementor-widget-text-editor li {
	color: var(--pvm-on-ground-muted);
}

.pvm-band a:not(.pvm-button) {
	color: var(--pvm-link-on-ground);
}

.pvm-band :focus-visible {
	outline-color: var(--pvm-on-ground);
}

/* Im Band trägt der Kasten keine eigene Fläche mehr — er stünde sonst als
 * dunkler Block auf dunklem Grund.
 */
.pvm-band .pvm-infobox {
	background: var(--pvm-ground-raised);
}

/* Blöcke, die ihren eigenen Außenabstand mitbringen, geben ihn innerhalb
 * eines Elementor-Containers ab: Der Container regelt den Abstand.
 */
.e-con .pvm-infobox,
.e-con .pvm-tiles,
.e-con .pvm-logos,
.e-con .pvm-quotes,
.e-con .pvm-facts,
.e-con .pvm-team,
.e-con .pvm-choice,
.e-con .pvm-toc {
	margin-block: 0;
}

/* Der letzte Absatz eines Textfelds gibt seinen Außenabstand ebenfalls ab.
 *
 * Gemessen am 19.08.2026: Farbige Flächen hatten oben 96 px Innenraum und
 * unten 120 px — die Differenz war der Abstand unter dem letzten Absatz. Der
 * Innenabstand des Containers soll die Fläche bestimmen, nicht die Summe aus
 * Innenabstand und Absatzabstand.
 */
.e-con .elementor-widget-text-editor > .elementor-widget-container > *:last-child,
.e-con .elementor-widget-text-editor > *:last-child {
	margin-bottom: 0;
}

/* Dasselbe eine Ebene tiefer: Die Logo-Wand bringt einen eigenen Außenabstand
 * mit, der sich sonst zum Abstand des Abschnitts addiert. Vor dem Fußbereich
 * standen dadurch 136 px statt der geplanten 96 px.
 */
.e-con .pvm-logos .pvm-logowall {
	margin-block: 0;
}

/* ---------- Wechselspiel: zwei Spalten im Abschnitt ----------
 * Aimée am 19.08.2026: „mehr links rechts, Spiel, auf der ganzen Seite" — und:
 * wo ein Bild steht, steht es links oder rechts vom Text, nie darunter über die
 * volle Breite.
 *
 * Umgesetzt wird das über Elementors eigene Variablen, nicht über
 * `flex-direction` direkt: `.e-con.e-flex` setzt `--flex-direction: column` mit
 * zwei Klassen Spezifität, und wer bei Gleichstand gewinnt, entscheidet die
 * Ladereihenfolge. Drei Klassen stehen darüber, in jeder Reihenfolge. Die
 * Kinder steuern ihre Breite über `--flex-basis`, die `.elementor-element`
 * ohnehin ausliest — damit bleibt jedes Widget im Builder ein normales Widget.
 *
 * Unter 1000 px bleibt alles gestapelt: zwei Spalten Fließtext neben einem
 * Bild sind auf dem Handy keine Gestaltung, sondern zwei zu schmale Spalten.
 */

@media (min-width: 1000px) {
	/* Zwei Spalten als Raster, nicht als Flex-Zeile.
	 *
	 * Seit dem 20.08.2026 sind Überschrift und Fließtext getrennte Bausteine
	 * (Juri: „warum ist alles in textfeld, und nicht ein titel feld und dann
	 * ein text feld?"). In einer Flex-Zeile stünden sie nebeneinander; im
	 * Raster liegen sie untereinander in der ersten Spalte, und das Bild
	 * belegt die zweite über alle Zeilen. Beide bleiben eigene Widgets.
	 *
	 * Die Spaltenlücke steht in Elementors Feld „Abstände" — hier steht nur
	 * die Aufteilung.
	 */
	/* Genau eine Ebene trägt das Raster: bei begrenzter Breite die
	 * `.e-con-inner`, bei randlosen Abschnitten der Container selbst
	 * (`e-con-full`). Steht es auf beiden, wird die innere Box zum einzigen
	 * Rasterelement und landet in der ersten Spalte — gemessen 411 px statt
	 * 700.
	 */
	.e-con.pvm-split > .e-con-inner,
	.e-con.pvm-split.e-con-full {
		display: grid;
		grid-template-columns: minmax(0, 58fr) minmax(0, 42fr);
		/* Zwei *explizite* Zeilen: Überschrift und Text. `grid-row: 1 / -1`
		 * am Bild zählt nur explizite Linien — ohne diese Angabe spannte es
		 * über eine einzige Zeile und blieb zu kurz.
		 */
		grid-template-rows: auto 1fr;
	}

	.e-con.pvm-aside > .e-con-inner,
	.e-con.pvm-aside.e-con-full {
		display: grid;
		grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
		grid-template-rows: auto 1fr;
	}

	/* Wort links, Bild rechts. `grid-row: 1 / -1` zieht das Bild über alle
	 * Zeilen der Wortspalte — daher steht es oben wie unten auf derselben
	 * Linie wie der Text.
	 */
	.pvm-split > .elementor-widget-heading,
	.pvm-split > .elementor-widget-text-editor,
	.pvm-split > .e-con-inner > .elementor-widget-heading,
	.pvm-split > .e-con-inner > .elementor-widget-text-editor,
	.pvm-aside > .elementor-widget-text-editor:not(.pvm-infobox),
	.pvm-aside > .e-con-inner > .elementor-widget-text-editor:not(.pvm-infobox) {
		grid-column: 1;
		min-width: 0;
	}

	.pvm-split > .elementor-widget-image,
	.pvm-split > .e-con-inner > .elementor-widget-image {
		grid-column: 2;
		grid-row: 1 / -1;
		min-width: 0;
	}

	/* Titel über beide Spalten, Bild erst neben dem Fließtext.
	 *
	 * Aimée am 21.08.2026 zum blauen Kasten „Sensible Kommunikation": „im
	 * blauen Kasten ist die Head 8 zeilig. Kannst du die über die ganze Breite
	 * des Kastens laufen lassen und das Bild fängt dann erst neben dem Text
	 * an?" Drei Zeilen statt acht — der Titel hat hier die volle Kastenbreite
	 * statt der 58-Prozent-Spalte.
	 */
	.e-con.pvm-split--breit > .e-con-inner,
	.e-con.pvm-split--breit.e-con-full {
		grid-template-rows: auto 1fr;
	}

	.pvm-split--breit > .elementor-widget-heading,
	.pvm-split--breit > .e-con-inner > .elementor-widget-heading {
		grid-column: 1 / -1;
		grid-row: 1;
	}

	.pvm-split--breit > .elementor-widget-text-editor,
	.pvm-split--breit > .e-con-inner > .elementor-widget-text-editor {
		grid-column: 1;
		grid-row: 2;
	}

	.pvm-split--breit > .elementor-widget-image,
	.pvm-split--breit > .e-con-inner > .elementor-widget-image {
		grid-column: 2;
		grid-row: 2;
	}

	/* Der Kasten steht oben bündig, nicht über die ganze Höhe — er ist
	 * Beiwerk, keine zweite Spalte Fließtext.
	 */
	.pvm-aside > .pvm-infobox,
	.pvm-aside > .e-con-inner > .pvm-infobox {
		grid-column: 2;
		grid-row: 1 / -1;
		align-self: start;
		min-width: 0;
	}

	/* Versetzt statt bündig.
	 *
	 * Aimée am 23.08.2026 zur Startseite: „Die Kraft von gutem Content nicht
	 * bündig mit dem Kasten rechts daneben. Kasten bitte ein kleines Stückchen
	 * tiefer." Stehen links und rechts zwei Überschriften auf derselben Linie,
	 * lesen sie sich wie zwei gleichrangige Spalten. Der Versatz macht
	 * sichtbar, was Kerntext ist und was Beiwerk.
	 *
	 * Nur ab 1000 px — gestapelt gäbe der Versatz nur eine größere Lücke.
	 */
	.pvm-aside--versetzt > .pvm-infobox,
	.pvm-aside--versetzt > .e-con-inner > .pvm-infobox {
		margin-block-start: var(--pvm-space-lg);
	}

	/* Die Umkehrung: Bild links, Wort rechts. Im Quelltext bleibt der Text
	 * vorn, damit Vorlesereihenfolge und Handy-Stapel gleich bleiben.
	 */
	.pvm-split--flip > .elementor-widget-heading,
	.pvm-split--flip > .elementor-widget-text-editor,
	.pvm-split--flip > .e-con-inner > .elementor-widget-heading,
	.pvm-split--flip > .e-con-inner > .elementor-widget-text-editor {
		grid-column: 2;
	}

	.pvm-split--flip > .elementor-widget-image,
	.pvm-split--flip > .e-con-inner > .elementor-widget-image {
		grid-column: 1;
	}

	/* Das Bild füllt seine Spalte über die ganze Höhe der Wortspalte.
	 *
	 * Claudia am 20.08.2026: „Die Bilder sind oft viel zu klein … in dieser
	 * Größe wirken sie nicht, das sieht eher sehr komisch aus, dass da so
	 * eine kleine Briefmarke klebt."
	 *
	 * Das Bild liegt dafür absolut in seiner Zelle: So bestimmt allein der
	 * Text die Zeilenhöhe. Stünde es im Fluss, gäbe seine eigene Höhe den
	 * Ausschlag — gemessen 487 px Bild neben 322 px Text.
	 */
	.pvm-split > .elementor-widget-image,
	.pvm-split > .e-con-inner > .elementor-widget-image {
		align-self: stretch;
		/* Auf der Schriftkante der ersten Zeile, nicht auf ihrer Kastenkante.
		 * Der Fuß bleibt dabei stehen: `stretch` nimmt den Versatz von der
		 * Höhe ab.
		 */
		margin-block-start: var(--pvm-optische-kante);
		/* Nie flacher als das hier, sonst wird das Motiv zum Streifen: In
		 * einer 470 px breiten Spalte sind 16 rem etwa 16:9.
		 */
		min-height: 16rem;
		/* Und nie höher: Neben einem sehr langen Abschnitt wäre das Bild
		 * sonst 1000 px hoch bei 470 px Breite. Darüber läuft es mit.
		 */
		max-height: 34rem;
		position: sticky;
		top: calc(var(--pvm-header-height) + var(--pvm-space-md));
	}

	/* Zwei Markup-Fassungen: Elementor gibt das Bild-Widget mal mit
	 * `.elementor-widget-container` aus, mal — mit eingeschaltetem
	 * „optimized markup" — mit dem `img` als direktem Kind. Beide müssen
	 * heraus aus dem Höhenfluss, sonst gibt die Naturhöhe des Bildes den
	 * Ausschlag: gemessen 487 px Bild neben 322 px Text.
	 */
	.pvm-split .elementor-widget-image > .elementor-widget-container,
	.pvm-split .elementor-widget-image > img {
		position: absolute;
		inset: 0;
	}

	.e-con .pvm-split .elementor-widget-image img,
	.pvm-split .elementor-widget-image img {
		height: 100%;
		width: 100%;
		object-fit: cover;
	}

	/* Ausnahme: Bilder, die nichts verlieren dürfen.
	 *
	 * Der Zweispalter schneidet auf Texthöhe zu (`cover`). Bei einem Stadtplan
	 * fällt dabei genau das weg, worauf es ankommt — Juri am 20.08.2026 zur
	 * Kontaktseite: „hier in Bild sind wichtige Teile abgeschnitten, dafür ist
	 * der leere Teil sichtbar." Mit `pvm-fit` steht das Bild vollständig da,
	 * oben bündig zum Text, in seinem eigenen Seitenverhältnis.
	 */
	.pvm-split.pvm-fit > .elementor-widget-image,
	.pvm-split.pvm-fit > .e-con-inner > .elementor-widget-image {
		align-self: start;
		position: static;
		min-height: 0;
		max-height: none;
	}

	.pvm-split.pvm-fit .elementor-widget-image > .elementor-widget-container,
	.pvm-split.pvm-fit .elementor-widget-image > img {
		position: static;
		inset: auto;
	}

	.e-con .pvm-split.pvm-fit .elementor-widget-image img,
	.pvm-split.pvm-fit .elementor-widget-image img {
		height: auto;
		object-fit: contain;
	}

	/* In der schmalen Spalte ist die Kastenüberschrift eine Stufe kleiner. */
	.pvm-aside .pvm-infobox h2,
	.pvm-aside .pvm-infobox h3 {
		font-size: var(--pvm-text-xl);
	}

	.pvm-aside .pvm-infobox p,
	.pvm-aside .pvm-infobox li {
		font-size: var(--pvm-text-sm);
	}
}

/* Gestapelt — unter 1000 px — steht das Bild in einem ruhigen Format über dem
 * Text, statt in seiner Naturgröße. Sonst schwankt die Höhe von Abschnitt zu
 * Abschnitt, und genau das war der Vorwurf der „springenden Linien".
 */
@media (max-width: 999px) {
	.e-con .pvm-split .elementor-widget-image img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
	}
}

/* Freistehende Bilder bekommen dieselbe Rundung wie Kacheln, Kästen und
 * Karten. Ohne sie steht ein hartes Rechteck zwischen lauter runden Ecken.
 */
.e-con .elementor-widget-image img {
	border-radius: var(--pvm-radius-lg);
}

.pvm-block {
	margin-block: var(--pvm-space-xl);
}

.pvm-block > h2 {
	margin-top: 0;
}

.pvm-block > *:last-child {
	margin-bottom: 0;
}

/* ---------- Aufzählungen als Marken ----------
 * Dieselbe Form wie auf der Tonspur: ein gesetzter Punkt, keine Bullet-Glyphe.
 */

.pvm-content ul:not(.pvm-toc__list):not(.pvm-index__marks):not(.pvm-gallery):not(.pvm-logowall) {
	padding-left: 0;
	list-style: none;
}

.pvm-content ul:not(.pvm-toc__list):not(.pvm-index__marks):not(.pvm-gallery):not(.pvm-logowall) > li {
	position: relative;
	padding-left: var(--pvm-space-md);
	margin-bottom: var(--pvm-space-2xs);
}

.pvm-content ul:not(.pvm-toc__list):not(.pvm-index__marks):not(.pvm-gallery):not(.pvm-logowall) > li::before {
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pvm-green);
}

/* Aufzählungen in Elementor-Textfeldern.
 *
 * Die Marke der Seite ist ein gesetzter grüner Punkt, keine Bullet-Glyphe. Die
 * Regel dafür hing bis zum 19.08.2026 an `.pvm-content` — dem Wrapper der
 * Seiten *ohne* Elementor. In den Textfeldern des Builders standen deshalb die
 * Standardpunkte des Browsers.
 */

.e-con .elementor-widget-text-editor ul {
	padding-left: 0;
	list-style: none;
}

.e-con .elementor-widget-text-editor ul > li {
	position: relative;
	padding-left: var(--pvm-space-md);
	margin-bottom: var(--pvm-space-2xs);
}

.e-con .elementor-widget-text-editor ul > li::before {
	content: '';
	position: absolute;
	top: 0.72em;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pvm-green);
}

/* Auf dem blauen Band und im blauen Kasten trägt Grün genug Fläche für einen
 * Punkt (4,21:1 reicht für nicht-textliche Elemente), im beigen Kasten
 * ebenfalls. Nichts umzustellen — der Punkt bleibt die Marke.
 */

/* Die Adresse unter dem Knopf eines Wahlkastens.
 *
 * Beide Kästen auf „Coaching" führen auf eine fremde Domain. Aimée am
 * 19.08.2026: „sonst ist man etwas verwirrt, wenn man über den Button auf
 * einer externen Website landet." Also steht die Adresse sichtbar darunter.
 */
.pvm-choice__adresse {
	margin: var(--pvm-space-xs) 0 0;
	font-size: var(--pvm-text-sm);
	letter-spacing: 0.01em;
	overflow-wrap: break-word;
}

.pvm-choice__item--blue .pvm-choice__adresse {
	color: var(--pvm-on-ground-muted);
}

.pvm-choice__item--green .pvm-choice__adresse {
	color: var(--pvm-ink);
}

/* ---------- Infokasten ----------
 * Steht im Dokument als [Infokasten 1] und [Infokasten 2]. Aimée wollte
 * ausdrücklich „hier und da auch einen Kasten".
 */

.pvm-infobox {
	margin-block: var(--pvm-space-xl);
	padding: var(--pvm-space-lg);
	background: var(--pvm-ground);
	color: var(--pvm-on-ground);
	border-radius: var(--pvm-radius-lg);
}

.pvm-infobox h2,
.pvm-infobox h3 {
	margin-top: 0;
	color: var(--pvm-on-ground);
	font-size: var(--pvm-text-2xl);
	text-wrap: balance;
}

/* Der Kasten als eigenes Elementor-Widget.
 *
 * Steht `pvm-infobox` als CSS-Klasse am Textfeld, ist der Kasten selbst das
 * Widget — so kann die Redaktion ihn wie jeden anderen Baustein verschieben.
 * Die Farbregel für Elementor-Textfelder (0-2-1) trifft die Absätze darin
 * direkt und färbte sie sonst dunkel auf Blau; deshalb dieselbe Umkehrung wie
 * beim Band.
 */
.e-con .elementor-widget-text-editor.pvm-infobox,
.e-con .elementor-widget-text-editor.pvm-infobox p,
.e-con .elementor-widget-text-editor.pvm-infobox li {
	color: var(--pvm-on-ground-muted);
}

/* Die ruhige Fassung auf warmem Beige — für den zweiten Kasten, der neben dem
 * Einstieg steht. Blau auf Beige sind 7,01:1, Ink 14,4:1.
 */
.pvm-infobox--sand {
	background: var(--pvm-sand);
	color: var(--pvm-ink);
}

.pvm-infobox--sand h2,
.pvm-infobox--sand h3 {
	color: var(--pvm-blue);
}

.e-con .elementor-widget-text-editor.pvm-infobox--sand,
.e-con .elementor-widget-text-editor.pvm-infobox--sand p,
.e-con .elementor-widget-text-editor.pvm-infobox--sand li {
	color: var(--pvm-text);
}

/* Zwei Klassen, damit die Regel die des blauen Kastens sicher überbietet:
 * Dort steht `--pvm-link-on-ground` (#cfe3f8), und auf Beige wären das 1,3:1.
 */
.pvm-infobox.pvm-infobox--sand a:not(.pvm-button) {
	color: var(--pvm-link);
}

.pvm-infobox--sand :focus-visible {
	outline-color: var(--pvm-focus);
}

.pvm-infobox p:last-child {
	margin-bottom: 0;
}

.pvm-infobox a:not(.pvm-button) {
	color: var(--pvm-link-on-ground);
}

.pvm-infobox :focus-visible {
	outline-color: var(--pvm-on-ground);
}

.pvm-infobox .pvm-cta {
	margin-top: var(--pvm-space-md);
	margin-bottom: 0;
}

/* Auf jeder blauen Fläche kehrt sich der Knopf um. Der Standardknopf ist blau
 * auf blau und damit unsichtbar, seit der Grund das Markenblau selbst ist —
 * hier trägt er deshalb Grün als Fläche und Ink als Schrift (9,14:1). Blau auf
 * Grün wären 4,21:1 und damit zu wenig für den Schriftgrad einer Schaltfläche.
 */
.pvm-infobox .pvm-button,
.pvm-band .pvm-button,
.pvm-block--ki .pvm-button {
	background: var(--pvm-signal);
	border-color: var(--pvm-signal);
	color: var(--pvm-ink);
}

.pvm-infobox .pvm-button:hover,
.pvm-band .pvm-button:hover,
.pvm-block--ki .pvm-button:hover {
	background: #bcd91f;
	border-color: #bcd91f;
	color: var(--pvm-ink);
}

.pvm-band .pvm-button:focus-visible,
.pvm-block--ki .pvm-button:focus-visible,
.pvm-infobox .pvm-button:focus-visible {
	outline-color: var(--pvm-ink);
}

@media (min-width: 900px) {
	.pvm-infobox {
		padding: var(--pvm-space-xl);
	}
}

/* ---------- Fallbeispiel ----------
 * Die ausführlichen Fälle sind der stärkste Beleg im ganzen Text. Sie bekommen
 * eine eigene Fläche und eine schmalere Satzbreite, damit sie sich wie eine
 * Reportage lesen und nicht wie Fließtext.
 */

.pvm-block--fall {
	position: relative;
	margin-block: var(--pvm-space-2xl);
	padding: var(--pvm-space-lg) 0 var(--pvm-space-lg) var(--pvm-space-lg);
	border-left: 1px solid var(--pvm-line);
}

.pvm-block--fall > h2 {
	font-size: var(--pvm-text-xl);
	font-family: var(--pvm-font-body);
	font-weight: 700;
	letter-spacing: 0;
	color: var(--pvm-text-muted);
}

.pvm-block--fall::before {
	content: '';
	position: absolute;
	top: var(--pvm-space-lg);
	left: -4px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--pvm-green);
}

.pvm-block--fall p {
	max-width: 62ch;
}

/* ---------- „Kann das nicht auch die KI?" ----------
 * Aimées Kernargument. Es kommt im Text dreimal vor und trägt die
 * Positionierung der Agentur — deshalb bekommt es die stärkste Fläche.
 */

.pvm-block--ki {
	margin-block: var(--pvm-space-2xl);
	padding: var(--pvm-space-xl) var(--pvm-space-lg);
	background: var(--pvm-ground);
	color: var(--pvm-on-ground);
	border-radius: var(--pvm-radius-lg);
}

.pvm-block--ki > h2 {
	color: var(--pvm-signal-on-ground);
	font-size: var(--pvm-text-3xl);
	text-wrap: balance;
}

.pvm-block--ki p {
	color: var(--pvm-on-ground-muted);
	max-width: 68ch;
}

.pvm-block--ki a:not(.pvm-button) {
	color: var(--pvm-link-on-ground);
}

.pvm-block--ki :focus-visible {
	outline-color: var(--pvm-on-ground);
}

@media (min-width: 900px) {
	.pvm-block--ki {
		padding: var(--pvm-space-2xl) var(--pvm-space-xl);
	}
}

/* ---------- Bilder im Text ---------- */

.pvm-figure {
	margin-block: var(--pvm-space-xl);
}

.pvm-figure img {
	width: 100%;
	border-radius: var(--pvm-radius-lg);
}

.pvm-figure figcaption {
	margin-top: var(--pvm-space-2xs);
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
}

/* Breiter als die Lesespalte, aber nicht randlos: Das Bild soll den Text
 * unterbrechen, nicht die Seite sprengen.
 */
@media (min-width: 1000px) {
	.pvm-figure--wide {
		width: min(100%, var(--pvm-container));
		max-width: none;
		margin-inline: calc((var(--pvm-container-text) - min(100%, var(--pvm-container))) / 2);
	}
}

/* ---------- Handlungsaufforderung ---------- */

.pvm-cta {
	margin-block: var(--pvm-space-md);
}

/* ---------- Galerie ---------- */

.pvm-gallery {
	display: grid;
	gap: var(--pvm-space-md);
	margin: var(--pvm-space-lg) 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.pvm-gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pvm-gallery__item {
	margin: 0;
}

.pvm-gallery__item img {
	width: 100%;
	border-radius: var(--pvm-radius);
}

/* ---------- Logo-Wand ---------- */

.pvm-logowall {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--pvm-space-lg);
	align-items: center;
	margin: var(--pvm-space-lg) 0;
	padding: 0;
	list-style: none;
}

.pvm-logowall li {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 4rem;
}

/* Die Logos standen bis zum 17.08.2026 entsättigt da und zeigten ihre Farbe
 * erst beim Überfahren. Aimée: „Die Referenzlogos bitte wieder in den
 * Originalfarben." Also ohne Filter — es sind fremde Marken, und die gehören
 * ihren Absendern so, wie sie sind. Die Wand wird dadurch bunter; die Ruhe
 * kommt jetzt aus dem gleichmäßigen Raster und der einheitlichen Höhe.
 */
.pvm-logowall img {
	max-height: 3.25rem;
	width: auto;
	object-fit: contain;
	transition: transform var(--pvm-transition);
}

.pvm-logowall li:hover img {
	transform: scale(1.04);
}

/* ---------- Dekoratives Hintergrundvideo ----------
 * So lag es auf der alten Seite: hinter dem Kopfbereich, stumm, ohne
 * Bedienelemente. Es liegt hinter dem Inhalt und ist für Screenreader
 * unsichtbar, weil es nichts sagt.
 */

.pvm-backdrop {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.pvm-backdrop__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Dunkel und entsättigt, damit die Schrift darüber ihren Kontrast behält.
	 * Ohne das läge weißer Text stellenweise auf hellem Video.
	 */
	filter: grayscale(0.35) brightness(0.42) contrast(1.05);
}

/* Zusätzlicher Schleier: Der Kontrast der Schrift darf nicht davon abhängen,
 * welches Einzelbild gerade läuft.
 */
.pvm-backdrop::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(11 18 32 / 78%) 0%, rgb(11 18 32 / 88%) 60%, rgb(11 18 32 / 96%) 100%);
}

@media (prefers-reduced-motion: reduce) {
	.pvm-backdrop__video {
		display: none;
	}
}

/* ---------- Bildkacheln ----------
 * Entspricht „Unser Service. Mix & Match." der alten Startseite. Das Foto
 * führt, der Titel folgt — deshalb steht das Bild oben und nicht als Icon
 * neben dem Text.
 */

.pvm-tiles {
	margin-block: var(--pvm-space-2xl);
}

.pvm-tiles__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}

.pvm-tiles__list {
	display: grid;
	gap: var(--pvm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.pvm-tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.pvm-tiles__list {
		grid-template-columns: repeat(var(--pvm-tiles-cols, 3), minmax(0, 1fr));
	}
}

.pvm-tiles__item {
	margin: 0;
	padding: 0;
}

.pvm-tiles__item::before {
	content: none;
}

.pvm-tiles__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.pvm-tiles__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--pvm-radius-lg);
	margin-bottom: var(--pvm-space-sm);
	background: var(--pvm-surface);
}

.pvm-tiles__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pvm-tiles__link:hover .pvm-tiles__media img {
	transform: scale(1.03);
}

.pvm-tiles__title {
	margin-bottom: var(--pvm-space-3xs);
	font-size: var(--pvm-text-base);
	font-family: var(--pvm-font-body);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pvm-blue);
}

.pvm-tiles__text {
	margin: 0;
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
	line-height: 1.6;
}

/* Kennzeichnung nach Artikel 50 EU-KI-VO, hier in der Kachel.
 *
 * Der Hinweis gehört zum Bild und steht deshalb direkt darunter, vor dem
 * Titel. Damit er nicht wie eine zweite Textzeile wirkt, ist er eine Stufe
 * kleiner als die Zeile unter dem Titel; den Abstand zum Titel bringt das
 * Bild mit, hier steht nur die Feinkorrektur.
 */
/* Der Hinweis liegt im Bild, unten links.
 *
 * Juri am 24.08.2026: „kannst du auf der startseite die 2 ki generiert
 * irgendwie als overlay in das bild unten links setzen? so springen die
 * Überschriften wenn es unter den Bild ist." Stimmt: Nur zwei der sechs
 * Kacheln tragen den Hinweis, und unter dem Bild schob er deren Titel um eine
 * Zeile nach unten — im Raster standen die Überschriften dann versetzt.
 *
 * Im Bild kostet er keine Zeile. Weißer Text auf 62 % Schwarz liegt bei
 * 9,4:1; der Schleier hat feste Deckkraft, hängt also nicht vom Motiv ab.
 */
.pvm-tiles__hinweis {
	position: absolute;
	left: var(--pvm-space-2xs);
	bottom: var(--pvm-space-2xs);
	margin: 0;
	padding: 0.25em 0.6em;
	border-radius: var(--pvm-radius-sm);
	background: rgb(11 18 32 / 62%);
	font-size: var(--pvm-text-xs);
	line-height: 1.4;
	color: #fff;
}

/* ---------- Wahlkästen ----------
 * Zwei Wege nebeneinander statt zweier Knöpfe untereinander. Die Farbrollen
 * sind nicht frei wählbar: Blau trägt weiße Schrift (8,05:1), Grün trägt
 * dunkle (9,10:1). Umgekehrt reißt jede der beiden Kombinationen die Grenze.
 */

.pvm-choice {
	display: grid;
	gap: var(--pvm-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 700px) {
	.pvm-choice {
		grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
		gap: var(--pvm-space-lg);
	}
}

.pvm-choice__item {
	display: flex;
	flex-direction: column;
	gap: var(--pvm-space-md);
	/* Die Schaltfläche steht unten bündig, auch wenn die Fragen
	 * unterschiedlich lang sind.
	 */
	justify-content: space-between;
	margin: 0;
	padding: var(--pvm-space-lg);
	border-radius: var(--pvm-radius-lg);
}

/* Der grüne Punkt der Aufzählungen hat hier nichts zu suchen. */
.pvm-choice__item::before {
	content: none;
}

.pvm-choice__item--blue {
	background: var(--pvm-blue);
	color: var(--pvm-white);
}

.pvm-choice__item--green {
	background: var(--pvm-green);
	color: var(--pvm-ink);
}

.pvm-choice__text {
	margin: 0;
	font-size: var(--pvm-text-lg);
	line-height: 1.45;
	text-wrap: pretty;
}

.pvm-choice__button {
	align-self: flex-start;
}

/* Auf der blauen Fläche kehrt sich der Knopf um: weiße Fläche, blaue Schrift.
 * Auf der grünen trägt er den dunklen Grund — Blau auf Grün wären 4,21:1 und
 * damit zu wenig für den Schriftgrad einer Schaltfläche.
 */
.pvm-choice__item--blue .pvm-choice__button {
	background: var(--pvm-white);
	border-color: var(--pvm-white);
	color: var(--pvm-blue);
}

.pvm-choice__item--blue .pvm-choice__button:hover {
	background: var(--pvm-blue-light);
	border-color: var(--pvm-blue-light);
	color: var(--pvm-blue-dark);
}

.pvm-choice__item--green .pvm-choice__button {
	background: var(--pvm-ink);
	border-color: var(--pvm-ink);
	color: var(--pvm-white);
}

.pvm-choice__item--green .pvm-choice__button:hover {
	background: #000;
	border-color: #000;
	color: var(--pvm-white);
}

/* Der Fokusring kehrt sich auf Blau um (weiß, 8,05:1), auf Grün nicht — dort
 * hätte Weiß nur 1,91:1 und wäre praktisch unsichtbar.
 */
.pvm-choice__item--green :focus-visible {
	outline-color: var(--pvm-ink);
}

/* ---------- Personenkarten ----------
 * Jede Person bekommt ihre eigene Fläche mit feiner Linie im Markenblau. Die
 * Linie trägt keinen Text, deshalb reicht hier der aufgehellte Blauton — als
 * Schrift wäre er zu schwach.
 */

.pvm-team {
	display: grid;
	gap: var(--pvm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.pvm-team {
		grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	}
}

.pvm-team__item {
	margin: 0;
	padding: 0;
}

.pvm-team__item::before {
	content: none;
}

.pvm-person {
	height: 100%;
	padding: var(--pvm-space-lg);
	border: 1px solid var(--pvm-blue-line);
	border-radius: var(--pvm-radius-lg);
	background: var(--pvm-white);
}

.pvm-person__media {
	margin: calc(-1 * var(--pvm-space-lg)) calc(-1 * var(--pvm-space-lg)) var(--pvm-space-md);
	overflow: hidden;
	border-radius: var(--pvm-radius-lg) var(--pvm-radius-lg) 0 0;
}

.pvm-person__media img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.pvm-person__name {
	margin-bottom: var(--pvm-space-3xs);
	font-size: var(--pvm-text-xl);
	color: var(--pvm-blue);
}

.pvm-person__role {
	margin-bottom: var(--pvm-space-md);
	font-size: var(--pvm-text-sm);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pvm-text-muted);
}

.pvm-person__intro {
	margin-bottom: var(--pvm-space-md);
}

/* Das Zitat steht auf dem warmen Beige — kein Rahmen, keine Anführungsgrafik,
 * die Anführungszeichen stehen im Text selbst. Bis zum 19.08.2026 war die
 * Fläche hellblau; Juri: „die drei in beige". Damit tragen Seitenkopf,
 * Fallbeispiel, Kundenstimmen und die Zitate der Personenkarten dieselbe
 * ruhige Fläche.
 */
.pvm-person__quote {
	margin: 0 0 var(--pvm-space-md);
	padding: var(--pvm-space-md);
	background: var(--pvm-sand);
	border-radius: var(--pvm-radius);
	font-size: var(--pvm-text-base);
	line-height: 1.55;
}

.pvm-person__quote::before {
	content: none;
}

.pvm-person__quote p:last-child {
	margin-bottom: 0;
}

.pvm-person__facts {
	margin: 0;
	padding-top: var(--pvm-space-md);
	border-top: 1px solid var(--pvm-line);
	font-size: var(--pvm-text-sm);
	line-height: 1.55;
}

.pvm-person__facts dt {
	font-weight: 700;
	color: var(--pvm-blue);
}

.pvm-person__facts dd {
	margin: 0 0 var(--pvm-space-sm);
	color: var(--pvm-text-muted);
}

.pvm-person__facts dd:last-child {
	margin-bottom: 0;
}

/* ---------- Faktenkarten ----------
 * Die nummerierte Aufzählung als Übersicht statt als Notizzettel.
 */

.pvm-facts__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}

.pvm-facts__list {
	display: grid;
	gap: var(--pvm-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

@media (min-width: 700px) {
	.pvm-facts__list {
		grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
		gap: var(--pvm-space-lg);
	}
}

.pvm-facts__item {
	margin: 0;
	padding: var(--pvm-space-lg);
	border: 1px solid var(--pvm-blue-line);
	border-radius: var(--pvm-radius-lg);
}

.pvm-facts__item::before {
	content: none;
}

.pvm-facts__number {
	display: block;
	margin-bottom: var(--pvm-space-2xs);
	font-family: var(--pvm-font-heading);
	font-size: var(--pvm-text-2xl);
	font-weight: 700;
	line-height: 1;
	color: var(--pvm-blue);
}

.pvm-facts__title {
	margin-bottom: var(--pvm-space-2xs);
	font-size: var(--pvm-text-lg);
}

.pvm-facts__text {
	margin: 0;
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
	line-height: 1.6;
}

.pvm-facts__lines {
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
	line-height: 1.9;
}

.pvm-facts__lines li {
	position: relative;
	margin: 0;
	padding-left: var(--pvm-space-sm);
}

.pvm-facts__lines li::before {
	content: '';
	position: absolute;
	top: 0.85em;
	left: 0;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--pvm-green);
}

/* Auf dem Band tauschen Linie und Zahl ihre Farben: Markenblau auf Markenblau
 * wäre unsichtbar, das aufgehellte Grün kommt auf 6,00:1.
 */
.pvm-band .pvm-facts__item {
	background: var(--pvm-ground-raised);
	border-color: var(--pvm-ground-line);
}

.pvm-band .pvm-facts__number {
	color: var(--pvm-signal-on-ground);
}

.pvm-band .pvm-facts__text,
.pvm-band .pvm-facts__lines,
.pvm-band .pvm-facts__lines li {
	/* Weiß statt des blassen Blaus: Die Karte ist `--pvm-ground-raised`
	 * (#0d66c0), dort kommt #d6e4f4 nur auf 4,42:1. Weiß steht bei 5,73:1.
	 */
	color: var(--pvm-on-ground);
}

/* ---------- Kundenstimmen ----------
 * Eine Wand, kein Karussell: Jede Stimme steht dauerhaft da. Das ist die
 * verlässlichste Lesart von „die Geschwindigkeit selbst bestimmen" und spart
 * die Pausentaste, die ein automatischer Wechsel zwingend bräuchte.
 */

.pvm-quotes__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}

.pvm-quotes__list {
	display: grid;
	gap: var(--pvm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 800px) {
	.pvm-quotes__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--pvm-space-xl);
	}
}

.pvm-quotes__item {
	margin: 0;
	padding: 0;
}

.pvm-quotes__item::before {
	content: none;
}

.pvm-quote {
	height: 100%;
	margin: 0;
	padding: var(--pvm-space-lg);
	background: var(--pvm-surface);
	border-radius: var(--pvm-radius-lg);
	display: flex;
	flex-direction: column;
	gap: var(--pvm-space-md);
}

.pvm-quote__text {
	margin: 0;
	flex: 1;
	padding-left: 0;
	font-size: var(--pvm-text-base);
	line-height: 1.65;
}

/* Die grüne Marke vor einem Zitat gilt dem einzelnen Zitat im Fließtext. In
 * der Wand steht jede Stimme ohnehin in einer eigenen Karte — dort läse sich
 * der Punkt wie ein Aufzählungszeichen.
 */
.pvm-quote__text::before {
	content: none;
}

.pvm-quote__text p:last-child {
	margin-bottom: 0;
}

.pvm-quote__source {
	display: flex;
	align-items: center;
	gap: var(--pvm-space-sm);
	/* Der Absender steht auf einer eigenen Zeile über einer grünen Marke —
	 * dieselbe Form wie auf der Tonspur.
	 */
	padding-top: var(--pvm-space-sm);
	border-top: 1px solid var(--pvm-line);
}

/* Das Porträt trägt die Stimme — es war zu klein.
 *
 * Aimée am 19.08.2026: „So kleine Fotos sind nicht zielführend, man erkennt
 * nichts, bitte größer machen." Von 3,25 rem auf 5 rem.
 */
.pvm-quote__portrait {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}

.pvm-quote__who {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.pvm-quote__name {
	font-size: var(--pvm-text-base);
}

.pvm-quote__role {
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
}

/* ---------- Logo-Abschnitt ---------- */

.pvm-logos {
	margin-block: var(--pvm-space-2xl);
}

.pvm-logos__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}


/* ---------- Telefon und Mail im Fließtext ----------
 * Auf dem Handy sind das die Hauptaktion. Als reine Textlinks waren sie 22 px
 * hoch und rissen damit die 24×24 px aus WCAG 2.2 (2.5.8). Der Innenabstand
 * hebt die Zielfläche, ohne den Zeilenfluss zu sprengen.
 */
a[href^='tel:'],
a[href^='mailto:'] {
	display: inline-block;
	padding-block: var(--pvm-space-3xs);
}

/* ---------- Bildergalerie ----------
 * Schiene mit Einrastpunkten. Das Schieben macht der Browser, die Knöpfe sind
 * Zugabe — deshalb funktioniert die Galerie auch ohne JavaScript.
 */

.pvm-slider {
	margin-block: 0;
}

.pvm-slider__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}

.pvm-slider__viewport {
	/* Bezugsrahmen, nicht Dekoration: In den Slides steht die Bildnummer als
	 * `.screen-reader-text` mit `position: absolute`. Ohne eigenen Bezugsrahmen
	 * hängen die an der Seite statt am Scroll-Feld — und ein Kind, dessen
	 * Bezugsrahmen weiter oben liegt, wird vom Scroll-Feld nicht geklippt.
	 * Gemessen am 21.08.2026 auf `/referenzen/` bei 390 px: Das Dokument war
	 * 2559 px breit und ließ sich ins Weiße nach rechts schieben. `overflow:
	 * hidden` half nicht — nur der Bezugsrahmen. (Juri: „mobil kann ich die
	 * seite referenzen unendlich nach rechts gehen".)
	 */
	position: relative;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
	border-radius: var(--pvm-radius-lg);
}

.pvm-slider__viewport:focus-visible {
	outline: 3px solid var(--pvm-focus);
	outline-offset: 3px;
}

.pvm-slider__track {
	display: flex;
	gap: var(--pvm-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvm-slider__slide {
	flex: 0 0 100%;
	scroll-snap-align: start;
	margin: 0;
	padding: 0;
}

.pvm-slider__slide::before {
	content: none;
}

/* Der Knopf ist nur die Hülle um das Bild: keine Fläche, kein Rahmen. */
.pvm-slider__zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	border-radius: var(--pvm-radius-lg);
	overflow: hidden;
}

.pvm-slider__zoom:disabled {
	cursor: default;
}

.e-con .pvm-slider__zoom img,
.pvm-slider__zoom img {
	display: block;
	width: 100%;
	/* Ein festes Format für alle Motive: Sonst springt die Höhe von Bild zu
	 * Bild, und genau darum ging es in der Rückmeldung.
	 */
	aspect-ratio: 8 / 5;
	object-fit: cover;
	border-radius: var(--pvm-radius-lg);
	transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pvm-slider__zoom:hover img {
	transform: scale(1.02);
}

.pvm-slider__caption {
	margin: var(--pvm-space-sm) 0 0;
	max-width: 68ch;
	font-size: var(--pvm-text-sm);
	color: var(--pvm-text-muted);
}

.pvm-slider__controls {
	display: flex;
	align-items: center;
	gap: var(--pvm-space-md);
	margin-top: var(--pvm-space-lg);
}

.pvm-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--pvm-blue);
	border-radius: 50%;
	background: var(--pvm-white);
	color: var(--pvm-blue);
	font-size: var(--pvm-text-lg);
	line-height: 1;
	cursor: pointer;
	transition: background var(--pvm-transition), color var(--pvm-transition);
}

.pvm-slider__arrow:hover:not(:disabled) {
	background: var(--pvm-blue);
	color: var(--pvm-white);
}

.pvm-slider__arrow:disabled {
	opacity: 0.35;
	cursor: default;
}

.pvm-slider__dots {
	display: flex;
	gap: var(--pvm-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

.pvm-slider__dots li::before {
	content: none;
}

/* Die Zielfläche ist 24 × 24 px groß (WCAG 2.5.8), der sichtbare Punkt kleiner. */
.pvm-slider__dots button {
	width: 1.5rem;
	height: 1.5rem;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
}

.pvm-slider__dots button::after {
	content: '';
	position: absolute;
	inset: 50% auto auto 50%;
	translate: -50% -50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	/* `--pvm-blue-line` wäre hier zu blass: 1,6:1 auf Weiß. Ein Bedienelement,
	 * das seinen Zustand zeigt, braucht 3:1 (WCAG 1.4.11) — dieser Ton steht
	 * bei 3,24:1.
	 */
	background: #6f92b8;
	transition: background var(--pvm-transition), width 200ms ease, height 200ms ease;
}

.pvm-slider__dots button.is-current::after {
	width: 12px;
	height: 12px;
	background: var(--pvm-blue);
}

/* Großansicht. */
.pvm-slider__dialog {
	max-width: min(92vw, 1200px);
	max-height: 92vh;
	padding: var(--pvm-space-md);
	border: 0;
	border-radius: var(--pvm-radius-lg);
	background: var(--pvm-white);
	color: var(--pvm-text);
}

.pvm-slider__dialog::backdrop {
	background: rgb(4 22 45 / 78%);
}

.pvm-slider__dialog img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 76vh;
	object-fit: contain;
	border-radius: var(--pvm-radius);
}

.pvm-slider__dialog-caption {
	margin: var(--pvm-space-sm) 0 0;
	font-size: var(--pvm-text-sm);
	color: var(--pvm-text-muted);
}

.pvm-slider__close {
	position: absolute;
	top: var(--pvm-space-2xs);
	right: var(--pvm-space-2xs);
	width: 2.5rem;
	height: 2.5rem;
	border: 0;
	border-radius: 50%;
	background: var(--pvm-white);
	color: var(--pvm-ink);
	font-size: var(--pvm-text-xl);
	line-height: 1;
	cursor: pointer;
}

@media (min-width: 700px) {
	/* Ab Tablet steht das nächste Bild angeschnitten daneben — das zeigt, dass
	 * die Reihe weitergeht, ohne dass man erst einen Knopf suchen muss.
	 */
	.pvm-slider__slide {
		flex-basis: 78%;
	}
}

@media (min-width: 1000px) {
	.pvm-slider__slide {
		flex-basis: 62%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pvm-slider__zoom img,
	.pvm-slider__dots button::after {
		transition: none;
	}
}

/* ---------- Überschrift als eigenes Widget ----------
 * Seit dem 20.08.2026 ist jede Zwischenüberschrift ein eigener Baustein
 * (Juri: „warum ist alles in textfeld, und nicht ein titel feld und dann ein
 * text feld?"). Elementor bringt für dieses Widget eigene Regeln mit: Es setzt
 * die Farbe aus seinem Kit und nimmt der Überschrift den Außenabstand. Beides
 * muss zurück auf unsere Werte — sonst steht die Überschrift schwarz und klebt
 * am Text darunter.
 */

.e-con .elementor-widget-heading .elementor-heading-title {
	color: var(--pvm-blue);
	font-family: var(--pvm-font-heading);
	line-height: var(--pvm-leading-tight);
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Der Abstand sitzt am Titel selbst, nicht am Widget: Elementor setzt
 * `.elementor-widget-heading .elementor-heading-title { margin: 0 }` und
 * gewinnt sonst.
 */
.e-con .elementor-widget-heading .elementor-heading-title {
	margin-bottom: var(--pvm-space-sm);
}

/* Auf blauem Grund kehrt sich die Farbe um. */
.e-con.pvm-band .elementor-widget-heading .elementor-heading-title,
.pvm-band .elementor-widget-heading .elementor-heading-title {
	color: var(--pvm-on-ground);
}

/* Im Raster der Zweispalter trägt die Überschrift den Abstand zum Text; der
 * Container selbst hat dort keine Zeilenlücke.
 */
.e-con .pvm-split .elementor-widget-heading .elementor-heading-title,
.e-con .pvm-aside .elementor-widget-heading .elementor-heading-title {
	margin-bottom: var(--pvm-space-sm);
}

/* ---------- Runde Ecken, überall ----------
 * Aimée über Claudia am 20.08.2026: die Ecken bitte durchgehend rund. Bilder
 * tauchen in mehreren Bausteinen auf — als Elementor-Widget, im Seitenkopf,
 * auf der Bühne, in Kacheln, Karten und im Slider. Diese Regel fasst sie
 * zusammen, damit keine Fassung vergessen wird.
 *
 * Ausgenommen bleiben zwei: das Kopfbild über die volle Breite (es läuft in
 * die Bildschirmkanten, dort gibt es keine Ecke) und die Logos der Kundenwand
 * (freigestellte Marken ohne eigene Fläche).
 */
.e-con .elementor-widget-image img,
.e-con .pvm-split .elementor-widget-image img,
.pvm-pagehead__media img,
.pvm-stage__media img,
.pvm-tiles__media img,
.pvm-slider__zoom img,
.pvm-person__media img,
.pvm-quote__portrait,
.pvm-gallery img,
.pvm-figure img {
	border-radius: var(--pvm-radius-lg);
}

/* ---------- Partner ----------
 * Logowand mit Zielen. Anders als die Kundenlogos ist hier jedes Logo ein
 * Link — Aimée wünscht die Verlinkung zu Heiko (SEO), Familiencoaching, Klar
 * im Dialog, Liminaltransform, public vision TV und Juri.
 *
 * Fremde Marken stehen in ihren eigenen Farben und in ihrem eigenen
 * Seitenverhältnis: `contain`, kein Filter, keine herabgesetzte Deckkraft.
 */
.pvm-partner {
	margin-block: 0;
}

.pvm-partner__heading {
	margin-bottom: var(--pvm-space-lg);
	text-wrap: balance;
}

/* Identisch zur Kundenlogos-Wand (Juri, 21.08.2026: „mach bitte identisch zu
 * den Kundenlogos"). Dieselben Werte, damit die beiden Reihen untereinander
 * nicht wie zwei verschiedene Bausteine wirken: dasselbe Raster, dieselbe
 * Lücke, dieselbe Logohöhe.
 *
 * Bei sechs Marken und 1200 px Rasterbreite passen sie damit von selbst in
 * eine Zeile — `auto-fill` mit 9 rem ergibt hier sieben Spalten.
 */
.pvm-partner__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--pvm-space-lg);
	align-items: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pvm-partner__item {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	min-height: 4rem;
}

.pvm-partner__item::before {
	content: none;
}

.pvm-partner__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--pvm-space-2xs);
	width: 100%;
	color: var(--pvm-text);
	text-decoration: none;
}

.pvm-partner__link:hover .pvm-partner__media img {
	transform: scale(1.04);
}

.pvm-partner__media {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Wie in der Kundenwand: nur ein Höhendeckel, keine Breitenbegrenzung. Der
 * Regler am Baustein („Größe") zieht ihn bei Bedarf nach.
 */
.pvm-partner__media img {
	max-height: calc(3.25rem * var(--pvm-partner-groesse, 1));
	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	transition: transform var(--pvm-transition);
}

/* Ohne Logodatei steht der Name — besser eine leere Fläche als ein Loch. */
.pvm-partner__ersatz {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.5rem;
	font-weight: 700;
	color: var(--pvm-blue);
	text-align: center;
}

.pvm-partner__text {
	font-size: var(--pvm-text-sm);
	line-height: 1.5;
	color: var(--pvm-text);
}

/* ---------- Partner als Karten ----------
 * Aimée hat am 23.08.2026 die Texte nachgeliefert, die im Widget bis dahin
 * leer standen. Sechs Absätze von je vier bis sechs Zeilen trägt eine Reihe
 * kleiner Logos nicht — sobald Text da ist, wird aus der Wand ein Raster aus
 * Karten: Logo oben, Überschrift, Text, Adresse am Fuß.
 *
 * Zwei Spalten, nicht drei: Die Absätze sind lang genug, dass drei Spalten
 * auf 1200 px je 373 px breit wären — 45 Zeichen pro Zeile, das liest sich
 * wie eine Spalte Kleingedrucktes.
 */
.pvm-partner--karten .pvm-partner__list {
	grid-template-columns: 1fr;
	gap: var(--pvm-space-md);
	align-items: stretch;
}

@media (min-width: 760px) {
	.pvm-partner--karten .pvm-partner__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.pvm-partner--karten .pvm-partner__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: var(--pvm-space-xs);
	min-height: 0;
	padding: var(--pvm-space-lg);
	background: var(--pvm-sand);
	border-radius: var(--pvm-radius-lg);
}

/* Das Logo steht links über dem Text, nicht mittig — eine Karte hat eine
 * Leserichtung, eine Logo-Wand nicht.
 */
.pvm-partner--karten .pvm-partner__media {
	justify-content: flex-start;
	margin-bottom: var(--pvm-space-2xs);
}

.pvm-partner--karten .pvm-partner__media img {
	max-height: calc(2.75rem * var(--pvm-partner-groesse, 1));
}

.pvm-partner--karten .pvm-partner__ersatz {
	justify-content: flex-start;
	min-height: 0;
	text-align: left;
}

.pvm-partner__titel {
	margin: 0;
	font-size: var(--pvm-text-lg);
	line-height: 1.25;
	color: var(--pvm-blue);
	text-wrap: balance;
}

.pvm-partner--karten .pvm-partner__text {
	margin: 0;
	color: var(--pvm-text-muted);
}

/* Die Adresse sitzt am Fuß der Karte, auch wenn der Text darüber kürzer ist
 * als in der Nachbarkarte — sonst steht sie mal hier, mal da.
 */
.pvm-partner__adresse {
	margin: 0;
	margin-top: auto;
	padding-top: var(--pvm-space-2xs);
	font-size: var(--pvm-text-sm);
}

.pvm-partner__ziel {
	color: var(--pvm-link);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Die Adresse ist der einzige Link der Karte — für die Maus deckt sie
 * trotzdem die ganze Fläche ab. So bleibt der Linktext ein Ziel und kein
 * Fließtext, und das Logo ist weiterhin anklickbar.
 */
.pvm-partner__ziel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pvm-partner--karten .pvm-partner__item:hover {
	background: var(--pvm-surface);
}

/* Der Fokusring gehört um die ganze Karte, nicht um die Adresszeile — sonst
 * springt er auf einen Streifen am Kartenfuß.
 */
.pvm-partner--karten .pvm-partner__item:has(.pvm-partner__ziel:focus-visible) {
	outline: 3px solid var(--pvm-focus);
	outline-offset: 2px;
}

.pvm-partner__ziel:focus-visible {
	outline: none;
}

/* Auf blauem Grund dreht sich die Karte um. */
.pvm-band .pvm-partner--karten .pvm-partner__item {
	background: var(--pvm-ground-raised);
}

.pvm-band .pvm-partner__titel {
	color: var(--pvm-on-ground);
}

.pvm-band .pvm-partner--karten .pvm-partner__text {
	color: var(--pvm-on-ground-muted);
}

.pvm-band .pvm-partner__ziel {
	color: var(--pvm-link-on-ground);
}

/* ---------- Kennzeichnung von KI-Bildern ----------
 * Artikel 50 der EU-KI-Verordnung verlangt, dass mit KI erzeugte oder
 * veraenderte Bilder als solche erkennbar sind. Aimee hat am 21.08.2026 acht
 * Motive benannt; der Wortlaut ist der von juri-hoffmann.de.
 *
 * Der Hinweis steht unter dem Bild, klein und ruhig — er ist Beleg, nicht
 * Bildunterschrift. Mute auf Weiss liegt bei 4,6:1.
 */
/* Die Figur darf nichts beschneiden — sonst schneidet ihre Rundung dem
 * Hinweis die Ecken ab. Die Rundung sitzt am Bild selbst.
 */
.pvm-ki figure {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: visible;
	border-radius: 0;
}

.pvm-ki figure img {
	border-radius: var(--pvm-radius-lg);
}

/* Im Zweispalter liegt das Bild absolut in seiner Zelle — die Figur muss deren
 * Höhe übernehmen, sonst fällt das Bild auf seine Naturhöhe zurück und steht
 * als flacher Streifen neben einem langen Text. Genau das ist am 21.08.2026
 * passiert (Juri: „dieses Bild passt nicht … nicht horizontal, weil zu klein").
 *
 * Die Figur füllt also die Zelle, das Bild nimmt darin allen Platz außer dem,
 * den der Hinweis unter ihm braucht.
 */
.pvm-split .pvm-ki figure {
	height: 100%;
}

.pvm-split .pvm-ki figure img {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	width: 100%;
	object-fit: cover;
}

.pvm-ki .elementor-image figcaption,
.pvm-ki figcaption,
.pvm-ki__hinweis {
	margin-top: var(--pvm-space-3xs);
	/* Kein Absatzabstand nach unten: Der Hinweis gehört zum Bild, nicht zum
	 * Text. Als normaler Absatz brachte er 24 px mit und drückte im Seitenkopf
	 * den folgenden Text auseinander (Juri, 21.08.2026: „generiert mir zu viel
	 * Abstand im Text").
	 */
	margin-bottom: 0;
	font-size: var(--pvm-text-sm);
	line-height: 1.4;
	color: var(--pvm-text-muted);
	text-align: left;
	/* „Art. 50 EU-KI-VO" ist eine Fundstelle und bleibt zusammen. */
	text-wrap: balance;
}

/* Auf blauem Grund dreht er sich um. Ink auf Markenblau sind 2,16:1 — der
 * Hinweis stand dort schwarz auf Blau (Juri, 21.08.2026: „in blauen Boxen kann
 * der Text nicht schwarz sein"). `--pvm-on-ground-muted` liegt bei 6,22:1.
 */
.pvm-band .pvm-ki figcaption,
.pvm-band .pvm-ki__hinweis,
.pvm-infobox .pvm-ki figcaption,
.pvm-infobox .pvm-ki__hinweis,
.pvm-block--ki .pvm-ki figcaption,
.pvm-block--ki .pvm-ki__hinweis {
	color: var(--pvm-on-ground-muted);
}

/* ---------- Freigestellte Bilder ----------
 * `Portfolio_Coaching_Training_Schulungen.png` ist ein PNG ohne Hintergrund.
 * In der Kachel auf der Startseite liegt die beige Fläche der Kachel dahinter,
 * auf „Unsere Leistungen" stand es auf Weiß und schwebte. Aimée: „bei Unsere
 * Leistungen kommt das Bild nochmal ohne beige farbenen Hintergrund — kannst
 * du das auch mit Hintergrund machen?" Dieselbe Fläche wie in der Kachel.
 */
.e-con .pvm-freigestellt img {
	background: var(--pvm-surface);
}

/* ---------- Bildausschnitt ----------
 * `object-fit: cover` schneidet aus der Mitte. Bei den drei Kolleginnen am
 * Medienhafen lag der Laptop dadurch außerhalb und die Treppe füllte die
 * rechte Hälfte. Aimée: „Kannst du den Bildausschnitt so machen, dass der
 * Laptop noch zu sehen ist und weniger Treppe?" Das Fenster wandert nach
 * links und leicht nach unten.
 */
.e-con .pvm-ausschnitt-links img {
	object-position: 20% 60%;
}

/* Das Porträt in den Kundenstimmen bleibt rund. */
.pvm-quote__portrait {
	border-radius: 50%;
}

/* Und das randlose Kopfbild bleibt kantig — es hat keine freie Kante. */
.pvm-pagehead--kopfbild .pvm-pagehead__backdrop img {
	border-radius: 0;
}


/* ---------- Gestapelter Abschnitt ----------
 * Überschrift, Bild, Text untereinander — alles auf voller Breite des
 * Containers. Gegenstück zu `pvm-split`.
 *
 * Juri am 21.08.2026 zum blauen Band auf „Coaching": „kannst du den Inhalt in
 * den blauen Kasten auf volle Breite setzen, das Bild über den Text auch
 * gleich breit wie der Text und dann den Text darunter?" Beide betroffenen
 * Abschnitte stehen in `pvm-rail__main` und haben dort 848 px; ein
 * Zweispalter macht daraus zwei Spalten von je gut 400 px.
 */

.e-con.pvm-stack > .elementor-widget-image img,
.e-con.pvm-stack > .e-con-inner > .elementor-widget-image img {
	width: 100%;
	height: auto;
}

/* Die Zeilenlücke des Containers trägt hier den ganzen Abstand — 40 px
 * zwischen Titel, Bild und Text. Der eigene Außenabstand der Überschrift käme
 * sonst obendrauf.
 */
.e-con.pvm-stack .elementor-widget-heading .elementor-heading-title {
	margin-bottom: 0;
}