/* Countdown kompakter (28.10.2026, Micha: „die Uhr sieht auf dem Handy aus, als würde es richtig lange dauern …
   Sekunden sollen schon noch da sein, aber nicht so überfordert, kompakter und besser“; Handy und Rechner).
   Wird nach drop-motion.css geladen und lässt deren Klapp-Mechanik in Ruhe. Statt der schweren Tafel mit Schrauben eine
   schlanke Leiste: Tage, Stunden, Minuten kräftig, die Sekunden kleiner und gedämpft daneben (sie laufen mit, drängen
   sich aber nicht vor), dazwischen leise Doppelpunkte. */

#drop { --flap-size: clamp(30px, 2.5vw, 42px); }

#drop .drop-clock {
  grid-template-columns: repeat(4, auto); align-items: end; gap: 0;
  padding: 10px 14px 9px; border: 1px solid rgba(236, 234, 228, .16); border-radius: 4px;
  background: linear-gradient(180deg, rgba(19, 20, 19, .92), rgba(10, 11, 10, .92));
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45), inset 0 1px rgba(255, 255, 255, .05);
}
#drop .drop-clock.is-live { grid-template-columns: auto; }
#drop .drop-clock:not(.is-live) .drop-unit { position: relative; gap: 6px; }
#drop .drop-unit small { font-size: 7px; letter-spacing: .2em; }

/* Abstand und Doppelpunkt zwischen den Einheiten */
#drop .drop-clock:not(.is-live) .drop-unit + .drop-unit { margin-left: calc(var(--flap-size) * .52); }
#drop .drop-clock:not(.is-live) .drop-unit + .drop-unit::before {
  position: absolute; top: calc(var(--flap-size) * .65); left: calc(var(--flap-size) * -.36); color: rgba(236, 234, 228, .32);
  content: ":"; font: 700 calc(var(--flap-size) * .52)/1 var(--sans); transform: translateY(-58%);
}

/* Sekunden: zwei Drittel so groß, gedämpfter, auf derselben Grundlinie */
#drop .drop-clock:not(.is-live) .drop-unit:last-child { --board-top: #161715; --board-bottom: #121311; margin-left: calc(var(--flap-size) * .42); }
#drop .drop-clock:not(.is-live) .drop-unit:last-child .drop-flaps { font-size: calc(var(--flap-size) * .64); }
#drop .drop-clock:not(.is-live) .drop-unit:last-child .flap { color: rgba(241, 239, 232, .66); }
#drop .drop-clock:not(.is-live) .drop-unit:last-child::before { left: calc(var(--flap-size) * -.3); top: calc(var(--flap-size) * .64 * .65); font-size: calc(var(--flap-size) * .36); }
#drop .drop-clock:not(.is-live) .drop-unit:last-child small { color: rgba(241, 239, 232, .45); }

@media (max-width: 680px) {
  #drop { --flap-size: clamp(24px, 6.6vw, 32px); }
  #drop .drop-clock { padding: 9px 11px 8px; }
  #drop .drop-unit small { font-size: 6.5px; letter-spacing: .16em; }
}
/* Ganz schmale Handys: „NÄCHSTER DROP IN“ und das Datum passen nicht nebeneinander, das Datum steht unter der Uhr */
@media (max-width: 380px) {
  #drop .drop-countdown { grid-template-columns: auto; }
  #drop .drop-when { grid-row: 3; grid-column: 1; justify-content: flex-start; }
}