/* StockBuddy News – Übersicht und Beiträge (ergänzt sb.css) */

/* ---------- Kopfbereich ---------- */
.news-hero .wrap { gap: 1.1rem; }
.news-hero h1 { max-width: 22ch; }
.news-sub { color: rgba(255,255,255,.78); font-size: var(--s-1); line-height: 1.5; max-width: 58ch; }
.news-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.news-filter a { text-decoration: none; color: rgba(255,255,255,.85); font: 600 var(--s--1)/1 var(--f-body); padding: .72em 1.15em; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); transition: border-color .18s, background .18s; }
.news-filter a:hover { border-color: #fff; color: #fff; }
.news-filter a[aria-current="page"] { background: #fff; color: var(--navy); border-color: #fff; }

.news-main { padding-block: clamp(40px, 6vw, 80px); }

/* ---------- Kategorie-Plakette ---------- */
.news-kat { display: inline-flex; align-items: center; gap: .45em; font: 700 .72rem/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--magenta); background: rgba(209,44,136,.1); padding: .5em .8em; border-radius: 999px; }
.news-kat::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.news-kat.kat-ratgeber { color: var(--blue); background: rgba(33,58,142,.1); }
.news-kat.kat-markt { color: var(--plum); background: rgba(156,46,119,.12); }
.news-hero .news-kat { background: rgba(255,255,255,.12); color: #f3a3cf; }
.news-hero .news-kat.kat-ratgeber { color: #b9c6f2; }
.news-hero .news-kat.kat-markt { color: #e5a6d2; }

/* ---------- Karten ---------- */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
@media (max-width: 1020px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news-grid { grid-template-columns: 1fr; } }

.news-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; min-width: 0; }
.news-card::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--grad); transform: scaleX(0); transform-origin: left; transition: transform .35s ease; }
.news-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.news-card:hover::after { transform: scaleX(1); }
.news-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.news-card:hover .news-media img { transform: scale(1.04); }
.news-ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: var(--grad); }
.news-ph::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.22), transparent 55%); }
.news-ph img { width: 64px !important; height: 64px !important; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; transform: none !important; }
.news-body { display: flex; flex-direction: column; gap: .75rem; padding: 1.4rem 1.5rem 1.6rem; flex: 1; }
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem .8rem; color: var(--muted); font-size: .82rem; }
.news-card h2, .news-card h3 { font-size: var(--s-1); line-height: 1.22; }
.news-card h2 a, .news-card h3 a { text-decoration: none; color: var(--ink); }
.news-card h2 a:hover, .news-card h3 a:hover { color: var(--blue); }
.news-body p { color: var(--ink-2); font-size: var(--s--1); line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-more { margin-top: auto; display: inline-flex; align-items: center; gap: .4em; color: var(--magenta); font-weight: 600; text-decoration: none; font-size: var(--s--1); }
.news-more .arr { transition: transform .18s; }
.news-more:hover .arr { transform: translateX(4px); }

/* Top-Beitrag */
.news-top { display: grid; grid-template-columns: 1.15fr 1fr; margin-bottom: clamp(24px, 3vw, 40px); box-shadow: var(--shadow); border-color: transparent; }
.news-top .news-media { aspect-ratio: auto; min-height: 320px; height: 100%; }
.news-top .news-body { padding: clamp(24px, 3.5vw, 48px); justify-content: center; gap: 1rem; }
.news-top h2 { font-size: var(--s-2); line-height: 1.12; }
.news-top .news-body p { font-size: var(--s-0); -webkit-line-clamp: 4; }
.news-top .news-more { margin-top: .4rem; font-size: var(--s-0); }
@media (max-width: 860px) { .news-top { grid-template-columns: 1fr; } .news-top .news-media { min-height: 0; aspect-ratio: 16 / 9; } }

/* Seiten, leer */
.news-pages { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: clamp(28px, 4vw, 48px); color: var(--muted); font-size: var(--s--1); }
.news-leer { display: grid; justify-items: center; text-align: center; gap: 1rem; padding: clamp(32px, 6vw, 72px) 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; }
.news-leer h2 { font-size: var(--s-2); }
.news-leer p { color: var(--ink-2); }

/* ---------- Beitrag ---------- */
.news-hero-artikel .wrap { max-width: 980px; }
.news-hero-artikel h1 { font-size: var(--s-3); max-width: 24ch; }
.news-hero-artikel.has-bild { padding-bottom: clamp(120px, 16vw, 220px); }
.news-crumbs { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .82rem; color: rgba(255,255,255,.55); }
.news-crumbs a { color: rgba(255,255,255,.75); text-decoration: none; }
.news-crumbs a:hover { color: #fff; text-decoration: underline; }
.news-byline { display: flex; align-items: center; gap: .8rem; color: rgba(255,255,255,.72); font-size: var(--s--1); line-height: 1.35; margin-top: .4rem; }
.news-byline img { width: 36px; height: 36px; padding: 7px; border-radius: 10px; background: var(--grad); filter: none; }
.news-byline strong { color: #fff; }

.news-main-artikel { padding-top: 0; }
.news-main-artikel > .wrap { max-width: 1120px; }
.news-titelbild { margin: calc(-1 * clamp(100px, 14vw, 190px)) 0 clamp(28px, 4vw, 48px); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 90px -40px rgba(13,17,47,.6); aspect-ratio: 21 / 9; background: var(--navy); position: relative; z-index: 1; }
.news-titelbild img { width: 100%; height: 100%; object-fit: cover; }
.news-titelbild.ganz { aspect-ratio: auto !important; background: #fff; }
.news-titelbild.ganz img { height: auto; }
.news-card .news-media img { object-position: top center; }
@media (max-width: 640px) { .news-titelbild { aspect-ratio: 16 / 10; border-radius: 18px; } }
.news-main-artikel .news-artikel-grid:first-child { margin-top: clamp(32px, 5vw, 64px); }

.news-artikel-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (max-width: 960px) { .news-artikel-grid { grid-template-columns: 1fr; } }
.news-side { position: sticky; top: 96px; display: grid; gap: 1.2rem; }
@media (max-width: 960px) { .news-side { position: static; } .news-side .toc { display: none; } }

.news-text { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: clamp(22px, 4.5vw, 60px); color: var(--ink-2); font-size: clamp(1.06rem, 1rem + .25vw, 1.18rem); line-height: 1.75; min-width: 0; overflow-wrap: break-word; }
.news-text > * { max-width: 70ch; }
.news-text > :first-child { margin-top: 0; }
.news-text > p:first-child { font-size: 1.12em; color: var(--ink); line-height: 1.6; }
.news-text p { margin: 0 0 1.15em; }
.news-text h2 { font-size: var(--s-2); color: var(--ink); margin: 1.9em 0 .6em; scroll-margin-top: 96px; }
.news-text h3 { font-size: var(--s-1); color: var(--ink); margin: 1.6em 0 .5em; scroll-margin-top: 96px; }
.news-text h4 { font: 700 var(--s-0)/1.3 var(--f-head); color: var(--blue); margin: 1.4em 0 .4em; }
.news-text strong { color: var(--ink); }
.news-text a:not(.btn) { color: var(--magenta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.news-text ul, .news-text ol { margin: 0 0 1.3em; padding-left: 1.3em; display: grid; gap: .55em; }
.news-text li::marker { color: var(--magenta); font-weight: 700; }
.news-text hr { border: 0; height: 3px; width: 60px; border-radius: 3px; background: var(--grad); margin: 2.4em 0; }
.news-text img { border-radius: 16px; }
.news-text figure { margin: 2em 0; max-width: none; }
.news-text figure img { width: 100%; box-shadow: var(--shadow); }
.news-text figcaption { margin-top: .7rem; font-size: .86rem; color: var(--muted); text-align: center; }
.news-text code { font-size: .88em; background: var(--bg); padding: .15em .4em; border-radius: 6px; }
.news-text blockquote { margin: 1.8em 0; padding: 1.1em 1.4em; border-left: 4px solid var(--magenta); background: linear-gradient(100deg, rgba(209,44,136,.06), rgba(33,58,142,.06)); border-radius: 0 16px 16px 0; color: var(--ink); font-size: 1.04em; }
.news-text blockquote p:last-child { margin-bottom: 0; }
.news-text blockquote.hinweis { border-left-color: var(--blue); font-size: .95em; }
.news-text .tabelle { overflow-x: auto; margin: 1.6em 0; max-width: none; border: 1px solid var(--line); border-radius: 14px; }
.news-text table { width: 100%; border-collapse: collapse; font-size: .92em; line-height: 1.45; }
.news-text th { text-align: left; background: var(--navy); color: #fff; font: 600 .85em/1.3 var(--f-body); letter-spacing: .02em; padding: .8em 1em; }
.news-text td { padding: .75em 1em; border-top: 1px solid var(--line); }
.news-text tbody tr:nth-child(even) td { background: var(--bg); }
.news-disclaimer { margin-top: 2.2em !important; padding-top: 1.2em; border-top: 1px solid var(--line); font-size: .84rem; line-height: 1.55; color: var(--muted); }
.news-disclaimer strong { color: var(--ink-2); }

/* Testen-Kasten im Beitrag */
.news-cta { margin: 2em 0 0; max-width: none !important; display: flex; align-items: center; justify-content: space-between; gap: 1.2rem 1.6rem; flex-wrap: wrap; padding: 1.4rem 1.6rem; border-radius: 20px; background: var(--navy); color: #fff; position: relative; overflow: hidden; isolation: isolate; }
.news-cta::before { content: ""; position: absolute; z-index: -1; width: 260px; height: 260px; right: -60px; top: -120px; border-radius: 50%; background: var(--magenta); filter: blur(70px); opacity: .5; }
.news-cta > div { flex: 1 1 280px; }
.news-cta strong { color: #fff; font: 700 var(--s-1)/1.2 var(--f-head); }
.news-cta p { margin: .35rem 0 0 !important; color: rgba(255,255,255,.78); font-size: .95rem; line-height: 1.5; }

/* Teilen */
.news-share > div { display: flex; gap: .5rem; padding: 0 .3rem .2rem; }
.news-share a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-2); padding: 0 !important; transition: background .18s, color .18s, border-color .18s; }
.news-share a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Weitere Beiträge */
.news-weitere { margin-top: clamp(48px, 7vw, 96px); }
.news-weitere-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.4rem; }
.news-weitere-head h2 { font-size: var(--s-2); }

/* Abschluss-Band */
.news-final { background: var(--navy); color: #fff; text-align: center; padding-block: clamp(56px, 8vw, 104px); position: relative; overflow: hidden; isolation: isolate; }
.news-final::before { content: ""; position: absolute; z-index: -1; width: 40vw; height: 40vw; left: -12vw; bottom: -26vw; border-radius: 50%; background: var(--magenta); filter: blur(90px); opacity: .4; }
.news-final::after { content: ""; position: absolute; z-index: -1; width: 36vw; height: 36vw; right: -10vw; top: -20vw; border-radius: 50%; background: var(--blue); filter: blur(90px); opacity: .5; }
.news-final .wrap { display: grid; justify-items: center; gap: 1.2rem; }
.news-final .eyebrow { color: #f3a3cf; }
.news-final h2 { font-size: var(--s-3); max-width: 20ch; }
.news-final p { color: rgba(255,255,255,.75); }