/* ==========================================================================
   Neuigkeiten (public/news.php) – ruhige Leseliste. Präfix .nw-
   ========================================================================== */

.nw-kopf { position: relative; isolation: isolate; padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 40px); }
.nw-kopf::before {
  content: ""; position: absolute; inset: -84px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(700px 420px at 15% 0%, color-mix(in oklab, var(--rf-akzent-hell) 16%, transparent), transparent 70%);
}
.nw-kopf .rf-container, .nw-liste .rf-container { max-width: calc(820px + 2 * var(--rf-seitenrand)); }
.nw-kopf h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.03; letter-spacing: -.045em; font-weight: 800; margin: 18px 0 16px; }
.nw-admin-knopf { margin-top: 24px; min-height: 48px; }
.nw-hinweis { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: var(--rf-info-weich); color: var(--rf-info); font-weight: 600; }
.nw-leer { padding: 28px; border-radius: 22px; background: var(--rf-flaeche); border: 1.5px dashed var(--rf-rand-stark); text-align: center; color: var(--rf-text-2); }

/* Filter */
.nw-filter { display: flex; gap: 8px; max-width: 820px; margin: 0 auto clamp(24px, 4vw, 40px); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.nw-filter::-webkit-scrollbar { display: none; }
.nw-filter button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--rf-rand); background: var(--rf-flaeche); font: 600 14px/1 var(--rf-schrift-text); color: var(--rf-text-2); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.nw-filter button span { padding: 3px 7px; border-radius: 999px; font-size: 12px; background: var(--rf-flaeche-2); color: var(--rf-text-3); }
.nw-filter button:hover { color: var(--rf-text); border-color: var(--rf-rand-stark); }
.nw-filter button.ist-aktiv { background: var(--pr-tinte); border-color: var(--pr-tinte); color: var(--pr-tinte-auf); }
.nw-filter button.ist-aktiv span { background: rgb(255 255 255 / .18); color: inherit; }

/* Beiträge */
.nw-liste { padding-bottom: clamp(48px, 7vw, 88px); }
.nw-beitrag { position: relative; padding: clamp(24px, 3.5vw, 36px); border-radius: 26px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); scroll-margin-top: calc(var(--header-h, 84px) + 20px); }
.nw-beitrag + .nw-beitrag { margin-top: 16px; }
.nw-beitrag[hidden] { display: none; }
.nw-beitrag--neu { border-color: color-mix(in oklab, var(--rf-akzent) 35%, var(--rf-rand)); box-shadow: var(--rf-schatten-lg); }
.nw-beitrag__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; font-size: 13.5px; color: var(--rf-text-3); }
.nw-kat { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; font-weight: 700; font-size: 12.5px; background: var(--rf-akzent-weich); color: var(--rf-akzent); }
.nw-kat--devlog { background: color-mix(in oklab, #6366f1 13%, transparent); color: #6366f1; }
.nw-kat--verbesserung { background: color-mix(in oklab, #0ea5e9 13%, transparent); color: #0284c7; }
.nw-kat--community { background: var(--pr-warm-weich); color: color-mix(in oklab, var(--pr-warm), #000 30%); }
.nw-kat--wartung { background: var(--rf-warnung-weich); color: var(--rf-warnung); }
[data-theme="dark"] .nw-kat--devlog { color: #a5b4fc; }
[data-theme="dark"] .nw-kat--verbesserung { color: #7dd3fc; }
[data-theme="dark"] .nw-kat--community { color: var(--pr-warm); }
.nw-neu { font-weight: 700; color: var(--rf-akzent); }
.nw-intern { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--rf-warnung); }
.nw-beitrag h2 { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; letter-spacing: -.025em; font-weight: 800; margin: 0 0 14px; }
.nw-beitrag h2 a { color: inherit; text-decoration: none; }
.nw-beitrag h2 a:hover { color: var(--rf-akzent); }

.nw-wartung { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 12px 16px; border-radius: 14px; background: var(--rf-warnung-weich); color: var(--rf-text-2); font-size: 14.5px; }
.nw-wartung i { color: var(--rf-warnung); }
.nw-wartung b { display: block; color: var(--rf-text); }

.nw-text summary { list-style: none; cursor: pointer; }
.nw-text summary::-webkit-details-marker { display: none; }
.nw-anriss { display: block; color: var(--rf-text-2); font-size: 16.5px; line-height: 1.7; }
.nw-weiter { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-weight: 650; font-size: 14.5px; color: var(--rf-akzent); }
.nw-weiter i { font-size: 11px; transition: transform .25s var(--rf-kurve); }
.nw-text[open] .nw-anriss { display: none; }
.nw-auf { display: none; }
.nw-text[open] .nw-zu { display: none; }
.nw-text[open] .nw-auf { display: inline; }
.nw-text[open] .nw-weiter { margin: 0 0 14px; }
.nw-text[open] .nw-weiter i { transform: rotate(180deg); }
.nw-voll p { margin: 0 0 16px; color: var(--rf-text-2); font-size: 16.5px; line-height: 1.75; overflow-wrap: anywhere; }
.nw-voll p:last-child { margin-bottom: 0; }

.nw-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--rf-rand); }
.nw-autor { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--rf-text-2); margin-right: auto; }
.nw-autor span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 800 13px/1 var(--rf-schrift-titel); background: linear-gradient(135deg, var(--rf-akzent), var(--rf-akzent-hell)); color: #fff; }
.nw-cta { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--rf-akzent-weich); color: var(--rf-akzent); font-weight: 650; font-size: 14.5px; text-decoration: none; transition: background .2s; }
.nw-cta:hover { background: color-mix(in oklab, var(--rf-akzent) 20%, transparent); color: var(--rf-akzent); }
.nw-cta i { font-size: 12px; }
.nw-loeschen { display: inline-flex; align-items: center; gap: 7px; padding: 9px 13px; border-radius: 11px; border: 1px solid var(--rf-rand-stark); background: none; font: 600 13px/1 var(--rf-schrift-text); color: var(--rf-text-3); cursor: pointer; }
.nw-loeschen:hover { color: var(--rf-fehler); border-color: var(--rf-fehler); }

/* Weiterführend */
.nw-weiterfuehrend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 820px; margin: 0 auto; }
.nw-weiterfuehrend a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 20px; background: var(--rf-flaeche); border: 1px solid var(--rf-rand); color: inherit; text-decoration: none; transition: border-color .2s, transform .25s var(--rf-kurve); }
.nw-weiterfuehrend a:hover { color: inherit; transform: translateY(-2px); border-color: var(--rf-rand-stark); }
.nw-weiterfuehrend a > i:first-child { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--rf-akzent-weich); color: var(--rf-akzent); }
.nw-weiterfuehrend span { flex: 1; font-size: 13.5px; color: var(--rf-text-3); }
.nw-weiterfuehrend b { display: block; font-size: 15.5px; color: var(--rf-text); }
.nw-weiterfuehrend a > i:last-child { font-size: 12px; color: var(--rf-text-3); }

@media (max-width: 760px) {
  .nw-weiterfuehrend { grid-template-columns: 1fr; }
  .nw-filter { margin-inline: calc(-1 * var(--rf-seitenrand)); padding-inline: var(--rf-seitenrand); }
}