/**
 * PBV Limburg – Raster mit Badges
 *
 * Farbschema über .pbv-raster--dark / --light / --auto.
 * Die Trennlinien entstehen über gap:1px auf dem Rail-Hintergrund.
 */

/* ---------------------------------------------------------------- Farben - */

.pbv-raster {
	--pbv-raster-min: 220px;
	--pbv-blue: #00a2ea;
}

.pbv-raster--dark,
.pbv-raster--auto {
	--pbv-rahmen: #1e2a35;
	--pbv-linie: #0a0e12;
	--pbv-zelle: #111820;
	--pbv-text: #edf2f6;
	--pbv-muted: #8c99a5;
	--pbv-badge-neutral-bg: #263341;
	--pbv-badge-neutral-fg: #edf2f6;
	--pbv-badge-blau-bg: #00a2ea;
	--pbv-badge-blau-fg: #06121a;
	--pbv-badge-gruen-bg: #4ade80;
	--pbv-badge-gruen-fg: #06210f;
	--pbv-badge-rot-bg: #f87171;
	--pbv-badge-rot-fg: #260808;
	--pbv-badge-gelb-bg: #fbbf24;
	--pbv-badge-gelb-fg: #241a02;
}

.pbv-raster--light {
	--pbv-rahmen: #d8dfe5;
	--pbv-linie: #e4e9ee;
	--pbv-zelle: #ffffff;
	--pbv-text: #101820;
	--pbv-muted: #56636e;
	--pbv-badge-neutral-bg: #e8edf2;
	--pbv-badge-neutral-fg: #26323d;
	--pbv-badge-blau-bg: #0a7fba;
	--pbv-badge-blau-fg: #ffffff;
	--pbv-badge-gruen-bg: #15803d;
	--pbv-badge-gruen-fg: #ffffff;
	--pbv-badge-rot-bg: #b91c1c;
	--pbv-badge-rot-fg: #ffffff;
	--pbv-badge-gelb-bg: #a16207;
	--pbv-badge-gelb-fg: #ffffff;
}

@media (prefers-color-scheme: light) {
	.pbv-raster--auto {
		--pbv-rahmen: #d8dfe5;
		--pbv-linie: #e4e9ee;
		--pbv-zelle: #ffffff;
		--pbv-text: #101820;
		--pbv-muted: #56636e;
		--pbv-badge-neutral-bg: #e8edf2;
		--pbv-badge-neutral-fg: #26323d;
		--pbv-badge-blau-bg: #0a7fba;
		--pbv-badge-blau-fg: #ffffff;
		--pbv-badge-gruen-bg: #15803d;
		--pbv-badge-gruen-fg: #ffffff;
		--pbv-badge-rot-bg: #b91c1c;
		--pbv-badge-rot-fg: #ffffff;
		--pbv-badge-gelb-bg: #a16207;
		--pbv-badge-gelb-fg: #ffffff;
	}
}

/* ---------------------------------------------------------------- Aufbau - */

.pbv-raster {
	margin: 1.6em 0 2.2em;
	color: var(--pbv-text);
	font-family: inherit;
}

.pbv-raster .pbv-raster__titel {
	margin: 0 0 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--pbv-muted);
	line-height: 1.3;
}

.pbv-raster .pbv-raster__liste {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--pbv-zelle);
	border: 1px solid var(--pbv-rahmen);
	border-radius: 3px;
	overflow: hidden;
}

.pbv-raster--spauto .pbv-raster__liste {
	grid-template-columns: repeat(auto-fill, minmax(var(--pbv-raster-min), 1fr));
}

.pbv-raster--sp1 .pbv-raster__liste {
	grid-template-columns: 1fr;
}

.pbv-raster--sp2 .pbv-raster__liste {
	grid-template-columns: repeat(2, 1fr);
}

.pbv-raster--sp3 .pbv-raster__liste {
	grid-template-columns: repeat(3, 1fr);
}

.pbv-raster--sp4 .pbv-raster__liste {
	grid-template-columns: repeat(4, 1fr);
}

.pbv-raster--sp5 .pbv-raster__liste {
	grid-template-columns: repeat(5, 1fr);
}

.pbv-raster--sp6 .pbv-raster__liste {
	grid-template-columns: repeat(6, 1fr);
}

.pbv-raster .pbv-raster__zelle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 52px;
	margin: 0;
	padding: 11px 16px;
	list-style: none;
	background: var(--pbv-zelle);
	/* Zeichnet die Trennlinien. Ueberlappt die Nachbarzellen um 1px und wird
	   am Rand durch overflow:hidden der Liste abgeschnitten. Leere Gitter-
	   plaetze in der letzten Zeile bleiben dadurch unsichtbar. */
	outline: 1px solid var(--pbv-linie);
}

.pbv-raster .pbv-raster__zelle::before {
	content: none;
}

.pbv-raster .pbv-raster__inhalt {
	min-width: 0;
}

.pbv-raster .pbv-raster__text {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--pbv-text);
	overflow-wrap: anywhere;
}

.pbv-raster .pbv-raster__text a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--pbv-blue);
}

.pbv-raster .pbv-raster__text a:hover,
.pbv-raster .pbv-raster__text a:focus {
	color: var(--pbv-blue);
}

.pbv-raster .pbv-raster__sub {
	display: block;
	margin-top: 1px;
	font-size: 12.5px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--pbv-muted);
}

.pbv-raster a:focus-visible {
	outline: 2px solid var(--pbv-blue);
	outline-offset: 2px;
	position: relative;
	z-index: 1;
}

/* Badges */

.pbv-raster .pbv-raster__badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 4px;
	flex: 0 0 auto;
}

.pbv-raster .pbv-raster__badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.45;
	white-space: nowrap;
}

.pbv-raster .pbv-raster__badge--blau {
	background: var(--pbv-badge-blau-bg);
	color: var(--pbv-badge-blau-fg);
}

.pbv-raster .pbv-raster__badge--neutral {
	background: var(--pbv-badge-neutral-bg);
	color: var(--pbv-badge-neutral-fg);
}

.pbv-raster .pbv-raster__badge--gruen {
	background: var(--pbv-badge-gruen-bg);
	color: var(--pbv-badge-gruen-fg);
}

.pbv-raster .pbv-raster__badge--rot {
	background: var(--pbv-badge-rot-bg);
	color: var(--pbv-badge-rot-fg);
}

.pbv-raster .pbv-raster__badge--gelb {
	background: var(--pbv-badge-gelb-bg);
	color: var(--pbv-badge-gelb-fg);
}

/* ------------------------------------------- Enfold-Spezifitaet schlagen - */

#top .pbv-raster .pbv-raster__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

#top .pbv-raster .pbv-raster__zelle {
	margin: 0;
	padding: 11px 16px;
	list-style: none;
	background: var(--pbv-zelle);
	border: 0;
	outline: 1px solid var(--pbv-linie);
}

#top .pbv-raster .pbv-raster__zelle::before {
	content: none;
}

#top .pbv-raster .pbv-raster__text,
#top .pbv-raster .pbv-raster__sub {
	display: block;
}

#top .pbv-raster .pbv-raster__text a {
	text-decoration: none;
}

/* ----------------------------------------------------------------- Mobil - */

@media (max-width: 600px) {
	.pbv-raster .pbv-raster__liste,
	.pbv-raster--spauto .pbv-raster__liste,
	.pbv-raster--sp2 .pbv-raster__liste,
	.pbv-raster--sp3 .pbv-raster__liste,
	.pbv-raster--sp4 .pbv-raster__liste,
	.pbv-raster--sp5 .pbv-raster__liste,
	.pbv-raster--sp6 .pbv-raster__liste {
		grid-template-columns: 1fr;
	}
}

/* ----------------------------------------------------------------- Druck - */

@media print {
	.pbv-raster .pbv-raster__liste,
	#top .pbv-raster .pbv-raster__zelle {
		background: none !important;
		color: #000;
	}

	.pbv-raster .pbv-raster__liste {
		border-color: #999;
	}

	.pbv-raster .pbv-raster__text,
	.pbv-raster .pbv-raster__sub {
		color: #000 !important;
	}

	.pbv-raster .pbv-raster__badge {
		background: none !important;
		color: #000 !important;
		border: 1px solid #999;
	}
}