/* ==========================================================
   Sponsoring-Seite (Template page-sponsoring.php)
   Eigenes Stylesheet, damit pages.css unberuehrt bleibt.
   ========================================================== */

.sp-intro { max-width:62ch; font-size:17px; color:var(--text); }
.sp-h2 { margin-top:46px; }
.sp-h2-weit { margin-top:60px; }

/* ---------- Engagement-Karten ---------- */
.sp-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:40px; align-items:start; }
.sp-card { background:#fff; border-radius:var(--radius); box-shadow:var(--schatten-soft); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease; }
.sp-card:hover { box-shadow:var(--schatten); }

.sp-foto { aspect-ratio:16/10; background:var(--hell); overflow:hidden; position:relative; }
.sp-foto img { width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Galerie ---------- */
.sp-galerie { position:relative; }
.sp-gal-bild { position:absolute; top:0; left:0; opacity:0; transition:opacity .4s ease; }
.sp-gal-bild.sp-gal-aktiv { position:relative; opacity:1; }

.sp-gal-dots { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:8px; }
.sp-gal-dot { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,0.5); border:none; cursor:pointer; transition:background .2s ease; padding:0; }
.sp-gal-dot:hover { background:rgba(255,255,255,0.8); }
.sp-gal-dot.sp-gal-dot-aktiv { background:#fff; }

.sp-body { padding:24px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.sp-card-textonly .sp-body { padding-top:28px; }

.sp-meta { display:flex; flex-wrap:wrap; gap:8px; }
.sp-chip { background:var(--hell); color:var(--marke-dunkel); font-size:12.5px; font-weight:700; border-radius:999px; padding:5px 13px; }

.sp-card h3 { font-size:19.5px; line-height:1.3; }
.sp-card p { font-size:15px; color:var(--text); }

.sp-leistung { list-style:none; margin-top:2px; }
.sp-leistung li { font-size:14.5px; color:var(--text); padding:5px 0 5px 24px; position:relative; }
.sp-leistung li::before { content:""; position:absolute; left:0; top:12px; width:12px; height:3px; border-radius:2px; background:var(--marke); }

.sp-link { margin-top:auto; padding-top:6px; font-size:14.5px; font-weight:700; color:var(--marke); }
.sp-link:hover { color:var(--marke-dunkel); }
.sp-link:focus-visible { outline:3px solid var(--marke); outline-offset:3px; }

/* ---------- Kriterien ---------- */
.sp-kriterien { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.sp-krit { background:#fff; border-radius:var(--radius); padding:26px; box-shadow:var(--schatten-soft); }
.sp-krit b { font-family:'Bricolage Grotesque',sans-serif; font-size:17px; display:block; margin-bottom:6px; }
.sp-krit span { font-size:14.5px; color:var(--muted); }

/* ---------- Abschluss-CTA ---------- */
.sp-cta { background:#fff; border-radius:var(--radius); box-shadow:var(--schatten-soft); padding:34px 36px; margin-top:44px; display:flex; gap:28px; align-items:center; flex-wrap:wrap; }
.sp-cta > div { flex:1 1 380px; }
.sp-cta h2 { font-size:24px; margin-bottom:8px; }
.sp-cta p { font-size:15.5px; color:var(--text); max-width:56ch; }

@media (max-width:900px) {
  .sp-grid { grid-template-columns:1fr; }
  .sp-kriterien { grid-template-columns:1fr; }
  .sp-cta { padding:28px 24px; }
}