:root {
    --s-columns: 4; /* Standardanzahl an Spalten */
    --s-item-width: calc((100vw - 30px - (4 - 1) * 10px) / 4); /* Breite der Elemente für 4 Spalten */
}

@media (max-width: 575.98px) {
    :root {
        --s-columns: 2; /* 2 Spalten für Mobilgeräte */
        --s-item-width: calc((100vw - 30px - (2 - 1) * 10px) / 2); /* Neue Breite für 2 Spalten */
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    :root {
        --s-columns: 3; /* Optional: 3 Spalten für kleine Tablets */
        --s-item-width: calc((100vw - 30px - (3 - 1) * 10px) / 3);
    }
}

@media (min-width: 768px) {
    :root {
        --s-columns: 4; /* Zurück zu 4 Spalten für größere Geräte */
        --s-item-width: calc((100vw - 30px - (4 - 1) * 10px) / 4);
    }
}

.s-main-column .s-panel-body {
    display: grid;
    grid-template-columns: repeat(var(--s-columns), 1fr);
    gap: 1rem 10px;
    margin: 0 0 1.5rem 0;
    max-width: 100%;
}

.s-main-column .s-item-container {
    max-width: var(--s-item-width);
    height: 100%;
    max-height: 100%;
    padding: 0;
}

.s-main-column .s-item-container .card {
    height: 100%;
}

.s-main-column .s-item-container .card-body {
    display: flex;
    flex-direction: column;
}

.shop .alert-info, .s-alert {  
    background-color: #E63946;  
    color: #FFFFFF; /* Kontrastierende Farbe für den Text */  
}

/* Größeres Logo */
.s-header-logo {
    width: 300px; /* Breite des Logos */
    height: auto; /* Automatische Höhe proportional zur Breite */
    margin: 0 auto; /* Zentrieren, falls nötig */
}

@keyframes popEffect {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); } /* Leichtes Vergrößern */
    100% { transform: scale(1); }
}

.alert-info {
    animation: popEffect 1.5s infinite ease-in-out;
    background-color: #fe6f31 !important; /* Deine Wunschfarbe */
    color: #ffffff; /* Weißer Text für guten Kontrast */
    padding: 10px 15px;
    border-radius: 5px;
    text-align: center;
    font-weight: bold;
}
.s-header-nav {
    display: flex;
    gap: 20px; /* Abstand zwischen den Links */
    list-style: none;
    padding: 10px 20px;
    background-color: #ffffff; /* Weißer Hintergrund */
    justify-content: center; /* Mittige Ausrichtung */
    align-items: center;
}

.s-header-nav a {
    text-decoration: none;
    color: #000; /* Standardfarbe */
    font-weight: bold;
    padding: 10px;
}

.s-header-nav a:hover {
    color: #fe6f31; /* Hover-Farbe */
}

.s-header-nav-item {
    display: none; /* Entfernt vorhandene .s-header-nav-item */
}