@charset "UTF-8";
/* CSS Document */

/* [Claude 2026-09-13] Block Countdown - s. block-countdown.php. Zwei Zahlen-Stile ueber
   Modifier-Klasse am Block-Wrapper (".Countdown-boxed"/".Countdown-text", ACF-Feld
   "countdown_style"): "boxed" = eigene farbige Kaesten pro Zeiteinheit (an .itemBox aus den
   Single-Templates angelehnte Optik), "text" = schlichte Zahl+Label-Gruppen ohne Kasten. Farben
   selbst kommen NICHT von hier (das waere globaler CSS-Wert statt pro-Block editierbar), sondern
   ueber die ID-skopierten Regeln in block-countdown.php (".CountdownBox"/".CountdownValue",
   gleiches Muster wie bei allen anderen Bloecken). */

.CountdownWrap{
	position: relative;
	width: 100%;
	height: auto;
	margin: 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	gap: calc(var(--pad-desk) * 1vw);
	text-align: center;
}

/* [Claude 2026-09-13, Kundenwunsch] "flex-wrap:nowrap" + gleich breite Flex-Items (s. .CountdownItem
   unten, "flex:1 1 0" statt fester vw-Breite) statt fixer Breiten pro Breakpoint - dadurch teilen
   sich 3 (Sekunden ausgeblendet) oder 4 Boxen IMMER automatisch eine Zeile, auf jedem Breakpoint,
   ohne dass fuer jede Kombination eine eigene feste Breite gepflegt werden muss. Gap selbst kommt
   NICHT von hier (waere globaler CSS-Wert statt pro-Block editierbar), sondern ueber die
   ID-skopierten Regeln in block-countdown.php (".CountdownNumbers", gleiches Muster wie bei den
   Farben, s. Dateikommentar oben). */
.CountdownNumbers{
	position: relative;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
}
/* [Claude 2026-09-13, Bugfix] ".CountdownNumbers{display:flex}" hat dieselbe Spezifitaet wie die
   Browser-Standardregel "[hidden]{display:none}" - bei gleicher Spezifitaet gewinnt die zuletzt
   geladene Regel, und das ist hier IMMER diese (Theme-CSS laedt nach dem UA-Stylesheet). Countdown.js
   setzt "numbers.hidden = true" nach Ablauf, die Zahlen blieben dadurch trotzdem sichtbar
   (display:flex gewann) - identischer Bug wie bei .NewsletterForm, s. block-newsletter.css. Diese
   Regel ist spezifischer (Klasse + [hidden]-Attribut zusammen) und gewinnt daher zuverlaessig. */
.CountdownNumbers[hidden]{
	display: none;
}

/* [Claude 2026-09-13, Kundenwunsch] "flex:1 1 0" statt fester Breite - alle Items teilen sich die
   verfuegbare Zeile gleichmaeßig (egal ob 3 oder 4 Boxen), "min-width:0" erlaubt Flex-Items dabei
   auch unter ihre Inhaltsbreite zu schrumpfen (Flexbox-Default waere min-width:auto, das wuerde ein
   Umbrechen der Zeile trotz "flex-wrap:nowrap" erzwingen, sobald der Inhalt nicht mehr reinpasst). */
.CountdownItem{
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.26041vw;
}

/* [Claude 2026-09-13] Boxen-Stil - eigene Kaesten-Klasse ".CountdownBox" (Farbe kommt aus
   block-countdown.php, s. Dateikommentar oben) statt der geteilten ".itemBox" aus den
   Single-Templates, damit dieser Block unabhaengig von deren Kontext (z.B. News/Artist-eigene
   ID-Scopes) bleibt - gleiche Unabhaengigkeits-Logik wie bei single-news.css vs. single-artist.css.
   Eigenes Innenabstand (padding) kommt NICHT von hier, sondern ID-skopiert aus block-countdown.php
   (editierbares ACF-Feld) - "box-sizing:border-box" sorgt dafuer, dass dieses Padding beim
   Zusammenspiel mit "flex:1 1 0" oben nicht zusaetzlich zur Breite addiert wird.
   [Claude 2026-09-15, Kundenwunsch] "border-radius" steht hier bewusst NICHT (mehr) - kommt jetzt
   ID-skopiert aus block-countdown.php (ACF-Feld "Runde Ecken", On/Off), gleiches Muster wie das
   Innenabstand-Feld. */
.Countdown-boxed .CountdownItem.CountdownBox{
	box-sizing: border-box;
}

.Countdown-text .CountdownItem{
	padding: 0;
}

/* [Claude 2026-09-13, Kundenwunsch] "font-weight:700" entfernt - die Ziffern nutzen jetzt das
   waehlbare "card-weight-*" (Ablauftext-Analogon "Ziffern: Schriftschnitt", s. block-countdown.php),
   die Klasse bringt ihr eigenes font-weight mit. "width:100%" + Margin-Reset fuer alle moeglichen
   Ueberschrift-Tags (h1-h6/p, s. "Ziffern: Überschrift-Tag") noetig, da .CountdownValue jetzt ein
   dynamisches Tag ist und h1-h6/p von Haus aus eigene Margins mitbringen sowie nur content-breit
   sind - "text-align" (Ausrichtung-Feld) haette ohne "width:100%" keine sichtbare Wirkung. */
.CountdownValue{
	width: 100%;
	margin: 0;
	font-size: 3.125vw;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* [Claude 2026-09-13, Kundenwunsch] "Ziffern: Überschrift-Tag" hatte ohne diese Regeln keine
   sichtbare Wirkung, da .CountdownValue vorher IMMER dieselbe feste font-size trug, egal welches
   Tag (h1-h6/p) tatsaechlich gerendert wurde - der Unterschied zwischen z.B. H1 und H6 blieb dadurch
   unsichtbar (anders als beim Ablauftext, wo h1-h6 mangels eigener font-size einfach die
   Browser-Standardgroesse je Tag zeigen). Feste Groessen-Stufen pro Tag statt Browser-Default, damit
   die Ziffern weiterhin gross/prominent bleiben (Countdown-Charakter) UND sich die Tag-Wahl sichtbar
   auswirkt - .CountdownValue oben bleibt der Basiswert fuer "Absatz" (Default). */
h1.CountdownValue{ font-size: 4.5vw; }
h2.CountdownValue{ font-size: 4vw; }
h3.CountdownValue{ font-size: 3.6vw; }
h4.CountdownValue{ font-size: 3.3vw; }
h5.CountdownValue{ font-size: 3.125vw; }
h6.CountdownValue{ font-size: 2.8vw; }

.CountdownLabel{
	width: 100%;
	opacity: 0.75;
}
.CountdownLabel blockquote{
	margin: 0;
}
.CountdownLabel h1,
.CountdownLabel h2,
.CountdownLabel h3,
.CountdownLabel h4,
.CountdownLabel h5,
.CountdownLabel h6,
.CountdownLabel p{
	margin: 0;
}

.CountdownExpiredMessage{
	position: relative;
	width: 100%;
	max-width: 40vw;
}
.CountdownExpiredMessage blockquote{
	margin: 0;
}

.CountdownButtonRow{
	position: relative;
}

@media screen and (max-width: 956px) {

.CountdownWrap{
	gap: calc(var(--pad-pad) * 1vw);
}

.CountdownValue{
	font-size: 4.5vw;
}
h1.CountdownValue{ font-size: 6.5vw; }
h2.CountdownValue{ font-size: 5.8vw; }
h3.CountdownValue{ font-size: 5.2vw; }
h4.CountdownValue{ font-size: 4.75vw; }
h5.CountdownValue{ font-size: 4.5vw; }
h6.CountdownValue{ font-size: 4vw; }

.CountdownExpiredMessage{
	max-width: 100%;
}

}

@media screen and (max-width: 720px) {

.CountdownValue{
	font-size: 5vw;
}
h1.CountdownValue{ font-size: 7.2vw; }
h2.CountdownValue{ font-size: 6.4vw; }
h3.CountdownValue{ font-size: 5.75vw; }
h4.CountdownValue{ font-size: 5.25vw; }
h5.CountdownValue{ font-size: 5vw; }
h6.CountdownValue{ font-size: 4.5vw; }

}