/* ══════════════════════════════════════════════════════════════
   Loading Skeletons — visueller Platzhalter statt "Lade…"-Text
   Nutzung: <div class="skel skel-text"></div>
   ══════════════════════════════════════════════════════════════ */

@keyframes skel-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.skel {
  display: inline-block;
  background: linear-gradient(90deg,
    rgba(14,27,77,.05) 0%,
    rgba(14,27,77,.10) 40%,
    rgba(14,27,77,.05) 80%);
  background-size: 400px 100%;
  animation: skel-shimmer 1.4s ease infinite;
  border-radius: 4px;
  vertical-align: middle;
  pointer-events: none;
}

[data-theme=dark] .skel {
  background: linear-gradient(90deg,
    rgba(255,255,255,.04) 0%,
    rgba(255,255,255,.09) 40%,
    rgba(255,255,255,.04) 80%);
  background-size: 400px 100%;
}

/* ── Text-Varianten ── */
.skel-text       { display:block; height:12px; margin:8px 0; border-radius:3px; width:100%; }
.skel-text.w-80  { width:80%; }
.skel-text.w-70  { width:70%; }
.skel-text.w-50  { width:50%; }
.skel-text.w-40  { width:40%; }
.skel-text.w-30  { width:30%; }
.skel-title      { display:block; height:18px; width:45%; margin:0 0 10px; border-radius:4px; }
.skel-sub        { display:block; height:12px; width:60%; margin:0 0 14px; border-radius:3px; }

/* ── Shape-Varianten ── */
.skel-circle     { width:32px; height:32px; border-radius:50%; }
.skel-avatar     { width:36px; height:36px; border-radius:50%; flex-shrink:0; }
.skel-badge      { width:70px; height:22px; border-radius:999px; }
.skel-btn        { width:90px; height:32px; border-radius:8px; }
.skel-thumb      { width:48px; height:48px; border-radius:8px; }

/* ── Card-Skeleton ── */
.skel-card {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2, 12px);
  padding: 18px 20px;
  box-shadow: var(--sh2, 0 2px 10px rgba(14,27,77,.06));
}

/* ── Tabellen-Skeleton (gerendert als <tr class="skel-row">) ── */
tr.skel-row td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--b1);
}
tr.skel-row td > .skel {
  display: block;
  height: 14px;
  border-radius: 3px;
}
tr.skel-row td:nth-child(1) > .skel { width: 70%; }
tr.skel-row td:nth-child(2) > .skel { width: 85%; }
tr.skel-row td:nth-child(3) > .skel { width: 50%; }
tr.skel-row td:nth-child(4) > .skel { width: 60%; }
tr.skel-row td:nth-child(5) > .skel { width: 40%; }
tr.skel-row td:nth-child(6) > .skel { width: 55%; }
tr.skel-row td:nth-child(7) > .skel { width: 45%; }

/* ── Listen-Skeleton (z.B. Ankündigungen, Audit-Log) ── */
.skel-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--b1);
}
.skel-list-item:last-child { border-bottom: none; }
.skel-list-item .skel-text { margin: 4px 0; }
.skel-list-content { flex: 1; min-width: 0; }

/* ── KPI-Card Skeleton ── */
.skel-kpi {
  background: var(--s1);
  border: 1px solid var(--b1);
  border-radius: var(--r2, 12px);
  padding: 18px 20px;
  min-height: 88px;
}
.skel-kpi .skel-text { margin: 6px 0; }

/* ── Inline Spinner als Fallback für kleine Loading-States ── */
.skel-inline-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--t3);
  font-size: 13px;
}