/* =========================
   QUICKBAR SHARED – zentral für Hauptseite + Landingpages
   ========================= */

:root{
  --qb-vv-gap: 0px;
}

@keyframes qbShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.quickbar{
  position: fixed !important;
  top: 50% !important;
  right: max(12px, env(safe-area-inset-right, 0px)) !important;
  bottom: auto !important;
  left: auto !important;
  transform: translateY(-50%) !important;
  z-index: 2147483647 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

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

  background: rgba(18,24,36,.22) !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(18px) saturate(1.18) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.18) !important;

  isolation: isolate;
  contain: layout paint style;
  will-change: transform;
  overflow: visible !important;
}

.quickbar::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.18) 0%,
      rgba(255,255,255,.06) 18%,
      rgba(255,208,0,.12) 38%,
      rgba(255,255,255,.04) 58%,
      rgba(255,255,255,.12) 78%,
      rgba(255,208,0,.10) 100%);
  background-size: 220% 220%;
  animation: qbShimmer 8s linear infinite;
  opacity: .92;
}

.quickbar::after{
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: calc(18px - 1px);
  pointer-events: none;
  z-index: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(255,255,255,.03);
}

html.light .quickbar{
  background: rgba(255,255,255,.32) !important;
  border: 1px solid rgba(0,0,0,.92) !important;
  box-shadow: 0 14px 30px rgba(15,22,36,.14), inset 0 1px 0 rgba(255,255,255,.42) !important;
}

html.light .quickbar::before{
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.48) 0%,
      rgba(255,255,255,.20) 18%,
      rgba(255,208,0,.18) 38%,
      rgba(255,255,255,.12) 58%,
      rgba(255,255,255,.34) 78%,
      rgba(255,208,0,.16) 100%);
  opacity: .96;
}

.quickbar > *{
  position: relative;
  z-index: 2;
}

.quickbar .quickbtn{
  position: relative;
  z-index: 3 !important;

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

  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  flex: 0 0 44px !important;
  aspect-ratio: 1 / 1 !important;

  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;

  background: rgba(15,19,27,.56) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter: blur(10px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.15) !important;

  text-decoration:none !important;
  line-height:1 !important;
  white-space:nowrap !important;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation !important;
  transition: transform .18s ease, opacity .18s ease, background-color .18s ease, box-shadow .18s ease, border-color .18s ease;
  cursor: pointer !important;
}

.quickbar .quickbtn:hover{
  transform: translateY(-1px);
  background: rgba(24,30,44,.68) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

html.light .quickbar .quickbtn{
  background: rgba(255,255,255,.44) !important;
  color:#0f1624 !important;
  border: 1px solid rgba(15,22,36,.10) !important;
  box-shadow: 0 8px 18px rgba(15,22,36,.10), inset 0 1px 0 rgba(255,255,255,.34) !important;
}

html.light .quickbar .quickbtn:hover{
  background: rgba(255,255,255,.58) !important;
}

.quickbar.qb-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
}

.quickbar .qb-toggle-btn {
  opacity: 0.92;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

.quickbar .qb-toggle-btn:hover { opacity: 1; }

.quickbar.qb-collapsed .quickbtn:not(.qb-toggle-btn) {
  display: none !important;
}
.quickbar.qb-collapsed {
  gap: 0 !important;
  padding: 5px !important;
}

.quickbar .qb-icon-expand { display: block !important; }
.quickbar .qb-icon-collapse { display: none !important; }
.quickbar.qb-collapsed .qb-icon-expand  { display: none !important; }
.quickbar.qb-collapsed .qb-icon-collapse{ display: block !important; }

.quickbar .quickbtn svg,
.quickbar .quickbtn img,
.quickbar .quickbtn i.icon,
.quickbar .quickbtn .icon{
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  display:block !important;
  object-fit: contain !important;
  pointer-events:none;
}

.quickbar .quick-counter{
  font-weight: 800 !important;
  font-size: 12px !important;
  letter-spacing: -.02em !important;
}

.quickbar .quick-counter i{
  font-style: normal !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.quickbar .badge,
.quickbar .a11y-badge{
  z-index: 2147483647 !important;
}

@media (max-width:1024px){
  .quickbar{
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    bottom: calc(var(--qb-vv-gap, 0px) + env(safe-area-inset-bottom, 0px) + 8px) !important;

    display:flex !important;
    flex-direction: row !important;
    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;
    padding:5px !important;
    border-radius:16px !important;
    z-index:2147483647 !important;
    max-width: calc(100vw - 12px) !important;
  }

  .quickbar::after{
    border-radius: calc(16px - 1px);
  }

  .quickbar .quickbtn{
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    min-height:36px !important;
    max-width:36px !important;
    max-height:36px !important;
    flex:0 0 36px !important;
    border-radius:10px !important;
  }

  .quickbar .quickbtn svg,
  .quickbar .quickbtn img,
  .quickbar .quickbtn i.icon,
  .quickbar .quickbtn .icon{
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
    min-height:16px !important;
    max-width:16px !important;
    max-height:16px !important;
  }

  .quickbar .quick-counter{
    min-width:50px !important;
    height:36px !important;
    padding:0 8px !important;
    font-size:11px !important;
    flex:0 0 auto !important;
  }
}

@media (max-width:768px){
  .quickbar {
    bottom: calc(var(--qb-vv-gap, 0px) + env(safe-area-inset-bottom, 0px) + 6px) !important;
  }
}

@media (max-width:390px){
  .quickbar {
    bottom: calc(var(--qb-vv-gap, 0px) + env(safe-area-inset-bottom, 0px) + 4px) !important;
    gap:5px !important;
    padding:4px !important;
    border-radius:15px !important;
  }

  .quickbar::after{
    border-radius: calc(15px - 1px);
  }

  .quickbar .quickbtn{
    width:34px !important;
    height:34px !important;
    min-width:34px !important;
    min-height:34px !important;
    max-width:34px !important;
    max-height:34px !important;
    flex:0 0 34px !important;
    border-radius:9px !important;
  }

  .quickbar .quickbtn svg,
  .quickbar .quickbtn img,
  .quickbar .quickbtn i.icon,
  .quickbar .quickbtn .icon{
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    min-height:15px !important;
    max-width:15px !important;
    max-height:15px !important;
  }

  .quickbar .quick-counter{
    min-width:46px !important;
    height:34px !important;
    font-size:10px !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .quickbar::before,
  .quickbar .quickbtn{
    animation: none !important;
    transition: none !important;
  }
}