/* ---- Darstellung der BVV-Daten in den Kacheln ---- */
.tile .vapiclass table { width: 100%; border-collapse: collapse; font-size: .92em; }
.tile .vapiclass th {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 6px 8px;
  text-align: left !important;
  white-space: nowrap;
}
.tile .vapiclass td { padding: 6px 8px; border-bottom: 1px solid #eee; text-align: left !important; }
.tile .vapiclass tr:nth-child(even) td { background: #f7f7f9; }
.tile .vapiclass tr:hover td { background: #eef2f8; }
.tile .vapiclass td.right { text-align: right !important; font-variant-numeric: tabular-nums; }
.tile .vapiclass td.left { text-align: left !important; }

/* Eigenes Team hervorgehoben (Spielplan und Tabelle) */
.tile .vapiclass .teammarker { color: inherit; font-weight: 700; }
.tile .vapiclass tr.teammarker td { background: color-mix(in srgb, var(--accent) 15%, #fff); font-weight: 700; }
.tile .vapiclass td.teammarker { color: var(--accent); }

/* Spielplan */
.tile .vapiclass td.datum, .tile .vapiclass td.zeit { white-space: nowrap; color: #555; }
.tile .vapiclass td.ergebnis { font-weight: 600; white-space: nowrap; }
.tile .vapiclass td.heimspiel { font-style: italic; }

/* Quelle-Link */
.tile .vapiclass a { color: #777; font-size: .8em; text-decoration: none; }
.tile .vapiclass a:hover { text-decoration: underline; }

/* ---- Skeleton-Loading (bis die API geantwortet hat) ---- */
.tile .vapi:not(.vapiclass):not(.vapi-failed) {
  min-height: 150px;
  border-radius: 6px;
  background-color: #eceff3;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,.7) 50%, rgba(255,255,255,0) 100%),
    repeating-linear-gradient(to bottom, #dde1e7 0, #dde1e7 18px, transparent 18px, transparent 34px);
  background-size: 200px 100%, 100% 100%;
  background-repeat: no-repeat, repeat;
  background-position: -200px 0, 0 0;
  animation: skeleton 1.3s ease-in-out infinite;
}
@keyframes skeleton { to { background-position: calc(100% + 200px) 0, 0 0; } }
.tile .vapi-failed { color: #a33; font-size: .9em; padding: 8px 0; }
.tile .vapiclass td.team { white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tile .vapi:not(.vapiclass) { animation: none; } }

/* ---- Mobil: Tabellen kompakter, Namen duerfen umbrechen, sonst seitlich scrollen ---- */
.tile .vapi { overflow-x: auto; }
@media (max-width: 700px) {
  .tile .vapiclass table { font-size: .78em; }
  .tile .vapiclass th, .tile .vapiclass td { padding: 5px 4px; }
  .tile .vapiclass td.team { white-space: normal; }
  .tile .vapiclass td.ergebnis { white-space: normal; min-width: 5.5em; }
  .tile .vapiclass td.datum { white-space: nowrap; }
}

/* Klickbare Spielzeilen (Link zur Spielseite) */
.tile .vapiclass tr.spiel.linked { cursor: pointer; }
.tile .vapiclass tr.spiel.linked:hover td { background: color-mix(in srgb, var(--accent) 12%, #fff); }
.tile .vapiclass tr.spiel.linked:hover td.team { text-decoration: underline; }
.tile .vapiclass tr.spiel.linked:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }