/*
 * Inhaltselement "Fakten-Raster" (CType elldus_fact_grid)
 * Gestaltung uebernommen vom frueheren HTML-Block "X-Mas Facts".
 * 3 Spalten > 2 Spalten (unter 1000px) > Wisch-Slider (unter 640px).
 */

.efg, .efg *, .efg *::before, .efg *::after {
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
.efg strong, .efg b {
  font-weight: 700 !important;
}

.efg {
  background: #efe9e1;
  padding: 56px 20px !important;
}
.efg-inner {
  max-width: 1180px;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* ---------- Kopf ---------- */
.efg-header {
  max-width: 720px;
  margin: 0 auto 36px !important;
  padding: 0 !important;
  text-align: center;
}
.efg-kicker {
  display: inline-block;
  background: #7ba9ac !important;
  color: #efe9e1 !important;
  font-weight: 700 !important;
  font-size: 0.72em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  margin: 0 0 14px !important;
}
.efg-title {
  margin: 0 0 12px !important;
  padding: 0 !important;
  color: #2d4c5a !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}
.efg-intro,
.efg-intro p {
  margin: 0 !important;
  padding: 0 !important;
  color: #4a6570 !important;
  line-height: 1.6 !important;
}

/* ---------- Raster ---------- */
.efg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.efg-card {
  display: flex;
  flex-direction: column;
  background: #ffffff !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 22px rgba(45, 76, 90, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.efg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(45, 76, 90, 0.16);
}
.efg-media {
  position: relative !important;
  width: 100% !important;
  height: 190px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #d6ead8 !important;
  overflow: hidden !important;
}
.efg-media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  margin: 0 !important;
  transition: transform 0.4s ease;
}
.efg-card:hover .efg-media img {
  transform: scale(1.05);
}
.efg-media-fallback {
  display: flex;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 10px !important;
  color: #4a6570 !important;
  font-weight: 700 !important;
  font-size: 0.95em;
  text-align: center;
}
.efg-num {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ebc988 !important;
  color: #2d4c5a !important;
  font-weight: 700 !important;
  font-size: 0.95em;
  line-height: 1 !important;
  border-radius: 50% !important;
  box-shadow: 0 3px 8px rgba(45, 76, 90, 0.25);
  z-index: 2;
}

/* ---------- Karteninhalt ---------- */
.efg-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 22px !important;
  margin: 0 !important;
}
.efg-card-title {
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: #2d4c5a !important;
  font-weight: 700 !important;
  font-size: 1.12em;
  line-height: 1.3 !important;
}
.efg-text {
  margin: 0 0 16px !important;
  color: #4a6570 !important;
  line-height: 1.6 !important;
  font-size: 0.9em;
}
.efg-text p {
  margin: 0 0 10px !important;
  color: inherit !important;
}
.efg-text p:last-child {
  margin-bottom: 0 !important;
}
.efg-tipp {
  margin: auto 0 0 !important;
  padding: 12px 14px !important;
  background: #f7e6c4 !important;
  border-left: 4px solid #ebc988 !important;
  border-radius: 10px !important;
  color: #2d4c5a !important;
  line-height: 1.5 !important;
  font-size: 0.86em;
}
.efg-tipp p {
  margin: 0 !important;
  color: inherit !important;
}
.efg-tipp-label {
  display: block;
  color: #2d4c5a !important;
  font-weight: 700 !important;
  font-size: 0.78em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 4px !important;
}
.efg-tipp a,
.efg-text a {
  color: #2d4c5a !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}

.efg-swipe-hint {
  display: none;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  color: #4a6570 !important;
  font-weight: 600 !important;
  font-size: 0.78em;
  letter-spacing: 0.04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1000px) {
  .efg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .efg {
    padding: 40px 16px !important;
  }
  /* Mobil: Slider zum Durchwischen (reines CSS, scroll-snap) */
  .efg-grid {
    display: flex !important;
    flex-wrap: nowrap;
    gap: 16px !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px !important;
    padding: 4px 16px 18px !important;
    scrollbar-width: none;
  }
  .efg-grid::-webkit-scrollbar {
    display: none;
  }
  .efg-card {
    flex: 0 0 82% !important;
    max-width: 82% !important;
    scroll-snap-align: center;
  }
  .efg-card:hover {
    transform: none;
  }
  .efg-media {
    height: 170px !important;
  }
  .efg-swipe-hint {
    display: block !important;
  }
}