/**
 * Gemeinsames Kartendesign von Morgestraich-Countdown und
 * Morgestraich-Rechner (Modul "Morgestraich").
 *
 * Beide Widgets sind gleich hohe, weisse Karten mit gerundeten Ecken und
 * Schatten; der Countdown und der Rechner im Design "dunkel" haben ausserdem
 * denselben dunklen Kopf. Masse und Farben stehen hier einmal als
 * CSS-Variablen, die beiden Stylesheets (morgenstreich-countdown.css,
 * morgenstraich-style.css) greifen darauf zu. Eine Änderung (z.B. die Höhe)
 * gilt damit für beide Karten und sie bleiben nebeneinander exakt gleich.
 *
 * Diese Datei wird vor den beiden anderen geladen (Abhängigkeit beim
 * Registrieren, siehe morgestraich.php).
 */

.fasn8-ms-wrapper,
.fasn8-mr-wrapper {
	--fasn8-karte-hoehe: 170px;
	--fasn8-karte-radius: 16px;
	--fasn8-karte-hintergrund: #ffffff;
	--fasn8-karte-schatten: 0 2px 14px rgba(0, 0, 0, 0.07);

	--fasn8-kopf-hintergrund: #10171f;
	--fasn8-kopf-abstand: 14px 20px;
	--fasn8-kopf-luecke: 3px;
	--fasn8-kopf-label-farbe: #9fb6c4;
	--fasn8-kopf-label-groesse: 12px;
	--fasn8-kopf-titel-farbe: #ff7a33;
	--fasn8-kopf-titel-groesse: 16px;
	--fasn8-kopf-titel-gewicht: 700;

	/* Fest 170px statt min-height: mit min-height konnte der natürliche
	   Inhalt der Zustände (Countdown: Normal/"Fasnacht", Rechner:
	   Formular/Resultat) um 1-2px voneinander abweichen, was beim Umschalten
	   einen minimalen Sprung im nachfolgenden Seiteninhalt verursachte. Mit
	   fester Höhe ist die Karte in allen Zuständen und bei beiden Widgets
	   exakt gleich hoch. */
	height: var(--fasn8-karte-hoehe);
	margin: 1em 0;
	background: var(--fasn8-karte-hintergrund);
	border-radius: var(--fasn8-karte-radius);
	overflow: hidden;
	box-shadow: var(--fasn8-karte-schatten);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}