/* ==========================================================================
   1. GRUNDGERÜST & GRID-SYSTEM
   ========================================================================== */
.sdm-search-wrapper { 
    max-width: 1200px; 
    margin: 0 auto !important; 
    width: 100%; 
    font-family: sans-serif; 
    box-sizing: border-box;
}

/* Allgemeine Grid-Struktur (Werte werden dynamisch durch PHP ergänzt) */
.sdm-grid { 
    display: grid; 
    /* Basis-Breite 280px für optimales A4 Verhältnis in der Kachelansicht */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: 30px; 
    margin-top: 20px; 
    box-sizing: border-box;
    transition: all 0.3s ease;
    /* Hintergrundfarbe und Padding kommen dynamisch aus der :root Sektion */
}

/* Weiche Animation für die Filterung (search.js) und Hover-Effekte */
.sdm-card-item { 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

/* ==========================================================================
   2. FILTER-BAR / SUCHLEISTE (v2.1.4 PRO Design-Engine)
   ========================================================================== */
.sdm-filter-bar { 
    display: flex; 
    flex-direction: row; /* Desktop-Ansicht: Felder stehen nebeneinander */
    flex-wrap: nowrap;   /* Verhindert den Umbruch auf großen Bildschirmen */
    gap: 15px; 
    background-color: var(--sdm-search-bg) !important; /* Hintergrund Leiste */
    padding: 25px; 
    margin-bottom: 40px; 
    border: 1px solid var(--sdm-search-border); /* Rahmenfarbe aus Backend */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
}

@media (min-width: 768px) { 
    .sdm-filter-bar { 
        display: grid; 
        grid-template-columns: 1fr 1fr 1fr; /* Drei gleichmäßig verteilte Spalten */
        align-items: center; 
    } 
}

/* Styling der Eingabefelder und Dropdowns innerhalb der Suche */
.sdm-filter-bar input, 
.sdm-filter-bar select { 
    flex: 1; 
    min-width: 0; /* Ermöglicht korrektes Schrumpfen in Flex-Containern */
    width: auto; 
    padding: 14px 18px; 
    background-color: var(--sdm-input-bg) !important;   /* Feld-Hintergrund */
    border: 1px solid var(--sdm-search-border) !important; /* Feld-Rahmen */
    color: var(--sdm-search-text) !important;           /* NEU: Textfarbe via PRO-Engine */
    font-size: var(--sdm-search-size) !important;       /* NEU: Textgröße via PRO-Engine */
    border-radius: var(--sdm-search-radius) !important; /* NEU: Eckenradius via PRO-Engine */
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* Schatten-Effekt für Suchfelder, falls im Backend aktiviert */
<?php if(get_option('sdm_search_shadow') == 1): ?>
.sdm-filter-bar input, .sdm-filter-bar select {
    box-shadow: 0 2px 8px var(--sdm-s-rgba);
}
<?php endif; ?>

.sdm-no-results {
    grid-column: 1 / -1; 
    text-align: center;
    padding: 60px 20px;
    background: #f9f9f9;
    border: 1px dashed #ccc;
    color: #666;
    font-size: 16px;
    font-weight: 500;
}

/* ==========================================================================
   3. STANDARD-LAYOUT & TYPOGRAFIE (v2.1.4 PRO)
   ========================================================================== */
.layout-standard .sdm-card { 
    background: #fff; 
    border: 1px solid var(--sdm-border); 
    padding: 0; /* 0px für bündigen Bildabschluss am oberen Rand */
    display: flex; 
    flex-direction: column; 
    height: 100%; 
    overflow: hidden; /* Maskiert überstehende Inhalte an den abgerundeten Ecken */
    text-align: center; 
    transition: all 0.3s ease; 
    position: relative;
    box-sizing: border-box;
}

/* Container für Titel, Meta und Beschreibung unter dem Bild */
.sdm-card-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Globale Titel-Engine für alle Layout-Typen */
.sdm-title, .sdm-visual-title { 
    color: var(--sdm-title-color) !important; /* Farbe via Backend */
    font-size: var(--sdm-title-size) !important; /* Größe via Backend */
    font-weight: 700; 
    min-height: 1.3em; 
    margin-bottom: 10px; 
    line-height: 1.3;
}

/* Globale Kategorie-Engine (Label über/unter Titel) */
.sdm-meta, .sdm-visual-cat { 
    color: var(--sdm-cat-color) !important; /* Farbe via Backend */
    font-size: var(--sdm-cat-size) !important; /* Größe via Backend */
    margin-bottom: 15px; 
    text-transform: uppercase; 
    letter-spacing: 1.2px;
}

/* Schatten-Logik für Standard-Kacheln (Dynamisch via Variablen) */
.sdm-std-shadow .sdm-card { 
    box-shadow: 0 5px var(--sdm-s-blur) var(--sdm-s-rgba);
}
.sdm-std-shadow .sdm-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 12px calc(var(--sdm-s-blur) * 1.5) var(--sdm-s-rgba);
}

/* Thumbnail-Box Handling */
.sdm-thumb { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    margin-bottom: 20px; 
    background-color: var(--sdm-v-bg); /* Hintergrundfarbe für Transparenzen */
}

.sdm-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Verhindert Verzerrung bei bündiger Füllung */
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ==========================================================================
   4. VISUAL-LAYOUT & HOVER-EFFEKTE (PRO ONLY)
   ========================================================================== */
.sdm-visual-title-wrapper {
    text-align: center;
    margin-bottom: 15px;
    padding: 0 5px;
}

.layout-visual .sdm-card-visual { 
    position: relative; 
    padding: 0; 
    overflow: hidden; 
    height: auto; 
    display: flex; 
    flex-direction: column; 
    transition: all 0.3s ease;
    box-sizing: border-box;
    background-color: var(--sdm-v-bg); 
    border: var(--sdm-v-width) solid var(--sdm-v-border);
    border-radius: var(--sdm-v-radius);
}

/* Schatten-Logik für Visual-Kacheln */
.sdm-vis-shadow .sdm-card-visual { 
    box-shadow: 0 5px var(--sdm-s-blur) var(--sdm-s-rgba); 
}
.sdm-vis-shadow .sdm-card-visual:hover { 
    transform: translateY(-5px); 
    box-shadow: 0 12px calc(var(--sdm-s-blur) * 1.5) var(--sdm-s-rgba); 
}

/* Container für das Bild im Visual Hover Layout */
.sdm-visual-img-container {
    flex-grow: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sdm-visual-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
    display: block;
    box-sizing: border-box;
    padding: var(--sdm-img-padding); /* Optionaler Innenabstand aus Backend */
}

/* Der Hover-Schleier (Overlay) */
.sdm-visual-overlay { 
    position: absolute; 
    top: 0; left: 0; width: 100%; height: 100%; 
    background-color: var(--sdm-v-hover) !important; /* RGBA-Hintergrund via Backend */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: var(--sdm-btn-pos) !important; /* Button-Position (Top/Center/Bottom) */
    opacity: 0; 
    transition: opacity 0.3s ease; 
    z-index: 3; 
    text-decoration: none !important;
    padding: 40px 20px;
    box-sizing: border-box;
}

.sdm-card-visual:hover .sdm-visual-overlay { 
    opacity: 1; 
}

/* Exklusiver Button innerhalb des Visual Hover Overlays */
.sdm-visual-overlay-btn { 
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
}

/* ==========================================================================
   5. BUTTON-STILE & LAYOUT-FINETUNING
   ========================================================================== */
.sdm-btn-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-top: auto;
}

/* Standard-Layout: Button-Ausrichtung via PRO-Variable */
.layout-standard .sdm-btn-container {
    align-self: var(--sdm-btn-pos); 
}

/* Spezielles Styling für das reine Button-Layout */
.layout-button .sdm-btn-full { 
    margin-bottom: 12px;
    width: 100%;
}
.layout-button .sdm-btn-full:hover {
    transform: translateX(5px);
}

.sdm-btn:hover {
    opacity: 0.9;
}

/* ==========================================================================
   6. RESPONSIVE ANPASSUNGEN (MOBILE OPTIMIERUNG)
   ========================================================================== */
@media (max-width: 992px) {
    .sdm-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) { 
    .sdm-grid { 
        /* Mobile: Zentrierung der Kachel für besseren Fokus im A4 Look */
        grid-template-columns: minmax(260px, 320px); 
        justify-content: center;
        gap: 40px; 
    } 
    .sdm-card, .layout-visual .sdm-card-visual { 
        height: auto; 
    } 
    .sdm-filter-bar {
        gap: 10px;
        padding: 20px;
        display: flex;
        flex-direction: column; /* Suche stapelt sich auf dem Handy */
        flex-wrap: wrap;
    }
    .sdm-filter-bar input, .sdm-filter-bar select {
        padding: 12px;
        width: 100%; 
        flex: none;
    }
}

@media (max-width: 480px) {
    .sdm-grid {
        gap: 60px; /* Erhöhter Abstand auf sehr kleinen Geräten */
    }
}