/**
 * Scoreboard-Design (2026-10-17): dunkler Kopfbereich (Label +
 * Hervorhebung) plus vier Kacheln (Tage/Std/Min/Sek). Ersetzt die
 * frueheren sechs Layout-Varianten (inline/stacked/hero/mini/...) und
 * das vage transluzente Grau -- siehe WORKLOG fuer die Design-
 * Entscheidung.
 */

/* Die Karte (Höhe, Rundung, Schatten, Hintergrund) und die Kopf-Masse/-Farben
   stehen als gemeinsame Variablen in morgestraich-karte.css, damit Countdown
   und Rechner gleich bleiben. Typografie bleibt bewusst bei der im
   Design-Vorschlag "Scoreboard" verwendeten Groesse, der zusaetzliche Raum
   der festen Karte wird als Weissraum verteilt statt die Schrift zu
   vergroessern -- seit 1.4.6 aber NUR in den Kacheln (siehe
   .fasn8-ms-tiles), der dunkle Kopf sitzt buendig am oberen Rand. Vorher
   zentrierte der ganze Inhalt (Kopf + Kacheln = ca. 165px) in der
   170px-Karte: oben blieb ein weisser Streifen von ca. 2.5px, der schwarze
   Kopf begann tiefer als beim gleich hohen Morgestraich-Rechner im Design
   "Dunkler Kopf" daneben (Ivo, 2026-10-23). */

/* Fuellt die Karte: Kopf bleibt oben (flex:none), die Kacheln nehmen den
   Rest und zentrieren ihren Inhalt darin. */
.fasn8-ms-countdown {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

.fasn8-ms-header {
	flex: none;
	background: var(--fasn8-kopf-hintergrund);
	/* overflow:hidden auf .fasn8-ms-wrapper allein clippt die eckige
	   Kopf-Box an den oberen Kartenecken nicht immer sauber (sichtbarer
	   Rendering-Artefakt bei 16px Radius) -- Radius hier zusaetzlich
	   explizit passend zur Karte gesetzt. */
	border-radius: var(--fasn8-karte-radius) var(--fasn8-karte-radius) 0 0;
	padding: var(--fasn8-kopf-abstand);
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--fasn8-kopf-luecke);
}

.fasn8-ms-header__label {
	margin: 0;
	font-size: var(--fasn8-kopf-label-groesse);
	color: var(--fasn8-kopf-label-farbe);
}

.fasn8-ms-header__highlight {
	margin: 0;
	font-size: var(--fasn8-kopf-titel-groesse);
	font-weight: var(--fasn8-kopf-titel-gewicht);
	color: var(--fasn8-kopf-titel-farbe);
}

/* Zustand "Fasnacht": die Botschaft fuehrt (groesser/kraeftiger, zuerst),
   der erklaerende Text folgt darunter -- umgekehrte Reihenfolge und
   Gewichtung gegenueber dem Normalzustand, siehe Design-Vorschlag
   "Countdown-Final" (Zustand "Fasnacht"). Per order statt vertauschtem
   Markup, damit JS weiterhin nur in die beiden festen Elemente schreibt. */
.fasn8-ms-header--fasnacht .fasn8-ms-header__highlight {
	order: -1;
	font-size: 17px;
	font-weight: 800;
}

.fasn8-ms-tiles {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	padding: 0 16px;
}

.fasn8-ms-tile {
	flex: 1;
	min-width: 0;
	text-align: center;
}

.fasn8-ms-tile + .fasn8-ms-tile {
	border-left: 1px solid #ededeb;
}

.fasn8-ms-tile__num {
	margin: 0;
	font-size: 26px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

.fasn8-ms-tile--seconds .fasn8-ms-tile__num {
	color: #ff5700;
}

.fasn8-ms-tile__label {
	margin: 2px 0 0;
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #707070;
}

/* Block-Editor-Vorschau (siehe morgenstreich-block.js): gleiches Markup
   wie im Frontend, braucht darum keine eigenen Regeln mehr ausser dem
   gestrichelten Rahmen zur Orientierung im Editor-Canvas. */
.fasn8-ms-block-preview {
	outline: 1px dashed #ccc;
	outline-offset: 2px;
}