/* =========================================================
   AMC HERO
   Wiederverwendbarer Unterseiten-Hero
   ---------------------------------------------------------
   Desktop:         550px
   kleiner Desktop: 470px
   Tablet:          430px
   Smartphone:      3:4 Mobile-Motiv

   Neu:
   - bis zu 3 Hero-Motive
   - Crossfade zwischen den Motiven
   - eigener Next-Button
   - einmalige Textanimation beim Seitenaufruf
   - keine erneute Textanimation beim Motivwechsel
   - Smartphone Hochformat: 900 x 1200
   - Smartphone Querformat: Landscape-Motiv
   ========================================================= */


/* =========================================================
   1. GRUNDEINSTELLUNGEN
   ========================================================= */

.amc-hero {

  /* Farben */
  --amc-hero-title-color: #183d25;
  --amc-hero-text-color: #1f2d24;

  --amc-hero-title-bg: rgba(248, 246, 239, 0.78);
  --amc-hero-text-bg: rgba(248, 246, 239, 0.74);

  /* GCGF Bordeaux */
  --amc-hero-bordeaux: #841d5b;

  /*
   * Inhaltsbreite Desktop.
   * Ergibt bei ca. 1900px Browserbreite einen linken
   * Startpunkt von ungefähr 305px – wie beim alten Hero.
   */
  --amc-hero-content-width: 1280px;

  position: relative;

  width: 100vw;
  max-width: none;

  margin-left: calc(50% - 50vw);

  overflow: hidden;
}


/* =========================================================
   2. ENFOLD – ABSTAND OBERHALB DES HERO ENTFERNEN
   ========================================================= */

#top .content:has(.amc-hero) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

#top .avia_codeblock_section:has(.amc-hero),
#top .avia_codeblock:has(.amc-hero) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* =========================================================
   3. SLIDER
   ========================================================= */

.amc-hero-slider {
  position: relative;

  width: 100%;
  height: 550px;

  overflow: hidden;
}


/* =========================================================
   3A. EINZELNE SLIDES
   ---------------------------------------------------------
   Alle Slides liegen exakt übereinander.
   JS ändert ausschließlich die Klasse .is-active.
   ========================================================= */

.amc-hero-slide {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;

  opacity: 0;

  z-index: 0;

  pointer-events: none;

  will-change: opacity;

  transition:
    opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
}


.amc-hero-slide.is-active {
  opacity: 1;

  z-index: 1;
}


/* =========================================================
   4. HERO-BILD
   ========================================================= */

.amc-hero-media {
  position: absolute;
  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  overflow: hidden;
}


.amc-hero-media img {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover;
  object-position: center center;

  border: 0;
  box-shadow: none;
}


/* =========================================================
   5. TEXTBEREICH – DESKTOP
   ---------------------------------------------------------
   Der Text liegt AUSSERHALB der Slides.
   Dadurch bleibt er beim Motivwechsel unverändert.
   ========================================================= */

.amc-hero-content {
  position: absolute;

  left: 50%;
  top: 52%;
  bottom: auto;

  transform: translate(-50%, -50%);

  width: min(
    var(--amc-hero-content-width),
    calc(100% - 80px)
  );

  z-index: 3;

  text-align: left !important;

  pointer-events: none;
}


/* =========================================================
   5A. WRAPPER FÜR TEXTANIMATION
   ---------------------------------------------------------
   Wir animieren die Wrapper und NICHT H1/P selbst.
   Dadurch bleibt die Marker-Darstellung erhalten.
   ========================================================= */

.amc-hero-title-wrap,
.amc-hero-text-wrap {
  will-change: opacity, transform;
}


/* =========================================================
   6. HEADLINE
   ========================================================= */

#top .amc-hero-title {
  display: inline !important;

  margin: 0 !important;
  padding: 0.02em 0.18em 0.06em !important;

  color: var(--amc-hero-title-color) !important;

  font-size: clamp(28px, 2.3vw, 38px) !important;
  font-weight: inherit !important;

  line-height: 1.55 !important;
  letter-spacing: -0.03em !important;

  background: var(--amc-hero-title-bg) !important;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* =========================================================
   7. BESCHREIBUNG
   ========================================================= */

.amc-hero-text-wrap {
  width: min(530px, 100%);
  margin-top: 10px;
}


#top .amc-hero-text {
  display: inline !important;

  margin: 0 !important;
  padding: 0.12em 0.25em !important;

  color: var(--amc-hero-text-color) !important;

  font-size: 17px !important;
  font-weight: inherit !important;
  line-height: 1.55 !important;

  background: var(--amc-hero-text-bg) !important;

  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* =========================================================
   7A. TEXTANIMATION – NUR BEIM ERSTEN LADEN
   ---------------------------------------------------------
   Angelehnt an unseren Wichmann-Hero:
   - Einblendung von links
   - gleichzeitig leichte Transparenz
   - Beschreibung folgt leicht verzögert

   Wichtig:
   Die Klassen werden beim Slidewechsel NICHT verändert.
   Deshalb wird die Animation nicht erneut gestartet.
   ========================================================= */

.amc-hero-title-wrap {
  opacity: 0;

  transform: translateX(-85px);

  animation:
    amcHeroTextIn 1s ease-out 0.10s forwards;
}


.amc-hero-text-wrap {
  opacity: 0;

  transform: translateX(-85px);

  animation:
    amcHeroTextIn 1s ease-out 0.30s forwards;
}


@keyframes amcHeroTextIn {

  from {
    opacity: 0;
    transform: translateX(-85px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }

}


/* =========================================================
   7B. BUTTON – NÄCHSTES HERO-MOTIV
   ========================================================= */

.amc-hero-next {
  position: absolute;

  top: 50%;
  right: 80px;

  transform: translateY(-50%);

  z-index: 5;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 48px;
  height: 48px;

  margin: 0;
  padding: 0;

  /* Bezug zur Bordeaux-Welle */
  border: 2px solid #841d5b !important;
  border-radius: 50%;

  /* Buttonfarbe Normalansicht */
  background: rgba(132, 29, 91, 0.82) !important;

  appearance: none;
  -webkit-appearance: none;

  cursor: pointer;

  box-shadow:
    0 4px 14px rgba(24, 61, 37, 0.16);

  transition:
    background-color 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}


/* Mouse-over */

.amc-hero-next:hover {
  background: rgba(240, 228, 235, 0.94) !important;
  border-color: #841d5b !important;

  transform:
    translateY(-50%)
    scale(1.04);

  box-shadow:
    0 6px 18px rgba(24, 61, 37, 0.22);
}


/* Klick */

.amc-hero-next:active {
  transform:
    translateY(-50%)
    scale(0.97);
}


/* Tastaturbedienung */

.amc-hero-next:focus-visible {
  outline: 2px solid #841d5b;
  outline-offset: 4px;
}

/* =========================================================
   7B.1 BUTTON AUSBLENDEN
   ---------------------------------------------------------
   Wird vom JavaScript verwendet, wenn nur
   ein einziges Hero-Motiv vorhanden ist.
   ========================================================= */

.amc-hero-next[hidden] {
  display: none !important;
}

/* =========================================================
   7C. CSS-PFEIL
   ========================================================= */

.amc-arrow-icon {
  display: block;

  width: 10px;
  height: 10px;

  border-top: 2px solid #f8f6ef !important;
  border-right: 2px solid #f8f6ef !important;

  transform:
    translateX(-1px)
    rotate(45deg);

  transition:
    border-color 0.25s ease,
    transform 0.25s ease;
}


/* Pfeil beim Mouse-over */

.amc-hero-next:hover .amc-arrow-icon {
  border-top-color: #841d5b !important;
  border-right-color: #841d5b !important;

  transform:
    translateX(-1px)
    rotate(45deg);
}

/* =========================================================
   8. KLEINER DESKTOP / TABLET QUER
   990px bis 1199px
   ========================================================= */

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

  .amc-hero-slider {
    height: 470px;
  }


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

    width: calc(100% - 84px);

    transform: translate(-50%, -50%);
  }


  #top .amc-hero-title {
    font-size: 34px !important;
    line-height: 1.60 !important;
  }


  #top .amc-hero-text {
    max-width: 620px;

    margin-top: 14px !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
  }


  .amc-hero-next {
    right: 50px;
  }

}


/* =========================================================
   9. TABLET
   768px bis 989px
   ========================================================= */

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

  .amc-hero-slider {
    height: 430px;
  }


  .amc-hero-content {
    top: 54%;

    width: calc(100% - 84px);

    transform: translate(-50%, -50%);
  }


  #top .amc-hero-title {
    font-size: 32px !important;
    line-height: 1.65 !important;
  }


  #top .amc-hero-text {
    max-width: 600px;

    margin-top: 14px !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
  }


  .amc-hero-next {
    right: 50px;
  }

}


/* =========================================================
   10. SMARTPHONE – HOCHFORMAT
   bis 767px
   ---------------------------------------------------------
   - eigenes Mobile-Motiv 900 x 1200
   - Bildformat 3:4
   - H1 unten im Bild
   - Beschreibung ausgeblendet
   ========================================================= */

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

  .amc-hero {
    overflow: hidden;
  }


  .amc-hero-slider {
    width: 100%;
    height: auto;

    aspect-ratio: 3 / 4;
  }


  .amc-hero-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
  }


  .amc-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
  }


  /* H1 unten im Motiv */

  .amc-hero-content {
    position: absolute;

    left: 20px;
    right: 20px;
    top: auto;
    bottom: 30px;

    width: auto;

    transform: none;

    z-index: 3;
  }


  #top .amc-hero-title {
    display: inline !important;

    font-size: 30px !important;
    line-height: 1.65 !important;
    letter-spacing: -0.03em !important;

    padding: 0.04em 0.16em 0.08em !important;

    background: rgba(248, 246, 239, 0.82) !important;
  }


  /*
   * Bleibt im HTML vorhanden,
   * wird auf Smartphone optisch ausgeblendet.
   */

  #top .amc-hero-text {
    display: none !important;
  }


  /* Next-Button */

  .amc-hero-next {
    right: 16px;

    width: 44px;
    height: 44px;
  }

}


/* =========================================================
   10B. SMARTPHONE – QUERFORMAT
   ---------------------------------------------------------
   - Landscape-/Desktop-Motiv
   - KEIN 900x1200-Motiv
   - kompakte Hero-Höhe
   - keine 3:4-Darstellung
   ========================================================= */

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

  .amc-hero-slider {
    width: 100%;
    height: 330px;

    aspect-ratio: auto;
  }


  .amc-hero-media {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;
  }


  .amc-hero-media img {
    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;
  }


  .amc-hero-content {
    left: 42px;
    right: auto;

    top: 60%;
    bottom: auto;

    width: calc(100% - 84px);

    transform: translateY(-50%);
  }


  #top .amc-hero-title {
    font-size: 30px !important;
    line-height: 1.60 !important;
  }


  #top .amc-hero-text {
    display: none !important;
  }


  .amc-hero-next {
    right: 60px;

    width: 42px;
    height: 42px;
  }

}


/* =========================================================
   11. SEHR KLEINE SMARTPHONES
   bis 420px
   ========================================================= */

@media only screen and (max-width: 420px) {

  .amc-hero-content {
    left: 28px;
    right: 18px;
    bottom: 56px;
  }


  #top .amc-hero-title {
    font-size: 28px !important;
    line-height: 1.65 !important;
  }


  .amc-hero-next {
    right: 14px;

    width: 42px;
    height: 42px;
  }

}


/* =========================================================
   12. HORIZONTALEN SCROLLBALKEN VERMEIDEN
   ========================================================= */

html,
body {
  overflow-x: clip;
}


/* =========================================================
   13. REDUCED MOTION / BARRIEREFREIHEIT
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .amc-hero-slide {
    transition: none;
  }


  .amc-hero-title-wrap,
  .amc-hero-text-wrap {
    opacity: 1;

    transform: none;

    animation: none;
  }


  .amc-hero-next,
  .amc-arrow-icon {
    transition: none;
  }

}