/* ===========================
   VERTICAL SLIDER – COMPLETE (namespaced)
=========================== */
.gh-unfck-vertical { min-height: var(--gh-min-h, 400px); }

/* Bühne in der Problem-Section etwas breiter */
.problem-section .container-narrow { max-width: 900px; }

/* Wrapper (Grundlayout) */
.gh-unfck-vertical.vertical-slider-wrapper{
  display:flex;
  /* keine feste Richtung hier – wird per .nav-left / .nav-right gesetzt */
  gap:30px;
  align-items:center;
  min-height:400px;
  touch-action: pan-y;
}

/* Richtung über Klasse steuern */
.gh-unfck-vertical.nav-right { flex-direction: row-reverse; } /* Content links, Navi rechts */
.gh-unfck-vertical.nav-left  { flex-direction: row; }         /* Navi links, Content rechts */

/* Abstände je Richtung */
.gh-unfck-vertical.nav-right .slider-content { margin-left: 74px; margin-right: 0; }
.gh-unfck-vertical.nav-left  .slider-content { margin-right: 74px; margin-left:  0; }


/* Navigation / Track */
.gh-unfck-vertical .slider-navigation{
  flex:0 0 50px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  align-self:stretch;
}
.gh-unfck-vertical .slider-track{
  position:absolute;
  top:0; bottom:0; left:50%;
  width:2px;
  background:#cfcfcf;
  transform:translateX(-1px);
}

/* Pfeile & Dots-Container */
.gh-unfck-vertical .slider-controls{
  position:relative; z-index:2;
  display:flex; flex-direction:column;
  align-items:center; justify-content:space-between;
  height:100%;
}
.gh-unfck-vertical .slider-control{
  background:none !important; border:0 !important; cursor:pointer;
  padding:10px; transition: transform .2s ease;
}
@media (hover:hover){
  .gh-unfck-vertical .slider-control:hover{ transform: scale(1.12); }
}

/* Dots – rechteckig/quad, am Track zentriert */
.gh-unfck-vertical .slider-dots{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column;
  justify-content:space-between;  /* gleichmäßig zwischen den Pfeilen */
  align-items:center;
  height:70%;
}
.gh-unfck-vertical .slider-dots li{ margin:0; }
.gh-unfck-vertical .slider-dots button{
  width:12px; height:12px;
  background:transparent;
  border:2px solid var(--color-grey-light, #ddd);
  border-radius:2px;              /* 0 = ganz eckig; 2px = leicht eckig */
  padding:0; display:block;
  transform: translateX(-1px);    /* exakt auf die Track-Mitte */
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
  cursor:pointer;
}
.gh-unfck-vertical .slider-dots button:hover{ border-color: var(--color-blue-main, #0057FF); }
.gh-unfck-vertical .slider-dots button.active,
.gh-unfck-vertical .slider-dots button[aria-current="true"]{
  background: var(--color-blue-main, #0057FF);
  border-color: var(--color-blue-main, #0057FF);
  transform: translateX(-1px) scale(1.1);
}
.gh-unfck-vertical .slider-dots button:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 3px rgba(0,87,255,.35);
  border-color: var(--color-blue-main, #0057FF);
}

/* Slides */
.gh-unfck-vertical .slider-content{ flex:1; text-align:center; margin-left: 74px; }

/* Nur noch Transition, keine Keyframes/animation mehr */
.gh-unfck-vertical .slide{
  display: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--gh-speed, .5s) ease, transform var(--gh-speed, .5s) ease;
}
.gh-unfck-vertical .slide.active{
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Fade-/Slide-Modus feinjustieren */
.mode-fade .slide       { transform: none; }
.mode-fade .slide.active{ opacity: 1; }
.mode-fade .slide:not(.active){ opacity: 0; }

/* Bewegung reduzieren respektieren */
@media (prefers-reduced-motion: reduce){
  .gh-unfck-vertical .slider-control, .gh-unfck-vertical .slider-dots button{ transition:none; }
  .gh-unfck-vertical .slide{ animation:none; }
}

/* Slide-Inhalte */
.gh-unfck-vertical .slide .icon{
  width:40px; height:30px; margin:0 auto 25px;
  background:var(--color-blue-main, #0057FF);
  box-shadow:-3px 3px 0 #E60023, 3px -3px 0 #0070F3;
}
.gh-unfck-vertical .slide h3{
  font-family:var(--font-text, inherit);
  font-style:italic;
  font-size:1.8rem;
  font-weight:500;
  color:var(--color-black, #000);
  margin-bottom:20px;
}
.gh-unfck-vertical .slide .quote-source{
  margin:-10px 0 18px;
  color:var(--color-grey-light, #6E6E6E);
  font-size:.95rem; line-height:1.4;
}
.gh-unfck-vertical .slide .quote-source cite{ font-style:normal; }
.gh-unfck-vertical .slide .subtext{ color:var(--color-grey-light, #6E6E6E); }

@media (max-width: 768px){
  .gh-unfck-vertical .slider-navigation{ flex-basis: 40px; }
  .gh-unfck-vertical .slider-dots{ gap: 22px; }
  .gh-unfck-vertical .slider-dots button{
    width: 16px; height: 16px; border-width: 2px; transform: translateX(-1px);
  }
  .gh-unfck-vertical .slider-dots button.active,
  .gh-unfck-vertical .slider-dots button[aria-current="true"]{
    transform: translateX(-1px) scale(1.12);
  }
  .gh-unfck-vertical .slider-control{ padding: 8px; }
  .gh-unfck-vertical .slider-control svg{ width: 20px; height: 20px; }

  /* je nach Seite evtl. beide auf 20px setzen; hier bleiben wir konsistent: */
  .gh-unfck-vertical.nav-right .slider-content { margin-left: 20px; margin-right: 0; }
  .gh-unfck-vertical.nav-left  .slider-content { margin-right: 20px; margin-left:  0; }
}


/* Transition-Geschwindigkeit über --gh-speed steuerbar */
.gh-unfck-vertical .slide {
  transition: opacity var(--gh-speed, .5s) ease, transform var(--gh-speed, .5s) ease;
}

/* Fade-Modus: hauptsächlich Opacity */
.mode-fade .slide { transform: none; }
.mode-fade .slide.active { opacity: 1; }
.mode-fade .slide:not(.active) { opacity: 0; }

/* Slide-Modus: kleine vertikale Bewegung */
.mode-slide .slide { opacity: 0; transform: translateY(12px); }
.mode-slide .slide.active { opacity: 1; transform: translateY(0); }