/* ========================================= */
/* ===== STILE FÜR DIE WISSENSDATENBANK ===== */
/* ========================================= */

.knowledge-base-section h2 {
    margin-bottom: calc(var(--spacing-unit) * 4);
}

.kb-search-controls {
    display: flex;
    flex-wrap: wrap; /* KORREKTUR: Erlaubt Umbruch */
    gap: calc(var(--spacing-unit) * 3);
    align-items: flex-end; 
    margin-bottom: calc(var(--spacing-unit) * 4);
    padding-bottom: calc(var(--spacing-unit) * 2);
    border-bottom: 1px solid #eee;
}

.kb-search-wrapper {
   flex-grow: 1; 
   min-width: 300px; 
}

.kb-language-filter,
.kb-type-filter {
    flex-shrink: 0; 
}

.kb-language-filter label,
.kb-type-filter label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--spacing-unit);
    font-size: 0.9em;
    color: var(--secondary-color);
}

.kb-filter-options {
    display: flex;
    gap: calc(var(--spacing-unit) * 2);
}

.kb-filter-options label {
    display: flex;
    align-items: center;
    gap: calc(var(--spacing-unit) * 0.5);
    font-weight: normal;
    cursor: pointer;
    margin-bottom: 0; 
    font-size: 0.95em; 
}
.kb-filter-options input[type="checkbox"] {
    cursor: pointer;
    margin-right: 4px; 
}


.kb-results {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
    gap: calc(var(--spacing-unit) * 3);
    min-height: 200px;
}

.kb-placeholder {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
    margin-top: calc(var(--spacing-unit) * 5);
    font-style: italic;
}
.kb-placeholder.error {
    color: var(--primary-color);
    font-style: normal;
    font-weight: bold;
}

.kb-tile {
    background-color: var(--background-color);
    border: 1px solid #eee;
    border-radius: var(--border-radius);
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: calc(var(--spacing-unit) * 2);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
    cursor: pointer;
    min-height: 180px;
    position: relative; 
    overflow: hidden; 
}

.kb-tile:hover {
    transform: translateY(-5px);
    box-shadow: var(--box-shadow);
}

.kb-tile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-unit);
}

.kb-tile-type-icon {
    font-size: 1.5em; 
    width: 30px; 
    text-align: center;
}
.kb-tile-type-icon.fa-file-pdf { color: var(--primary-color); }
.kb-tile-type-icon.fa-video { color: #3498db; }

.kb-tile-language {
    font-size: 0.8em;
    font-weight: bold;
    color: #fff;
    background-color: var(--secondary-color);
    padding: 2px 6px;
    border-radius: 4px;
}


.kb-tile-title {
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0 0 var(--spacing-unit) 0; 
    flex-grow: 1;
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kb-tile-description {
    font-size: 0.9em;
    color: #666;
    margin-bottom: var(--spacing-unit);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     min-height: calc(1.6 * 0.9em * 3); 
     
     /* ===== MODIFIKATION: Sorge dafür, dass die Beschreibung den Platz einnimmt, den die Tags zuvor eingenommen haben ===== */
     margin-top: auto; 
     padding-top: var(--spacing-unit);
     border-top: 1px solid #eee;
     /* ============================================================================================================== */
}


.kb-modal-content {
    max-width: 80vw;
    max-height: 85vh;
    overflow-y: auto;
}

#kb-modal-content iframe,
#kb-modal-content embed {
    width: 100%;
    min-height: 70vh;
    border: none;
}
#kb-modal-content video {
     width: 100%;
     max-height: 70vh;
}

/* ===== MODIFIKATION: Die folgenden CSS-Regeln wurden entfernt =====
.kb-tile-tags {
    font-size: 0.8em;
    color: #888;
    margin-top: auto;
    padding-top: var(--spacing-unit);
    border-top: 1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    gap: 4px; 
}

.kb-tile-tags span {
    background-color: #eee;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}
=============================================================== */