/* „Meistgelesen“-Karussell (NowMetrix): unter Artikeln und auf der Startseite (Ranking der letzten 24 Std.). Skript: fi-trend.js */
.fi-trend { margin: 8px 16px 0; padding-bottom: 4px; border-top: 3px solid #e6197a; }
.fi-trend[hidden] { display: none; }
.fi-trend-h { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 16px 0 14px; }
.fi-trend-h h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: #121212; font-size: 15px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.fi-trend-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: #e6197a; box-shadow: 0 0 0 0 rgba(230, 25, 122, .5); animation: fi-trend-pulse 1.8s infinite; }
.fi-trend.is-live .fi-trend-dot { display: block; }
@keyframes fi-trend-pulse { 70% { box-shadow: 0 0 0 9px rgba(230, 25, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(230, 25, 122, 0); } }
.fi-trend-live { order: 3; flex-basis: 100%; color: #6b6b74; font-size: 13px; font-weight: 600; }
.fi-trend-live:empty { display: none; }
.fi-trend-nav { display: flex; gap: 6px; margin-left: auto; }
.fi-trend-nav button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--h-line, #e3e5e6); background: #fff; color: #121212; cursor: pointer; transition: border-color .15s, color .15s; }
.fi-trend-nav button:hover { border-color: #e6197a; color: #e6197a; }
.fi-trend.is-static .fi-trend-nav, .fi-trend.is-static .fi-trend-dots { display: none; }
/* Spur: wischbar, rastet pro Karte ein; Handy ≈ 1,3 Karten (nächste lugt hervor), PC 3 Karten */
.fi-trend-track { display: grid; grid-auto-flow: column; grid-auto-columns: 74%; column-gap: 14px; margin: 0; padding: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; list-style: none; }
.fi-trend-track::-webkit-scrollbar { display: none; }
.fi-trend-track li { scroll-snap-align: start; min-width: 0; }
.fi-trend-track a { display: flex; flex-direction: column; gap: 10px; height: 100%; color: #121212; text-decoration: none; }
.fi-trend-img { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #eeeef0; }
.fi-trend-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; transition: transform .4s; }
.fi-trend-track a:hover .fi-trend-img img { transform: scale(1.05); }
.fi-trend-n { position: absolute; left: 0; bottom: 0; display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 8px; background: #e6197a; color: #fff; font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; box-sizing: border-box; }
.fi-trend-track b { display: -webkit-box; overflow: hidden; font-size: 16px; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.fi-trend-track a:hover b { color: #e6197a; }
.fi-trend-track small { display: flex; align-items: center; gap: 6px; margin-top: auto; color: #6b6b74; font-size: 12.5px; font-weight: 600; }
.fi-trend-track small i { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.fi-trend-dots { display: flex; justify-content: center; gap: 6px; padding: 16px 0 4px; }
.fi-trend-dots i { width: 6px; height: 6px; background: #d6d7db; transition: background .2s, width .2s; }
.fi-trend-dots i.is-on { width: 18px; background: #e6197a; }
@media (prefers-reduced-motion: reduce) { .fi-trend-dot { animation: none; } }
@media (min-width: 600px) { .fi-trend-track { grid-auto-columns: calc((100% - 14px) / 2); } }
@media (min-width: 1024px) {
	.fi-trend { margin: 36px 0 0; }
	.fi-trend-h { padding: 20px 0 16px; }
	.fi-trend-h h2 { font-size: 16px; }
	.fi-trend-live { order: 0; flex-basis: auto; }
	.fi-trend-track { grid-auto-columns: calc((100% - 2 * 18px) / 3); column-gap: 18px; }
	.fi-trend-track b { font-size: 17px; }
}

/* Startseite am Computer: an Stelle der ersten News-Reihe unter Video/Newsticker, 4 Karten sichtbar */
.fi-trend--home { margin: 18px 15px 10px; } /* Handy: direkt unter dem OneFootball-Player */
@media (min-width: 1024px) {
	body.home .fi-panel > .fi-trend--home { display: block; order: -1; grid-column: 1 / -1; margin: 0; }
	body.home .fi-panel > .fi-trend--home[hidden] { display: none; }
	body.home .fi-panel > .fi-trend--home .fi-trend-track { grid-auto-columns: calc((100% - 3 * var(--w-gap)) / 4); column-gap: var(--w-gap); }
	body.home .fi-panel > .fi-trend--home .fi-trend-track b { font-size: 18px; }
	/* die drei News, die vorher hier standen – nur am Computer ausblenden, wenn der Slider da ist */
	body.home .fi-panel:has(> .fi-trend--home:not([hidden])) > .fi-hitem--r1 { display: none; }
}
.fi-trend-sub { margin-left: 4px; padding: 3px 7px; background: #fdeef5; color: #e6197a; font-size: 11px; letter-spacing: .08em; }