body {
  font-family: 'Inter', sans-serif;
}

/* Add a top margin to scroll targets to offset the fixed header */
section[id] {
  scroll-margin-top: 120px;
}

/* Active link styling */
.nav-link.active {
  color: #c2000b;
}

.nav-link.active span {
  transform: scaleX(1);
}

/* Ensure active link color is maintained on scrolled header */
header.bg-white\/95 .nav-link.active {
    color: #c2000b !important;
}

/* Category card styles on main produkte.html */
.category-card-link {
    @apply block bg-[#1f1f1f] rounded-lg shadow-lg hover:shadow-2xl hover:-translate-y-2 border-l-4 border-transparent hover:border-[#c2000b] transition-all duration-300 flex flex-col h-full overflow-hidden;
}
.category-card-image-container {
    @apply h-48 w-full bg-white overflow-hidden;
}
.category-card-image {
    @apply w-full h-full object-cover transition-transform duration-300 group-hover:scale-110;
}
.category-card-title {
    @apply text-xl font-bold text-gray-100 mb-2;
}
.category-card-description {
    @apply text-gray-400 text-sm flex-grow;
}
.category-card-arrow {
    @apply self-end text-2xl text-[#0397bb] group-hover:translate-x-2 transition-transform duration-300 mt-4;
}


/* Product page specific styles (Bootstrap-like cards) */
.section-title {
    @apply text-3xl font-bold text-gray-100 border-b-2 border-[#0397bb] pb-2 mb-8 mt-16;
}
.product-card {
    @apply bg-[#1f1f1f] rounded-lg shadow-lg overflow-hidden transform hover:-translate-y-1 transition-transform duration-300 flex flex-col;
}
.product-image-container {
    @apply bg-white p-4 h-56 flex items-center justify-center;
}
.product-image {
    @apply max-h-full max-w-full object-contain;
}
.product-info {
    @apply p-6 flex flex-col flex-grow;
}
.product-title {
    @apply font-bold text-lg text-gray-100;
}
.product-description {
    @apply text-gray-400 mt-2 text-sm flex-grow;
}
.product-specs-title {
    @apply text-sm font-semibold text-gray-200;
}

/* Product availability matrix */
.availability-matrix table {
    border-collapse: collapse;
    width: 100%;
    text-align: left;
    font-size: 0.75rem; /* text-xs */
    color: #9ca3af; /* text-gray-400 */
}
.availability-matrix th, 
.availability-matrix td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    border-bottom: 1px solid #374151; /* gray-700 */
}
.availability-matrix thead th {
    font-weight: 600;
    color: #d1d5db; /* gray-300 */
    border-bottom-width: 2px;
    border-color: #4b5563; /* gray-600 */
    text-align: center;
}
.availability-matrix thead th:first-child,
.availability-matrix thead th:nth-child(2) {
    text-align: left;
}
.availability-matrix tbody td:first-child {
    font-weight: 500;
    color: #d1d5db; /* gray-300 */
}
.availability-matrix tbody td:nth-child(2) {
    text-align: left;
    color: #d1d5db; /* gray-300 */
}
.availability-matrix tbody tr:last-child td {
    border-bottom: none;
}
.availability-matrix td {
    text-align: center;
}
.available-dot {
    display: inline-block;
    width: 0.65rem;
    height: 0.65rem;
    background-color: #0397bb;
    border-radius: 50%;
    box-shadow: 0 0 5px rgba(3, 151, 187, 0.7);
}
.matrix-legend {
    padding-top: 0.5rem;
    font-size: 0.75rem; /* text-xs */
    color: #6b7280; /* gray-500 */
}