html, body {
  height: 100%;
}

body {
  background: #0b0b0f;
  color: #eaeef3;
}

#bg-video {
  position: fixed;
  inset: 0;
  object-fit: cover;
  opacity: .28;
  z-index: -1;
}

.glass {
  background: rgba(14,16,22,.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.06);
}

.card {
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

.btn {
  transition: transform .08s ease, box-shadow .2s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.kbd {
  border: 1px solid rgba(255,255,255,.12);
  border-bottom-width: 2px;
}

/* Canvas scharf auf HiDPI */
#qr-canvas {
  background: #fff;
  border-radius: 14px;
}

/* Tabs */
.tab-active {
  background: #0ea5e9;
  color: #ffffff;
  font-weight: 700;
}

/* Galerie */
#logo-gallery img {
  background: #fff;
  border-radius: 10px;
  border: 2px solid transparent;
}

#logo-gallery img:hover {
  border-color: #0ea5e9;
}

/* FAQ */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}