html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--md-sys-color-surface, #ffffff);
  color: var(--md-sys-color-on-surface, #1a1a1a);
  font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
}

.bibliothek-app-rahmen {
  padding: 24px;
  /* Dauerhaft Platz für die schwebende Auswahl-Leiste — so verschiebt sich
     auch am Listenende nichts, wenn sie erscheint. */
  padding-bottom: 96px;
  max-width: 1100px;
  margin: 0 auto;
}

.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.kopf-aktionen {
  display: flex;
  gap: 8px;
  align-items: center;
}

.theme-select {
  min-width: 150px;
}

.hinweis {
  background: var(--md-sys-color-secondary-container, #e6e0ec);
  color: var(--md-sys-color-on-secondary-container, #1d1b20);
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 16px;
}

/* --- Kompakte Katalog-Liste --- */

.suche {
  display: block;
  max-width: 420px;
  margin-bottom: 12px;
}

dh-tab {
  display: block;
}

/* Inhalt eines nicht gewählten Reiters (die Komponente setzt die Klasse ebenfalls). */
[slot='tab-content'].hidden {
  display: none;
}

.leer {
  padding: 16px 4px;
  opacity: 0.7;
}

.liste {
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  border-radius: 8px;
  overflow: hidden;
}

/*
 * Die Trennlinie sitzt auf der Gruppe (Tool + seine Zusatzinhalte), nicht auf der
 * einzelnen Zeile — so wirken zusammengehörige Einträge als ein Block.
 */
.liste > bibliothek-zeile {
  display: block;
  border-bottom: 1px solid var(--md-sys-color-outline-variant, #e7e0ec);
}

.liste > bibliothek-zeile:last-child {
  border-bottom: none;
}

.zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 16px;
}

.zeile-auswahl {
  display: flex;
  align-items: center;
  flex: 0 0 28px;
}

/* Bei knapper Breite lieber abschneiden als umbrechen — sonst franst die Liste aus. */
.zeile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.zeile-info > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.warnung {
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 8px;
  border: 1px solid var(--md-sys-color-error, #b00020);
  background: var(--md-sys-color-error-container, rgba(176, 0, 32, 0.12));
  color: var(--md-sys-color-on-error-container, #410002);
}

/*
 * Schwebt über dem Inhalt statt ihn zu verschieben: Beim Anhaken soll die Liste
 * an Ort und Stelle bleiben. Bleibt beim Blättern sichtbar — bei langen Listen
 * ist die Auswahl sonst aus dem Blick.
 *
 * Bewusst eine gewöhnliche erhobene Fläche statt der umgekehrten Farbe: Auf
 * einer umgekehrten Fläche greift keine der Button-Gestaltungen des Themes,
 * die Schaltflächen wären dann nicht mehr als solche zu erkennen.
 */
.auswahl-leiste {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: var(--md-sys-shape-corner-large, 16px);
  border: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
  background: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-on-surface);
  box-shadow:
    0 3px 5px -1px rgba(0, 0, 0, 0.2),
    0 6px 10px 0 rgba(0, 0, 0, 0.14),
    0 1px 18px 0 rgba(0, 0, 0, 0.12);
  max-width: calc(100vw - 32px);
}

.auswahl-anzahl {
  font-weight: 500;
}

.zeile-name {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.lizenz-marke,
.intern-marke {
  flex-shrink: 0;
}

.zeile-meta {
  font-size: 0.85em;
  opacity: 0.7;
}

/* Handhabungs-Hinweise stehen unter den Metadaten, etwas zurückgenommen. */
.zeile-hinweis {
  font-size: 0.85em;
  color: var(--md-sys-color-on-surface-variant, #49454f);
  font-style: italic;
}

/*
 * Aktionen in festen Spalten, damit gleichartige Schaltflächen über alle Zeilen
 * hinweg exakt untereinander stehen. Fehlt eine Aktion, bleibt ihre Spalte leer.
 * Reihenfolge: Plug-ins | Anleitung | Herunterladen [| Prüfen | Bearbeiten | Löschen]
 */
.zeile-aktionen {
  display: grid;
  grid-template-columns: 84px 48px;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

.liste.verwaltung .zeile-aktionen {
  grid-template-columns: 84px 48px 84px 108px 88px;
}

.aktion {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}

.aktion dh-button {
  max-width: 100%;
}

/* --- Zusatzinhalte: eingerückt, ohne eigene Trennlinie --- */

.zeile-eingerueckt {
  padding-left: 44px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.intern-marke {
  font-size: 0.72em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--md-sys-color-primary-container, #ffe4cc);
  color: var(--md-sys-color-on-primary-container, #4a1e00);
}

.lizenz-marke {
  font-size: 0.72em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--md-sys-color-tertiary-container, #ffd9a0);
  color: var(--md-sys-color-on-tertiary-container, #2b1700);
}

.status-ok {
  color: var(--md-sys-color-primary, #ff8014);
}

.status-fehler {
  color: var(--md-sys-color-error, #b00020);
}

.status-ausstehend {
  font-style: italic;
}

.signatur-gut {
  color: var(--md-sys-color-primary, #ff8014);
}

.signatur-unklar {
  color: var(--md-sys-color-error, #b00020);
}

.warnhinweis {
  color: var(--md-sys-color-error, #b00020);
  opacity: 1;
}

.anleitung {
  color: var(--md-sys-color-primary, #ff8014);
  font-size: 0.9em;
  text-decoration: none;
  white-space: nowrap;
}

.anleitung:hover {
  text-decoration: underline;
}

/* --- Formular --- */

dh-card {
  display: block;
  margin-bottom: 16px;
}

[slot='actions'] {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.umzug {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--md-sys-color-outline-variant, #cac4d0);
}

.umzug h3 {
  margin: 0 0 4px;
  font-size: 1em;
}

.umzug-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 8px;
}

.einstellungen-infos {
  margin: 20px 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  font-size: 0.9em;
}

.einstellungen-infos dt {
  opacity: 0.7;
}

.einstellungen-infos dd {
  margin: 0;
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  word-break: break-all;
}

.feldhinweis {
  display: block;
  font-size: 0.8em;
  opacity: 0.7;
  margin-top: 4px;
}

.fehler {
  color: var(--md-sys-color-error, #b00020);
  margin-right: auto;
}