/* bar-laden.css
   ----------------------------------------------------------------------------
   Ladeanzeigen für Blue Air Records.

   Zwei Arten, bewusst getrennt:

     .sk-*   Skeleton — graue Platzhalter, die dem echten Aufbau ähneln.
             Für Seiten mit viel Inhalt: Dashboard, Admin, Portal, Formulare.
             Sinn: Man sieht schon, WAS kommt, und die Seite springt nicht,
             wenn die Daten eintreffen.

     .lad-*  Ladesymbol — ein Kreisel mit Text.
             Für einfache Seiten, wo ein Skeleton nur Aufwand wäre.

   Ein Skeleton hilft nur, wenn es dem echten Aufbau ähnelt. Graue Kästen an
   der falschen Stelle sind schlimmer als gar nichts — dann lieber ein Kreisel.
   -------------------------------------------------------------------------- */

/* ── Skeleton ─────────────────────────────────────────────────────────── */
.sk{
  position:relative; overflow:hidden;
  background:rgba(255,255,255,.055);
  border-radius:7px;
}
.sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.075) 45%, rgba(255,255,255,.11) 50%,
    rgba(255,255,255,.075) 55%, transparent);
  transform:translateX(-100%);
  animation:skWelle 1.5s ease-in-out infinite;
}
@keyframes skWelle{ to{ transform:translateX(100%) } }

/* Bausteine */
.sk-zeile{height:12px; margin-bottom:9px}
.sk-zeile:last-child{margin-bottom:0}
.sk-zeile.kurz{width:42%}
.sk-zeile.halb{width:62%}
.sk-zeile.lang{width:88%}
.sk-titel{height:19px; width:48%; margin-bottom:13px; border-radius:6px}
.sk-klein{height:10px; width:34%}
.sk-kreis{border-radius:50%; width:38px; height:38px; flex:none}
.sk-kasten{height:74px; border-radius:12px}
.sk-knopf{height:44px; border-radius:10px}
.sk-bild{aspect-ratio:1/1; border-radius:10px}

/* Fertige Muster */
.sk-karte{
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07);
  border-radius:13px; padding:17px;
}
.sk-reihe{display:flex; align-items:center; gap:13px}
.sk-reihe .sk-txt{flex:1; min-width:0}
.sk-raster{display:grid; gap:11px}
.sk-raster.z2{grid-template-columns:repeat(2,1fr)}
.sk-raster.z3{grid-template-columns:repeat(3,1fr)}
.sk-raster.z4{grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){
  .sk-raster.z3,.sk-raster.z4{grid-template-columns:repeat(2,1fr)}
}

/* Tabellenzeilen */
.sk-tab{width:100%}
.sk-tab .sk-tr{display:flex; align-items:center; gap:14px;
  padding:13px 0; border-bottom:1px solid rgba(255,255,255,.05)}
.sk-tab .sk-tr:last-child{border-bottom:none}

/* Weicher Übergang, wenn die echten Daten da sind */
.sk-weg{animation:skRaus .28s ease forwards}
@keyframes skRaus{ to{ opacity:0; transform:translateY(-4px) } }
.sk-rein{animation:skRein .34s cubic-bezier(.2,.7,.3,1) both}
@keyframes skRein{ from{ opacity:0; transform:translateY(7px) } to{ opacity:1; transform:none } }

/* ── Ladesymbol für einfache Seiten ───────────────────────────────────── */
.lad{
  position:fixed; inset:0; z-index:9999;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:17px; background:#090909;
  transition:opacity .34s ease, visibility .34s ease;
}
.lad.weg{opacity:0; visibility:hidden}
.lad-ring{
  width:42px; height:42px; border-radius:50%;
  border:2.5px solid rgba(168,85,247,.16);
  border-top-color:#a855f7; border-right-color:rgba(168,85,247,.55);
  animation:ladDreh .75s linear infinite;
}
@keyframes ladDreh{ to{ transform:rotate(360deg) } }
.lad-txt{
  font-family:'DM Sans',system-ui,sans-serif; font-size:12.5px;
  color:#6b7484; letter-spacing:.03em;
  animation:ladAtem 1.9s ease-in-out infinite;
}
@keyframes ladAtem{ 0%,100%{opacity:.5} 50%{opacity:1} }
/* Balken oben — zeigt Fortschritt, auch wenn er geschätzt ist */
.lad-bal{position:fixed; top:0; left:0; height:2px; z-index:10000;
  background:linear-gradient(90deg,#7c3aed,#a855f7,#c084fc);
  width:0; transition:width .3s ease, opacity .3s ease}

@media (prefers-reduced-motion: reduce){
  .sk::after{animation:none; opacity:.4}
  .sk-weg,.sk-rein{animation:none}
  .lad-ring{animation-duration:2.4s}
  .lad-txt{animation:none; opacity:.8}
}