/* DATEI: style.css - VERSION 14.6 - ABSOLUTE CLEAN START */

:root { 
    --kkv-blue: #004488; 
    --kkv-orange: #ff6600; 
}

/* 1. DAS GRID - Muss als erstes kommen */
.katalog-grid { 
    display: grid !important; 
    grid-template-columns: repeat(4, 1fr) !important; 
    gap: 15px !important; 
    padding: 15px !important; 
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 2. DIE KARTE */
.card { 
    background: #ffffff !important; 
    border: 1px solid #dddddd !important; 
    border-radius: 10px !important; 
    padding: 12px !important; 
    display: flex !important; 
    flex-direction: column !important; 
    min-height: 360px !important; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
}

/* 3. BILDER */
.img-box { 
    height: 120px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    margin-bottom: 10px !important; 
    overflow: hidden !important;
}

.img-box img { 
    max-height: 120px !important; 
    max-width: 100% !important; 
    object-fit: contain !important; 
}

/* 4. TEXT & PREIS */
.titel { 
    font-weight: bold !important; 
    font-size: 0.85rem !important; 
    height: 3em !important; 
    overflow: hidden !important; 
    margin-bottom: 8px !important; 
    color: var(--kkv-blue) !important;
}

.preis-box { 
    margin-top: auto !important; 
    background: #f8f8f8 !important; 
    padding: 8px !important; 
    border-radius: 5px !important; 
}

/* 5. HANDY-ANPASSUNG */
@media (max-width: 800px) {
    .katalog-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
    .katalog-grid { grid-template-columns: 1fr !important; }
}

/* BUTTONS */
.btn-save {
    background: var(--kkv-orange);
    color: white;
    border: none;
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    cursor: pointer;
}