/* ==========================================================================
   Neuigkeiten – Zeitleiste an der Eis-Linie, Discord-Karte, Events.
   Die Markdown-Ausgabe (.md-*) stammt aus src/lib/discord-markdown.js.
   ========================================================================== */

/* ---------- Kopf ---------- */
.news-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 30px; }
.news-hero-live {
  display: inline-flex; align-items: center; gap: 10px;
  font: 600 0.92rem/1.2 var(--f-label); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
}
.news-hero-live b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.news { padding-top: clamp(36px, 5vw, 64px); }

/* ---------- Kennzahlen ---------- */
.news-stats { margin-bottom: clamp(48px, 7vw, 80px); }
.news-stats .stat-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) {
  .news-stats.cols-4 .stat-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.news-stats .stat-band > * { padding: clamp(18px, 2.6vw, 30px); min-width: 0; }
.news-stats .stat-value { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.news-stats .stat-value.news-stat-text { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.15; padding-bottom: 0.1em; }

/* ---------- Raster: Zeitleiste + Seitenleiste ---------- */
.news-layout { display: grid; gap: clamp(56px, 7vw, 80px); grid-template-columns: minmax(0, 1fr); }
.news-main { min-width: 0; }
.news-aside { display: grid; gap: 28px; align-content: start; min-width: 0; }
.news-aside-sticky { display: grid; gap: 20px; }
@media (min-width: 1060px) {
  .news-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 56px; }
  .news-aside-sticky { position: sticky; top: calc(var(--header-h) + 24px); }
}

.news-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 28px;
  margin-bottom: clamp(30px, 4vw, 44px);
}
.news-head h2 { font-size: clamp(1.85rem, 3.4vw, 2.6rem); }
.news-head p { margin-top: 8px; color: var(--ink-3); }

.news-legend, .news-counts {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px;
  font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.news-legend li, .news-counts li { display: inline-flex; align-items: center; gap: 8px; }

/* ---------- Status-Marken ✅ ⚡ ❌ (als Icon-Chip) ---------- */
.news-mark.is-new, .news-body .md-li.is-new {
  --mk: var(--ok); --mk-wash: rgba(79, 220, 155, 0.12); --mk-line: rgba(79, 220, 155, 0.38);
  --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
.news-mark.is-fix, .news-body .md-li.is-fix {
  --mk: var(--ember); --mk-wash: rgba(234, 168, 85, 0.12); --mk-line: rgba(234, 168, 85, 0.4);
  --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
}
.news-mark.is-removed, .news-body .md-li.is-removed {
  --mk: var(--bad); --mk-wash: rgba(255, 111, 111, 0.12); --mk-line: rgba(255, 111, 111, 0.38);
  --mk-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}
.news-mark { position: relative; display: inline-block; width: 18px; height: 18px; flex-shrink: 0; }
.news-mark::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--mk-wash); border: 1px solid var(--mk-line);
}
.news-mark::after {
  content: ''; position: absolute; inset: 4px; background: var(--mk);
  -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat;
}

/* ---------- Die Zeitleiste ---------- */
.news-timeline {
  --tl-x: 7px;
  position: relative; list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(40px, 5vw, 60px);
}
/* die Eis-Linie */
.news-timeline::before {
  content: ''; position: absolute; top: 12px; bottom: 32px; left: var(--tl-x); width: 2px; margin-left: -1px; border-radius: 2px;
  background: linear-gradient(180deg, var(--frost-hi) 0%, var(--frost) 10%, rgba(108, 200, 255, 0.4) 45%, rgba(108, 200, 255, 0.08) 100%);
  box-shadow: 0 0 14px rgba(108, 200, 255, 0.35);
}
.news-day { position: relative; padding-left: 34px; }
/* Punkt auf der Linie */
.news-day::before {
  content: ''; position: absolute; left: var(--tl-x); top: 9px; width: 13px; height: 13px; margin-left: -6.5px; border-radius: 50%;
  background: var(--night-1); border: 2px solid var(--frost);
  box-shadow: 0 0 0 4px var(--night-1), 0 0 16px var(--frost-glow);
}
.news-day.is-fresh::before { background: var(--frost-hi); animation: news-ping 2.6s var(--ease) infinite; }
@keyframes news-ping {
  0% { box-shadow: 0 0 0 4px var(--night-1), 0 0 0 4px rgba(108, 200, 255, 0.55); }
  80%, 100% { box-shadow: 0 0 0 4px var(--night-1), 0 0 0 18px rgba(108, 200, 255, 0); }
}

/* Datum: auf dem Handy eine Zeile über den Karten, am Desktop groß links an der Linie */
.news-date { margin-bottom: 14px; }
.news-date time { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; line-height: 1; }
.news-date-d { font: 700 2.1rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.news-date-my { font: 700 0.95rem/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; }
.news-date-m { color: var(--frost); }
.news-date-y { color: var(--ink-4); letter-spacing: 0.12em; }
.news-date-wd { font: 600 0.8rem/1 var(--f-label); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.news-date-wd::before { content: '·'; margin-right: 10px; color: var(--ink-4); }

@media (min-width: 760px) {
  .news-timeline { --tl-date: 104px; --tl-gap: 56px; --tl-x: calc(var(--tl-date) + var(--tl-gap) / 2); }
  .news-day { display: grid; grid-template-columns: var(--tl-date) minmax(0, 1fr); column-gap: var(--tl-gap); padding-left: 0; }
  .news-day::before { top: 22px; }
  .news-date { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; margin: 0; padding-top: 6px; }
  .news-date time { display: grid; justify-items: end; gap: 8px; text-align: right; }
  .news-date-d { font-size: 3.5rem; }
  .news-date-wd::before { content: none; }
}

/* ---------- Karten ---------- */
.news-day-items { display: grid; gap: 18px; min-width: 0; }
.news-card { min-width: 0; padding: clamp(20px, 3vw, 32px); transition: border-color 0.3s, box-shadow 0.3s; }
/* kleine Nase zur Linie hin */
.news-day-items > .news-card:first-child::before {
  content: ''; position: absolute; left: -7px; top: 22px; width: 12px; height: 12px; transform: rotate(45deg);
  background: #17212e; border-left: 1px solid; border-bottom: 1px solid; border-left-color: inherit; border-bottom-color: inherit;
}
.news-card.is-latest {
  border-color: rgba(108, 200, 255, 0.32);
  box-shadow: var(--shadow-2), 0 0 0 1px rgba(108, 200, 255, 0.06), 0 34px 90px -56px rgba(108, 200, 255, 0.55);
}
.news-card:target { border-color: var(--frost); box-shadow: 0 0 0 3px rgba(108, 200, 255, 0.2), var(--shadow-2); }

.news-card-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px;
  font: 600 0.8rem/1.25 var(--f-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.news-card-kind { display: inline-flex; align-items: center; gap: 7px; color: var(--frost); }
.news-card-time time { color: var(--ink-2); }
.news-card-time span[title] { cursor: help; text-decoration: underline dotted var(--ink-4); text-underline-offset: 3px; }
.news-card-meta .badge { height: 24px; }
.news-card-title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.14; }

.news-card-foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line);
}
.news-card-actions { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-left: auto; }
.news-card-actions .btn-text { --btn-fg: var(--ink-3); color: var(--ink-3); font-size: 0.82rem; letter-spacing: 0.12em; min-height: 32px; }
.news-card-actions .btn-text:hover { color: var(--frost); }

/* ---------- Inhalt (Discord-Markdown) ---------- */
.news-body { margin-top: 18px; overflow-wrap: anywhere; }
.news-body .md-h {
  overflow: hidden; margin-top: 1.7em;
  font: 700 0.9rem/1.35 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--frost-hi);
}
/* Linie hinter der Abschnittsüberschrift, auch bei Umbrüchen */
.news-body .md-h::after {
  content: ''; display: inline-block; vertical-align: middle; width: 100%; height: 1px; margin: -2px -100% 0 14px;
  background: linear-gradient(90deg, var(--line-3), transparent 70%);
}
.news-body > .md-h:first-child { margin-top: 0.2em; }
.news-body h5.md-h { font-size: 0.84rem; color: var(--ink-2); }
.news-body h6.md-h { font-size: 0.8rem; color: var(--ink-3); }
.news-body .md-h + * { margin-top: 0.75em; }

.news-body ul.md-list { list-style: none; padding-left: 0; }
.news-body .md-list > li.md-li { position: relative; padding-left: 32px; }
.news-body .md-list > li + li { margin-top: 0.55em; }
/* einfacher Punkt: kleiner Eis-Rhombus */
.news-body ul.md-list > li.md-li::before {
  content: ''; position: absolute; left: 8px; top: 0.72em; width: 7px; height: 7px; border-radius: 1px; transform: rotate(45deg);
  background: var(--frost); box-shadow: 0 0 10px rgba(108, 200, 255, 0.55);
}
.news-body .md-list .md-list { margin-top: 0.45em; }
.news-body ul.md-list .md-list > li.md-li::before { background: transparent; border: 1.5px solid var(--frost); box-shadow: none; }
/* markierte Punkte bekommen den Icon-Chip */
.news-body ul.md-list > li.md-li.is-new::before,
.news-body ul.md-list > li.md-li.is-fix::before,
.news-body ul.md-list > li.md-li.is-removed::before {
  left: 0; top: 0.24em; width: 22px; height: 22px; border-radius: 50%; transform: none;
  background: var(--mk-wash); border: 1px solid var(--mk-line); box-shadow: none;
}
.news-body ul.md-list > li.md-li.is-new::after,
.news-body ul.md-list > li.md-li.is-fix::after,
.news-body ul.md-list > li.md-li.is-removed::after {
  content: ''; position: absolute; left: 5px; top: calc(0.24em + 5px); width: 12px; height: 12px; background: var(--mk);
  -webkit-mask: var(--mk-icon) center / contain no-repeat; mask: var(--mk-icon) center / contain no-repeat;
}
.news-body ol.md-list { padding-left: 1.6em; }
.news-body ol.md-list > li.md-li { padding-left: 4px; }
.news-body ol.md-list > li.md-li::marker { font-family: var(--f-label); font-weight: 700; }

.news-body .md-sub small { font-size: 0.88rem; color: var(--ink-3); }
.news-body .md-mention {
  padding: 0.05em 0.35em; border-radius: 4px; font-weight: 600;
  background: rgba(88, 101, 242, 0.2); color: #c9cdfb;
}
.news-body .md-emoji { color: var(--ink-3); font-size: 0.92em; }
.news-body .md-spoiler {
  padding: 0 0.2em; border-radius: 4px; cursor: pointer;
  background: var(--night-5); color: transparent; transition: color 0.2s, background-color 0.2s;
}
.news-body .md-spoiler * { color: inherit; }
.news-body .md-spoiler:hover, .news-body .md-spoiler:focus { color: var(--ink); background: rgba(108, 200, 255, 0.1); outline-offset: 1px; }
.news-body time { border-bottom: 1px dotted var(--line-3); color: var(--ink); }
.news-body .md-pre {
  padding: 14px 16px; border-radius: var(--r-s); overflow-x: auto;
  background: var(--night-0); border: 1px solid var(--line-2); font-size: 0.88rem; line-height: 1.55;
}
.news-body .md-pre code { background: none; padding: 0; color: var(--frost-hi); white-space: pre; }
.news-body p > strong:first-child { color: var(--ember-hi); }

/* ---------- Bilder ---------- */
.news-media { display: grid; gap: 10px; margin-top: 22px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.news-media.is-1 { grid-template-columns: minmax(0, 1fr); }
.news-media figure {
  position: relative; margin: 0; overflow: hidden; border-radius: var(--r-s); cursor: zoom-in;
  aspect-ratio: 4 / 3; background: var(--night-3); box-shadow: 0 0 0 1px var(--line-2);
}
.news-media.is-1 figure { aspect-ratio: auto; }
.news-media.is-3 figure:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.news-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease-out); }
.news-media.is-1 img { height: auto; max-height: 560px; }
.news-media figure:hover img { transform: scale(1.03); }
.news-media figure:focus-visible { outline: 2px solid var(--frost); outline-offset: 3px; }
.news-media-zoom {
  position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink);
  background: rgba(4, 7, 11, 0.72); border: 1px solid var(--line-2);
  opacity: 0; transform: scale(0.9); transition: opacity 0.25s, transform 0.25s var(--ease-out);
}
.news-media figure:hover .news-media-zoom, .news-media figure:focus-visible .news-media-zoom { opacity: 1; transform: none; }
@media (hover: none) { .news-media-zoom { opacity: 1; transform: none; } }

.news-older {
  display: flex; align-items: center; gap: 10px; margin-top: clamp(32px, 4vw, 44px);
  color: var(--ink-3); font-size: 0.95rem;
}
.news-older .icon { flex-shrink: 0; color: var(--ink-4); }
.news-older a { text-decoration: underline; text-decoration-color: rgba(108, 200, 255, 0.4); }
@media (min-width: 760px) { .news-older { padding-left: calc(104px + 56px); } }

/* ---------- Leerzustand ---------- */
.news-empty .empty { padding: clamp(44px, 6vw, 72px) 12px; }
.news-empty .empty h3 { color: var(--ink); }
.news-empty .empty p { max-width: 46ch; color: var(--ink-2); }
.news-empty .btn { margin-top: 8px; }
.news-empty .empty .btn .icon { color: inherit; }

/* ---------- Seitenleiste ---------- */
.news-aside-title { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 1.35rem; line-height: 1.2; }
.news-aside-title .icon { color: var(--frost); flex-shrink: 0; }

.news-discord { padding: 0; overflow: hidden; }
.news-discord-banner { position: relative; height: 128px; overflow: hidden; }
.news-discord-banner picture, .news-discord-banner img { width: 100%; height: 100%; }
.news-discord-banner img { object-fit: cover; object-position: center 38%; opacity: 0.8; }
.news-discord-banner::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(88, 101, 242, 0.22) 0%, rgba(22, 33, 46, 0.35) 45%, #16212e 100%);
}
.news-discord-body { position: relative; display: grid; gap: 16px; margin-top: -44px; padding: 0 clamp(20px, 2.4vw, 26px) clamp(20px, 2.4vw, 26px); }
.news-discord-logo {
  display: grid; place-items: center; width: 76px; height: 76px; border-radius: 20px;
  background: var(--night-2); border: 1px solid var(--line-2); box-shadow: 0 14px 30px -12px #000, 0 0 30px -10px var(--frost-glow);
}
.news-discord-logo img { width: 56px; height: 56px; }
.news-discord-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; }
.news-discord-stat { padding: 12px 14px; border-radius: var(--r-s); background: rgba(4, 7, 11, 0.45); border: 1px solid var(--line); }
.news-discord-stat b { display: flex; align-items: center; gap: 8px; font: 700 1.55rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.news-discord-stat > span { display: block; margin-top: 7px; font: 600 0.74rem/1 var(--f-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.news-discord .card-text { font-size: 0.95rem; }

.news-feed { display: grid; gap: 12px; justify-items: start; }
.news-feed .news-aside-title { margin-top: 0; font-size: 1.2rem; }
.news-feed .card-text { font-size: 0.94rem; }

/* ---------- Events ---------- */
.news-events { display: grid; gap: 14px; }
.news-events > .news-aside-title { margin: 0 0 4px; }
.news-event { display: grid; gap: 14px; padding: 18px; overflow: hidden; }
.news-event-cover { margin: -18px -18px 0; aspect-ratio: 5 / 2; overflow: hidden; background: var(--night-3); }
.news-event-cover img { width: 100%; height: 100%; object-fit: cover; }
.news-event-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; align-items: start; }
.news-event-date {
  display: grid; justify-items: center; align-content: center; gap: 4px; height: 66px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(108, 200, 255, 0.18), rgba(108, 200, 255, 0.04)); border: 1px solid rgba(108, 200, 255, 0.3);
}
.news-event-d { font: 700 1.65rem/1 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.news-event-m { font: 700 0.72rem/1 var(--f-label); letter-spacing: 0.2em; text-transform: uppercase; color: var(--frost); }
.news-event-live { margin-bottom: 8px; }
.news-event-title { font-size: 1.14rem; line-height: 1.25; overflow-wrap: anywhere; }
.news-event-when { margin-top: 6px; font-size: 0.9rem; color: var(--ink-2); }
.news-event-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; font-size: 0.9rem; color: var(--ink-3); }
.news-event-facts li { display: inline-flex; align-items: center; gap: 7px; min-width: 0; overflow-wrap: anywhere; }
.news-event-facts .icon { color: var(--frost); flex-shrink: 0; }
.news-event-text { font-size: 0.94rem; overflow-wrap: anywhere; }