/* ZLEAF Design-System: Skeleton-Loader (02.10.2026)
   Eine Quelle fuer Shop + Backend. Nutzt nur die bestehenden Grau-Variablen aus style.css,
   funktioniert dadurch automatisch auch im Dark Mode (html[data-theme="dark"]).
   Bausteine:  .zl-skel (Basis)  .zl-skel-line (Textzeile, Breite per .w20..w100)
               .zl-skel-title  .zl-skel-chip  .zl-skel-btn  .zl-skel-avatar  .zl-skel-img
               .zl-skel-kpi  .zl-skel-card  .zl-skel-row (Tabellenzeile)
   Seiten-Skeleton beim Navigieren: .zl-skel-page (von assets/js/zl-skeleton.js gesetzt).
   Bilder: .zl-img-loading auf dem Bild-Wrapper, bis das <img> geladen ist. */

.zl-skel{display:inline-block;position:relative;overflow:hidden;background:var(--gray-5);border-radius:6px;vertical-align:middle}
.zl-skel::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0,var(--gray-6) 50%,transparent 100%);opacity:.9;
  animation:zl-skel-shimmer 1.3s ease-in-out infinite}
@keyframes zl-skel-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .zl-skel::after,.zl-img-loading::after{animation:none;display:none}
  .zl-skel,.zl-img-loading{animation:zl-skel-pulse 1.6s ease-in-out infinite}
}
@keyframes zl-skel-pulse{50%{opacity:.55}}

.zl-skel-line{display:block;height:12px;width:100%;margin:0 0 9px}
.zl-skel-line:last-child{margin-bottom:0}
.zl-skel-line.sm{height:9px}
.zl-skel-title{display:block;height:20px;width:220px;max-width:60%;border-radius:7px}
.zl-skel-chip{height:20px;width:64px;border-radius:999px}
.zl-skel-btn{height:34px;width:110px;border-radius:var(--radius-sm,7px)}
.zl-skel-avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.zl-skel-img{display:block;width:100%;height:130px;border-radius:12px 12px 0 0}
.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}

.zl-skel-kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-bottom:22px}
.zl-skel-kpi{border:1px solid var(--border);border-radius:var(--radius,10px);padding:14px 16px;background:var(--white)}
.zl-skel-kpi .zl-skel-line:first-child{width:55%;height:9px;margin-bottom:12px}
.zl-skel-kpi .zl-skel-line:last-child{width:40%;height:20px}

.zl-skel-table{border:1px solid var(--border);border-radius:var(--radius,10px);overflow:hidden;background:var(--white)}
.zl-skel-row{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--border)}
.zl-skel-row:first-child{border-top:0;background:var(--gray-6)}
.zl-skel-row .zl-skel-line{margin:0;flex:1}
.zl-skel-row .zl-skel-line.fix{flex:0 0 90px}

.zl-skel-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--white)}
.zl-skel-card-body{padding:12px 12px 14px}
.zl-skel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:14px}
@media (max-width:900px){.zl-skel-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}}
@media (max-width:560px){.zl-skel-grid{grid-template-columns:1fr 1fr;gap:8px}}

/* Seiten-Skeleton beim Navigieren (Backend: deckt .docs-main ab, Shop: Bereich unter der Navigation) */
.zl-skel-host{position:relative}
.zl-skel-page{position:absolute;inset:0;z-index:40;background:var(--white);overflow:hidden;
  opacity:0;animation:zl-skel-in .16s ease-out forwards}
.zl-skel-page.is-fixed{position:fixed;inset:var(--zl-skel-top,64px) 0 0 0;z-index:900}
@keyframes zl-skel-in{to{opacity:1}}
.zl-skel-page-top{display:flex;align-items:center;gap:12px;padding:18px 32px;border-bottom:1px solid var(--border)}
.zl-skel-page-body{padding:28px 32px;max-width:1240px}
.zl-skel-page.is-fixed .zl-skel-page-body{margin:0 auto;padding:24px 20px}
@media (max-width:768px){.zl-skel-page-top{padding:14px 16px}.zl-skel-page-body{padding:16px}}
.zl-skel-detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px}
.zl-skel-detail .zl-skel-img{height:380px;border-radius:14px}
@media (max-width:768px){.zl-skel-detail{grid-template-columns:1fr}.zl-skel-detail .zl-skel-img{height:260px}}

/* Bild-Platzhalter: Shimmer im Wrapper, Bild blendet nach dem Laden weich ein */
.zl-img-loading{position:relative;overflow:hidden;background:var(--gray-5)!important}
.zl-img-loading::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0,var(--gray-6) 50%,transparent 100%);animation:zl-skel-shimmer 1.3s ease-in-out infinite}
.zl-img-loading img{opacity:0}
.zl-img-fade img{transition:opacity .25s ease}