/**
 * aktuelles.css
 * Modul-spezifische Styles für /aktuelles/
 * addicted-sports.com
 *
 * Shared Basis-Styles (sr-only, al-not-found, al-back-link, Spalten-Fix, …)
 * kommen aus /fileadmin/templates/css/news-shared.css – dort nichts doppeln!
 */

/* ── Akzentfarbe #F39C12 ──────────────────────────────────────── */
.aktuelles .al-back-link                 { color: #F39C12; }
.aktuelles .news .news-list-date         { background-color: #F39C12; }
.aktuelles .ttnewsPageBrowser li.active,
.aktuelles .ttnewsPageBrowser li:hover,
.aktuelles .ttnewsPageBrowser li:hover a { background-color: #F39C12; color: #fff; }

/* ── Balken: immer einzeilig, gleiche Höhe ────────────────────── */
.aktuelles .blackBalken {
    height: 42px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 2px solid #F39C12 !important;
}
.aktuelles .blackBalken .AktuellesSymbol,
.aktuelles .blackBalken .symbole {
    flex-shrink: 0;
    margin-right: 4px !important;
}
.aktuelles .blackBalken .balkenText {
    overflow: hidden !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    border-bottom: none !important;
}
.aktuelles .blackBalken .balkenText h2,
.aktuelles .blackBalken .balkenText h3 {
    color: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
}

/* ── Spalten-Fix Listenansicht ────────────────────────────────── */
.aktuelles .headlineBox,
.aktuelles p.text {
    column-count: 1 !important;
    columns: 1 !important;
}

/* ── Grid direkt auf #newsList: PHP + JS-Lazy-Load landen hier ── */
.aktuelles #newsList {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    column-gap: 15px !important;
    align-items: start !important;
}
@media only screen and (max-width: 750px) {
    .aktuelles #newsList {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .aktuelles .ak-featured .nurBild,
    .aktuelles .ak-featured .textHeight {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        display: block !important;
    }
    .aktuelles .ak-featured .textHeight { min-height: 0 !important; }
    .aktuelles .ak-featured .textHeight .nurText { display: block !important; overflow: visible !important; }
    .aktuelles .ak-featured .nurBild .news-list-image img { width: 100% !important; height: auto !important; }
    .aktuelles .ak-featured .textpfeilOben {
        border-top: none !important;
        border-left: 9px solid transparent !important;
        border-right: 9px solid transparent !important;
        border-bottom: 9px solid #ecf0f1 !important;
        top: -9px !important;
        left: 19% !important;
    }
    .aktuelles .ak-featured:hover .textpfeilOben { border-bottom-color: #d5d9da !important; }
}
@media only screen and (max-width: 480px) {
    .aktuelles #newsList { grid-template-columns: 1fr !important; }
}

/* Erster Artikel: alle Spalten überspannen */
.aktuelles #newsList > .ak-featured { grid-column: 1 / -1 !important; }

/* Kacheln und Featured */
.aktuelles #newsList .ak-card,
.aktuelles #newsList .ak-featured {
    width: auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    vertical-align: unset !important;
    margin: 0 0 20px !important;
    overflow: hidden !important;
    background-color: #ecf0f1 !important;
    color: #7d7d7d !important;
    position: relative !important;
    cursor: pointer !important;
    transition: background-color .18s ease !important;
}
.aktuelles #newsList .ak-card:hover,
.aktuelles #newsList .ak-featured:hover { background-color: #d5d9da !important; }

/* Stretch-Link */
.aktuelles .ak-stretch-link {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    display: block !important;
}
/* Datum über Stretch-Link */
.aktuelles .ak-card .news-list-date,
.aktuelles .ak-featured .news-list-date {
    position: absolute !important;
    z-index: 3 !important;
}
/* Inner wrapper */
.aktuelles .bildUeberText,
.aktuelles .bildLinksNebenText,
.aktuelles .nurBild,
.aktuelles .textHeight,
.aktuelles .textHeightOhne {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Hover-Gradient */
.aktuelles .ak-card:hover .abgeschnitten,
.aktuelles .ak-featured:hover .abgeschnitten {
    background-image: linear-gradient(to top, #d5d9da 20%, rgba(213,217,218,0) 100%) !important;
}

/* Featured: Textbereich */
.aktuelles .ak-featured .textHeight {
    background-color: transparent !important;
    height: auto !important;
    min-height: 320px !important;
    overflow: visible !important;
    position: relative !important;
}
.aktuelles .ak-featured .nurText { padding: 0 20px 20px !important; }
.aktuelles .ak-featured .textHeight .textcutter { height: auto !important; overflow: visible !important; }

/* Kachel-Layout: Flexbox-Spalte */
.aktuelles #newsList .textHeightOhne {
    height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
    position: relative !important;
}
.aktuelles #newsList .textHeightOhne .nurText {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
.aktuelles #newsList .textHeightOhne .textcutter {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* textpfeilOben: CSS-Dreieck */
.aktuelles .ak-card .textpfeilOben {
    background: none !important; width: 0 !important; height: 0 !important;
    border-left: 9px solid transparent !important;
    border-right: 9px solid transparent !important;
    border-bottom: 9px solid #ecf0f1 !important;
    position: absolute !important; top: -9px !important; left: 19% !important;
}
.aktuelles .ak-card:hover .textpfeilOben { border-bottom-color: #d5d9da !important; }
.aktuelles .ak-featured .textpfeilOben {
    background: none !important; width: 0 !important; height: 0 !important;
    border-top: 9px solid transparent !important;
    border-bottom: 9px solid transparent !important;
    border-right: 9px solid #ecf0f1 !important;
    position: absolute !important; top: 40px !important; left: -9px !important;
}
.aktuelles .ak-featured:hover .textpfeilOben { border-right-color: #d5d9da !important; }

/* Text-Fade */
.aktuelles .abgeschnitten {
    background-image: linear-gradient(to top, #ecf0f1 20%, rgba(236,240,241,0) 100%) !important;
    margin-top: -1.3em !important;
    padding: 1.5em 0 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Kachel-Bilder: feste Höhe */
.aktuelles .ak-card .nurBild a,
.aktuelles .ak-card .nurBild a img { display: block; width: 100%; }
.aktuelles .ak-card .nurBild a { height: 180px; overflow: hidden; }
.aktuelles .ak-card .nurBild a img { height: 100%; object-fit: cover; }

/* ── Artikel-Bild-Slider ──────────────────────────────────────── */
.al-slider {
    position: relative; overflow: hidden; background: #111;
    margin-bottom: 16px; line-height: 0;
}
.al-slider-track { display: flex; transition: transform .45s ease; will-change: transform; }
.al-slide { min-width: 100%; position: relative; }
.al-slide img { width: 100%; max-height: 520px; object-fit: contain; display: block; }
.al-slide-meta {
    position: absolute; top: 0; right: 0;
    background: rgba(0,0,0,.55); color: #fff; font-size: 12px;
    line-height: 1.5; padding: 6px 10px;
}
.al-slider-prev,
.al-slider-next {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,.45); color: #fff; border: none;
    font-size: 22px; line-height: 1; padding: 10px 14px;
    cursor: pointer; z-index: 10; transition: background .2s;
}
.al-slider-prev { left: 0; }
.al-slider-next { right: 0; }
.al-slider-prev:hover,
.al-slider-next:hover { background: rgba(243,156,18,.8); }
.al-slider-dots {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 6px; z-index: 10;
}
.al-dot {
    width: 9px; height: 9px; border-radius: 50%; border: none;
    background: rgba(255,255,255,.45); cursor: pointer; padding: 0; transition: background .2s;
}
.al-dot.active { background: #F39C12; }

/* ── Suchfeld ─────────────────────────────────────────────────── */
.ak-search { display: flex; gap: 8px; margin-bottom: 24px; }
.ak-search input[type="search"] {
    flex: 1; padding: 9px 12px; border: 1px solid #ccc; border-radius: 3px;
    font-size: 0.95rem; outline: none; box-sizing: border-box;
}
.ak-search input[type="search"]:focus {
    border-color: #F39C12;
    box-shadow: 0 0 0 2px rgba(243,156,18,.2);
}

/* ── Mehr-laden-Button ────────────────────────────────────────── */
.news-load-more { text-align: center; margin-top: 32px; }
.news-load-more button {
    padding: 11px 32px; background: #F39C12; color: #fff; border: none;
    border-radius: 3px; font-size: 1rem; cursor: pointer;
}
.news-load-more button:hover { background: #d68910; }
.news-load-more-btn {
    display: inline-block; padding: 11px 32px; background: #F39C12; color: #fff;
    border-radius: 3px; font-size: 1rem; text-decoration: none; font-weight: 600;
}
.news-load-more-btn:hover { background: #d68910; color: #fff; }

/* ── Mobile-Overrides ────────────────────────────────────────── */
@media only screen and (max-width: 750px) {
    .aktuelles #newsList .ak-featured {
        display: flex !important; flex-direction: column !important;
        overflow: hidden !important; height: auto !important;
    }
    .aktuelles #newsList .ak-featured .blackBalken,
    .aktuelles #newsList .ak-featured .nurBild,
    .aktuelles #newsList .ak-featured .textHeight {
        flex-shrink: 0 !important; float: none !important; width: 100% !important;
    }
    .aktuelles #newsList .ak-featured .textHeight { min-height: 0 !important; }
}