/* Grid */
.scn-mag-hero { position: relative; }
.scn-grid {
  display: grid;
  grid-template-columns: 2fr 1.35fr 1fr;
  gap: 16px;
}
.scn-area--right {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
}

/* Card */
.scn-card { position: relative; overflow: hidden; border-radius: 8px; min-height: 260px; }
.scn-card--xl { min-height: 480px; }
.scn-card--lg { min-height: 420px; }
.scn-card--sm { min-height: 200px; }

.scn-card-bg {
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  display:block;
}
.scn-card-veil {
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 10%, rgba(0,0,0,0.5) 55%, rgba(0,0,0,0.7) 100%);
}
.scn-card .scn-chip {
  position:absolute; left:12px; top:12px;
  padding:6px 10px; background:#2ad7e0; color:#0b0f12; font-weight:700; font-size:12px;
  border-radius:4px;
}
.scn-card .scn-rating {
  position:absolute; right:12px; top:12px;
  padding:6px 10px; background:#000000b3; color:#fff; font-weight:700; font-size:12px;
  border-radius:4px;
}
.scn-card-content {
  position:absolute; left:16px; right:16px; bottom:16px; color:#fff;
}
.scn-title { margin:0 0 8px 0; font-size: clamp(18px, 2.2vw, 32px); line-height:1.1; }
.scn-title a { color:#fff; text-decoration:none; }
.scn-title a:hover { text-decoration:underline; }

.scn-meta { display:flex; gap:10px; font-size:12px; opacity:0.9; }
.scn-meta .scn-date::before { content:"•"; margin:0 8px 0 2px; }

/* Mobile – Grid ausblenden, Slider zeigen */
@media (max-width: 900px) {
  .scn-grid { display:none; }
  .scn-hero-swiper { display:block; }
}

/* Desktop – Slider verstecken */
@media (min-width: 901px) {
  .scn-hero-swiper { display:none; }
}

/* Swiper Controls */
.scn-hero-swiper { position: relative; }
.scn-swiper-nav .swiper-button-prev,
.scn-swiper-nav .swiper-button-next {
  color:#fff;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.swiper-pagination-bullet { background:#fff; opacity:.6; }
.swiper-pagination-bullet-active { opacity:1; }
