/* ===== Countdown – Layout + Flip-Optik (gescoped auf .countdown) ===== */


.countdown {
    --digit-size: clamp(52px, 9vw, 100px);
    --sep-size: clamp(40px, 7vw, 50px);
    --fig-w: 70px;
    --fig-h: calc(var(--digit-size) * 1.25);
    --gap-units: 10px;
    --gap-digits: 10px;
    --radius: 10px;
    --digit-color: var(--wp--preset--color--palette-color-2);
    --card: #EFEDEA;
    --card-top: #ECEAE7;
    --line: rgba(0,0,0,.10);
    --shadow: 0 3px 4px rgba(0,0,0,.2), inset 2px 4px 0 rgba(255,255,255,.08);
}


/* ===== Countdown – Layout + Flip (OHNE Variablen-Definition) ===== */

/* ===== OUTER LAYOUT: feste Grid-Spalten (Unit, :, Unit, :, Unit, :, Unit) ===== */
.countdown{
  display: grid;
  --col-unit:     calc(2 * var(--fig-w) + var(--gap-digits));
  --col-days-min: calc(2 * var(--fig-w) + var(--gap-digits));
  --col-days-max: calc(3 * var(--fig-w) + 2 * var(--gap-digits));
  grid-template-columns:
    var(--col-days-min) 1ch
    var(--col-unit) 1ch
    var(--col-unit) 1ch
    var(--col-unit);
  column-gap: var(--gap-units);
  align-items: end;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  font-variant-numeric: tabular-nums;
}

/* 2) Tage-Block: Breite fix clampen – 2-stellig = min, 3-stellig = max */
.countdown .bloc-time.day{
  width: max-content;
  min-width: var(--col-days-min);
  justify-self: center;
}

/* Stunden/Minuten/Sekunden fix für 2 Stellen (nur zur Sicherheit) */
.countdown .bloc-time.hour,
.countdown .bloc-time.min,
.countdown .bloc-time.sec{
  width: var(--col-unit);
  justify-self: center;
}

/* Trenner hat fixe 1ch-Spalte und sitzt perfekt mittig */
.countdown .sep{
  justify-self: center;
  align-self: center;
  font-weight: 800;
  font-size: var(--sep-size);
  line-height: 1;
  opacity: 1;
  transform: translateY(-1.75rem);
}

/* ===== INNER LAYOUT: Karten oben nebeneinander, Label darunter zentriert ===== */
.countdown .bloc-time{
  float: none;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-digits);
  text-align: center;
  white-space: nowrap;
}

/* Karten nebeneinander, feste Kartengröße */
.countdown .bloc-time .figure{
  order: 1;
  flex: 0 0 var(--fig-w);
  width: var(--fig-w);
  height: var(--fig-h);
  margin: 0;
  position: relative;
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

/* Label über volle Blockbreite mittig darunter */
.countdown .count-title{
  order: 2;
  flex: 0 0 100%;
  margin-top: 12px;
  display: block;
  text-align: center;
  font: normal 0.94em inherit;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #1a1a1a;
}

/* Ziffern in der Karte */
.countdown .figure > span{
  position:absolute;
  left:0; right:0; margin:auto;
  font: 600 var(--digit-size) / calc(var(--fig-h) + 4px) "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-align:center;
  color: var(--digit-color);
}

/* Mittellinie (wie in deiner Basis) */
.countdown .figure .top::after,
.countdown .figure .bottom-back::after{
  content:"";
  position:absolute;
  z-index:-1;
  left:0; bottom:0;
  width:100%; height:100%;
  border-bottom:1px solid var(--line);
}

/* Hälften – Basis (Clip + Backface) */
.countdown .figure .top,
.countdown .figure .top-back{
  height:50%;
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}

/* >>> WICHTIG für den 3D-Effekt: Perspektive auf den HÄLFTEN, wie in deiner Basis <<< */

/* Obere Vorderhälfte (klappt nach unten) */
.countdown .figure .top{
  z-index:3;
  background: var(--card-top);
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
  -webkit-transform: perspective(200px);
          transform: perspective(200px);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* Untere Vorderhälfte (statisch sichtbar) */
.countdown .figure .bottom{
  z-index:1;
}
.countdown .figure .bottom::before{
  content:"";
  position:absolute; top:0; left:0;
  width:100%; height:50%;
  background: rgba(0,0,0,.02);
}

/* Obere Rückseite (zeigt neue obere Hälfte) */
.countdown .figure .bottom-back{
  z-index:2;
  top:0; height:50%;
  overflow:hidden;
  background: var(--card-top);
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.countdown .figure .bottom-back > span{
  position:absolute; top:0; left:0; right:0; margin:auto;
}

/* Untere Rückseite (klappt hoch, zeigt neue untere Hälfte) */
.countdown .figure .top-back{
  z-index:4;
  bottom:0; height:50%;
  overflow:hidden;
  background:var(--card);
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: perspective(200px) rotateX(180deg);
          transform: perspective(200px) rotateX(180deg);
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.countdown .figure .top-back > span{
  position:absolute; top:-100%; left:0; right:0; margin:auto;
}

/* Responsive: lieber skalieren statt umbrechen */
@media (max-width: 760px){
  .countdown{
    --digit-size: clamp(35px, 12vw, 60px);
    --fig-w: 65px;
    --gap-units: 7px;
    --fig-h: calc(var(--digit-size) * 1.75);
  }
}
@media (max-width: 540px){
  .countdown{
    --digit-size: clamp(25px, 8vw, 30px);
    --fig-w: 30px;
    --gap-units: 7px;
    --fig-h: calc(var(--digit-size) * 1.75);
  }
  .countdown .count-title{ font-size:.82em; }
}




/* ===== Plain-Style Add-on (keine Änderungen am Flip nötig) ===== */

/* Plain-Container: gleiche Logik wie bei Flip – Kartenzeile + Labelzeile */
.countdown.is-plain .bloc-time{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--gap-digits);
  text-align: center;
  white-space: nowrap;
}

/* Die 'Plain-Zahl' als breite Karte rendern */
.countdown.is-plain.box .plain-digits{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: var(--fig-h);
  /* Breite so wählen, dass sie in die Spaltenlogik passt */
  min-width: calc(2 * var(--fig-w) + var(--gap-digits)); /* 2 Karten Breite */
  padding: 0 0.25em;

  font: 700 var(--digit-size) / calc(var(--fig-h) - 13px) "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--digit-color);
  background: var(--card);
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden; /* optisch konsistent zu Flip-Karten */
}

/* Die 'Plain-Zahl' als breite Karte rendern */
.countdown.is-plain.easy .plain-digits{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 1em;
  /* Breite so wählen, dass sie in die Spaltenlogik passt */
  min-width: calc(2 * var(--fig-w) + var(--gap-digits)); /* 2 Karten Breite */
  padding: 0 0.25em;

  font: 700 var(--digit-size) / calc(var(--fig-h) - 13px) "Lato", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--digit-color);
  overflow: hidden; /* optisch konsistent zu Flip-Karten */
}

/* Tage dürfen 2–3-stellig werden → Klammer setzen */
.countdown.is-plain .pd-day{
  min-width: calc(2 * var(--fig-w) + var(--gap-digits));
  max-width: calc(3 * var(--fig-w) + 2 * var(--gap-digits));
  width: auto;
}

/* H/M/S bleiben 2-stellig → min-width reicht */
.countdown.is-plain .pd-hour,
.countdown.is-plain .pd-min,
.countdown.is-plain .pd-sec{
  min-width: calc(2 * var(--fig-w) + var(--gap-digits));
}

/* Label unter der Zahl, zentriert und volle Blockbreite */
.countdown.is-plain .count-title{
  order: 2;
  flex: 0 0 100%;
  margin-top: 12px;
  text-align: center;
  display: block;
}

/* Optional: Doppelpunkte im Plain-Mode auf gleiche Größe bringen */
.countdown.is-plain .sep{
  align-self: center;
  font-weight: 800;
  font-size: var(--sep-size);
  line-height: 1;
  opacity: 1;
}