/*
 * [lsz_auslastung] -- Auslastungskarte der Trainingsflaeche.
 *
 * Hex-Werte statt CSS-Variablen, wie beim Sprungmenue: die Karte soll auch
 * dort stimmen, wo die Seite noch keine --lsz-*-Tokens setzt.
 *
 * Schriftfamilie bewusst nicht gesetzt -- sie erbt vom Theme, damit die Karte
 * einem Font-Wechsel der Seite folgt statt ihn zu ueberstimmen.
 *
 * Die drei Zustandsfarben sind gegen Weiss geprueft: #146B45 = 6,5:1,
 * #8A5200 = 6,4:1, #A3271A = 7,3:1, neutral #4E6377 = 6,2:1. Alle AA.
 * Farbe traegt hier ohnehin keine Information allein -- Wort und Prozentzahl
 * stehen als Text daneben, Balken und Skala sind aria-hidden.
 */

.lsz-baro {
	background: #fff;
	border: 1px solid #DCE5ED;
	border-radius: 12px;
	padding: 26px 28px;
	box-shadow: 0 1px 2px rgba(20, 49, 79, .05), 0 10px 30px -14px rgba(20, 49, 79, .20);
	color: #1B2A3A;
	line-height: 1.5;
}

.lsz-baro-kopf {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 8px 14px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.lsz-baro-kopf h3 {
	font-size: 18px;
	font-weight: 600;
	margin: 0;
	color: #14314F;
}

.lsz-baro-stand {
	font-size: 13.5px;
	color: #4E6377;
	font-variant-numeric: tabular-nums;
}

.lsz-baro-lage {
	display: flex;
	align-items: center;
	gap: 8px 12px;
	flex-wrap: wrap;
	margin: 0 0 13px;
}

.lsz-baro-punkt {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	flex: none;
	background: #4E6377;
}

.lsz-baro-wort {
	font-size: 20px;
	font-weight: 700;
	color: #4E6377;
}

.lsz-baro-proz {
	font-size: 15px;
	color: #4E6377;
	font-variant-numeric: tabular-nums;
}

.lsz-baro-hinweis {
	font-size: 14.5px;
	color: #4E6377;
	margin: 0;
}

.lsz-baro-schiene {
	height: 14px;
	background: #E9EFF5;
	border: 1px solid #DCE5ED;
	border-radius: 7px;
	overflow: hidden;
}

.lsz-baro-fuell {
	height: 100%;
	border-radius: 6px;
	background: #4E6377;
}

.lsz-baro-skala {
	display: flex;
	justify-content: space-between;
	font-size: 12.5px;
	color: #4E6377;
	margin: 7px 0 0;
}

/* --- Zustaende ---------------------------------------------------------- */

.lsz-baro-gut .lsz-baro-wort {
	color: #146B45;
}

.lsz-baro-gut .lsz-baro-punkt,
.lsz-baro-gut .lsz-baro-fuell {
	background: #146B45;
}

.lsz-baro-mittel .lsz-baro-wort {
	color: #8A5200;
}

.lsz-baro-mittel .lsz-baro-punkt,
.lsz-baro-mittel .lsz-baro-fuell {
	background: #8A5200;
}

.lsz-baro-voll .lsz-baro-wort {
	color: #A3271A;
}

.lsz-baro-voll .lsz-baro-punkt,
.lsz-baro-voll .lsz-baro-fuell {
	background: #A3271A;
}

/* Geschlossen und "nicht abrufbar" teilen sich den zurueckhaltenden Ton --
   beides ist kein Zustand der Flaeche, sondern eine Auskunft ueber uns. */
.lsz-baro-neutral .lsz-baro-wort {
	font-size: 18px;
	color: #4E6377;
}

@media (max-width: 480px) {
	.lsz-baro {
		padding: 22px 20px;
	}

	.lsz-baro-wort {
		font-size: 18px;
	}
}

/* --- [lsz_zeiten] ------------------------------------------------------- */
/* Die Tabelle selbst bringt KEIN eigenes Styling mit: sie gibt exakt die
   Klassen aus, die der globale Code-Block von Post 939 schon definiert
   (`.lsz-zeiten.weiss`, `.lsz-zz`, `.lsz-zz .t`). Wuerde das Plugin dieselben
   Klassennamen noch einmal setzen, entschiede die Ladereihenfolge ueber das
   Aussehen -- und es gaebe wieder zwei Stellen fuer eine Sache.
   Hier steht deshalb nur, was die Seite noch nicht kennt. */

.lsz-zeiten-ausnahmen {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}

/* Die weisse Kartenvariante steht auf hellem Grund -- dort braucht die
   Trennlinie den dunklen Ton, sonst ist sie unsichtbar. */
.lsz-zeiten.weiss .lsz-zeiten-ausnahmen {
	border-top-color: #DCE5ED;
}

.lsz-zeiten-ausnahmen-titel {
	font-size: 13px;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 8px;
	color: #8FBEE2;
}

.lsz-zeiten.weiss .lsz-zeiten-ausnahmen-titel {
	color: #1F4E79;
}

/* Nur fuer angemeldete Redakteur:innen sichtbar (s. lsz_zeiten_redaktionshinweis).
   Bewusst auffaellig: ein unlesbares zeiten="..."-Attribut soll auffallen. */
.lsz-zeiten-hinweis {
	background: #FBF0DE;
	border-left: 4px solid #8A5200;
	color: #8A5200;
	font-size: 14.5px;
	padding: 10px 14px;
	margin: 0 0 14px;
	border-radius: 4px;
}