/* =========================================================
   UNIDOMO Startseiten-Raster
   Desktop ab 1200 px: große Kachel links, zwei kleine rechts
   Darunter: nur die beiden kleinen Kacheln
     Tablet (768 bis 1199 px): nebeneinander
     Smartphone (bis 767 px): untereinander
   ========================================================= */

#vue-app .ud-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  width: 100%;
  margin: 0;
}

#vue-app .ud-hero__tile {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: 1140 / 320;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

/* Große Kachel unter 1200 px ausblenden */
#vue-app .ud-hero__tile--large {
  display: none;
}

/* Bilder füllen die Kachel, minimale Abweichungen werden am Rand beschnitten */
#vue-app .ud-hero__tile img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
  transition: transform 0.4s ease;
}

/* Tablet: kleine Kacheln nebeneinander */
@media (min-width: 768px) and (max-width: 1199.98px) {
  #vue-app .ud-hero {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  #vue-app .ud-hero__tile {
    border-radius: 12px;
  }
}

/* Desktop: komplettes Raster */
@media (min-width: 1200px) {
  #vue-app .ud-hero {
    grid-template-columns: 960fr 570fr;
    grid-template-rows: 1fr 1fr;
    gap: 20px;
    aspect-ratio: 1550 / 340;
  }

  #vue-app .ud-hero__tile {
    border-radius: 12px;
    aspect-ratio: auto;
  }

  #vue-app .ud-hero__tile--large  { display: block; grid-column: 1; grid-row: 1 / span 2; }
  #vue-app .ud-hero__tile--top    { grid-column: 2; grid-row: 1; }
  #vue-app .ud-hero__tile--bottom { grid-column: 2; grid-row: 2; }
}

/* Hover nur auf Geräten mit Maus */
@media (hover: hover) {
  #vue-app .ud-hero__tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(18, 58, 94, 0.18);
  }

  #vue-app .ud-hero__tile:hover img {
    transform: scale(1.02);
  }
}

/* Tastatur-Fokus */
#vue-app .ud-hero__tile:focus-visible {
  outline: 3px solid #399CD7;
  outline-offset: 3px;
}

/* Keine Bewegung bei reduzierter Bewegung im Betriebssystem */
@media (prefers-reduced-motion: reduce) {
  #vue-app .ud-hero__tile,
  #vue-app .ud-hero__tile img {
    transition: none;
    transform: none !important;
  }
}