/* Majestäten-Tabelle */
.majestaeten-tabelle {
  width: 100%;
  overflow-x: auto;
}

@media (max-width: 900px) {
  .majestaeten-tabelle {
    overflow-x: visible;
  }
}

.majestaeten-tabelle table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9em;
}

.majestaeten-tabelle th,
.majestaeten-tabelle td {
  padding: 0.5em 0.75em;
  text-align: left;
  border-bottom: 1px solid #ddd;
  vertical-align: top;
}

.majestaeten-tabelle thead th {
  font-weight: bold;
  border-bottom: 2px solid #ccc;
}

.majestaeten-tabelle tbody tr:hover {
  background-color: #f9f9f9;
}

/* Karten-Layout ab Breakpoint */
@media (max-width: 900px) {
  .majestaeten-tabelle table,
  .majestaeten-tabelle thead,
  .majestaeten-tabelle tbody,
  .majestaeten-tabelle th,
  .majestaeten-tabelle td,
  .majestaeten-tabelle tr {
    display: block;
  }

  .majestaeten-tabelle thead {
    display: none;
  }

  .majestaeten-tabelle tbody tr {
    margin-bottom: 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5em;
  }

  .majestaeten-tabelle tbody tr:hover {
    background-color: transparent;
  }

  .majestaeten-tabelle td {
    border: none;
    padding: 0.25em 0.5em;
    display: grid;
    grid-template-columns: 10em 1fr;
    gap: 0.5em;
  }

  .majestaeten-tabelle td::before {
    font-weight: bold;
    color: #555;
    white-space: nowrap;
  }

  .majestaeten-tabelle td:nth-child(1)::before { content: "Jahr"; }
  .majestaeten-tabelle td:nth-child(2)::before { content: "König"; }
  .majestaeten-tabelle td:nth-child(3)::before { content: "Kaiser"; }
  .majestaeten-tabelle td:nth-child(4)::before { content: "Jungschützenkönig"; }
  .majestaeten-tabelle td:nth-child(5)::before { content: "Jungschützenprinz"; }
  .majestaeten-tabelle td:nth-child(6)::before { content: "Kinderkönigspaar"; }
}