/* JHB Wegweiser System 2.0.0 – 20-sticky-navigation */
/* =========================================================
   Desktop Sticky-Kompaktleiste – eigener Scope
   ========================================================= */


.jhb-guide-system-stickybar{
  z-index:var(--jhb-guide-sticky-z,900);
}


.jhb-guide-system-stickybar{
  --jhb-guide-green:#6E9079;
  --jhb-guide-green-dark:#55715F;
  --jhb-guide-page-rgb:110,144,121;
  --jhb-guide-accent:var(--jhb-guide-green);
  --jhb-guide-accent-dark:var(--jhb-guide-green-dark);
  --jhb-guide-accent-soft:#EFF5F1;
  --jhb-guide-active-bg:rgba(var(--jhb-guide-page-rgb),.115);
  --jhb-guide-active-bg-hover:rgba(var(--jhb-guide-page-rgb),.16);
  --jhb-guide-border-color:rgba(var(--jhb-guide-page-rgb),.16);
  --jhb-guide-line-color:rgba(var(--jhb-guide-page-rgb),.095);
  --jhb-guide-shadow-color:rgba(var(--jhb-guide-page-rgb),.065);
  --jhb-guide-arrow-bg:rgba(255,253,249,.72);
  --jhb-guide-arrow-border:rgba(var(--jhb-guide-page-rgb),.16);
  --jhb-guide-arrow-color:var(--jhb-guide-green-dark);
  --jhb-guide-arrow-shadow:0 5px 12px rgba(var(--jhb-guide-page-rgb),.10), inset 0 1px 0 rgba(255,255,255,.78);
  --jhb-guide-orange-dark:#C95409;
  --jhb-guide-ink:#183243;
  --jhb-guide-ink-strong:#112638;
  --jhb-guide-sticky-top:108px;
  --jhb-guide-sticky-z:900;

  position:fixed;
  left:0;
  right:0;
  top:var(--jhb-guide-sticky-top);
  z-index:var(--jhb-guide-sticky-z);
  pointer-events:none;
  opacity:0;
  transform:translateY(-7px) scale(.985);
  transition:opacity .22s ease,transform .28s cubic-bezier(.22,1,.36,1);
  background:transparent;
  border:0;
  outline:0;
  box-shadow:none;
  font-family:"Nunito Sans",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.jhb-guide-system-stickybar:focus,
.jhb-guide-system-stickybar:focus-visible,
.jhb-guide-system-stickybar .jhb-guide__wrap:focus,
.jhb-guide-system-stickybar .jhb-guide__shell:focus{
  outline:0;
}

body.admin-bar .jhb-guide-system-stickybar{
  --jhb-guide-sticky-top:118px;
}

.jhb-guide-system-stickybar.is-visible{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}

.jhb-guide-system-stickybar--freier-traeger{
  transition:opacity .18s ease, transform .18s ease;
}

@media (prefers-reduced-motion: no-preference){
  .jhb-guide-system-stickybar.is-visible.is-attention .jhb-guide__shell{
    animation:jhb-guide-sticky-dock 1.45s cubic-bezier(.22,.72,.2,1) both;
    will-change:transform,box-shadow;
  }

  .jhb-guide-system-stickybar.is-visible.is-attention .jhb-guide__item.is-active{
    animation:jhb-guide-sticky-active-cue 1.45s cubic-bezier(.22,.72,.2,1) both;
    will-change:transform,background-color,box-shadow;
  }

  .jhb-guide-system-stickybar.is-visible.is-attention .jhb-guide__item.is-active::after{
    animation:jhb-guide-sticky-line-cue 1.45s cubic-bezier(.22,.72,.2,1) both;
  }
}

@keyframes jhb-guide-sticky-svg-trace{
  0%{
    opacity:0;
    stroke-dashoffset:1;
  }
  12%{
    opacity:.12;
  }
  28%{
    opacity:.76;
  }
  76%{
    opacity:.58;
  }
  92%{
    opacity:.16;
  }
  100%{
    opacity:0;
    stroke-dashoffset:0;
  }
}

@keyframes jhb-guide-sticky-svg-glow{
  0%{
    opacity:0;
    stroke-dashoffset:1;
  }
  16%{
    opacity:.04;
  }
  34%{
    opacity:.20;
  }
  78%{
    opacity:.13;
  }
  100%{
    opacity:0;
    stroke-dashoffset:0;
  }
}

@keyframes jhb-guide-sticky-dock{
  0%{
    transform:translateY(-4px) scale(.994);
    box-shadow:0 11px 26px rgba(var(--jhb-guide-page-rgb),.045),0 1px 0 rgba(255,255,255,.84) inset;
  }
  48%{
    transform:translateY(0) scale(1.003);
    box-shadow:0 18px 40px rgba(var(--jhb-guide-page-rgb),.105),0 0 0 3px rgba(var(--jhb-guide-page-rgb),.028),0 1px 0 rgba(255,255,255,.92) inset;
  }
  100%{
    transform:translateY(0) scale(1);
    box-shadow:0 14px 32px var(--jhb-guide-shadow-color),0 1px 0 rgba(255,255,255,.88) inset;
  }
}

@keyframes jhb-guide-sticky-active-cue{
  0%{
    transform:scale(.995);
    background:rgba(var(--jhb-guide-page-rgb),.09);
    box-shadow:inset 0 0 0 1px rgba(var(--jhb-guide-page-rgb),.07);
  }
  50%{
    transform:scale(1.012);
    background:rgba(var(--jhb-guide-page-rgb),.155);
    box-shadow:inset 0 0 0 1px rgba(var(--jhb-guide-page-rgb),.14),0 5px 13px rgba(var(--jhb-guide-page-rgb),.07);
  }
  100%{
    transform:scale(1);
    background:var(--jhb-guide-active-bg);
    box-shadow:inset 0 0 0 1px rgba(85,113,95,.13);
  }
}

@keyframes jhb-guide-sticky-line-cue{
  0%{
    opacity:0;
    transform:translate(-50%,2px) scaleX(.7);
  }
  50%{
    opacity:.5;
    transform:translate(-50%,0) scaleX(1.16);
  }
  100%{
    opacity:.35;
    transform:translate(-50%,0) scaleX(1);
  }
}

.jhb-guide-system-stickybar .jhb-guide__wrap{
  width:min(880px,calc(100% - 36px));
  margin:0 auto;
}

.jhb-guide-system-stickybar .jhb-guide__shell{
  position:relative;
  isolation:isolate;
  display:block;
  width:fit-content;
  max-width:100%;
  margin:0 auto;
  padding:5px;
  border:1px solid var(--jhb-guide-border-color);
  border-radius:999px;
  background:rgba(255,253,249,.94);
  box-shadow:0 14px 32px var(--jhb-guide-shadow-color),0 1px 0 rgba(255,255,255,.88) inset;
  -webkit-backdrop-filter:saturate(1.15) blur(18px);
  backdrop-filter:saturate(1.15) blur(18px);
  overflow:visible;
}

.jhb-guide-system-stickybar .jhb-guide__dock-trace{
  position:absolute;
  z-index:4;
  overflow:visible;
  pointer-events:none;
}

.jhb-guide-system-stickybar .jhb-guide__dock-trace rect{
  fill:none;
  stroke:rgb(var(--jhb-guide-page-rgb));
  stroke-linecap:round;
  stroke-dasharray:.14 .86;
  stroke-dashoffset:1;
  vector-effect:non-scaling-stroke;
  opacity:0;
}

.jhb-guide-system-stickybar .jhb-guide__dock-trace-glow{
  stroke-width:4.2;
  filter:drop-shadow(0 0 4px rgba(var(--jhb-guide-page-rgb),.12));
}

.jhb-guide-system-stickybar .jhb-guide__dock-trace-line{
  stroke-width:1.25;
  filter:drop-shadow(0 0 1.6px rgba(var(--jhb-guide-page-rgb),.20));
}

@media (prefers-reduced-motion: no-preference){
  .jhb-guide-system-stickybar .jhb-guide__dock-trace.is-running .jhb-guide__dock-trace-glow{
    animation:jhb-guide-sticky-svg-glow 3.25s cubic-bezier(.34,.04,.18,1) both;
  }

  .jhb-guide-system-stickybar .jhb-guide__dock-trace.is-running .jhb-guide__dock-trace-line{
    animation:jhb-guide-sticky-svg-trace 3.25s cubic-bezier(.34,.04,.18,1) both;
  }
}

.jhb-guide-system-stickybar--freier-traeger .jhb-guide__shell{
  background:rgba(255,255,255,.94);
  box-shadow:0 14px 32px rgba(84,48,24,.075),0 1px 0 rgba(255,255,255,.9) inset;
}

.jhb-guide-system-stickybar .jhb-guide__head,
.jhb-guide-system-stickybar .jhb-guide__related,
.jhb-guide-system-stickybar .jhb-guide__nav-intro,
.jhb-guide-system-stickybar .jhb-guide__mobile-label{
  display:none;
}

.jhb-guide-system-stickybar .jhb-guide__items{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}

.jhb-guide-system-stickybar .jhb-guide__item{
  position:relative;
  display:flex;
  align-items:center;
  min-height:34px;
  padding:7px 12px;
  border:0;
  border-radius:999px;
  color:var(--jhb-guide-ink);
  background:transparent;
  text-decoration:none;
}

.jhb-guide-system-stickybar .jhb-guide__item small,
.jhb-guide-system-stickybar .jhb-guide__item-arrow{
  display:none;
}

.jhb-guide-system-stickybar .jhb-guide__item-label{
  display:block;
  color:var(--jhb-guide-green-dark);
  font-size:.72rem;
  font-weight:850;
  line-height:1;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap;
}

.jhb-guide-system-stickybar .jhb-guide__item::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:5px;
  width:13px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  opacity:0;
  transform:translate(-50%,3px) scaleX(.65);
  transform-origin:center;
  transition:opacity .18s ease,transform .18s ease;
}

.jhb-guide-system-stickybar .jhb-guide__item.is-active::after{
  opacity:.35;
  transform:translate(-50%,0) scaleX(1);
}

.jhb-guide-system-stickybar .jhb-guide__item:hover,
.jhb-guide-system-stickybar .jhb-guide__item:focus-visible,
.jhb-guide-system-stickybar .jhb-guide__item.is-active{
  background:var(--jhb-guide-active-bg);
  box-shadow:inset 0 0 0 1px rgba(85,113,95,.13);
  outline:none;
}

.jhb-guide-system-stickybar--freier-traeger .jhb-guide__item:hover,
.jhb-guide-system-stickybar--freier-traeger .jhb-guide__item:focus-visible,
.jhb-guide-system-stickybar--freier-traeger .jhb-guide__item.is-active{
  background:rgba(233,98,11,.105);
  box-shadow:inset 0 0 0 1px rgba(233,98,11,.13);
}

.jhb-guide-system-stickybar .jhb-guide__item.is-active .jhb-guide__item-label{
  color:var(--jhb-guide-green-dark);
}

.jhb-guide-system-stickybar .jhb-guide__dismiss{
  display:grid;
  place-items:center;
  flex:0 0 auto;
  width:32px;
  height:32px;
  margin-left:2px;
  border:0;
  border-radius:999px;
  background:rgba(var(--jhb-guide-page-rgb),.075);
  color:var(--jhb-guide-green-dark);
  font:inherit;
  font-size:0;
  line-height:0;
  cursor:pointer;
  transition:background-color .2s ease,color .2s ease;
}

.jhb-guide-system-stickybar .jhb-guide__dismiss:hover,
.jhb-guide-system-stickybar .jhb-guide__dismiss:focus-visible{
  background:rgba(var(--jhb-guide-page-rgb),.12);
  color:var(--jhb-guide-green-dark);
  outline:none;
}



.jhb-guide-system-stickybar .jhb-guide__dismiss span{
  position:relative;
  display:block;
  width:13px;
  height:13px;
}

.jhb-guide-system-stickybar .jhb-guide__dismiss span::before,
.jhb-guide-system-stickybar .jhb-guide__dismiss span::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:13px;
  height:1.6px;
  border-radius:999px;
  background:currentColor;
  transform-origin:center;
}

.jhb-guide-system-stickybar .jhb-guide__dismiss span::before{
  transform:translate(-50%,-50%) rotate(45deg);
}

.jhb-guide-system-stickybar .jhb-guide__dismiss span::after{
  transform:translate(-50%,-50%) rotate(-45deg);
}

.jhb-guide-anchor{
  display:block;
  position:relative;
  top:-112px;
  width:0;
  height:0;
  overflow:hidden;
}


@media (min-width: 768px){
  .jhb-guide-system.jhb-guide.is-sticky-clone-visible .jhb-guide__shell{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}
