/* Landingpage: große Kacheln zu den Konfiguratoren */
.tile-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px;
  margin: 0; padding: 0; list-style: none;
}
.tile-grid > li { display: flex; }
.tile {
  display: flex; flex: 1; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow); text-decoration: none;
  transition: border-color 180ms ease-out, box-shadow 180ms ease-out, transform 180ms ease-out;
}
a.tile:hover { border-color: #d5a0a1; box-shadow: 0 18px 40px rgba(34, 34, 36, .11); transform: translateY(-3px); }
.tile__art {
  display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 28px;
  background: var(--surface-subtle); border-bottom: 1px solid var(--line); color: var(--text);
}
.tile__art img { width: 100%; max-width: 260px; height: auto; }
a.tile:hover .tile__art { background: var(--gsm-red-soft); }
.tile__body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; padding: 24px 26px 26px; }
.tile__name { font-size: 1.4rem; font-weight: 800; line-height: 1.2; }
.tile__description { margin-top: 8px; color: var(--muted); }
.tile__action { margin-top: auto; padding-top: 22px; color: var(--gsm-red-dark); font-weight: 800; }
.tile--planned { box-shadow: none; }
.tile--planned .tile__art img { filter: grayscale(1); opacity: .5; }
.tile--planned .tile__name { color: var(--muted); }
.tile__body .badge { margin-top: 22px; }
.tile__body .badge--preview { margin: 0 0 8px; background: var(--gsm-red-soft); color: var(--gsm-red-dark); }

@media (max-width: 900px) {
  .tile-grid { grid-template-columns: 1fr; }
  .tile { flex-direction: row; }
  .tile__art { width: min(38%, 300px); flex: none; aspect-ratio: auto; padding: 18px; border-bottom: 0; border-right: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .tile { flex-direction: column; }
  .tile__art { width: auto; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--line); }
  .tile__body { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tile { transition: none; }
  a.tile:hover { transform: none; }
}