.spg-wrap{--gap:22px;--radius:22px;--tile:#F5EEE9;--accent:#1E3245;--brand:#B01632;--text:#1E3245}

/* Top-Leiste: Suche */
.spg-top{display:flex;justify-content:flex-end;align-items:center;margin:0 0 16px 0}
.spg-search{position:relative;width:min(360px,100%)}
.spg-search-input{
  width:100%;height:40px;border-radius:999px;background:#fff;
  border: 1.5px solid var(--brand)!important; color:var(--text); outline:none;
  padding:0 42px 0 14px!important; line-height:40px;
  border-radius: 10px!important;
}
.spg-search-input::placeholder{color:#9aa3ab}
.spg-search-input:focus{box-shadow:0 0 0 3px rgba(176,22,50,.15)}
.spg-search-btn{
  position:absolute;
  right:8px; top:50%;
  transform:translateY(-50%);
  width:28px; height:28px;
  border:0; background:transparent;
  cursor:pointer; display:grid; place-items:center;
  padding-top: 8px;
  padding-right: 18px;
  padding-bottom: 8px;
  padding-left: 18px;
}
.spg-search-btn i{
  font-size:16px; color:var(--brand);
  line-height:1;
}
/* optional : Hover-Farbe */
.spg-search-btn:hover i{ filter:brightness(.9); }

/* für SR-Text, falls dein Theme keine Utility-Klasse hat */
.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Grid */
.spg-grid{display:grid;gap:var(--gap);grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1024px){.spg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.spg-grid{grid-template-columns:1fr}}
.spg-card{background:var(--tile);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 3px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.08)}
/* Medienbereich: feste Kachelhöhe, Bild skaliert ohne Verzerrung */
.spg-media{aspect-ratio:4/3;background:#eee;overflow:hidden}
.spg-media img{width:100%;height:100%!important;object-fit:cover;object-position:center;display:block}
.spg-body{padding:16px 18px 18px;color:var(--text)}
.spg-date{font-size:12px;opacity:.75;margin-bottom:8px}
.spg-title a {font-size:20px;line-height:1.25;margin:0 0 10px 0;color:var(--brand)!important;}
.spg-exc{font-size:14px;line-height:1.45}
.spg-more{margin-top:14px;display:inline-flex;align-items:center;gap:8px;color:var(--brand);font-weight:700}

/* Navigation unten: Chevron-Pfeile */
.spg-nav{display:flex;justify-content:right;gap:36px;align-items:center;margin-top:22px}
.spg-btn{position:relative;width:34px;height:34px;border:0;background:transparent;box-shadow:none;cursor:pointer}
.spg-btn:hover {background: none!important;}
.spg-btn::before{content:"";position:absolute;left:50%;top:50%;width:16px;height:16px;border:2px solid transparent;border-right-color:var(--brand);border-top-color:var(--brand);transform:translate(-50%,-50%) rotate(45deg)}
.spg-prev::before{transform:translate(-50%,-50%) rotate(225deg)}
.spg-btn:hover::before{filter:brightness(.9)}
.spg-btn[disabled]{opacity:.35;cursor:not-allowed}

/* ---------- Skeleton Cards ---------- */
.spg-skel-card{
  background:var(--tile);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.08);
}

/* Shimmer-Grundlage */
.skel{ position:relative; background:#eee; overflow:hidden; }
.skel::after{
  content:"";
  position:absolute; inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.6), rgba(255,255,255,0));
  animation:spg-shimmer 1.2s ease-in-out infinite;
}
@keyframes spg-shimmer{ 100% { transform:translateX(100%); } }

/* Bereiche der Karte */
.spg-skel-media{ aspect-ratio:4/3; }              /* Bildbereich */
.spg-skel-body{ padding:16px 18px 18px; }

/* „Textzeilen“ */
.skel-line{ height:14px; border-radius:8px; margin-top:10px; }
.skel-title{ height:18px; border-radius:10px; margin-top:8px; }
.skel.w-30{ width:30%; } .skel.w-40{ width:40%; }
.skel.w-50{ width:50%; } .skel.w-60{ width:60%; }
.skel.w-70{ width:70%; } .skel.w-80{ width:80%; }
.skel.w-90{ width:90%; } .skel.w-100{ width:100%; }

/* Fallback Skeleton-Klötze (wird zur Initialisierung genutzt) */
.spg-skeleton{border-radius:var(--radius);background:linear-gradient(90deg,#eee 25%,#f6f6f6 37%,#eee 63%);background-size:400% 100%;animation:spgsh 1.2s ease-in-out infinite;height:280px; width: 350px;}
@keyframes spgsh{0%{background-position:100% 50%}100%{background-position:0 50%}}