/* =========================================================
   GCGF – SEITLICHER FAQ-REITER
   Aktuelle Version mit JavaScript-Ankerscrollen
   ========================================================= */


/* =========================================================
   ANKER UND SCROLLVERHALTEN
   ========================================================= */

/*
 * Das kontrollierte, langsamere Scrollen übernimmt das
 * separate JavaScript. Dadurch entstehen keine Konflikte
 * mit dem Browser oder der Enfold-Ankeranimation.
 */

html {
  scroll-behavior: auto;
}


/*
 * Dient weiterhin für direkte Seitenaufrufe mit #faq,
 * beispielsweise:
 * /angebote-fuer-einsteiger/#faq
 *
 * Die ID "faq" befindet sich ausschließlich an der
 * Enfold-Farbsektion des FAQ-Bereichs.
 */

#faq {
  scroll-margin-top: 130px;
}


/* =========================================================
   FAQ-REITER – GRUNDEINSTELLUNGEN
   ========================================================= */

.gcgf-side-tab {
  position: fixed;
  right: 0;
  top: 48%;
  z-index: 9999;

  width: 95px;
  min-height: 56px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: 10px 12px;

  color: #ffffff !important;
  text-decoration: none !important;

  font-size: 15px;
  font-weight: 700;
  line-height: 1;

  border: 0;
  border-radius: 12px 0 0 12px;

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

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


/* Grüne Grundfarbe */

.gcgf-side-tab-faq {
  background-color: #679938;
}


/* =========================================================
   FRAGEZEICHEN-SYMBOL
   ========================================================= */

.gcgf-side-tab-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  box-sizing: border-box;

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

  color: #679938;
  background-color: #ffffff;

  border-radius: 50%;

  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}


/* Text innerhalb des Reiters */

.gcgf-side-tab-text {
  display: inline-block;

  color: #ffffff;
  white-space: nowrap;
}


/* =========================================================
   HOVER UND TASTATURFOKUS
   ========================================================= */

.gcgf-side-tab:hover,
.gcgf-side-tab:focus-visible {
  width: 105px;

  color: #ffffff !important;
  background-color: #567f30;

  text-decoration: none !important;

  box-shadow:
    0 9px 24px rgba(24, 61, 37, 0.30);
}


/* Weißes Fragezeichen-Symbol auch bei Hover beibehalten */

.gcgf-side-tab:hover .gcgf-side-tab-icon,
.gcgf-side-tab:focus-visible .gcgf-side-tab-icon {
  color: #567f30;
  background-color: #ffffff;
}


/* Sichtbarer Fokus bei Tastaturbedienung */

.gcgf-side-tab:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.95);
  outline-offset: -5px;
}


/* =========================================================
   TABLET
   ========================================================= */

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

  #faq {
    scroll-margin-top: 115px;
  }

  .gcgf-side-tab {
    top: 52%;

    width: 82px;
    min-height: 50px;

    padding: 9px 10px;
    gap: 6px;

    font-size: 14px;

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

  .gcgf-side-tab-icon {
    width: 23px;
    height: 23px;
    flex-basis: 23px;

    font-size: 15px;
  }

  .gcgf-side-tab:hover,
  .gcgf-side-tab:focus-visible {
    width: 90px;
  }

}


/* =========================================================
   SMARTPHONE
   ========================================================= */

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

  #faq {
    scroll-margin-top: 95px;
  }

  .gcgf-side-tab {
    top: auto;
    bottom: 105px;

    width: 62px;
    min-height: 44px;

    padding: 8px;
    gap: 5px;

    font-size: 13px;

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

  .gcgf-side-tab-icon {
    width: 21px;
    height: 21px;
    flex-basis: 21px;

    font-size: 14px;
  }

  .gcgf-side-tab:hover,
  .gcgf-side-tab:focus-visible {
    width: 68px;
  }

}


/* =========================================================
   REDUZIERTE BEWEGUNG
   ========================================================= */

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

  .gcgf-side-tab {
    transition: none;
  }

}