/* ============================================================================
   NEWS-ÜBERSICHT (Design V2) — baut auf design-v2.css (.news-v2 .news-card-Komponente) und
   kader-v2.css (.kd-hero, .kd-bar, .kd-chips/.kf) auf.
   Aufbau: roter Hero "NEWS" + Kategorie-Filter-Chips (echte Kategorien: Nachbericht/Vorbericht/
   Verein) · Raster aus allen echten Beiträgen als flache Karten, ohne eigene "Bühne" (das ist eine
   Übersicht zum Durchsuchen, keine Startseiten-Teaser-Zeile mit Hervorhebung des neuesten Artikels).
   ============================================================================ */
.nv-lead{font-size:18px;line-height:1.5;color:rgba(255,255,255,.9);max-width:52ch;margin-top:22px;}

/* Eigenes Raster statt .news-row (die ist auf die 5er-Teaser-Zeile der Startseite zugeschnitten):
   4 Spalten, damit auch eine ungerade Beitragszahl (aktuell 7) nicht seltsam aufgeht. */
.news-archive .news-row{grid-template-columns:repeat(4,1fr);}
.news-archive .news-card.is-filtered-out{display:none;}
.nv-empty{margin-top:36px;text-align:center;color:var(--ink-muted);font-size:15px;}

@media (max-width:980px){.news-archive .news-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:700px){.news-archive .news-row{grid-template-columns:repeat(2,1fr);gap:22px 16px;}}
@media (max-width:420px){.news-archive .news-row{grid-template-columns:1fr;}}

/* Basis-Regeln für .cta-banner/.cta-inner (Mitglieder-Banner): sonst nur in teams-v2.css definiert,
   das news-v2.html nicht einbindet — ohne die zwei Regeln blieb der Banner unsichtbar in Weiß/Ink
   statt Rot/Weiß (Diagonalschnitt fehlte, Text erbte die dunkle Standard-Schriftfarbe). */
/* margin:-28px oben UND unten (nicht nur oben, wie in teams-v2.css) — sonst bleibt an der
   unteren linken Ecke ein heller Spalt zwischen Banner und Footer, weil der Diagonalschnitt
   dort 28px vom Rand wegschneidet und ohne Überlappung der Footer nicht darunter durchschimmert.
   So macht es startseite-matchday.html (dortige eigene .cta-banner-Regel), hier übernommen. */
.cta-banner{position:relative;overflow:hidden;color:#fff;clip-path:polygon(0 28px,100% 0,100% 100%,0 calc(100% - 28px));padding:96px 0;margin:-28px 0;}
.cta-inner{max-width:var(--max);margin:0 auto;padding:0 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;}

/* ----------------------------------------------------------------------------------------------
   Newsletter-CTA (nur diese Seite): Standard-.cta-banner-Muster wie auf der Startseite/den übrigen
   V2-Seiten — Rot läuft volle Breite (Full-Bleed), nur der Inhalt bleibt über .cta-inner in der
   1240px-Box. Mit Anmeldeformular. Reine Vorschau — die Anmeldung ist noch ohne echte Anbindung.
   ---------------------------------------------------------------------------------------------- */
.nv-cta-inner{gap:36px 56px;}
/* px statt ch: "ch" richtet sich nach der Schrift des Elements selbst (hier die kleine
   Fließtext-Schrift), nicht nach der riesigen Anton-Headline im h2 — dadurch war die Spalte
   faktisch nur ~300px breit und "Keine News mehr verpassen?" brach in vier Zeilen um. */
.nv-cta-copy{max-width:600px;}
.nv-cta-copy h2{max-width:none;}
.nv-cta-copy p{margin:14px 0 0;font-size:16.5px;line-height:1.55;color:rgba(255,255,255,.86);max-width:44ch;}
.nv-newsletter-form{flex:1 1 340px;max-width:420px;}
.nv-nf-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.nv-nf-row{display:flex;gap:12px;flex-wrap:wrap;}
.nv-nf-input{
  box-sizing:border-box;flex:1 1 200px;min-width:0;height:54px;padding:0 18px;
  background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.45);border-radius:0;color:#fff;
  font-family:var(--font-body);font-size:16px;
}
.nv-nf-input::placeholder{color:rgba(255,255,255,.55);}
.nv-nf-input:focus{outline:none;border-color:var(--ivory);background:rgba(255,255,255,.14);}
.nv-nf-row .btn{flex:none;}
/* Datenschutz-/Zustimmungshinweis (Platzhaltertext — Formulierung ist nicht final/rechtlich
   geprüft, muss vor echtem Einsatz von der Vereinsseite/juristisch abgenommen werden). */
.nv-nf-consent{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6);max-width:380px;}
.nv-nf-consent a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:2px;}
.nv-nf-consent a:hover{color:#fff;}

@media (max-width:700px){
  .cta-banner{padding:76px 0;}
  .nv-cta-inner{gap:26px;}
  .nv-nf-row{flex-direction:column;align-items:stretch;}
  /* flex-basis:200px war für die Zeile (Breite) gedacht — in flex-direction:column wird dieselbe
     Zahl sonst zur Höhe und reißt das Feld auf ~200px Höhe auf. */
  .nv-nf-input{flex:0 0 auto;}
  .nv-nf-row .btn{width:100%;justify-content:center;}
}