/* ============================================================
   Phase 415: Die kleine Uhr zur Lead-Freischaltung auf dem Überblick.
   Kai am 23.09.2026: "vielleicht eine kleine Uhr hinsetzen, dass man das auf
   jeden Fall auch gleich sieht, die Zeiten für die Lead-Freischaltung."

   Sie trägt dieselben Farben wie die große Uhr in der KIDZ-Liste (rot zu, grün
   offen, navy dauerhaft), bleibt aber flach: Der Überblick ist die Design-Vorlage
   des Portals, hier soll nichts die Kennzahlen erschlagen.
   ============================================================ */
.kidz-uhr-mini { margin: 0 0 18px; }
.kidz-uhr-mini[hidden] { display: none !important; }
.kidz-uhr-mini-link {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  padding: 13px 16px;
  color: #fff; text-decoration: none;
  border-radius: 12px;
  background: linear-gradient(135deg, #b0262a 0%, #d82f31 60%, #ef5a35 100%);
  box-shadow: 0 10px 26px rgba(176, 38, 42, .22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.kidz-uhr-mini[data-lage="offen"] .kidz-uhr-mini-link {
  background: linear-gradient(135deg, #07462b 0%, #0c6c3f 60%, #3ea56a 100%);
  box-shadow: 0 10px 26px rgba(12, 108, 63, .22);
}
.kidz-uhr-mini[data-lage="dauer"] .kidz-uhr-mini-link {
  background: linear-gradient(135deg, #10294a 0%, #163a68 60%, #3f79b8 100%);
  box-shadow: 0 10px 26px rgba(22, 58, 104, .22);
}
.kidz-uhr-mini-link:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, .22); }
.kidz-uhr-mini-link:focus-visible { outline: 3px solid rgba(255, 255, 255, .85); outline-offset: 2px; }
.kidz-uhr-mini-kopf { display: inline-flex; align-items: center; gap: 8px; }
.kidz-uhr-mini-punkt {
  flex: none; width: 9px; height: 9px; background: #fff; border-radius: 50%;
  animation: kidz-uhr-mini-puls 1.8s ease-out infinite;
}
@keyframes kidz-uhr-mini-puls {
  0% { box-shadow: 0 0 0 0 rgba(255,255,255,.7); }
  70% { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.kidz-uhr-mini-titel { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.kidz-uhr-mini-zahlen { display: inline-flex; flex-wrap: wrap; gap: 7px; }
.kidz-uhr-mini-feld {
  display: inline-flex; align-items: baseline; gap: 4px;
  padding: 4px 9px; background: rgba(0, 0, 0, .18); border-radius: 8px;
}
.kidz-uhr-mini-feld b { font-size: 19px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.kidz-uhr-mini-feld small { font-size: 10.5px; font-weight: 700; opacity: .85; }
.kidz-uhr-mini-dauer { font-size: 17px; font-weight: 800; }
.kidz-uhr-mini-raster { margin-left: auto; font-size: 11.5px; font-weight: 700; opacity: .9; }
@media (max-width: 640px) {
  .kidz-uhr-mini-raster { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .kidz-uhr-mini-punkt { animation: none; }
  .kidz-uhr-mini-link:hover { transform: none; }
}