/* =========================================================
   SECTION MONSTERS – Ratgeber-Teaser (Landing)
   css/blog-teaser.css
   Blog-Teaser-Sektion zwischen .features und .pricing.
   Nutzt die Design-Tokens aus css/style.css (:root).
   Kartenlook spiegelt .feature-card (Radius, Verlauf, Hover-Lift).
   ========================================================= */

.ratgeber-teaser {
  position: relative;
  padding: 150px max(32px, calc((100vw - 1220px) / 2));
  background: #06070a;
}

/* Nutzt das globale .section-heading aus style.css für Eyebrow/H2/Subline. */

/* ---- Grid: 3 auf Desktop, 1 auf Mobile ---- */
.ratgeber-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 0 auto;
  max-width: 1220px;
}

/* ---- Karte (spiegelt .feature-card) ---- */
.rt-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius-lg, 24px);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
    #0c0d13;
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28);
  color: var(--text);
  text-decoration: none;
  transition: transform .3s var(--ease), border-color .3s var(--ease),
    box-shadow .3s var(--ease);
  will-change: transform;
}

.rt-card:hover,
.rt-card:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(139, 214, 38, .35);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .38);
  outline: none;
}

/* ---- Bild oben, fixes Seitenverhältnis, oben abgerundet ---- */
.rt-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0a0b11;
}

.rt-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease);
}

.rt-card:hover .rt-card-media img {
  transform: scale(1.045);
}

/* ---- Kategorie-Badge (Farbe kommt aus category.color) ---- */
.rt-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #0a1403; /* dunkler Text auf farbigem Badge */
  background: var(--green); /* wird per Inline-Style überschrieben */
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
}

/* ---- Textkörper ---- */
.rt-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px 24px 26px;
}

.rt-card-title {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -.035em;
  color: var(--text);
}

.rt-card-excerpt {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.58;
  /* max. 3 Zeilen */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rt-card-more {
  margin-top: 4px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
}

/* ---- Footer-Button ---- */
.rt-footer {
  display: flex;
  justify-content: center;
  margin-top: 54px;
}

/* ---- Ladezustand ---- */
.rt-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 220px;
  color: var(--muted);
  font-size: 15px;
}

.rt-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .14);
  border-top-color: var(--green);
  animation: rt-spin .8s linear infinite;
}

@keyframes rt-spin {
  to { transform: rotate(360deg); }
}

/* ---- Leerzustand (Grid leer, aber Sektion sichtbar) ---- */
.rt-empty {
  grid-column: 1 / -1;
  padding: 40px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* ---- Skeleton-Platzhalterkarten während des Ladens ---- */
.rt-skel {
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--radius-lg, 24px);
  overflow: hidden;
  background: #0c0d13;
}
.rt-skel-media {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 70%);
  background-size: 200% 100%;
  animation: rt-shimmer 1.4s ease-in-out infinite;
}
.rt-skel-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rt-skel-line {
  height: 14px;
  border-radius: 6px;
  background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(255,255,255,.08) 50%, rgba(255,255,255,.03) 70%);
  background-size: 200% 100%;
  animation: rt-shimmer 1.4s ease-in-out infinite;
}
.rt-skel-line.is-title { height: 22px; width: 80%; }
.rt-skel-line.is-short { width: 55%; }

@keyframes rt-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .rt-spinner,
  .rt-skel-media,
  .rt-skel-line { animation: none; }
  .rt-card,
  .rt-card-media img { transition: none; }
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .ratgeber-teaser-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .ratgeber-teaser {
    padding: 92px 18px;
  }
  .ratgeber-teaser-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .rt-card-title { font-size: 20px; }
  .rt-footer { margin-top: 40px; }
}