/* Glass 1 — Subtil (Nav, Tooltip) */
.glass-1 {
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-md);
}

/* Glass 2 — Default (Product-Card, Themenwelt-Tile) */
.glass-2 {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
}

/* Glass 3 — Ember CTA */
.glass-3 {
  background: rgba(232, 80, 10, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(232, 80, 10, 0.4);
  border-radius: var(--radius-md);
  color: var(--c-snow);
}
.glass-3:hover { background: rgba(232, 80, 10, 0.32); border-color: rgba(232, 80, 10, 0.6); }

/* Glass 4 — Brass Premium-Badge */
.glass-4 {
  background: rgba(201, 169, 110, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(201, 169, 110, 0.35);
  border-radius: var(--radius-md);
  color: var(--c-bone);
}

/* Fallback — Browser ohne backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-1 { background: rgba(26, 37, 16, 0.7); }
  .glass-2 { background: rgba(26, 37, 16, 0.78); }
  .glass-3 { background: rgba(232, 80, 10, 0.85); }
  .glass-4 { background: rgba(201, 169, 110, 0.85); color: var(--c-forest); }
}

/* Shared hover-lift utility (used by Glass 1 + 2 cards) */
.lift {
  transition: transform var(--dur-base) var(--ease-lift),
              box-shadow var(--dur-base) var(--ease-lift),
              border-color var(--dur-base) var(--ease-lift);
}
.lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}