/*
 * SpediFlow globale öffentliche Designregeln
 * Zentral für Landingpage, Produktseiten und Ratgeber.
 */


/* =========================================================
   RATGEBER- / FACHARTIKEL-LINKS
   ========================================================= */

/*
 * Absolute Links ohne www
 */
a[href^="https://spedi-flow.de/wissen/"] {
    color: #f99d41 !important;
    text-decoration: none !important;
}

/*
 * Absolute Links mit www
 */
a[href^="https://www.spedi-flow.de/wissen/"] {
    color: #f99d41 !important;
    text-decoration: none !important;
}

/*
 * Relative dynamische Artikel-URLs.
 * /wissen.php wird NICHT erfasst.
 */
a[href^="/wissen/"] {
    color: #f99d41 !important;
    text-decoration: none !important;
}


/* Hover */

a[href^="https://spedi-flow.de/wissen/"]:hover,
a[href^="https://www.spedi-flow.de/wissen/"]:hover,
a[href^="/wissen/"]:hover {
    color: #ffb566 !important;
    text-decoration: none !important;
}


/*
 * Bereits besuchte Artikel NICHT violett/blau darstellen.
 */
a[href^="https://spedi-flow.de/wissen/"]:visited,
a[href^="https://www.spedi-flow.de/wissen/"]:visited,
a[href^="/wissen/"]:visited {
    color: #f99d41 !important;
}


/*
 * Fokus weiterhin sichtbar für Tastaturbedienung.
 */
a[href^="https://spedi-flow.de/wissen/"]:focus-visible,
a[href^="https://www.spedi-flow.de/wissen/"]:focus-visible,
a[href^="/wissen/"]:focus-visible {
    outline: 2px solid rgba(249,157,65,0.75);
    outline-offset: 3px;
    border-radius: 4px;
}


/* SPEDIFLOW_GLOBAL_KNOWLEDGE_CARDS_START */

/*
 * Einheitlicher Ratgeber-/Wissen-Bereich auf allen
 * öffentlichen SpediFlow-Seiten.
 */

section[aria-labelledby="wissen-heading"] .grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin-top: 32px !important;
}


/* Einzelne Fachartikelkarte */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;
    height: 100% !important;

    padding: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 27, 15, 0.92),
            rgba(17, 28, 17, 0.84)
        ) !important;

    border:
        1px solid
        rgba(255, 255, 255, 0.07) !important;

    border-radius: 22px !important;

    box-shadow:
        0 18px 45px
        rgba(0, 0, 0, 0.16) !important;

    overflow: hidden !important;
}


/* leichter Effekt beim Darüberfahren */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card:hover {
    border-color:
        rgba(53, 179, 74, 0.22) !important;

    transform: translateY(-2px);

    box-shadow:
        0 22px 52px
        rgba(0, 0, 0, 0.20) !important;
}


/* Badge */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card .badge {
    align-self: flex-start;
}


/* Artikeltitel */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card h3 {
    margin:
        4px
        0
        14px !important;

    font-size: 20px !important;
    line-height: 1.32 !important;
}


/* Orange statt Browser-Blau */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card h3 a {
    color: #f99d41 !important;
    text-decoration: none !important;
}

section[aria-labelledby="wissen-heading"] .grid-3 > article.card h3 a:visited {
    color: #f99d41 !important;
}

section[aria-labelledby="wissen-heading"] .grid-3 > article.card h3 a:hover {
    color: #ffb566 !important;
}


/* Text */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card p {
    line-height: 1.65 !important;
}


/*
 * Der letzte Absatz enthält "Artikel lesen".
 * Nach unten drücken, damit alle Karten gleich wirken.
 */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card p:last-child {
    margin-top: auto !important;
    padding-top: 18px !important;
}


/* Artikel lesen ebenfalls Orange */

section[aria-labelledby="wissen-heading"] .grid-3 > article.card p:last-child a {
    color: #f99d41 !important;
    text-decoration: none !important;
}

section[aria-labelledby="wissen-heading"] .grid-3 > article.card p:last-child a:hover {
    color: #ffb566 !important;
}


/* Tablet */

@media (max-width: 1050px) {

    section[aria-labelledby="wissen-heading"] .grid-3 {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    section[aria-labelledby="wissen-heading"] .grid-3 {
        grid-template-columns: 1fr !important;
    }

    section[aria-labelledby="wissen-heading"] .grid-3 > article.card {
        padding: 20px !important;
    }
}

/* SPEDIFLOW_GLOBAL_KNOWLEDGE_CARDS_END */


/* =========================================================
   SPEDIFLOW UNIFIED ARTICLE CARDS
   ========================================================= */

.sf-latest-articles {
    margin-top: 110px;
}


/* exakt drei Karten */

.sf-latest-articles .sf-article-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
    margin-top: 32px !important;
}


/* Karte */

.sf-latest-articles .sf-article-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    height: 100% !important;

    padding: 24px !important;

    background:
        linear-gradient(
            145deg,
            rgba(10, 27, 15, 0.94),
            rgba(17, 28, 17, 0.88)
        ) !important;

    border: 1px solid rgba(255,255,255,0.07) !important;
    border-radius: 22px !important;

    box-shadow:
        0 18px 45px rgba(0,0,0,0.16) !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease !important;
}


.sf-latest-articles .sf-article-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(53,179,74,0.22) !important;
    box-shadow:
        0 22px 52px rgba(0,0,0,0.20) !important;
}


/* Kategorie */

.sf-latest-articles .sf-article-category {
    align-self: flex-start !important;
    margin-bottom: 14px !important;
}


/* Überschrift */

.sf-latest-articles .sf-article-card h3 {
    margin: 4px 0 12px !important;
    font-size: 20px !important;
    line-height: 1.32 !important;
}


/* Titel */

.sf-latest-articles .sf-article-card h3 a,
.sf-latest-articles .sf-article-card h3 a:visited {
    color: #f99d41 !important;
    text-decoration: none !important;
}

.sf-latest-articles .sf-article-card h3 a:hover {
    color: #ffb566 !important;
}


/* Datum */

.sf-latest-articles .sf-article-date {
    margin: 0 0 14px !important;
    opacity: .7 !important;
    font-size: .9rem !important;
}


/* Beschreibung */

.sf-latest-articles .sf-article-card > p:not(.sf-article-date):not(.sf-article-read) {
    line-height: 1.65 !important;
}


/* Artikel lesen immer unten */

.sf-latest-articles .sf-article-read {
    margin-top: auto !important;
    padding-top: 20px !important;
    margin-bottom: 0 !important;
}

.sf-latest-articles .sf-article-read a,
.sf-latest-articles .sf-article-read a:visited {
    color: #f99d41 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
}

.sf-latest-articles .sf-article-read a:hover {
    color: #ffb566 !important;
}


/* Alle Fachartikel */

.sf-latest-articles .sf-article-footer {
    margin-top: 30px !important;
}


/* Tablet */

@media (max-width: 1050px) {

    .sf-latest-articles .sf-article-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }
}


/* Mobile */

@media (max-width: 700px) {

    .sf-latest-articles {
        margin-top: 80px;
    }

    .sf-latest-articles .sf-article-grid {
        grid-template-columns: 1fr !important;
    }

    .sf-latest-articles .sf-article-card {
        padding: 20px !important;
    }
}