/* Lighthouse: Font Awesome 7 ships with font-display:block – override to swap */
@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fa-brands-400.e7461d69dbbff1310a5c.woff2) format("woff2");
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/fa-regular-400.1f38a564cd9eae27ebc3.woff2) format("woff2");
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(/assets/fonts/fa-solid-900.0ae4e6254fc19607c79e.woff2) format("woff2");
}

/* Roboto/Inter werden non-blocking in public/index.html geladen */
* {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Base styles with Roboto */
body {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* Headings with Roboto */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 500;
  line-height: 1.2;
}

/* Input elements with Roboto */
input, textarea, select, button {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Roboto weight utilities */
.font-roboto-light {
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
}

.font-roboto-regular {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

.font-roboto-medium {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

.font-roboto-bold {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

.font-roboto-black {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
}
/* Modern Badge Styles */
.modern-badge {
  font-family: 'Inter', 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  text-align: center;
}

.modern-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 3px 6px rgba(0, 0, 0, 0.15);
}

/* Popular Badge */
.badge-popular {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

/* Discount Badge */
.badge-discount {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
  color: white;
}

/* Customizable Badge */
.badge-customizable {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

/* Badge container positioning */
.badge-container {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 10;
}

/* Responsive badge sizes */
@media (max-width: 768px) {
  .modern-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
  }
}

@media (min-width: 769px) {
  .modern-badge {
    font-size: 0.75rem;
    padding: 0.15rem 0.25rem;
  }
}