/* ============================================================
   utilities.css

   Kleine Hilfsklassen fuer die Einzelfaelle, die vorher als
   style="…" direkt im Markup standen. Bewusst knapp gehalten —
   was mehrfach vorkommt, gehoert nach components.css.
   ============================================================ */

/* ── Abstaende ────────────────────────────────────────────── */
.mt-0  { margin-top: 0; }
.mt-1  { margin-top: .5rem; }
.mt-2  { margin-top: 1rem; }
.mt-3  { margin-top: 1.5rem; }
.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: .5rem; }
.mb-2  { margin-bottom: 1rem; }
.mb-3  { margin-bottom: 1.5rem; }
.mb-4  { margin-bottom: 2rem; }

/* ── Text ─────────────────────────────────────────────────── */
.text-center { text-align: center; }
.text-muted  { color: var(--text-2, #8fb8d4); }
.text-dim    { color: var(--text-3, #4a7a9b); }
.text-brand  { color: var(--brand, #00a0dd); }
.text-danger { color: #f43f5e; }
.text-ok     { color: #22d3a5; }
.text-warn   { color: #f59e0b; }
.text-violet { color: #8b5cf6; }

.text-xs { font-size: .75rem; }
.text-sm { font-size: .85rem; }
.text-lg { font-size: 1.15rem; }
.text-xl { font-size: 1.6rem; }

.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }

.lead {
  color: var(--text-2, #8fb8d4);
  line-height: 1.6;
}

/* ── Layout ───────────────────────────────────────────────── */
.stack-sm > * + * { margin-top: .5rem; }
.stack    > * + * { margin-top: 1rem; }

.row-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}

.row-gap {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.full-width { width: 100%; }

/* ── Zentrierte Statusseiten (404, Fehler, gesperrt, Wartung) ─ */

.status-page {
  text-align: center;
  padding: 3rem 2rem;
}

.status-page__icon {
  font-size: 3.5rem;
  margin-bottom: 1rem;
  line-height: 1;
}

.status-page__title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-1, #f0f8ff);
  font-family: var(--font-display, sans-serif);
  margin-bottom: .75rem;
}

.status-page__text {
  color: var(--text-2, #8fb8d4);
  margin-bottom: 2rem;
  line-height: 1.6;
}

.status-page__action {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.75rem;
  background: var(--brand, #00a0dd);
  color: #fff;
  border-radius: var(--r-sm, 10px);
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 160, 221, .3);
}

/* ── Badge im Menue ───────────────────────────────────────── */

.menu-badge {
  background: var(--accent, #f59e0b);
  color: #fff;
  border-radius: 99px;
  padding: .1rem .45rem;
  font-size: .72rem;
  font-weight: 700;
  margin-left: .25rem;
}

/* Wartungs-Variante der Statusseite */
.status-page--maintenance {
  border-top: 3px solid #f59e0b;
}