/*
 * 3 Eulen Portal – Modul „Druckerstatus“, Shortcode [eulen_drucker].
 *
 * Wie die Karte von [eulen_recycling]: nutzt die Farben des Themes
 * (--paper-raised, --rule, --ink, --owl-b, --owl-c …) mit Ersatzwerten,
 * folgt also Hell und Dunkel.
 */

.eulen-drucker-oeffentlich {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  max-width: 30rem;
  margin: 1.5rem auto;
  padding: 1.5rem 1.5rem 1.35rem;
  border: 1px solid var(--rule, #D3DDE6);
  border-top: 4px solid var(--owl-b, #4F6D8F);
  border-radius: 12px;
  background-color: var(--paper-raised, #FFFFFF);
  color: var(--ink-body, #2E3B48);
  text-align: center;
}

.eulen-drucker-oeffentlich > p {
  margin: 0;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__titel {
  margin-bottom: .35rem;
  color: var(--ink, #1E2B38);
  font-size: 1.15rem;
  font-weight: 700;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__zahl {
  color: var(--ink, #1E2B38);
  line-height: 1.1;
}

.eulen-drucker-oeffentlich__wert {
  font-size: clamp(2.5rem, 9vw, 3.5rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__text {
  color: var(--ink, #1E2B38);
  font-size: 1.1rem;
  font-weight: 600;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__davon {
  color: var(--ink-soft, #4C5B6A);
  font-size: .95rem;
}

/* Je Drucker ein Punkt: druckt (blau, pulsiert), frei (grün), nicht bereit (leer) */
.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__liste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem .6rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__liste li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .3rem .7rem .3rem .55rem;
  border: 1px solid var(--rule, #D3DDE6);
  border-radius: 999px;
  font-size: .9rem;
  line-height: 1.3;
}

.eulen-drucker-oeffentlich__punkt {
  flex: none;
  width: .7rem;
  height: .7rem;
  border: 2px solid var(--ink-soft, #4C5B6A);
  border-radius: 50%;
  background: transparent;
}

.eulen-drucker-oeffentlich .eulen-drucker-oeffentlich__liste li.is-druckt {
  border-color: color-mix(in srgb, var(--owl-b, #4F6D8F) 60%, transparent);
  background-color: color-mix(in srgb, var(--owl-b, #4F6D8F) 16%, transparent);
}

.eulen-drucker-oeffentlich li.is-druckt .eulen-drucker-oeffentlich__punkt {
  border-color: var(--owl-b, #4F6D8F);
  background: var(--owl-b, #4F6D8F);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--owl-b, #4F6D8F) 55%, transparent);
  animation: eulen-drucker-puls 2s ease-out infinite;
}

.eulen-drucker-oeffentlich li.is-frei .eulen-drucker-oeffentlich__punkt {
  border-color: var(--owl-c, #7C8A52);
  background: var(--owl-c, #7C8A52);
}

.eulen-drucker-oeffentlich li.is-aus {
  color: var(--ink-soft, #4C5B6A);
}

.eulen-drucker-oeffentlich__name {
  color: var(--ink, #1E2B38);
  font-weight: 600;
}

.eulen-drucker-oeffentlich li.is-aus .eulen-drucker-oeffentlich__name {
  color: inherit;
}

.eulen-drucker-oeffentlich__status {
  color: var(--ink-soft, #4C5B6A);
}

@keyframes eulen-drucker-puls {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--owl-b, #4F6D8F) 55%, transparent); }
  70% { box-shadow: 0 0 0 .45rem color-mix(in srgb, var(--owl-b, #4F6D8F) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--owl-b, #4F6D8F) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .eulen-drucker-oeffentlich li.is-druckt .eulen-drucker-oeffentlich__punkt {
    animation: none;
  }
}

.eulen-drucker-zahl {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Im Widget-Bereich „Startseite: Karten über Instagram“ (Theme drei-eulen) ist das
   Widget schon eine Karte: dort ohne eigenen Rahmen, wie die Recycling-Karte. */
.front-widget .eulen-drucker-oeffentlich {
  max-width: none;
  margin: auto 0;
  padding: 0;
  border: 0;
  background: none;
}