/* =========================================================
   PLATZSTATUS BOX HOME
   Golfclub Gifhorn – Startseiten-Hero
   ========================================================= */


/* =========================================================
   1. GRUNDCONTAINER
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus {
  position: absolute;
  inset: 0;

  z-index: 20;

  pointer-events: none;
}


/* =========================================================
   2. PLATZSTATUS-PANEL
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__panel {
  position: absolute;

  top: 50%;
  right: clamp(28px, 4vw, 72px);

  width: 370px;
  max-width: calc(100vw - 60px);
  max-height: calc(100% - 54px);

  padding: 26px 28px 22px;

  box-sizing: border-box;

  overflow-y: auto;

  color: #183d25;

  background:
    rgba(248, 248, 244, 0.95);

  border:
    1px solid rgba(24, 61, 37, 0.14);

  border-radius: 22px;

  box-shadow:
    0 18px 44px rgba(24, 61, 37, 0.18);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform:
    translateY(-50%)
    translateX(0);

  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transition:
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    visibility 0s linear 0s;
}


/* =========================================================
   3. KOPFBEREICH / ÜBERSCHRIFT
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__title {
  margin: 0 44px 18px 0 !important;

  padding: 0 !important;

  color: #183d25 !important;

  font-size: 23px !important;
  font-weight: 600 !important;

  line-height: 1.2 !important;

  letter-spacing: 0.025em;
}


/* =========================================================
   3A. SCHLIESSEN-BUTTON
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__close {
  position: absolute;

  top: 18px;
  right: 18px;

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

  width: 34px;
  height: 34px;

  margin: 0;
  padding: 0;

  color: #841d5b !important;

  font-size: 25px;
  font-weight: 300;
  line-height: 1;

  background:
    rgba(132, 29, 91, 0.07) !important;

  border:
    1px solid rgba(132, 29, 91, 0.20) !important;

  border-radius: 50%;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}


body.home .amc-hero--home .gcgf-home-platzstatus__close:hover {
  color: #ffffff !important;

  background:
    #841d5b !important;

  transform: scale(1.04);
}


/* =========================================================
   4. STATUSLISTE
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__list {
  list-style: none !important;

  margin: 0 !important;
  padding: 0 !important;
}


body.home .amc-hero--home .gcgf-home-platzstatus__item {
  display: grid;

  grid-template-columns:
    32px
    minmax(0, 1fr)
    30px;

  align-items: center;

  column-gap: 12px;

  min-height: 44px;

  margin: 0 !important;
  padding: 6px 0 !important;

  border-bottom:
    1px solid rgba(24, 61, 37, 0.10);
}


body.home .amc-hero--home .gcgf-home-platzstatus__item:last-child {
  border-bottom: 0;
}


/* =========================================================
   4A. SVG-ICONS
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__icon {
  display: flex;

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

  width: 32px;
  height: 32px;
}


body.home .amc-hero--home .gcgf-home-platzstatus__icon img {
  display: block;

  width: 27px;
  height: 27px;

  object-fit: contain;

  opacity: 0.9;
}


/* =========================================================
   4B. BEZEICHNUNGEN
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__label {
  color: #263a2d;

  font-size: 15.5px;
  font-weight: 500;

  line-height: 1.3;
}


/* =========================================================
   5. STATUSKREISE
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__state {
  display: flex;

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

  width: 28px;
  height: 28px;

  border-radius: 50%;

  color: #ffffff !important;

  font-weight: 700;
  line-height: 1;

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


body.home .amc-hero--home .gcgf-home-platzstatus__state span {
  display: block;

  line-height: 1;
}


/* POSITIVER STATUS */

body.home .amc-hero--home .gcgf-home-platzstatus__state.is-ok {
  background: #679938;
}


body.home .amc-hero--home .gcgf-home-platzstatus__state.is-ok span {
  font-size: 17px;

  transform: translateY(-1px);
}


/* NEGATIVER STATUS */

body.home .amc-hero--home .gcgf-home-platzstatus__state.is-fail {
  background: #841d5b;
}


body.home .amc-hero--home .gcgf-home-platzstatus__state.is-fail span {
  font-size: 21px;

  transform: translateY(-1px);
}


/* =========================================================
   6. HINWEISBEREICH
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__notice {
  margin-top: 16px;

  padding: 11px 13px;

  color: #263a2d;

  font-size: 14px;
  font-weight: 500;

  line-height: 1.5;

  background:
    rgba(132, 29, 91, 0.055);

  border:
    1px solid rgba(132, 29, 91, 0.12);

  border-radius: 10px;
}


/* =========================================================
   7. ZEITSTEMPEL
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__updated {
  margin-top: 14px;

  color: #68736b;

  font-size: 12.5px;
  font-weight: 400;

  line-height: 1.35;
}


/* =========================================================
   8. PLATZSTATUS-REITER
   ---------------------------------------------------------
   Sichtbar, solange das Panel geschlossen ist.
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__tab {
  position: absolute;

  top: 34%;
  right: 0;

  display: flex;

  flex-direction: column;

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

  gap: 10px;

  width: 48px;
  height: 152px;

  margin: 0;
  padding: 12px 6px 16px;

  box-sizing: border-box;

  color: #ffffff !important;

  background:
    rgba(132, 29, 91, 0.95) !important;

  border: 0 !important;

  border-radius:
    11px 0 0 11px;

  box-shadow:
    0 7px 20px rgba(24, 61, 37, 0.20);

  cursor: pointer;

  opacity: 0;
  visibility: hidden;

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

  pointer-events: none;

  transition:
    transform 0.28s ease,
    opacity 0.22s ease,
    background-color 0.2s ease,
    visibility 0s linear 0.28s;
}


body.home .amc-hero--home .gcgf-home-platzstatus__tab:hover {
  background:
    #841d5b !important;
}


/* =========================================================
   8A. REITER-TEXT
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__tab-label {
  display: block;

  writing-mode: vertical-rl;

  transform: rotate(180deg);

  color: #ffffff;

  font-size: 12px;
  font-weight: 600;

  line-height: 1;

  letter-spacing: 0.075em;
}


/* =========================================================
   8B. REITER-ICON
   ---------------------------------------------------------
   Dasselbe Icon wie bei "Platz 1–18".
   Das Icon bleibt bewusst aufrecht.
   ========================================================= */

body.home .amc-hero--home .gcgf-home-platzstatus__tab-icon {
  display: flex;

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

  flex: 0 0 24px;

  width: 24px;
  height: 24px;
}

body.home .amc-hero--home .gcgf-home-platzstatus__tab-icon img {
  display: block;

  width: 23px;
  height: 23px;

  object-fit: contain;

  filter:
    brightness(0)
    invert(1);

  opacity: 0.96;
}


/* =========================================================
   8C. DEZENTE AUFMERKSAMKEITS-ANIMATION
   ---------------------------------------------------------
   Erst nach einigen Sekunden ein kurzes Aufblinken.
   Danach lange Ruhe.

   Insgesamt nur 3 Durchläufe.
   ========================================================= */

body.home
.amc-hero--home
.gcgf-home-platzstatus.is-closed
.gcgf-home-platzstatus__tab-icon img {

  animation-name:
    gcgf-platzstatus-icon-attention;

  animation-duration:
    30s;

  animation-timing-function:
    ease-in-out;

  animation-iteration-count:
    3;
}


@keyframes gcgf-platzstatus-icon-attention {

  0%,
  18% {
    opacity: 0.96;
  }

  20% {
    opacity: 0.18;
  }

  22%,
  100% {
    opacity: 0.96;
  }

}

/* =========================================================
   9. ZUSTAND: PANEL GESCHLOSSEN
   ========================================================= */

body.home
.amc-hero--home
.gcgf-home-platzstatus.is-closed
.gcgf-home-platzstatus__panel {

  transform:
    translateY(-50%)
    translateX(calc(100% + 100px));

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  transition:
    transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s ease,
    visibility 0s linear 0.38s;
}


/* Reiter einblenden */

body.home
.amc-hero--home
.gcgf-home-platzstatus.is-closed
.gcgf-home-platzstatus__tab {

  opacity: 1;
  visibility: visible;

  transform:
    translate(0, -50%);

  pointer-events: auto;

  transition-delay: 0s;
}


/* =========================================================
   9A. PLATZSTATUS-REITER – DESKTOP
   ---------------------------------------------------------
   Saubere Pixelposition ohne translate-Transform.

   Smartphone und Tablet bleiben unverändert.
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__tab {
    width: 46px;
    height: 152px;

    padding:
      12px 5px 15px;

    font-family: inherit;

    transform: none;
  }


  body.home
  .amc-hero--home
  .gcgf-home-platzstatus.is-closed
  .gcgf-home-platzstatus__tab {

    transform: none;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__tab-label {
    font-family: inherit;

    letter-spacing: 0.065em;
  }

}


/* =========================================================
   9B. REITERPOSITION – NORMALER DESKTOP
   Hero-Höhe 500px
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__tab {
    top: 94px;
  }

}


/* =========================================================
   9C. REITERPOSITION – KLEINER DESKTOP
   Hero-Höhe 470px
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__tab {
    top: 84px;
  }

}



/* =========================================================
   10. KLEINER DESKTOP
   990px bis 1199px
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__panel {
    right: 28px;

    width: 350px;

    padding:
      24px 25px 20px;
  }

}


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

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

  body.home .amc-hero--home .gcgf-home-platzstatus__panel {
    right: 20px;

    width: 330px;

    padding:
      22px 23px 19px;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__title {
    font-size: 21px !important;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__item {
    min-height: 39px;
  }

}


/* =========================================================
   12. SMARTPHONE HOCHFORMAT
   bis 767px
   ========================================================= */

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


  /* =======================================================
     12A. PLATZSTATUS-PANEL
     -------------------------------------------------------
     Das Panel öffnet direkt unterhalb der mobilen
     Logo-/Headerleiste.

     Die genaue Header-Unterkante wird per JavaScript
     automatisch ermittelt.
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__panel {
    position: fixed;

    top:
      calc(
        var(--gcgf-mobile-panel-top, 80px)
        + 45px
      );

    left: 32px;
    right: 32px;

    width: auto;

    max-width: none;

    max-height:
      calc(
        100vh
        - var(--gcgf-mobile-panel-top, 80px)
        - 20px
      );

    max-height:
      calc(
        100dvh
        - var(--gcgf-mobile-panel-top, 80px)
        - 20px
      );

    padding:
      20px 20px 18px;

    overflow-y: auto;

    border-radius: 18px;

    transform: none;

    z-index: 1000 !important;
  }


  /* =======================================================
     12B. ÜBERSCHRIFT
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__title {
    margin-bottom: 13px !important;

    font-size: 20px !important;
  }


  /* =======================================================
     12C. STATUSZEILEN
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__item {
    grid-template-columns:
      30px
      minmax(0, 1fr)
      28px;

    column-gap: 10px;

    min-height: 39px;

    padding: 4px 0 !important;
  }


  /* =======================================================
     12D. SVG-ICONS
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__icon {
    width: 30px;
    height: 30px;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__icon img {
    width: 25px;
    height: 25px;
  }


  /* =======================================================
     12E. BESCHRIFTUNG
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__label {
    font-size: 15px;
  }


  /* =======================================================
     12F. HINWEIS
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__notice {
    margin-top: 12px;

    padding:
      9px 11px;

    font-size: 13px;
  }


  /* =======================================================
     12G. ZEITSTEMPEL
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__updated {
    margin-top: 10px;
  }


  /* =======================================================
     12H. PANEL GESCHLOSSEN
     ======================================================= */

  body.home
  .amc-hero--home
  .gcgf-home-platzstatus.is-closed
  .gcgf-home-platzstatus__panel {

    transform:
      translateX(calc(100% + 30px));
  }


  /* =======================================================
     12I. PLATZSTATUS-REITER
     ======================================================= */

  body.home .amc-hero--home .gcgf-home-platzstatus__tab {
    top: 29%;

    width: 44px;
    height: 144px;

    padding:
      11px 7px 10px;

    gap: 9px;

    border-radius:
      10px 0 0 10px;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__tab-label {
    font-size: 11.5px;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__tab-icon {
    width: 22px;
    height: 22px;

    flex-basis: 22px;
  }


  body.home .amc-hero--home .gcgf-home-platzstatus__tab-icon img {
    width: 21px;
    height: 21px;
  }

}


/* =========================================================
   13. SMARTPHONE QUERFORMAT
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__panel {
    top: 12px;
    right: 14px;
    bottom: 12px;

    width: 330px;
    max-height: none;

    padding:
      18px 20px 16px;

    transform: none;
  }


  body.home
  .amc-hero--home
  .gcgf-home-platzstatus.is-closed
  .gcgf-home-platzstatus__panel {

    transform:
      translateX(calc(100% + 40px));
  }

}


/* =========================================================
   14. REDUCED MOTION
   ========================================================= */

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

  body.home .amc-hero--home .gcgf-home-platzstatus__panel,
  body.home .amc-hero--home .gcgf-home-platzstatus__tab,
  body.home .amc-hero--home .gcgf-home-platzstatus__close {
    transition: none;
  }


  body.home
  .amc-hero--home
  .gcgf-home-platzstatus__tab-icon img {

    animation: none !important;
  }

}