/* Baustein „Countdown“ (resources/views/partials/countdown.blade.php) – drei Designs: Kacheln, Band, Kompakt.
   Läuft auf normalen Seiten (site.css) und Landingpages (landing.css): Farben kommen aus deren Variablen,
   mit Rückfallwerten im Franke-Design. */
.cd {
  --cd-accent: var(--c-primary, var(--accent, #9B1131));
  --cd-deep: var(--c-primary-dark, var(--sp-deep, #5a0c1f));
  --cd-warm: var(--c-bg-warm, var(--sp-cream, #fbf3ec));
  --cd-glow: var(--c-accent, #F99759);
  --cd-soft: var(--c-text-soft, #626262);
  --cd-line: var(--c-line, var(--sp-line, rgba(155, 17, 49, .14)));
  --cd-surface: var(--sp-surface, #fff);
}
.cd [hidden] { display: none !important; }
.cd__heading { margin: 0 0 .6rem; font-family: var(--font-display, inherit); font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); line-height: 1.15; color: var(--cd-accent); text-wrap: balance; }
.cd__lead { margin: 0 auto; max-width: 60ch; color: var(--cd-soft); font-size: 1.05rem; line-height: 1.6; }
.cd__num { font-variant-numeric: tabular-nums; }
.cd__num.is-tick { animation: cd-tick .45s cubic-bezier(.22, 1, .36, 1); }
@keyframes cd-tick { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cd__num.is-tick { animation: none; } }
.cd__date { margin: .75rem 0 0; color: var(--cd-soft); font-size: .95rem; }
.cd__expired { margin: 1rem 0 0; font-size: clamp(1.3rem, 1rem + 1.2vw, 1.75rem); font-weight: 700; color: var(--cd-accent); }
.cd__btn { margin-top: 1.5rem; }

/* 1 · Kacheln: helle Karten, mittig */
.cd--tiles .cd__in { text-align: center; }
.cd--tiles .cd__clock { display: flex; justify-content: center; gap: clamp(.4rem, 2vw, 1rem); margin-top: 1.75rem; }
.cd--tiles .cd__unit {
  display: flex; flex-direction: column; align-items: center;
  flex: 0 1 7rem; min-width: 0; padding: 1.1rem .35rem .9rem;
  background: var(--cd-surface); border: 1px solid var(--cd-line); border-radius: 16px;
  box-shadow: 0 14px 32px -22px color-mix(in srgb, var(--cd-deep) 70%, transparent);
}
.cd--tiles .cd__num { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); font-weight: 700; line-height: 1; color: var(--cd-accent); }
.cd--tiles .cd__label { margin-top: .5rem; font-size: .74rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--cd-soft); }
@media (max-width: 480px) {
  .cd--tiles .cd__unit { padding: .85rem .2rem .7rem; border-radius: 12px; }
  .cd--tiles .cd__label { font-size: .62rem; letter-spacing: .03em; }
}

/* 2 · Band: dunkle Fläche über die volle Breite, große helle Ziffern */
.cd--band {
  color: #fdf6ee;
  background:
    radial-gradient(90% 140% at 0% 0%, color-mix(in srgb, var(--cd-accent) 80%, transparent) 0%, transparent 60%),
    var(--cd-deep);
}
.cd--band .cd__in { display: grid; gap: 1.75rem 3rem; align-items: center; }
.cd--band .cd__heading { color: #fff; }
.cd--band .cd__lead { margin: 0; color: rgba(253, 246, 238, .8); }
.cd--band .cd__clock { display: flex; gap: clamp(1rem, 3.5vw, 2.25rem); }
.cd--band .cd__unit { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 2.6ch; }
.cd--band .cd__unit + .cd__unit::before {
  content: ":"; position: absolute; top: -.05em; left: calc(clamp(1rem, 3.5vw, 2.25rem) / -2); transform: translateX(-50%);
  font-size: clamp(2.4rem, 1.6rem + 3.6vw, 4.2rem); font-weight: 300; line-height: 1; opacity: .35;
}
.cd--band .cd__num { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.4rem); font-weight: 700; line-height: 1; color: #fff; }
.cd--band .cd__label { margin-top: .55rem; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cd-glow); }
.cd--band .cd__date { color: rgba(253, 246, 238, .7); }
.cd--band .cd__expired { color: #fff; }
.cd--band .cd__in:not(:has(.cd__text)) { justify-items: center; text-align: center; }
.cd--band .cd__in:not(:has(.cd__text)) .cd__clock { justify-content: center; }
@media (min-width: 860px) {
  .cd--band .cd__in:has(.cd__text) { grid-template-columns: minmax(0, 1fr) auto; }
  .cd--band .cd__in:has(.cd__text) .cd__main { text-align: right; }
  .cd--band .cd__in:has(.cd__text) .cd__clock { justify-content: flex-end; }
}

/* 3 · Kompakt: eine Zeile als Kapsel – passt zwischen andere Bausteine */
.cd--compact { padding-block: clamp(1rem, 2.5vw, 1.75rem); }
.cd--compact .cd__text { text-align: center; margin-bottom: .9rem; }
.cd--compact .cd__heading { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin-bottom: .25rem; }
.cd--compact .cd__main {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1.25rem;
  width: fit-content; max-width: 100%; margin-inline: auto; padding: .7rem .8rem .7rem 1.5rem;
  background: var(--cd-warm); border: 1px solid var(--cd-line); border-radius: 999px;
}
.cd--compact .cd__clock { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.cd--compact .cd__prefix { color: var(--cd-soft); font-weight: 600; }
.cd--compact .cd__unit { display: inline-flex; align-items: baseline; gap: .25rem; }
.cd--compact .cd__num { font-size: 1.3rem; font-weight: 700; color: var(--cd-accent); }
.cd--compact .cd__label { font-size: .88rem; color: var(--cd-soft); }
.cd--compact .cd__date { margin: 0; font-size: .85rem; }
.cd--compact .cd__expired { margin: 0; font-size: 1.1rem; }
.cd--compact .cd__btn { margin: 0; padding: .6em 1.2em; font-size: .95rem; }
@media (max-width: 600px) {
  .cd--compact .cd__main { border-radius: 18px; padding: .9rem 1rem; flex-direction: column; }
  .cd--compact .cd__clock { justify-content: center; }
}