/* RMH Wochenraster, Masse und Farben aus Entwurf B (.woche, .woche-raster, .w-lam).
 * Ausgangszustand: alle Geschaeftszeiten leuchten. Gedimmt wird nur unter html.rmh-js (Kopf-Skript:
 * JavaScript laeuft, keine reduzierte Bewegung, nicht im Editor). Das Skript setzt .rmh-wr--licht beim Hereinscrollen.
 * Faellt das Skript aus, setzt der Kopf nach dem Laden html.rmh-notfall, dann leuchtet alles. */
.rmh-wr {
	--rmh-wr-nacht: #1c2125;
	--rmh-wr-text: #ebe9e2;
	--rmh-wr-leise: #b0b7bd;
	--rmh-wr-licht: #f2b544;
	--rmh-wr-licht-tief: #c9861f;
	--rmh-wr-aus: #343b40;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 26px 24px 22px;
	background: var(--rmh-wr-nacht);
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px #343b40;
	color: var(--rmh-wr-text);
	font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
	line-height: 1.6;
}
.rmh-wr *,
.rmh-wr *::before,
.rmh-wr *::after {
	box-sizing: border-box;
}
.rmh-wr .rmh-wr__titel {
	font-style: normal;
	margin: 0 0 16px;
	padding: 0;
	font-family: "Saira Condensed", "Arial Narrow", sans-serif;
	font-weight: 700;
	letter-spacing: 0.01em;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--rmh-wr-text);
}
.rmh-wr .rmh-wr__raster {
	display: grid;
	grid-template-columns: 30px repeat(7, minmax(0, 1fr));
	column-gap: 6px;
	row-gap: 3px;
	font-size: 12px;
	color: var(--rmh-wr-leise);
}
.rmh-wr .rmh-wr__tag {
	text-align: center;
	font-weight: 600;
	color: var(--rmh-wr-text);
	padding-bottom: 6px;
	font-size: 13px;
	line-height: 1.6;
}
.rmh-wr .rmh-wr__std {
	height: 8px;
	line-height: 8px;
	font-size: 12px;
	text-align: right;
	padding-right: 4px;
	font-variant-numeric: tabular-nums;
	color: var(--rmh-wr-leise);
}
.rmh-wr .rmh-wr__lam {
	height: 8px;
	border-radius: 1px;
	background: var(--rmh-wr-aus);
}
.rmh-wr .rmh-wr__lam--an {
	background: linear-gradient(180deg, #ffd27a, var(--rmh-wr-licht) 60%, var(--rmh-wr-licht-tief));
}
/* Mit Skript: erst gedimmt, dann leuchten die Lamellen versetzt auf */
html.rmh-js:not(.rmh-notfall) .rmh-wr .rmh-wr__lam--an {
	transition: opacity 260ms ease;
	transition-delay: calc(var(--i, 0) * 45ms);
}
html.rmh-js:not(.rmh-notfall) .rmh-wr:not(.rmh-wr--licht) .rmh-wr__lam--an {
	opacity: 0.12;
}
.rmh-wr .rmh-wr__legende {
	list-style: none;
	padding: 0;
	margin: 18px 0 0;
	display: grid;
	gap: 6px;
	font-size: 14.4px;
	line-height: 1.6;
	color: #cfcbc2;
}
.rmh-wr .rmh-wr__legende li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rmh-wr .rmh-wr__legende span {
	width: 26px;
	height: 8px;
	border-radius: 1px;
	flex: none;
}
.rmh-wr .rmh-wr__l-an { background: var(--rmh-wr-licht); }
.rmh-wr .rmh-wr__l-aus { background: var(--rmh-wr-aus); box-shadow: inset 0 0 0 1px #59626a; }
/* Text-Alternative fuer Screenreader: Zeiten je Tag */
.rmh-wr .rmh-wr__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	list-style: none;
}
@media (max-width: 600px) {
	.rmh-wr { padding: 20px 14px; }
	.rmh-wr .rmh-wr__raster { column-gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
	html.rmh-js .rmh-wr .rmh-wr__lam--an { opacity: 1; transition: none; }
}