/**
 * clock.css – Wort-Uhr und Datumsanzeige
 *
 * Stile für das Uhr-Gitter, die Wort-Elemente,
 * die aktiven Wörter und die Datumszeile.
 */

/* ---------- Uhr-Container ---------- */

#clockfield {
	text-align: center;
}

#clock {
	text-align: left;
	display: inline-block;
	padding: 2em;
	margin: 1em 3em;
	background: var(--bg-panel);
	color: var(--text-muted);
	border: 1px solid var(--border-color);
	border-radius: .5em;
	font-family: 'Courier New', monospace;
	word-spacing: -1.1em;
	letter-spacing: 0.5em;
	white-space: nowrap;
	transition: var(--theme-transition);
}

/* ---------- Wörter ---------- */

#clock > .word {
	text-align: center;
	text-transform: uppercase;
	font-size: 2em;
	word-spacing: 1em;
	opacity: .1;
	transition: opacity 3s, color 3s, text-shadow 3s;
}

#clock > .word.on {
	opacity: 1;
}

/* ---------- Datumszeile ---------- */

.dates {
	text-align: right;
	text-transform: uppercase;
	font-size: 0.8em;
	font-family: 'Courier New', monospace;
	word-spacing: 0em;
	letter-spacing: .2em;
	white-space: nowrap;
	transition: color 3s;
}

/* ---------- Zeitanzeige ---------- */

.time-display {
	letter-spacing: .15em;
	padding-bottom: 0;
}