/* =========================================================
   DISTROS.CSS – nur für distros.html
   Nutzt zusätzlich opensource.css (Hero, Schritte).
========================================================= */

/* ---------- Filter ---------- */
.distro-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.filter-btn {
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: rgba(5, 15, 7, 0.75);
    color: var(--green);
    font-size: 10px;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover {
    border-color: var(--border-strong);
    background: var(--green-faint);
}

.filter-btn.active {
    background: var(--green);
    border-color: var(--green);
    color: #001a05;
    font-weight: 700;
}

/* ---------- Karten ---------- */
.distro-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.distro-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 290px;
    padding: 22px;
    border: 1px solid var(--border);
    background: var(--panel);
    overflow: hidden;
    transition: transform 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}

.distro-card:hover {
    transform: translateY(-4px);
    border-color: var(--border-strong);
}

.distro-card[hidden] {
    display: none;
}

.distro-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--text-dark);
    font-size: 10px;
}

.level {
    padding: 3px 7px;
    border: 1px solid var(--border);
    font-size: 9px;
    letter-spacing: 0.1em;
}

.lvl-1 { color: var(--green-bright); background: var(--green-faint); }
.lvl-2 { color: #d8c46a; border-color: rgba(216, 196, 106, 0.35); }
.lvl-3 { color: var(--danger); border-color: rgba(255, 104, 104, 0.35); }

.distro-card h3 {
    margin: 26px 0 10px;
    color: var(--green-bright);
    font-size: 21px;
    letter-spacing: -0.02em;
}

.distro-card p {
    flex: 1;
    margin: 0 0 16px;
    color: var(--text-soft);
    font-size: 12px;
}

.distro-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(109, 255, 139, 0.14);
    color: var(--text-dark);
    font-size: 9px;
    letter-spacing: 0.08em;
}

.distro-card > a {
    color: var(--green);
    font-size: 10px;
    letter-spacing: 0.08em;
}

.distro-card > a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.distro-empty {
    margin-top: 20px;
    color: var(--text-soft);
    font-size: 12px;
}

.os-step p b {
    color: var(--green);
    font-weight: 400;
}

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
    .distro-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 650px) {
    .distro-grid {
        grid-template-columns: 1fr;
    }

    .distro-card {
        min-height: 0;
    }
}