/* =====================================================================
   Neuigkeiten als "Velmora Post" (design.md 6.5, W8, W13):
   Liste /neuigkeiten und Artikel /neuigkeiten/:id. Nur Tokens aus site.css.
   ===================================================================== */

/* ---------- Zeitungskopf ---------- */
.np-hero__grid { margin-top: clamp(20px, 2.6vw, 34px); align-items: start; }
.np-hero__title {
  margin-top: 18px; padding-bottom: 12px; border-bottom: 7px double rgb(var(--rosa-rgb) / .75);
  font: 400 clamp(64px, 13vw, 204px)/.84 var(--f-display); letter-spacing: .015em; text-transform: uppercase; color: #fff; text-shadow: var(--versatz-text);
}
.np-hero__title em { display: inline-block; padding-top: .22em; margin-top: -.22em; text-shadow: none; }
.np-hero__zeile {
  display: flex; flex-wrap: wrap; gap: 6px 0; padding: 10px 0 11px; border-bottom: 1px solid var(--linie-2);
  font: 700 12px/1.3 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2);
}
.np-hero__zeile span { display: inline-flex; align-items: center; }
.np-hero__zeile span + span::before { content: ""; width: 6px; height: 6px; margin: 0 14px; transform: rotate(45deg); background: var(--mag); }
.np-hero .page-hero__lead { margin-top: 0; }
@media (max-width: 639px) {
  .np-hero__zeile { flex-direction: column; gap: 6px; }
  .np-hero__zeile span + span::before { margin: 0 10px 0 0; }
}
@media (min-width: 960px) { .np-hero__zeile { justify-content: space-between; } .np-hero__zeile span + span::before { display: none; } }
.np-abo-tafel { max-width: 460px; margin-left: auto; }
.np-abo {
  --c: var(--cut); position: relative; padding: clamp(22px, 2.6vw, 30px); background: var(--grad-flaeche); box-shadow: inset 0 0 0 1px var(--linie-mag);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
}
.np-abo::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 70% 50% at 100% 0%, rgb(var(--mag-rgb) / .2), transparent 70%); }
.np-abo > * { position: relative; }
.np-abo__kick { font: 700 12px/1.2 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--rosa); }
.np-abo__titel { margin-top: 10px; font: 400 clamp(30px, 2.8vw, 40px)/.95 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; }
.np-abo__text { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.np-abo__text b { color: #fff; font-weight: 600; }
.np-abo .btn-row { margin-top: 20px; }
@media (max-width: 959px) { .np-abo-tafel { margin-left: 0; } }

/* ---------- Rubriken ---------- */
.np-filter { margin-bottom: clamp(28px, 3.4vw, 44px); }
.np-filter .tabs__list { max-width: 100%; }

/* ---------- Titelseite: Aufmacher plus Postkarte ---------- */
.np-titelseite { display: grid; gap: 40px; align-items: center; }
.np-titelseite > * { min-width: 0; }
.np-titelseite__karte { display: none; }
.np-titelseite__cap { margin-top: 24px; text-align: center; font: 700 12px/1.4 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
@media (min-width: 960px) {
  .np-titelseite { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 6vw, 96px); }
  .np-titelseite__karte { display: block; padding: 0 12px 0 0; }
}

.np-post { padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.4vw, 32px) clamp(22px, 2.6vw, 32px); }
.np-post .post__title { font-size: clamp(36px, 4vw, 60px); overflow-wrap: anywhere; }
.np-post .post__meta { flex-wrap: wrap; }
.np-post__tags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.np-post__pin { display: inline-flex; align-items: center; gap: 6px; color: var(--text-ink); }
.np-post__pin .icon { width: 14px; height: 14px; }
.np-post__marks { margin-top: 14px; }
.np-post__marks .chip { color: var(--text-ink); background: rgb(var(--grund-rgb) / .06); box-shadow: inset 0 0 0 1px var(--linie-papier); }
.np-post__marks .chip b { color: var(--text-ink); }
.np-post__foot {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 18px; padding-top: 12px;
  border-top: 1px solid var(--linie-papier); font: 500 13px/1.3 var(--f-ui); color: var(--text-papier-2);
}
.np-post__foot > span:first-child { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.np-post__foot b { color: var(--text-ink); }

/* Quelle: Discord-Beiträge */
.quelle { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/1 var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: #aab3ff; white-space: nowrap; }
.quelle .icon { width: 15px; height: 15px; color: var(--discord); }
.quelle--hell { color: var(--text-ink); }

/* ---------- Karten ---------- */
.np-weitere { margin: clamp(48px, 6vw, 80px) 0 20px; }
.np-karten > li { display: flex; }
.np-karten .news-card { flex: 1; }
.np-card__von { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.np-card__von b { color: var(--text-2); font-weight: 700; }
.np-karten .news-card__foot { flex-wrap: wrap; }
@media (max-width: 639px) {
  .np-card--ohne-bild .news-card__media { display: none; }
  .np-card--ohne-bild { box-shadow: inset 3px 0 0 var(--vio); }
  .np-card--ohne-bild.news-card--pinned { box-shadow: inset 3px 0 0 var(--mag), inset 0 3px 0 var(--mag); }
}
.np-seitenzahl { margin-top: 14px; text-align: center; font: 500 13px/1.4 var(--f-ui); color: var(--text-3); }

/* ---------- Aus der Stadt ---------- */
.np-stadt__link { margin-top: 28px; }

/* ---------- Artikel ---------- */
.np-artikel__kopf { position: relative; isolation: isolate; padding: clamp(32px, 5vw, 72px) 0 clamp(28px, 3.4vw, 44px); }
.np-artikel__kopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 45% 70% at 10% 0%, rgb(var(--vio-rgb) / .3), transparent 70%), radial-gradient(ellipse 40% 60% at 95% 100%, rgb(var(--mag-rgb) / .12), transparent 70%);
}
.np-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; list-style: none; margin: 0; padding: 0; font: 700 12px/1.3 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; }
.np-crumb li { display: inline-flex; align-items: center; }
.np-crumb li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px; transform: rotate(45deg); background: var(--mag); }
.np-crumb a { display: inline-block; padding: 12px 0; color: var(--rosa); text-decoration: none; }
.np-crumb a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.np-artikel__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; }
.np-artikel__titel {
  margin-top: 18px; font: 400 clamp(44px, 5vw, 80px)/.92 var(--f-display); letter-spacing: .01em; text-transform: uppercase; color: #fff; text-shadow: var(--versatz-text);
}
.np-artikel__daten { display: flex; flex-wrap: wrap; gap: 1px; margin-top: 26px; background: var(--linie); }
.np-artikel__daten > div { flex: 1 1 auto; min-width: 0; padding: 10px 14px 9px; background: #120b1a; }
.np-artikel__daten dt { font: 700 12px/1.2 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--text-3); }
.np-artikel__daten dd { margin-top: 5px; font: 500 14.5px/1.35 var(--f-ui); color: var(--text); }
.np-artikel__inhalt { padding-bottom: var(--sec-y-s); }
.np-artikel__bild { margin-bottom: clamp(28px, 4vw, 44px); }
.np-artikel__bild .media { --c: var(--cut-m); clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c))); }
.np-artikel__text { font-size: 17px; }
.np-artikel__text > :first-child { margin-top: 0; }
.np-artikel__bilder { margin-top: 36px; }

.np-teilen { margin-top: clamp(40px, 5vw, 60px); padding-top: 24px; border-top: 5px solid transparent; border-image: repeating-linear-gradient(120deg, rgb(var(--mag-rgb) / .5) 0 6px, transparent 6px 10px) 5; }
.np-teilen__label { margin-bottom: 12px; color: var(--rosa); }
.np-link .copy__prompt { letter-spacing: .1em; text-transform: uppercase; }
.np-teilen__knoepfe { margin-top: 16px; }

.np-nachbarn { display: grid; gap: 12px; margin-top: 40px; }
.np-nachbar {
  --c: var(--cut-s); position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 16px 18px 17px; text-decoration: none;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--linie);
  clip-path: polygon(0 0, calc(100% - var(--c)) 0, 100% var(--c), 100% 100%, var(--c) 100%, 0 calc(100% - var(--c)));
  transition: background var(--t), box-shadow var(--t);
}
.np-nachbar:hover { background: var(--flaeche-2); box-shadow: inset 0 0 0 1px var(--linie-mag); }
.np-nachbar:focus-visible { outline: 3px solid var(--fokus); outline-offset: -6px; }
.np-nachbar__rolle { font: 700 12px/1.2 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; color: var(--rosa); }
.np-nachbar__titel { font: 400 26px/1 var(--f-display); letter-spacing: .02em; text-transform: uppercase; color: #fff; overflow-wrap: anywhere; }
.np-nachbar__meta { font: 500 13px/1.3 var(--f-ui); color: var(--text-3); }
.np-nachbar--leer { display: none; background: none; box-shadow: none; padding: 0; }
@media (min-width: 640px) {
  .np-nachbarn { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .np-nachbar--leer { display: block; }
  .np-nachbar--neuer { text-align: right; align-items: flex-end; }
}

.np-mehr { padding-top: var(--sec-y-s); background: linear-gradient(180deg, transparent, rgb(var(--tief-rgb) / .3) 40%, transparent); }
.np-mehr__alle { margin-top: 32px; text-align: center; }