/* Kopfzeile, Navigation, Tabellen und Statusanzeigen (Backend). */
.site-header { background: var(--color-accent); color: var(--color-accent-contrast); }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; }
.brand { font-weight: 700; font-size: 1.1rem; color: inherit; text-decoration: none; }
.main-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.main-nav a, .main-nav .btn-link { color: inherit; }
.nav-user { opacity: 0.9; font-size: 0.9rem; }

.facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; margin: 0 0 1rem; }
.facts dt { font-weight: 600; }
.facts dd { margin: 0; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table th { background: #eef0f3; }

.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.85rem; font-weight: 600; border: 1px solid; }
.badge-ok { color: var(--color-ok); border-color: var(--color-ok); background: #eaf6ee; }
.badge-warn { color: var(--color-warn); border-color: var(--color-warn); background: #fff4e0; }
.badge-fail { color: var(--color-error); border-color: var(--color-error); background: #fdecea; }

@media (max-width: 40rem) {
    .facts { grid-template-columns: 1fr; }
    h1 { font-size: 1.35rem; }
}