/*
  Wettercom Flip-Countdown
  ------------------------
  Alle Klassen sind mit "wcd-" (Wettercom CountDown) prefixt, um Konflikte
  mit CMS-Theme-Styles zu vermeiden. Größen/Farben lassen sich ohne Eingriff
  in die Regeln unten über CSS-Variablen anpassen (siehe unten oder direkt
  am Container per style="--wcd-card-w: 48px;").
*/

.wcd-countdown {
  /* Stellschrauben – bei Bedarf im CMS überschreiben, z.B. per Custom-CSS-Klasse */
  --wcd-card-w: 40px;
  --wcd-card-h: 60px;
  --wcd-gap-digits: 3px;
  --wcd-gap-units: 1rem;
  --wcd-font-size: 2.2rem;
  --wcd-bg: #000000;
  --wcd-fg: #FCFCFC;
  --wcd-label-color: #666666;
  --wcd-radius: 6px;

  display: inline-flex;
  gap: var(--wcd-gap-units);
  font-family: inherit;
}

.wcd-unit { text-align: center; }

.wcd-digits {
  display: inline-flex;
  gap: var(--wcd-gap-digits);
}

.wcd-digit {
  position: relative;
  width: var(--wcd-card-w);
  height: var(--wcd-card-h);
  perspective: 220px;
}

.wcd-half,
.wcd-leaf {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--wcd-bg);
  box-sizing: border-box;
}

.wcd-half.wcd-top,
.wcd-leaf-top { top: 0; border-radius: var(--wcd-radius) var(--wcd-radius) 0 0; }
.wcd-half.wcd-bottom,
.wcd-leaf-bottom { top: 50%; border-radius: 0 0 var(--wcd-radius) var(--wcd-radius); }

/* Faltkante: echter Rand auf der jeweils obersten Fläche an der Kniffkante,
   damit die Linie beim Klappen nicht "wandert" (siehe frühere Fixes). */
.wcd-half.wcd-top,
.wcd-leaf-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 -3px 4px rgba(0, 0, 0, 0.5);
}
.wcd-half.wcd-bottom,
.wcd-leaf-bottom {
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.1);
}

.wcd-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%;
  text-align: center;
  font-size: var(--wcd-font-size);
  font-weight: bold;
  color: var(--wcd-fg);
  line-height: var(--wcd-card-h);
}
.wcd-half.wcd-bottom .wcd-num,
.wcd-leaf-bottom .wcd-num {
  top: calc(var(--wcd-card-h) / -2);
}

.wcd-leaf {
  z-index: 2;
  backface-visibility: hidden;
}
.wcd-leaf-top {
  transform-origin: bottom;
  transform: rotateX(0deg);
}
.wcd-leaf-bottom {
  transform-origin: top;
  transform: rotateX(90deg);
}

.wcd-leaf-top.wcd-anim { transition: transform 0.3s ease-in; transform: rotateX(-90deg); }
.wcd-leaf-bottom.wcd-anim { transition: transform 0.3s ease-out; transform: rotateX(0deg); }

.wcd-label {
  margin-top: 0px;
  font-size: 0.8rem;
  color: var(--wcd-label-color);
  text-transform: uppercase;
}

/* Screenreader-Text: unsichtbar, aber vorlesbar. Der eigentliche Flip-Clock
   ist rein dekorativ (aria-hidden), diese Zeile trägt die Information. */
.wcd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Wer "reduzierte Bewegung" eingestellt hat, bekommt einen harten Wechsel
   statt der Flip-Animation. */
@media (prefers-reduced-motion: reduce) {
  .wcd-leaf-top.wcd-anim,
  .wcd-leaf-bottom.wcd-anim {
    transition: none;
  }
}

/* Optionaler Zustand, wenn der Countdown abgelaufen ist – per JS gesetzt.
   CMS-seitig z.B. nutzbar um Inhalt dahinter ein-/auszublenden. */
.wcd-countdown.wcd-finished .wcd-digit {
  opacity: 0.4;
}