/* =========================================================================
   Black Fox World – Darstellung der Live-Verfügbarkeit (Startzeiten)
   Wird nach dem Seiten-CSS geladen und ergänzt die .slot-Chips.
   ========================================================================= */

/* ---- Legende über den Zeiten ---- */
.slot-legend{
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  margin:0 0 14px; font-size:12.5px; font-weight:var(--w-bold,800); color:#6b5a48;
}
.slot-legend span{display:inline-flex; align-items:center; gap:7px}
.slot-legend i{
  width:15px; height:15px; border-radius:5px; border:2px solid var(--line); display:inline-block;
}
.slot-legend i.lg-free{background:#fff}
.slot-legend i.lg-taken{
  background:repeating-linear-gradient(-45deg,#e6ddcd 0 4px,#d5c9b4 4px 8px);
  border-color:#b9aa93;
}
.slot-retry{
  margin-left:auto; border:2px solid var(--line); background:#fff; color:var(--line);
  border-radius:9999px; padding:5px 13px; font:inherit; font-size:12px;
  font-weight:var(--w-black,900); cursor:pointer; line-height:1.2;
}
.slot-retry:hover{background:var(--yellow,#F5C800)}

/* ---- Zähler pro Tageszeit ---- */
.sg-count{
  font-size:11px; font-weight:var(--w-bold,800); letter-spacing:0;
  text-transform:none; opacity:.85; margin-left:4px;
}

/* ---- freier Slot: Restplätze klein darunter ---- */
.slot small{opacity:.7}
.slot.sel small{opacity:.9}

/* ---- belegter Slot: nicht anklickbar, klar abgesetzt ---- */
.slot.taken{
  cursor:not-allowed; color:#9a8b78;
  background:repeating-linear-gradient(-45deg,#f3ece0 0 5px,#e8dfcf 5px 10px);
  border-color:#c9bba4; border-style:dashed;
  text-decoration:line-through; text-decoration-thickness:1.5px;
}
.slot.taken small{text-decoration:none; opacity:.85; font-weight:var(--w-bold,800)}
.slot.taken:hover{
  background:repeating-linear-gradient(-45deg,#f3ece0 0 5px,#e8dfcf 5px 10px);
  border-color:#c9bba4;
}

/* ---- Ladezustand ---- */
.slot-skel{
  border-style:dashed; border-color:#ddd2be; background:#f6f0e4;
  min-height:44px; animation:slot-pulse 1.1s ease-in-out infinite;
}
@keyframes slot-pulse{0%,100%{opacity:.45}50%{opacity:.9}}
.slot-msg{
  margin-top:12px; font-size:13.5px; font-weight:var(--w-bold,800); color:#8a7a68;
}

/* ---- Hinweis- und Fehlerbox ---- */
.slot-warn{
  background:#FFF1E7; border:2px solid var(--line); border-radius:12px;
  padding:12px 15px; margin-bottom:14px;
  font-size:13.5px; font-weight:var(--w-med,600); line-height:1.5; color:var(--line);
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
}
.slot-warn b{font-weight:var(--w-black,900)}
.slot-warn a{text-decoration:underline; text-underline-offset:2px; font-weight:var(--w-black,900)}
.slot-warn .slot-retry{margin-left:0}

@media(max-width:700px){
  .slot-legend{font-size:12px; gap:12px}
  .slot-retry{padding:6px 12px}
}

/* Auf großen Schirmen ragt das Fuchs-Maskottchen in die rechte Spalte.
   Etwas Luft, damit keine Startzeit darunter verschwindet. */
@media(min-width:901px){
  #slots .slot-grid{padding-right:clamp(60px,10vw,125px)}
}