/* PV Care – Verschmutzungs-Check
   Farben und Schriften kommen aus der Kadence-Palette. Die Rueckfallwerte
   entsprechen den tatsaechlich gesetzten Slots, damit der Check auch dann
   richtig aussieht, wenn die Variablen einmal nicht geladen werden.
   Rundung, Rahmenfarbe und Abstaende sind von den neun Leistungskacheln
   auf der Startseite uebernommen. */

.pvc {
	--pvc-rahmen: var(--global-palette7, #D8DEE7);
	--pvc-flaeche: var(--global-palette9, #FFFFFF);
	--pvc-grund: var(--global-palette8, #F2F5F9);
	--pvc-text: var(--global-palette3, #0C193B);
	--pvc-text-leise: var(--global-palette5, #3D4759);
	--pvc-akzent: var(--global-palette1, #2A4D8B);
	--pvc-radius: 12px;
	--pvc-abstand: 2rem;

	color: var(--pvc-text);
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;

	/* Kadence setzt `.entry-content { word-break: break-word }` in
	   global.min.css. Das ist eine vererbte Eigenschaft und traf damit auch
	   den Check — „Landwirtschaft“ brach dann mitten im Wort um. Eine Regel,
	   die ein Element direkt trifft, schlaegt jeden geerbten Wert, ganz ohne
	   Spezifitaetsstreit oder !important. Umbruch zwischen zwei Woertern
	   bleibt erlaubt, nur innerhalb eines Wortes nicht mehr. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

/* ---------------------------------------------------------------- Kopf */

.pvc__kopf {
	margin-bottom: 28px;
}

.pvc__zaehler {
	margin: 0 0 10px;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pvc-text-leise);
}

.pvc__balken {
	height: 6px;
	border-radius: 3px;
	background: var(--pvc-rahmen);
	overflow: hidden;
}

.pvc__balken-fuellung {
	height: 100%;
	width: 20%;
	border-radius: 3px;
	background: var(--pvc-akzent);
	transition: width 0.25s ease;
}

/* -------------------------------------------------------------- Fragen */

.pvc__titel {
	margin: 0 0 20px;
	font-size: 24px;
	line-height: 1.3;
	color: var(--pvc-text);
}

/* Die Spaltenzahl kommt aus der tatsaechlichen Anzahl der Antworten, die
   PHP als data-anzahl ausgibt. Frueher stand hier auto-fit mit einer
   Mindestbreite — das liess vier Kacheln auf 3+1 umbrechen, sobald die
   Mindestbreite nicht mehr viermal in die Zeile passte. Eine feste
   Spaltenzahl kann das nicht. Die Zeilen eines Grids sind ohnehin gleich
   hoch, dafuer ist nichts weiter noetig. */
.pvc__kacheln {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--pvc-abstand);
}

.pvc__kacheln[data-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pvc__kacheln[data-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pvc__kacheln[data-anzahl="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.pvc__kachel {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 16px 14px;
	font: inherit;
	font-size: 17px;
	/* Gilt schon ueber die Vererbung von `.pvc`, hier noch einmal ausdruecklich:
	   die Kacheln sind die Stelle, an der der Umbruch aufgefallen ist. */
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
	/* Kadence setzt in seinem Inline-CSS `text-transform: capitalize` auf den
	   nackten button-Selektor. Die Kurzschreibweise `font` enthaelt
	   text-transform nicht und hebt es deshalb nicht auf — im Deutschen wuerde
	   sonst „15 Bis 30 Grad“ dastehen. Klassenselektor schlaegt Elementselektor,
	   die Regel greift also ohne !important. */
	text-transform: none;
	line-height: 1.35;
	text-align: center;
	color: var(--pvc-text);
	background: var(--pvc-flaeche);
	border: 1px solid var(--pvc-rahmen);
	border-radius: var(--pvc-radius);
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pvc__kachel:hover {
	border-color: var(--pvc-akzent);
}

.pvc__kachel[aria-pressed="true"] {
	background: var(--pvc-akzent);
	border-color: var(--pvc-akzent);
	color: #FFFFFF;
}

.pvc__kachel:focus-visible {
	outline: 2px solid var(--pvc-akzent);
	outline-offset: 3px;
}

/* Die Ueberschrift wird beim Wechsel programmatisch fokussiert, damit
   Tastatur- und Screenreader-Nutzer der neuen Frage folgen. Sie ist kein
   Bedienelement, deshalb kein sichtbarer Fokusring — sonst saehe es wieder
   aus wie eine Markierung. */
.pvc__titel:focus {
	outline: none;
}

/* --------------------------------------------------------- Navigation */

.pvc__navigation {
	display: flex;
	gap: 12px;
	margin-top: 28px;
}

.pvc__knopf {
	padding: 12px 26px;
	font: inherit;
	font-size: 16px;
	border-radius: var(--pvc-radius);
	border: 1px solid var(--pvc-akzent);
	cursor: pointer;
	text-transform: none;
	transition: opacity 0.15s ease;
}

.pvc__knopf--zurueck {
	background: transparent;
	color: var(--pvc-akzent);
}

.pvc__knopf[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}

.pvc__knopf:focus-visible {
	outline: 2px solid var(--pvc-akzent);
	outline-offset: 3px;
}

/* ----------------------------------------------------------- Ergebnis */

.pvc__ergebnis {
	border-left: 5px solid var(--pvc-stufe, var(--pvc-akzent));
	border-radius: 0 var(--pvc-radius) var(--pvc-radius) 0;
	background: var(--pvc-stufe-flaeche, var(--pvc-grund));
	padding: 28px 30px;
	color: var(--pvc-text);
}

.pvc__ergebnis h2 {
	margin: 0 0 14px;
	font-size: 26px;
	line-height: 1.25;
	color: var(--pvc-text);
}

.pvc__ergebnis p {
	margin: 0 0 18px;
	color: var(--pvc-text);
}

.pvc__ergebnis h3 {
	margin: 26px 0 12px;
	font-size: 18px;
	color: var(--pvc-text);
}

.pvc__angaben {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pvc-rahmen);
}

.pvc__angaben li {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pvc-rahmen);
	font-size: 16px;
}

.pvc__angaben .pvc__angabe-frage {
	flex: 1 1 260px;
	color: var(--pvc-text-leise);
}

.pvc__angaben .pvc__angabe-wert {
	font-weight: 600;
}

.pvc__textlink {
	display: inline;
	padding: 0;
	font: inherit;
	color: var(--pvc-akzent);
	background: none;
	border: 0;
	border-bottom: 1px solid currentColor;
	cursor: pointer;
	text-transform: none;
}

.pvc__abschluss {
	margin: 22px 0 0;
}

/* ----------------------------------------------------------- Formular */

.pvc__formular {
	margin-top: 32px;
}

.pvc__neustart {
	margin-top: 24px;
	font-size: 15px;
}

.pvc__hinweis {
	padding: 18px 20px;
	border: 1px solid var(--pvc-rahmen);
	border-radius: var(--pvc-radius);
	background: var(--pvc-grund);
}

/* Ab Tablet abwaerts durchgehend zwei Spalten, unabhaengig von der
   Antwortzahl. Bei drei Antworten steht die dritte dann allein in der
   zweiten Zeile — das ist gewollt und besser lesbar als drei sehr schmale
   Kacheln nebeneinander. */
@media (max-width: 1024px) {
	.pvc {
		--pvc-abstand: 16px;
	}

	.pvc__kacheln,
	.pvc__kacheln[data-anzahl="2"],
	.pvc__kacheln[data-anzahl="3"],
	.pvc__kacheln[data-anzahl="4"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.pvc {
		--pvc-abstand: 12px;
	}

	/* 15 px statt 16: bei 320 px Fensterbreite bleiben in einer Kachel rund
	   110 px Textbreite. „Landwirtschaft“ misst in Fira Sans 108 px bei 16 px
	   und 101 px bei 15 px — zwei Pixel Luft sind zu knapp, neun sind
	   belastbar. Tiefer als 15 px geht es laut Vorgabe nicht. */
	.pvc__kachel {
		padding: 14px 10px;
		font-size: 15px;
	}

	.pvc__titel {
		font-size: 21px;
	}

	.pvc__ergebnis {
		padding: 22px 20px;
	}
}

/* Ueberschrift und Einleitung des Checks, im Seiteninhalt ausgezeichnet.
   Sobald das Ergebnis erscheint, setzt das Skript hidden — beide erklaeren
   nur, was der Check tut. Die Regel ist eine Absicherung: [hidden] schlaegt
   als Attributselektor zwar jede Elementregel des Themes, aber nicht eine
   Klassenregel auf .wp-block-heading. Mit !important bleibt es dabei. */
.pv-check-intro[hidden] {
	display: none !important;
}