/* Pepswerk Bottom Bar 3.1.0
   Ein einziges, sauberes Stylesheet. Alle Maße in festen px, damit die Leiste
   auf jedem Handy gleich aussieht (unabhängig von Theme-rem, Schriftskalierung
   oder Bildschirmbreite). Desktop ab 1025px als kleines Icon-Dock. */

#pwbb-nav,#pwbb-spacer{display:none}

@media screen{
 html body #pwbb-nav{
  --pw-accent:#bd82ff;
  --pw-accent-2:#8b3dff;
  --pw-text:#e2dfe7;
  --pw-text-active:#ffffff;
  --pw-bg:rgba(5,5,5,.72);
  --pw-x:0px;--pw-w:0px;
  all:initial;
  display:block!important;
  position:fixed!important;
  left:0!important;right:0!important;top:auto!important;
  bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
  z-index:9990!important;
  width:330px!important;max-width:calc(100% - 32px)!important;
  margin:0 auto!important;padding:2px 4px!important;
  box-sizing:border-box!important;
  border-radius:999px!important;
  background:var(--pw-bg)!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 5px 16px rgba(0,0,0,.15),inset 0 1px 0 rgba(255,255,255,.04)!important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  -webkit-text-size-adjust:100%!important;text-size-adjust:100%!important;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important;
  -webkit-font-smoothing:antialiased;
  transform:translateZ(0);
  isolation:isolate;
  -webkit-user-select:none;user-select:none;
 }

 /* Gleitende Markierung hinter dem aktiven Punkt */
 #pwbb-nav .pwbb-ind{
  position:absolute;top:2px;bottom:2px;left:0;
  width:var(--pw-w);
  transform:translateX(var(--pw-x));
  border-radius:999px;
  background:rgba(189,130,255,.13);
  box-shadow:inset 0 0 0 1px rgba(189,130,255,.18);
  opacity:0;pointer-events:none;z-index:0;
  transition:transform .42s cubic-bezier(.34,1.45,.5,1),width .42s cubic-bezier(.34,1.45,.5,1),opacity .2s ease;
 }
 #pwbb-nav.has-active .pwbb-ind{opacity:1}
 #pwbb-nav.no-anim .pwbb-ind{transition:none}

 #pwbb-nav ul{
  all:unset;
  position:relative;z-index:1;
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:0!important;margin:0!important;padding:0!important;list-style:none!important;
 }
 #pwbb-nav li{all:unset;display:block!important;min-width:0!important;list-style:none!important}
 #pwbb-nav li::before,#pwbb-nav li::marker{content:none!important}

 #pwbb-nav a{
  all:unset;
  position:relative;
  display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
  gap:2px!important;
  height:44px!important;padding:0 1px!important;box-sizing:border-box!important;
  border-radius:999px!important;
  color:var(--pw-text)!important;
  text-decoration:none!important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:color .3s ease;
 }
 #pwbb-nav a svg{
  display:block!important;
  width:21px!important;height:21px!important;flex:none!important;
  fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important;
  transition:transform .42s cubic-bezier(.34,1.6,.5,1),stroke-width .3s ease;
  transform-origin:50% 60%;
 }
 #pwbb-nav a span{
  display:block!important;
  font-size:11px!important;line-height:13px!important;font-weight:400!important;
  letter-spacing:.1px!important;text-transform:none!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:clip!important;max-width:100%!important;
  transition:transform .42s cubic-bezier(.34,1.6,.5,1);
 }

 /* Aktiver Punkt: Farbe + Größe */
 #pwbb-nav a.is-active{color:var(--pw-accent)!important}
 #pwbb-nav a.is-active svg{color:var(--pw-accent);stroke:var(--pw-accent)!important;stroke-width:2!important;transform:scale(1.1)}
 
 /* Drücken: einsinken, beim Loslassen federt es zurück */
 #pwbb-nav a.is-pressed svg{transform:scale(.82)!important;transition-duration:.12s}
 #pwbb-nav a.is-pressed span{transform:scale(.94)}
 #pwbb-nav a.pop svg{animation:pwbb-pop .5s cubic-bezier(.34,1.6,.5,1)}

 #pwbb-nav a:focus-visible{outline:2px solid var(--pw-accent)!important;outline-offset:-2px!important}

 #pwbb-spacer{display:block!important;width:100%;height:calc(var(--pwbb-height,48px) + 24px + env(safe-area-inset-bottom,0px));pointer-events:none}
 html:has(#pwbb-nav){scroll-padding-bottom:calc(var(--pwbb-height,48px) + 24px + env(safe-area-inset-bottom,0px))}
}

@keyframes pwbb-pop{0%{transform:scale(.82)}55%{transform:translateY(-2px) scale(1.22)}100%{transform:scale(1.1)}}

/* Sehr schmale Geräte (< 340px): gleiches Design, nur etwas enger */
@media screen and (max-width:339px){
 html body #pwbb-nav{max-width:calc(100% - 20px)!important;padding:2px 3px!important}
 #pwbb-nav a span{font-size:10px!important;letter-spacing:0!important}
}

/* Desktop: kleines Icon-Dock ohne Beschriftung (Namen bleiben für Screenreader) */
@media screen and (min-width:1025px){
 html body #pwbb-nav{width:258px!important;max-width:258px!important;bottom:18px!important;padding:3px 6px!important}
 #pwbb-nav .pwbb-ind{top:3px;bottom:3px}
 #pwbb-nav a{height:40px!important;padding:0!important;gap:0!important}
 #pwbb-nav a svg{width:22px!important;height:22px!important}
 #pwbb-nav a span{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
 #pwbb-spacer{height:calc(var(--pwbb-height,48px) + 30px)}
}
@media (hover:hover) and (pointer:fine){
 #pwbb-nav a:not(.is-active):hover{color:#d1a0ff!important;background:rgba(255,255,255,.04)!important}
 #pwbb-nav a:not(.is-active):hover svg{transform:translateY(-2px)}
}

@media (prefers-reduced-motion:reduce){
 #pwbb-nav .pwbb-ind,#pwbb-nav a,#pwbb-nav a svg,#pwbb-nav a span{transition:none!important;animation:none!important}
}
@media print{#pwbb-nav,#pwbb-spacer{display:none!important}}
body.woocommerce-checkout #pwbb-nav,body.woocommerce-checkout #pwbb-spacer{display:none!important}