/* Grundlagen: Reset, Typografie, Links, Fokus, Layout-Hilfen. */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Verhindert, dass Ankersprünge unter dem fixierten Header landen. */
	scroll-padding-top: calc(var(--pvm-header-height) + var(--pvm-space-sm));
}

body {
	margin: 0;
	background: var(--pvm-bg);
	color: var(--pvm-text);
	font-family: var(--pvm-font-body);
	font-size: var(--pvm-text-base);
	line-height: var(--pvm-leading-normal);
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* ---------- Überschriften ---------- */

/* Überschriften tragen Markenblau, nicht Ink. Aimée am 18.08.2026: „Die Heads
 * bitte nicht in Schwarz, sondern Blau oder Grün." Grün scheidet aus — es hat
 * auf Weiß 1,91:1 und reißt selbst die 3:1-Grenze für große Schrift. Blau
 * steht bei 8,05:1 und ist die Farbe, die auf dieser Seite ohnehin führt.
 */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--pvm-space-sm);
	font-family: var(--pvm-font-heading);
	font-weight: 700;
	line-height: var(--pvm-leading-tight);
	text-wrap: balance;
	color: var(--pvm-blue);
	/* Deutsche Komposita sind länger als jede Spalte, die wir setzen können:
	 * „Geschäfts-/Nachhaltigkeitsbericht" misst in einer 760-px-Spalte 789 px
	 * und lief am 19.08.2026 rechts aus dem blauen Block und unter das
	 * Verzeichnis. `hyphens` trennt sie (die Seite ist als `lang="de"`
	 * ausgezeichnet), `overflow-wrap` ist der Notnagel, wenn keine Trennstelle
	 * passt.
	 */
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Fließtext, Aufzählungen und Links brechen ebenfalls, statt zu überstehen —
 * ohne Trennstriche, die gehören dem Satzbild der Überschriften.
 */
p, li, a, dd, dt, figcaption {
	overflow-wrap: break-word;
}

/* Onest steht enger als Bricolage und braucht deshalb kaum negative Laufweite.
 * Die vorherigen Werte (-0,02 bis -0,03 em) waren auf die weite Display-Schrift
 * gerechnet und ließen die Zwischentitel gedrängt wirken.
 */
h1 { font-size: var(--pvm-text-4xl); letter-spacing: -0.01em; }
h2 { font-size: var(--pvm-text-3xl); letter-spacing: -0.005em; }
h3 { font-size: var(--pvm-text-2xl); letter-spacing: 0; }
h4 { font-size: var(--pvm-text-xl); }
h5 { font-size: var(--pvm-text-lg); }
h6 { font-size: var(--pvm-text-base); text-transform: uppercase; letter-spacing: 0.06em; }

/* `text-wrap: pretty` stand hier bis zum 21.08.2026. Es verhindert
 * Schusterjungen, indem der Browser die letzten Zeilen eines Absatzes enger
 * setzt — bei kurzen Absätzen wandert dadurch der ganze Flattersatz nach
 * innen. Aimée am 21.08.2026 zum Kasten „Geschäfts-/Nachhaltigkeitsbericht":
 * „im oberen Absatz eine schmalere Laufweite als im 2. Absatz. Bitte
 * angleichen." Gemessen waren beide Kästen 736 px breit — der Unterschied kam
 * allein aus dem Umbruch. Absätze brechen jetzt normal, Überschriften behalten
 * ihr `balance`.
 */
p {
	margin: 0 0 var(--pvm-space-sm);
}

/* ---------- Links ---------- */

a {
	color: var(--pvm-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover {
	color: var(--pvm-link-hover);
	text-decoration-thickness: 2px;
}

/* ---------- Fokus ----------
 * Nie entfernen, nur gestalten. Der Ring muss mindestens 3:1 gegen den
 * Hintergrund haben — deshalb Blau plus weißer Zwischenraum, damit er auch
 * auf farbigen Flächen sichtbar bleibt.
 */

:focus-visible {
	outline: 3px solid var(--pvm-focus);
	outline-offset: 2px;
	border-radius: var(--pvm-radius-sm);
}

/* Auf blauen und grünen Flächen kehrt sich der Ring um. */
.pvm-on-blue :focus-visible,
.pvm-on-green :focus-visible {
	outline-color: var(--pvm-focus-inverse);
}

/* ---------- Bilder und Medien ---------- */

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

figure {
	margin: 0 0 var(--pvm-space-md);
}

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

/* ---------- Listen ---------- */

ul, ol {
	margin: 0 0 var(--pvm-space-sm);
	padding-left: 1.4em;
}

li + li {
	margin-top: var(--pvm-space-3xs);
}

/* Zitate tragen dieselbe Marke wie die Tonspur: ein gesetzter Punkt, keine
 * farbige Randleiste. Die Leiste wäre hier nur Dekoration.
 */
blockquote {
	position: relative;
	margin: var(--pvm-space-lg) 0;
	padding-left: var(--pvm-space-lg);
	font-size: var(--pvm-text-lg);
	line-height: 1.5;
}

blockquote::before {
	content: '';
	position: absolute;
	top: 0.62em;
	left: 0;
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--pvm-green);
}

hr {
	height: 1px;
	margin: var(--pvm-space-xl) 0;
	border: 0;
	background: var(--pvm-line);
}

/* ---------- Formularelemente ---------- */

input,
textarea,
select,
button {
	font: inherit;
	color: inherit;
}

label {
	display: block;
	margin-bottom: var(--pvm-space-3xs);
	font-weight: 600;
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='url'],
input[type='search'],
textarea,
select {
	width: 100%;
	padding: var(--pvm-space-2xs) var(--pvm-space-xs);
	border: 2px solid var(--pvm-line);
	border-radius: var(--pvm-radius-sm);
	background: var(--pvm-white);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--pvm-blue);
}

/* Pflichtfeldmarkierung nie nur über Farbe. */
.pvm-required {
	font-weight: 700;
}

/* ---------- Buttons ---------- */

.pvm-button,
.wp-block-button__link {
	display: inline-block;
	padding: var(--pvm-space-2xs) var(--pvm-space-md);
	border: 2px solid var(--pvm-blue);
	border-radius: var(--pvm-radius);
	background: var(--pvm-blue);
	color: var(--pvm-white);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--pvm-transition), border-color var(--pvm-transition);
}

.pvm-button:hover,
.wp-block-button__link:hover {
	background: var(--pvm-blue-dark);
	border-color: var(--pvm-blue-dark);
	color: var(--pvm-white);
}

.pvm-button--ghost {
	background: transparent;
	color: var(--pvm-blue);
}

.pvm-button--ghost:hover {
	background: var(--pvm-blue);
	color: var(--pvm-white);
}

/* ---------- Layout-Hilfen ---------- */

/* Die Randspalte liegt außerhalb der Rasterbreite, nicht innerhalb. Nur so
 * steht der Text im Theme (Header, Fußzeile, Bühne) auf derselben Kante wie
 * der Text in Elementors Containern — sonst laufen die beiden Raster 40 px
 * auseinander.
 */
.pvm-container {
	width: 100%;
	max-width: calc(var(--pvm-container) + 2 * var(--pvm-gutter));
	margin-inline: auto;
	padding-inline: var(--pvm-gutter);
}

.pvm-prose {
	max-width: var(--pvm-container-text);
}

/* Impressum und Datenschutz laufen über die volle Rasterbreite (Juri,
 * 21.08.2026). Es sind Nachschlagetexte, keine Lesestrecken: Man sucht darin
 * eine Angabe, statt sie von oben nach unten zu lesen, und die kurze Satzbreite
 * macht sie vor allem lang.
 */
.pvm-seite-impressum .pvm-prose,
.pvm-seite-datenschutz .pvm-prose {
	max-width: none;
}

.pvm-section {
	padding-block: var(--pvm-space-2xl);
}

/* ---------- Nur für Screenreader ----------
 * Sichtbar, sobald das Element den Fokus bekommt (Skip-Link).
 */

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

.pvm-skip-link {
	position: absolute;
	top: 0;
	left: var(--pvm-space-sm);
	z-index: 999;
	padding: var(--pvm-space-2xs) var(--pvm-space-sm);
	background: var(--pvm-blue);
	color: var(--pvm-white);
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 var(--pvm-radius) var(--pvm-radius);
	transform: translateY(-100%);
	transition: transform var(--pvm-transition);
}

.pvm-skip-link:focus {
	transform: translateY(0);
	color: var(--pvm-white);
}

/* ---------- Flächen ----------
 * Auf Grün steht immer dunkle Schrift (9,1:1). Das ist die einzige
 * zulässige Verwendung der Markenfarbe Grün.
 */

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

.pvm-on-green a {
	color: var(--pvm-ink);
	text-decoration-thickness: 2px;
}

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

.pvm-on-blue a,
.pvm-on-blue h1,
.pvm-on-blue h2,
.pvm-on-blue h3 {
	color: var(--pvm-white);
}

/* Der Markenname bleibt als Einheit stehen und bricht nie über zwei Zeilen.
 * Innerhalb der Einheit darf weiterhin umbrochen werden, wenn sie sonst aus
 * dem Bild liefe — deshalb nowrap nur ab der Breite, an der sie sicher passt.
 */
.pvm-brand {
	white-space: nowrap;
}

@media (max-width: 380px) {
	.pvm-brand {
		white-space: normal;
	}
}