/* WoW: Forever News (/forever/news/) */
#fnLeiste{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 18px;padding:16px 20px!important;margin:0 0 18px}
#fnLeiste[hidden]{display:none}
.fn-suche{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--leise);flex:1 1 260px;max-width:420px}
.fn-suche input{font:inherit;font-size:15px;color:var(--text);background:#ffffff0d;border:1px solid #ffffff1f;border-radius:8px;padding:9px 12px}
.fn-suche input:focus{outline:none;border-color:var(--gold)}
.fn-stand{font-size:12.5px;color:var(--leise)}
.fn-status{color:var(--leise);margin:8px 0 18px}
.fn-status[hidden]{display:none}
/* Aufmacher: neueste Meldung gross */
.fn-top{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:0;margin:0 0 18px;overflow:hidden;text-decoration:none;color:inherit;padding:0!important}
/* Bild fuellt genau seine Spalte (Hoehe = Zeilenhoehe); ein festes 16:9 mit height:100% wuerde breiter als die Spalte und unter den Text ragen */
.fn-top .fn-bild{aspect-ratio:auto;width:100%;height:auto;min-height:300px;min-width:0}
.fn-top .fn-bild img{position:absolute;inset:0}
.fn-top .fn-inhalt{padding:26px 28px;display:flex;flex-direction:column;justify-content:center;gap:10px}
.fn-top h2{margin:0;font-size:26px;line-height:1.25}
.fn-top p{font-size:15px}
/* Raster */
.fn-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.fn-karte{display:flex;flex-direction:column;overflow:hidden;text-decoration:none;color:inherit;padding:0!important;transition:transform .2s,border-color .2s}
.fn-karte:hover,.fn-karte:focus-visible,.fn-top:hover,.fn-top:focus-visible{transform:translateY(-3px);border-color:rgba(227,173,79,.5);outline:none}
.fn-karte[hidden]{display:none}
.fn-bild{position:relative;aspect-ratio:16/9;background:#ffffff08;overflow:hidden}
.fn-bild img{width:100%;height:100%;object-fit:cover;display:block}
.fn-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(9,13,18,.55))}
.fn-inhalt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.fn-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--leise)}
.fn-meta .neu{font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#21160a;background:linear-gradient(180deg,var(--gold2),var(--gold));padding:2px 7px}
.fn-meta .kat{font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.fn-karte h3{margin:0;font-size:17px;line-height:1.3;color:var(--text)}
.fn-inhalt p{margin:0;color:var(--leise);font-size:14px;line-height:1.6}
.fn-weiter{margin-top:auto;padding-top:6px;font-size:13px;font-weight:600;color:var(--gold2)}
.fn-mehr{display:flex;justify-content:center;margin:22px 0 6px}
.fn-mehr [hidden]{display:none}
.fn-leer{color:var(--leise)}
.fn-quelle{margin:22px 0 30px;font-size:12.5px;color:var(--leise);line-height:1.6}
.fn-quelle a{color:inherit}
@media (max-width:820px){.fn-top{grid-template-columns:1fr}.fn-top .fn-bild{aspect-ratio:16/9;min-height:0}.fn-top .fn-inhalt{padding:18px 18px 20px}.fn-top h2{font-size:21px}}
@media (prefers-reduced-motion:reduce){.fn-karte,.fn-top,.fn-bild img{transition:none}.fn-karte:hover,.fn-top:hover{transform:none}}
/* Glas-Karten randlos: der Innenabstand von .glas braucht einen ID-Selektor */
#fnTop .fn-top,#fnRaster .fn-karte{padding:0!important}
/* Einblenden: Karten erscheinen beim Laden und beim Scrollen gestaffelt (Klasse fn-ein, siehe forever-detail.js).
   Wie im Rest der Seite bleibt die Karte selbst stehen: wuerde sie ihre Deckkraft animieren, zeichnet der Browser die
   Glas-Unschaerfe (::after, kopf.css) erst am Ende. Darum gleiten nur Bild und Text herein, die Glasflaeche blendet weich ein.
   Die Staffelung kommt als --v aus dem JS. Bewusst nicht .einblenden (kopf.css setzt Glas-Karten dort per !important fest). */
.fn-ein:not(.da)>*{opacity:0}
#fnTop .fn-ein::after,#fnRaster .fn-ein::after{transition:opacity .65s ease-out var(--v,0ms)}
#fnTop .fn-ein:not(.da)::after,#fnRaster .fn-ein:not(.da)::after{opacity:0}
.fn-ein.da>*{animation:fnEin .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--v,0ms)}
@keyframes fnEin{from{opacity:0;transform:translateY(18px)}}
.fn-ein.da .fn-bild img{animation:fnBild 1.1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--v,0ms)}
@keyframes fnBild{from{filter:brightness(.55)}}
@media (prefers-reduced-motion:reduce){.fn-ein:not(.da)>*{opacity:1}#fnTop .fn-ein:not(.da)::after,#fnRaster .fn-ein:not(.da)::after{opacity:1}.fn-ein.da>*,.fn-ein.da .fn-bild img{animation:none}}
/* Goldene Oberkante: bei Glas-Karten sitzt sie auf der Glasflaeche (::after, hinter dem Inhalt) und wuerde vom randlosen Bild
   verdeckt - darum hier als eigene Linie ueber dem Bild, blendet zusammen mit der Glasflaeche ein */
#fnTop .fn-top,#fnRaster .fn-karte{position:relative}
#fnTop .fn-top::before,#fnRaster .fn-karte::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;pointer-events:none;background:rgba(227,173,79,.8);transition:opacity .65s ease-out var(--v,0ms)}
#fnTop .fn-ein:not(.da)::before,#fnRaster .fn-ein:not(.da)::before{opacity:0}
/* Anreisser in den Karten gekuerzt, vollstaendig in der Detailansicht */
.fn-karte .fn-inhalt p{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.fn-top .fn-inhalt p{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.fd-inhalt .fn-meta{font-size:12.5px}