/* Reise-Karten-Komponente fuer Blog-/Magazin-Artikel. Hochwertig, editoriell. */
.reise-karten{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  margin:30px 0 8px;
}
@media(max-width:900px){ .reise-karten{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .reise-karten{ grid-template-columns:1fr; } }

.reise-karte{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #EAE2D4;
  border-radius:16px;
  overflow:hidden;
  text-decoration:none !important;
  color:inherit;
  box-shadow:0 3px 14px rgba(14,61,92,.07);
  transition:transform .22s ease, box-shadow .22s ease;
}
.reise-karte *{ text-decoration:none; }
.reise-karte:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(14,61,92,.14); }

.reise-karte__img{
  position:relative;
  display:block;
  aspect-ratio:3/2;
  background:#0E3D5C;
  overflow:hidden;
}
.reise-karte__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .55s ease;
}
.reise-karte:hover .reise-karte__img img{ transform:scale(1.05); }
.reise-karte__img--ph{
  display:grid; place-content:center; color:#fff;
  font-size:12px; letter-spacing:.12em; text-transform:uppercase; text-align:center; padding:12px;
}

.reise-karte__body{ display:flex; flex-direction:column; gap:9px; padding:17px 20px 20px; flex:1; }

.reise-karte__eyebrow{
  font-family:var(--font-sans,system-ui,sans-serif);
  font-size:.69rem; letter-spacing:.11em; text-transform:uppercase;
  color:#B58A40; font-weight:700;
}
.reise-karte__title{
  font-family:var(--font-serif,Cormorant,Georgia,serif);
  color:#0E3D5C; font-size:1.24rem; line-height:1.28; font-weight:500;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.reise-karte__meta{
  display:flex; flex-direction:column; gap:3px;
  margin-top:auto; padding-top:13px; border-top:1px solid #F0E9DC;
}
.reise-karte__date{ font-family:var(--font-sans,system-ui,sans-serif); font-size:.8rem; color:#8A8378; }
.reise-karte__price{ font-family:var(--font-sans,system-ui,sans-serif); font-size:1.16rem; font-weight:700; color:#0E3D5C; }

.reise-karte__cta{
  align-self:flex-start; margin-top:15px;
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-sans,system-ui,sans-serif);
  font-size:.79rem; font-weight:700; letter-spacing:.03em;
  color:#0E3D5C; background:#F3EEE4; padding:9px 17px; border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.reise-karte:hover .reise-karte__cta{ background:#B58A40; color:#fff; }