/**
 * ----------------------------------------------------
 * SPACING SYSTEM AND COLOR VARIABLES
 * ----------------------------------------------------
 */

:root {
    /* 🎨 COLOR VARIABLES */
    --sp-color-primary: #0F8EC5;
    --sp-color-secondary: #13365E;
    --sp-gradient: linear-gradient(160deg, var(--sp-color-primary) 0%, var(--sp-color-secondary) 100%);
    --sp-text-color: #222;
    --sp-muted-color: #666;
    --sp-border-color: #ddd;

    /* 🧱 UI VARIABLES */
    --sp-card-bg: #fff;
    --sp-border-radius: 15px;
    --sp-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

    /* 📏 SPACING VARIABLES (EM-based for type-scale) */
    /* Level 1: Extra Small (e.g., inside elements) */
    --sp-spacer-1: 0.5em;
    /* Level 2: Small */
    --sp-spacer-2: 0.75em;
    /* Level 3: Medium / Default */
    --sp-spacer-3: 1.0em;
    /* Level 4: Large */
    --sp-spacer-4: 1.5em;
    /* Level 5: Extra Large */
    --sp-spacer-5: 2.0em;

    /* Optional: Entfernen Sie die alte --sp-spacer, wenn nicht mehr benötigt. */
    /* --sp-spacer: 1.0em; */
}

/* ----------------------------------------------------
 * 🚀 UTILITY CLASSES: MARGINS (m, mx, my, mt, mb, ml, mr)
 * Optimiert durch Zusammenfassen gleicher Properties
 * ----------------------------------------------------
 */

/* Margin All Sides (m-1 bis m-5) */
.sp-m-1 {
    margin: var(--sp-spacer-1);
}

.sp-m-2 {
    margin: var(--sp-spacer-2);
}

.sp-m-3 {
    margin: var(--sp-spacer-3);
}

.sp-m-4 {
    margin: var(--sp-spacer-4);
}

.sp-m-5 {
    margin: var(--sp-spacer-5);
}

/* Margin X-Axis (mx - Left/Right) */
.sp-mx-1,
.sp-mx-2,
.sp-mx-3,
.sp-mx-4,
.sp-mx-5 {
    /* Setzt alle mx Klassen auf auto für Zentrierung (wenn width gesetzt ist),
       oder auf 0. Wir setzen hier auf 0, da der Wert durch die spezifischen Klassen überschrieben wird. */
    margin-left: 0;
    margin-right: 0;
}

.sp-mx-1 {
    margin-left: var(--sp-spacer-1);
    margin-right: var(--sp-spacer-1);
}

.sp-mx-2 {
    margin-left: var(--sp-spacer-2);
    margin-right: var(--sp-spacer-2);
}

.sp-mx-3 {
    margin-left: var(--sp-spacer-3);
    margin-right: var(--sp-spacer-3);
}

.sp-mx-4 {
    margin-left: var(--sp-spacer-4);
    margin-right: var(--sp-spacer-4);
}

.sp-mx-5 {
    margin-left: var(--sp-spacer-5);
    margin-right: var(--sp-spacer-5);
}

/* Margin Y-Axis (my - Top/Bottom) */
.sp-my-1 {
    margin-top: var(--sp-spacer-1);
    margin-bottom: var(--sp-spacer-1);
}

.sp-my-2 {
    margin-top: var(--sp-spacer-2);
    margin-bottom: var(--sp-spacer-2);
}

.sp-my-3 {
    margin-top: var(--sp-spacer-3);
    margin-bottom: var(--sp-spacer-3);
}

.sp-my-4 {
    margin-top: var(--sp-spacer-4);
    margin-bottom: var(--sp-spacer-4);
}

.sp-my-5 {
    margin-top: var(--sp-spacer-5);
    margin-bottom: var(--sp-spacer-5);
}

/* Margin Top (mt) */
.sp-mt-1 {
    margin-top: var(--sp-spacer-1);
}

.sp-mt-2 {
    margin-top: var(--sp-spacer-2);
}

.sp-mt-3 {
    margin-top: var(--sp-spacer-3);
}

.sp-mt-4 {
    margin-top: var(--sp-spacer-4);
}

.sp-mt-5 {
    margin-top: var(--sp-spacer-5);
}

/* Margin Bottom (mb) */
.sp-mb-1 {
    margin-bottom: var(--sp-spacer-1);
}

.sp-mb-2 {
    margin-bottom: var(--sp-spacer-2);
}

.sp-mb-3 {
    margin-bottom: var(--sp-spacer-3);
}

.sp-mb-4 {
    margin-bottom: var(--sp-spacer-4);
}

.sp-mb-5 {
    margin-bottom: var(--sp-spacer-5);
}

/* Margin Left (ml) */
.sp-ml-1 {
    margin-left: var(--sp-spacer-1);
}

.sp-ml-2 {
    margin-left: var(--sp-spacer-2);
}

.sp-ml-3 {
    margin-left: var(--sp-spacer-3);
}

.sp-ml-4 {
    margin-left: var(--sp-spacer-4);
}

.sp-ml-5 {
    margin-left: var(--sp-spacer-5);
}

/* Margin Right (mr) */
.sp-mr-1 {
    margin-right: var(--sp-spacer-1);
}

.sp-mr-2 {
    margin-right: var(--sp-spacer-2);
}

.sp-mr-3 {
    margin-right: var(--sp-spacer-3);
}

.sp-mr-4 {
    margin-right: var(--sp-spacer-4);
}

.sp-mr-5 {
    margin-right: var(--sp-spacer-5);
}

/* ----------------------------------------------------
 * 🖱️ BUTTONS
 * Allgemeine Button-Styles
 * ----------------------------------------------------
 */

.sp-download-button,
.sp-loadmore-btn {
    /* Basis-Styles für beide Buttons */
    display: inline-block;
    background: var(--sp-gradient);
    color: #fff !important;
    font-weight: 400;
    /* sp-download-button: 400, sp-loadmore-btn: 600. sp-loadmore-btn wird spezifischer gesetzt. */
    padding: .75em 1.5em;
    border-radius: var(--sp-border-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: opacity 0.2s ease;
    text-align: center;
    border: none;
    /* Für den sp-loadmore-btn */
}

/* Spezifische Anpassungen */
.sp-loadmore-btn {
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    /* rem hier für größere Konstanz */
}

.sp-download-button:hover,
.sp-loadmore-btn:hover {
    opacity: 0.9;
}

/* ----------------------------------------------------
 * 🗃️ ARCHIVE / LIST VIEW STYLES
 * Style für die Download-Übersichtsseite
 * ----------------------------------------------------
 */

.sp-downloads-archive {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    width: 100%;
    font-size: 16px;
}

.sp-downloads-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.sp-download-card {
    background: var(--sp-card-bg);
    border-radius: var(--sp-border-radius);
    box-shadow: var(--sp-shadow);
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sp-download-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sp-download-card-border {
    padding: 1.5rem;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--sp-border-color);
}

.sp-download-inner {
    display: grid;
    grid-template-columns: calc(70% - 1rem) calc(30% - 1rem);
    gap: 2rem;
    align-items: start;
}

.sp-download-left {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.sp-download-ext {
    display: inline-block;
    font-size: 12px;
    font-weight: 400;
    padding: 0.25rem 0.6rem;
    text-transform: lowercase;
    letter-spacing: 0.03em;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    border-color: var(--sp-border-color);
}

.sp-download-right {
    text-align: right;
}

.sp-download-size {
    margin-top: .5em;
    font-size: 16px;
}

.sp-downloads-loadmore {
    text-align: center;
}

/* ----------------------------------------------------
 * 📄 SINGLE DOWNLOAD PAGE
 * Style für die Einzelansicht eines Downloads
 * ----------------------------------------------------
 */

.sp-download-single {
    font-size: 16px;
    width: 100%;
	padding: var(--sp-spacer-5);
}

.sp-download-single .wpcf7-form p {
    float: inherit;
}

.sp-download-header {
    display: flex;
    gap: .5em;
    margin-bottom: .5em;
    align-items: center;
}

.sp-download-title {
    font-size: 22px;
    color: var(--sp-text-color);
	margin: 0;
}

.sp-download-single .sp-download-title {
	margin-bottom: var(--sp-spacer-1);
}

.sp-download-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-spacer-3);
    font-size: 16px;
    color: var(--sp-muted-color);
}

.sp-download-meta p {
    margin: 0;
}

.sp-download-description {
    font-size: 16px;
    line-height: 1.6;
    color: var(--sp-text-color);
}

.sp-download-single-wrapper {
    max-width: 1140px;
    margin: 40px auto;
    padding: 0 1rem;
}

.sp-download-single-grid {
    display: grid;
    grid-template-columns: 0.4fr 1fr;
    grid-template-areas: "sidebar content";
    gap: 2rem;
    align-items: start;
}

.sp-download-single-grid > aside {
    grid-area: sidebar;
}

.sp-download-single-grid > article {
    grid-area: content;
}

/* Mobil: normale Reihenfolge (Article -> Aside) */
@media (max-width: 768px) {
    .sp-download-single-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar";
        gap: 1.5rem;
    }
}

/* ----------------------------------------------------
 * 🏷️ TERMS (Taxonomie/Kategorien)
 * Style für die Anzeige einzelner Term-Links
 * ----------------------------------------------------
 */

.sp-download-term {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 0.75em;
    border-radius: var(--sp-border-radius);
    transition: background 0.2s, box-shadow 0.2s;
}

.sp-download-term:hover {
    background: rgba(15, 142, 197, 0.05);
    /* Leichte Transparenz der Primary Color */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.sp-download-term-link {
    display: flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.sp-download-term-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.sp-download-term-icon path {
    fill: var(--sp-muted-color);
    /* Standard Wolke inaktiv */
}

.sp-download-term-link.active .sp-download-term-icon path {
    fill: var(--sp-color-primary);
    /* Aktiver Term */
}

.sp-download-term-name {
    font-size: 16px;
    font-weight: 500;
}

.sp-download-term-count {
    font-size: 14px;
    color: var(--sp-muted-color);
    margin-left: auto;
}

/* ----------------------------------------------------
 * 📱 RESPONSIVE DESIGN (Media Queries)
 * ----------------------------------------------------
 */

@media (max-width: 768px) {

    /* Archive / List View Anpassungen */
    .sp-download-inner {
        grid-template-columns: 1fr;
        /* Einzelspalte */
        text-align: left;
    }

    .sp-download-right {
        text-align: center;
        /* Zentrierung für Button/Größe im mobilen Grid-Item */
    }

    .sp-download-button {
        width: 100%;
        /* Button über die volle Breite */
    }

    .sp-download-size {
        text-align: center;
    }

    /* Single View Anpassungen */
    .sp-download-title {
        font-size: 20px;
        /* Titel etwas größer in der Einzelansicht */
    }

    /* Terms Anpassungen */
    .sp-download-term {
        flex-direction: row;
        gap: 0.5rem;
    }

    .sp-download-term-name {
        font-size: 14px;
    }
}

@media (min-width: 768px) {
    .sp-download-single form[class*=wpcf7-] p:nth-of-type(1), .sp-download-single form[class*=wpcf7-] p:nth-of-type(2) {
        display: block;
        width: 100%;
        max-width: 100%;
    float: inherit;
    }
    .sp-download-single form[class*=wpcf7-] p:nth-of-type(1) {
        padding-right: 0;
    }
}