/* =========================================================
   AMC STARTSEITEN-HERO
   Zusatz-CSS für die Startseite
   ---------------------------------------------------------
   Basis:
   amc-unterseiten-hero-20260811.css

   Dieses CSS verändert ausschließlich Hero-Elemente mit:
   .amc-hero--home

   Ziel:
   - Startseiten-Hero bewusst höher als Unterseiten-Hero
   - bestehende AMC-Hero-Technik unverändert weiterverwenden
   - Smartphone Hochformat weiterhin im bewährten 3:4-Format
   - eigene Basis für den späteren Platzstatus-Drawer
   ========================================================= */


/* =========================================================
   1. STARTSEITEN-HERO – GRUNDEINSTELLUNGEN
   ---------------------------------------------------------
   Die Höhenwerte sind hier zentral zusammengefasst.
   So können wir sie später sehr schnell feinjustieren.
   ========================================================= */

.amc-hero--home {
  --amc-home-hero-height-desktop: 660px;
  --amc-home-hero-height-small-desktop: 520px;
  --amc-home-hero-height-tablet: 470px;
  --amc-home-hero-height-landscape: 350px;
}


/* =========================================================
   2. STARTSEITEN-HERO – DESKTOP
   ab 1200px
   ========================================================= */

@media only screen and (min-width: 1200px) {

  .amc-hero--home .amc-hero-slider {
    height: var(--amc-home-hero-height-desktop);
  }

  .amc-hero--home .amc-hero-content {
    top: 53%;
  }

}


/* =========================================================
   3. STARTSEITEN-HERO – KLEINER DESKTOP / TABLET QUER
   990px bis 1199px
   ========================================================= */

@media only screen and (min-width: 990px) and (max-width: 1199px) {

  .amc-hero--home .amc-hero-slider {
    height: var(--amc-home-hero-height-small-desktop);
  }

  .amc-hero--home .amc-hero-content {
    top: 50%;
  }

}


/* =========================================================
   4. STARTSEITEN-HERO – TABLET
   768px bis 989px
   ========================================================= */

@media only screen and (min-width: 768px) and (max-width: 989px) {

  .amc-hero--home .amc-hero-slider {
    height: var(--amc-home-hero-height-tablet);
  }

  .amc-hero--home .amc-hero-content {
    top: 52%;
  }

}


/* =========================================================
   5. STARTSEITEN-HERO – SMARTPHONE HOCHFORMAT
   bis 767px
   ---------------------------------------------------------
   Absichtlich KEINE eigene Höhe.
   Das bewährte 3:4-Format der AMC-Hero-Basis bleibt erhalten.
   ========================================================= */

@media only screen and (max-width: 767px) and (orientation: portrait) {

  .amc-hero--home .amc-hero-slider {
    height: auto;
    aspect-ratio: 3 / 4;
  }

}


/* =========================================================
   6. STARTSEITEN-HERO – SMARTPHONE QUERFORMAT
   ---------------------------------------------------------
   Etwas höher als der Unterseiten-Hero (330px),
   ohne die kompakte Landscape-Darstellung aufzugeben.
   ========================================================= */

@media only screen
  and (orientation: landscape)
  and (max-height: 500px) {

  .amc-hero--home .amc-hero-slider {
    height: var(--amc-home-hero-height-landscape);
    aspect-ratio: auto;
  }

}


/* =========================================================
   7. PLATZSTATUS-DRAWER
   ---------------------------------------------------------
   Reservierter Bereich.

   Hier bauen wir im nächsten Schritt:
   - Platzstatus-Drawer
   - Statuszeilen mit SVG-Icons
   - grüne / bordeauxfarbene Statuskreise
   - Hinweisbereich
   - Zeitstempel
   ========================================================= */


/* =========================================================
   8. PLATZSTATUS-REITER
   ---------------------------------------------------------
   Reservierter Bereich.

   Hier kommt später der Reiter zum erneuten Öffnen
   des geschlossenen Platzstatus-Drawers hinein.
   ========================================================= */