/* Sternenhimmel-Container: nur in Tiefenfeld sichtbar (dort in themes.css auf display:block gesetzt) */
.stars { display: none; }

.cover-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 4px; display: inline-block; background: var(--bs-tertiary-bg); }
/* Aktions-Buttons in einer Reihe, alle gleich hoch, ohne Zeilenumbruch */
.actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.actions form { display: contents; }
.actions .btn { white-space: nowrap; }
/* In Listenzeilen und Tabellenzellen bleiben die Knöpfe ab Tablet-Breite in einer Zeile: der Text daneben
   wird schmaler, statt dass die Knöpfe auf zwei oder drei Zeilen rutschen. Die Aktions-Spalte einer Tabelle
   bekommt dafür genau ihre Inhaltsbreite (`width: 1%` zwingt die flexiblen Spalten, Platz abzugeben).
   Nicht betroffen: die Knopfreihe auf der Buchseite, dort stehen lange Beschriftungen und Umbruch ist richtig. */
@media (min-width: 768px) {
  td.cell-actions { width: 1%; white-space: nowrap; }
  td.cell-actions > .actions, .list-group-item > .actions { flex-wrap: nowrap; flex-shrink: 0; }
}
.description { white-space: pre-line; max-width: 50rem; }
.changelog h1 { font-size: 1.5rem; }
.changelog h2 { font-size: 1.15rem; margin-top: 1.5rem; }

/* Einstellungen: Karten mit Zeilen aus Icon, Titel, Beschreibung und Badge rechts */
.settings-card .card-body { padding: 1.25rem 1.5rem; }
.settings-row { position: relative; margin: 0 -1rem; padding-left: 1rem !important; padding-right: 1rem !important; border-radius: .5rem; transition: background-color .15s; }
.settings-row:has(.stretched-link):hover { background-color: var(--bs-tertiary-bg); }
.settings-icon { font-size: 1.5rem; color: #6f42c1; width: 2rem; text-align: center; line-height: 1.2; }
.settings-row .stretched-link { color: var(--bs-body-color); text-decoration: none; }
.settings-row form { position: relative; z-index: 2; }
.settings-row .badge { position: relative; z-index: 2; }
/* Nur auf schmalen Fenstern: Badge unter den Text statt daneben, sonst bleibt für lange Werte (Basis-URL,
   Zeitplan) kaum Platz und der Text wird abgeschnitten. Breitere Fenster bleiben unverändert – dort ist
   Platz genug, und ein umbrechender Badge sähe schlechter aus als ein einzeiliger. */
@media (max-width: 575.98px) {
  .settings-row { flex-wrap: wrap; }
  /* Basis 0, damit Icon und Text zusammen in der ersten Zeile bleiben und nur der Badge umbricht. */
  .settings-row > .flex-grow-1 { flex-basis: 0; }
  .settings-row .badge { flex-basis: 100%; margin-left: 3.25rem; text-align: left; white-space: normal; }
}

/* Aussehen: Theme-Karten mit Vorschau in hell und dunkel */
.theme-card { cursor: pointer; overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.theme-card:hover { box-shadow: 0 0 0 2px rgba(var(--bs-primary-rgb), .35); }
.theme-card.is-current { border-color: var(--bs-primary); box-shadow: 0 0 0 2px var(--bs-primary); }
.theme-preview { display: flex; }
.theme-pane { flex: 1; min-width: 0; background: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: 12px; }
.theme-pane .theme-nav { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--app-nav-bg); }
.theme-pane .theme-nav { gap: 6px; }
.theme-pane .navbar-brand { color: var(--app-nav-text); font-size: 11px; font-family: var(--app-display-font); margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-pane .theme-body a { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-pane .theme-body { padding: 10px; }
.theme-pane .h5 { font-family: var(--app-display-font); font-size: 14px; }
.theme-pane .fs-2 { font-size: 20px !important; font-family: var(--app-display-font); }
.theme-pane .btn-sm { font-size: 11px; padding: 2px 8px; }
.theme-pane .card { border-radius: var(--bs-border-radius); }

/* Tabellen mit vielen Spalten (Treffer, Abos, Benutzer, Namenslisten): unter der md-Breite wird aus jeder
   Zeile eine Karte statt eines schmal gequetschten Tabellenausschnitts. Jede <td> braucht dafür
   data-label="Spaltenname" (Ausnahme: class="cell-plain" für Zellen ohne Label, z. B. Cover oder Aktionen). */
@media (max-width: 767.98px) {
  .responsive-table thead { display: none; }
  .responsive-table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table { border: 0; }
  .responsive-table tr { margin-bottom: .75rem; border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .6rem .75rem; }
  .responsive-table td { border: 0 !important; padding: .3rem 0 !important; display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; text-align: right; white-space: normal !important; }
  .responsive-table td[data-label]::before { content: attr(data-label); font-weight: 600; font-size: .8em; color: var(--bs-secondary-color); text-align: left; flex-shrink: 0; }
  .responsive-table td:empty { display: none; }
  .responsive-table td.cell-plain { justify-content: flex-start; text-align: left; }
  .responsive-table td.cell-actions { justify-content: flex-start; flex-wrap: wrap; border-top: 1px solid var(--bs-border-color) !important; margin-top: .3rem; padding-top: .6rem !important; }
}