/**
 * BR Countdown – Frontend und Editor-Vorschau.
 *
 * Der Block sitzt auf ganz normalen Seiten und kennt die Farben des Themes
 * nicht. Deshalb erbt er Textfarbe und Schrift und mischt Fläche und Rahmen
 * aus `currentColor`: dieselbe Regel sieht auf dunklem wie auf hellem Grund
 * richtig aus, ohne dass irgendwo eine Markenfarbe fest im Blatt steht.
 * Gewählt werden kann im Blockmenü nur die Farbe der Ziffern.
 *
 * Einzige Ausnahme von „alles erbt vom Theme“: die Ziffern stehen in der
 * HVD Bodedo aus Adobe Fonts. Sie gilt bewusst nur dort – Überschrift, Labels
 * und Fließtext bleiben in der Schrift des Themes.
 *
 * ZWEI REGELN FÜR DIESES BLATT, beide erkauft (siehe CLAUDE.md):
 *
 * 1. Kommentare stehen ÜBER dem Selektor, nie zwischen den Deklarationen.
 *    Autoptimize hat aus `.brcd-countdown { }` schon einmal `--brcd-zahl` und
 *    `--brcd-luft` herausminifiziert, weil dort ein Kommentar mitten im Block
 *    stand. Ergebnis war ein winziger Countdown ohne Abstand.
 * 2. Jedes `var()` trägt einen Ersatzwert. Geht eine Variablendeklaration
 *    unterwegs verloren, steht der Block dann immer noch – statt dass
 *    `font-size` auf die geerbte Größe und `gap` auf 0 fällt.
 */

/* clamp() statt fester rem-Wert: die Zeile mit vier Feldern soll auf schmalen
   Bildschirmen nie umbrechen, sondern stufenlos kleiner werden.
   Diese Werte gelten ab 991px – darunter übernimmt countdown.js (siehe
   @media weiter unten): dort ist die Zeile so breit wie der Block, und vw
   kennt die Spaltenbreite des Themes nicht. Hier oben bleiben die Werte
   trotzdem stehen: unter 991px sind sie das Sicherheitsnetz ohne JavaScript.
   Die Ersatzschriften stehen mit im Stapel, weil das Kit von Adobe ausbleiben
   kann (Netz, Sperre durch die Zustimmungsabfrage). */
.brcd-countdown {
	--brcd-zahl: clamp(1.35rem, 6vw, 2.25rem);
	--brcd-luft: clamp(0.4rem, 2vw, 0.75rem);
	--brcd-font: "bodedo", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
	color: inherit;
}

.brcd-countdown--klein {
	--brcd-zahl: clamp(1rem, 4.5vw, 1.5rem);
	--brcd-luft: clamp(0.3rem, 1.5vw, 0.5rem);
}

.brcd-countdown--gross {
	--brcd-zahl: clamp(1.6rem, 7vw, 3.25rem);
	--brcd-luft: clamp(0.5rem, 2.5vw, 1rem);
}

.brcd-countdown--rahmen {
	padding: clamp(1rem, 3vw, 1.75rem);
	background: rgba(127, 127, 127, 0.12);
	border: 1px solid rgba(127, 127, 127, 0.35);
	border-radius: 6px;
}

.brcd-countdown--mitte {
	text-align: center;
}

.brcd-countdown--links {
	text-align: left;
}

.brcd-countdown--rechts {
	text-align: right;
}

.brcd-countdown__ueberschrift {
	margin: 0 0 0.75rem;
	font-size: 1rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* `inline-flex` statt Raster: die Gruppe ist damit selbst so breit wie ihr
   Inhalt und folgt dem text-align der Ausrichtungsklasse – ein Raster wäre
   immer über die volle Breite gegangen. Gilt ab 991px; darunter kippt das
   Media-Query weiter unten `display` auf `flex`.
   `nowrap`: die vier Felder sollen auf dem Handy in einer Zeile bleiben und
   über --brcd-zahl kleiner werden, statt in eine zweite Zeile umzubrechen.
   `overflow-x: auto` ist nur das Sicherheitsnetz für extreme Fälle (starker
   Zoom, sehr lange Wörter in anderen Sprachen) – im Alltag bleibt die Zeile
   dank clamp() innerhalb der Breite und es gibt nichts zu scrollen. */
.brcd-countdown__uhr {
	display: inline-flex;
	flex-wrap: nowrap;
	gap: var(--brcd-luft, 0.75rem);
	max-width: 100%;
	overflow-x: auto;
}

/* Kein fester min-width: der wäre irgendwann breiter als der verfügbare Platz
   und würde genau den Umbruch erzwingen, den nowrap verhindern soll.
   min-width: 0 erlaubt jedem Feld, mit der Schrift zu schrumpfen. */
.brcd-countdown__feld {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	flex-shrink: 1;
}

/* Unter 991px: die Zeile hängt nicht mehr am Inhalt (inline-flex), sondern
   wird selbst zum Blockelement und füllt damit von sich aus die volle Breite
   des Blocks – ganz ohne width: 100%, das würde nur die spätere
   Breitenmessung in countdown.js verfälschen (der Block wäre dann immer
   „voll“, egal wie groß die Ziffern gerade sind). Die drei Ausrichtungen
   bekommen ihr Gegenstück in justify-content, weil text-align auf einen
   Flex-Container keine Wirkung mehr hat, sobald er nicht mehr inline ist.
   Die Zifferngröße selbst kommt hier bewusst nicht aus einem größeren vw-Wert
   – vw kennt die Spaltenbreite des Themes nicht. Das übernimmt countdown.js,
   das die tatsächlich verfügbare Breite misst und --brcd-zahl und --brcd-luft
   passend als Inline-Eigenschaft setzt. Ohne JavaScript bleibt es beim
   größeren Clamp-Fallback hier unten.
   Die Zahl 990 (max-width, Gegenstück zu 991px oben) steht ein zweites Mal in
   countdown.js (matchMedia) – ändert sich die eine, muss die andere mit. */
@media (max-width: 990px) {
	.brcd-countdown__uhr {
		display: flex;
	}

	.brcd-countdown--links .brcd-countdown__uhr {
		justify-content: flex-start;
	}

	.brcd-countdown--mitte .brcd-countdown__uhr {
		justify-content: center;
	}

	.brcd-countdown--rechts .brcd-countdown__uhr {
		justify-content: flex-end;
	}

	/* Fallback ohne JavaScript: größerer vw-Anteil als oben, damit unter
	   991px auch ohne Messung etwas in Richtung volle Breite geht. Wird durch
	   countdown.js normalerweise sofort durch eine Inline-Eigenschaft mit dem
	   exakt gemessenen Wert überschrieben. */
	.brcd-countdown {
		--brcd-zahl: clamp(1.35rem, 20vw, 6rem);
		--brcd-luft: clamp(0.4rem, 2vw, 0.75rem);
	}
}

/* `tabular-nums`: ohne das wandert die Zeile bei jedem Sekundenwechsel, weil
   die 1 in den meisten Schriften schmaler ist als die 8. */
.brcd-countdown__zahl {
	font-family: var(--brcd-font, "Trebuchet MS", "Segoe UI", system-ui, sans-serif);
	font-weight: 400;
	font-style: normal;
	font-size: var(--brcd-zahl, 2.25rem);
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	color: var(--brcd-akzent, inherit);
}

/* Skaliert mit --brcd-zahl statt fest zu bleiben: sonst wird bei kleiner
   werdenden Ziffern irgendwann das Wort „Sekunden“ zum breitesten Element im
   Feld und erzwingt doch wieder einen Umbruch der Zeile. */
.brcd-countdown__label {
	font-size: clamp(0.55rem, 2.2vw, 0.75rem);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.7;
}

/* Kacheln: jedes Feld bekommt eine eigene Fläche. */
.brcd-countdown--kacheln .brcd-countdown__feld {
	padding: var(--brcd-luft, 0.75rem) calc(var(--brcd-luft, 0.75rem) + 0.25rem);
	background: rgba(127, 127, 127, 0.14);
	border: 1px solid rgba(127, 127, 127, 0.3);
	border-radius: 6px;
}

/* Schlicht: nur Ziffern, dafür durch einen Doppelpunkt getrennt. Das
   Trennzeichen ist reine Dekoration und bleibt für Screenreader stumm – die
   lesen ohnehin das Label unter der Zahl. */
.brcd-countdown--schlicht .brcd-countdown__feld + .brcd-countdown__feld {
	position: relative;
}

.brcd-countdown--schlicht .brcd-countdown__feld + .brcd-countdown__feld::before {
	content: ":";
	position: absolute;
	top: 0;
	left: calc(var(--brcd-luft, 0.75rem) / -2);
	transform: translateX(-50%);
	font-family: var(--brcd-font, "Trebuchet MS", "Segoe UI", system-ui, sans-serif);
	font-size: var(--brcd-zahl, 2.25rem);
	line-height: 1.1;
	opacity: 0.45;
	pointer-events: none;
}

.brcd-countdown__text {
	margin: 0.9rem 0 0;
	opacity: 0.8;
}

.brcd-countdown__text--vorbei {
	margin-top: 0;
	opacity: 1;
}

/* Der Klartext-Termin ist die Angabe, die ohne JavaScript stehen bleibt –
   deshalb hebt er sich vom übrigen Hinweistext ab. */
.brcd-countdown__termin {
	opacity: 1;
	white-space: nowrap;
}

/* Hinweis in der Editor-Vorschau, solange keine Zielzeit gesetzt ist. */
.brcd-hinweis {
	font-style: italic;
	opacity: 0.7;
}