/* HX Electric — Bottom Tab Bar (nur Mobile) */
.hx-tabbar {
  display: none;
  /* Klebt IMMER unten am Bildschirmrand */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid rgba(255,215,0,0.15);
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 860px) {
  .hx-tabbar { display: flex; justify-content: space-around; align-items: flex-start; }
  /* Platz schaffen damit nichts hinter der Tabbar verschwindet */
  body { padding-bottom: 72px !important; }
}

.hx-tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px;
  color: #888 !important;
  text-decoration: none !important;
  transition: color .15s;
  min-width: 0;
}
.hx-tab svg {
  width: 22px; height: 22px; stroke-width: 2;
  transition: stroke .15s;
}
.hx-tab span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hx-tab:hover { color: #ccc !important; }
.hx-tab.active { color: #FFD700 !important; }

/* Upload-Button (Center): extra prominent */
.hx-tab-cta { position: relative; }
.hx-tab-cta-inner {
  width: 44px; height: 44px;
  background: #FFD700; color: #000;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin-top: -18px;
  box-shadow: 0 4px 20px rgba(255,215,0,0.4);
  transition: transform .15s, box-shadow .15s;
}
.hx-tab-cta:active .hx-tab-cta-inner,
.hx-tab-cta:hover .hx-tab-cta-inner { transform: scale(0.95); }
.hx-tab-cta-inner svg { width: 22px; height: 22px; stroke: #000 !important; }
.hx-tab-cta span { color: #FFD700 !important; margin-top: 2px; }
.hx-tab-cta.active .hx-tab-cta-inner { box-shadow: 0 4px 24px rgba(255,215,0,0.7); }