/* home-news.patch.css – Modern News (Legacy Markup First) – 2026-01-26
   Ziel: moderne News-Übersicht auch ohne Markup-Änderungen (home.php).
   Scope: .card[aria-label="Vereins-News"] (Legacy) + .club-news (falls vorhanden)
*/

/* Global card overrides nur für News */
.card[aria-label="Vereins-News"],
.club-news.card{
  min-height:auto;
}
.card[aria-label="Vereins-News"] .card__body,
.club-news .card__body{
  text-align:left;
  flex:0 0 auto;
}

/* =========================
   LEGACY MARKUP (aktuell bei dir sichtbar)
========================= */

.card[aria-label="Vereins-News"] .news-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

/* Entfernt das "Neuste News" Label (wir machen das visuell über das Featured-Design) */
.card[aria-label="Vereins-News"] .news-new{
  display:none !important;
}

/* Card Row */
.card[aria-label="Vereins-News"] .news-item{
  position:relative;
  background: var(--surface-card);
  border:1px solid color-mix(in srgb, var(--border), transparent 25%);
  border-radius:18px;
  overflow:hidden;
}

/* Accent rail */
.card[aria-label="Vereins-News"] .news-item::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background: color-mix(in srgb, var(--accent), transparent 25%);
}

/* Featured (1. Eintrag) – modern hero feel */
.card[aria-label="Vereins-News"] .news-item:first-child{
  border-color: color-mix(in srgb, var(--border), var(--accent) 35%);
  background:
    radial-gradient(1200px 280px at 10% 0%, color-mix(in srgb, var(--accent), transparent 78%), transparent 60%),
    color-mix(in srgb, var(--surface-card), var(--accent) 4%);
}
.card[aria-label="Vereins-News"] .news-item:first-child::before{
  background: color-mix(in srgb, var(--accent), transparent 10%);
}

/* Layout: Content + Arrow button */
.card[aria-label="Vereins-News"] .news-item__grid{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:12px;
  padding:14px 14px 14px 16px;
  align-items:start;
}

.card[aria-label="Vereins-News"] .news-item__content{
  min-width:0;
}

.card[aria-label="Vereins-News"] .news-item__title{
  font-weight:950;
  letter-spacing:-.015em;
  line-height:1.2;
  margin:0 0 10px 0;
  text-align:left;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.card[aria-label="Vereins-News"] .news-item__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-start;
  margin-bottom:10px;
}

/* Pills */
.card[aria-label="Vereins-News"] .news-badge,
.card[aria-label="Vereins-News"] .news-tag,
.card[aria-label="Vereins-News"] .news-date{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border), transparent 25%);
  background: color-mix(in srgb, var(--surface-card), var(--accent) 3%);
  font-size:.78rem;
  line-height:1;
  white-space:nowrap;
  opacity:.88;
}

.card[aria-label="Vereins-News"] .news-badge{
  border-color: color-mix(in srgb, var(--border), var(--accent) 40%);
  background: color-mix(in srgb, var(--surface-card), var(--accent) 10%);
  font-weight:900;
  opacity:1;
}

/* Teaser: nur beim Featured zeigen, sonst kompakt */
.card[aria-label="Vereins-News"] .news-item__teaser{
  margin:0;
  line-height:1.55;
  opacity:.92;
}
.card[aria-label="Vereins-News"] .news-item:not(:first-child) .news-item__teaser{
  display:none;
}

/* CTA: modernes Arrow-Button statt "Lesen" Button */
.card[aria-label="Vereins-News"] .news-item__cta{
  align-self:start;
}

.card[aria-label="Vereins-News"] .news-cta{
  width:40px;
  height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb, var(--border), transparent 25%);
  background: color-mix(in srgb, var(--surface-card), var(--accent) 3%);
  text-decoration:none;
  color:var(--text);
  font-weight:950;
  opacity:.85;
  /* Text "Lesen" ausblenden, Arrow bleibt sichtbar */
  font-size:0;
}
.card[aria-label="Vereins-News"] .news-cta span{
  font-size:16px;
  line-height:1;
}
.card[aria-label="Vereins-News"] .news-cta:hover{
  opacity:1;
  border-color: color-mix(in srgb, var(--border), var(--accent) 35%);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(0,0,0,.10);
}
@media (prefers-reduced-motion: reduce){
  .card[aria-label="Vereins-News"] .news-cta:hover{ transform:none; box-shadow:none; }
}

/* Hover whole card */
.card[aria-label="Vereins-News"] .news-item:hover{
  border-color: color-mix(in srgb, var(--border), var(--accent) 35%);
}

/* Mobile */
@media (max-width: 520px){
  .card[aria-label="Vereins-News"] .news-item__grid{
    grid-template-columns: 1fr auto;
  }
  .card[aria-label="Vereins-News"] .news-cta{
    width:36px;
    height:36px;
  }
}

/* =========================
   NEW MARKUP (.club-news) – bleibt kompatibel, falls du es später aktivierst
========================= */

.club-news .club-news__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.club-news .club-news__all{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb, var(--border), transparent 30%);
  background: color-mix(in srgb, var(--surface-card), var(--accent) 4%);
  text-decoration:none;
  color:var(--text);
  font-weight:800;
}


/* =========================
   HOME NEWS – NEW CARD LAYOUT (2026-01-28)
   Ziel: wie Screenshot "News & Aktuelles":
   - 3 News-Cards (Titel links, Datum rechts)
   - Teaser
   - "Mehr lesen" rechts unten
   - Archiv-Button unten (wie Termine)
   Hinweis: nur innerhalb .club-news
========================= */

.club-news .club-news__cards{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.club-news .club-news__card{
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
}

.club-news .club-news__card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.club-news .club-news__card-title{
  margin:0;
  font-size: 1.05rem;
  line-height: 1.25;
}

.club-news .club-news__card-title a{
  color: inherit;
  text-decoration:none;
}

.club-news .club-news__card-title a:hover{
  text-decoration: underline;
}

.club-news .club-news__date{
  flex:0 0 auto;
  font-size: 0.9rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.08);
}

.club-news .club-news__card-teaser{
  margin: 10px 0 0;
  color: rgba(0,0,0,0.74);
}

.club-news .club-news__card-actions{
  margin-top: 10px;
  display:flex;
  justify-content:flex-end;
}

.club-news .club-news__more{
  font-weight: 650;
  text-decoration:none;
}

.club-news .club-news__more:hover{
  text-decoration: underline;
}

/* Archiv-Button unten wie Termine */
.club-news .club-news__footer{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.club-news .club-news__archive{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.35);
  box-shadow: 0 10px 24px rgba(0,0,0,0.06);
  text-decoration:none;
  font-weight: 650;
}

.club-news .club-news__archive:hover{
  background: rgba(255,255,255,0.55);
}

.club-news .club-news__archive-count{
  font-weight: 600;
  opacity: 0.85;
}

.club-news .club-news__archive-arrow{
  margin-left: 2px;
}

/* Pfeile in NEWS und TERMINE entfernen (global auf Home) */
.section-slab a span[aria-hidden="true"]{
  display:none !important;
}



/* ===============================
   HOME – Termine: Datum rechts, Details rechts
   (wie News-Karten)
================================ */
.section-slab .item-list .item{
  display:block;
}

.section-slab .item__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:8px;
}

.section-slab .item__meta time{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.10);
  background:rgba(255,255,255,0.35);
  font-size:0.95rem;
  white-space:nowrap;
}

.section-slab .item__body{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
}

.section-slab .item__body .bullet-list{
  margin:0;
}

.section-slab .item__action{
  margin-left:auto;
  font-weight:650;
  text-decoration:none;
}

/* Pfeile bei Details auch sicher entfernen */
.section-slab .item__action::after,
.section-slab .item__action span[aria-hidden="true"]{
  content:"";
  display:none !important;
}


/* ===============================
   HOME – Termine Footer Button (wie News-Archiv)
================================ */
.section-slab .termine__footer{
  margin-top: 18px;
  display:flex;
  justify-content:center;
}

.section-slab .termine__archive{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.35);
  text-decoration:none;
  font-weight:650;
}

.section-slab .termine__archive:hover{
  background: rgba(255,255,255,0.55);
}

.section-slab .termine__archive-icon{
  display:inline-flex;
}

/* Pfeile in Archiv-Buttons sicher entfernen */
.section-slab .club-news__archive-arrow{
  display:none !important;
}
/* =========================================================
   NEWS-ARCHIV (news-archiv.php)
   Ziel: Look wie Home-Screenshot (Datum rechts, CTA rechts)
========================================================= */

.news-archive .card[aria-label="Vereins-News"] .card__body {
  padding-top: 18px;
}

.news-archive__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.news-archive__item {
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  padding: 16px 16px 14px;
}

.news-archive__head {
  display: flex;
  align-items: start;
  gap: 12px;
}

.news-archive__title {
  font-weight: 700;
  line-height: 1.25;
  flex: 1 1 auto;
}

.news-archive__date {
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-size: 0.92rem;
  opacity: 0.9;
  white-space: nowrap;
}

.news-archive__teaser {
  margin: 10px 0 0;
  opacity: 0.95;
}

.news-archive__foot {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

.news-archive__more {
  font-weight: 650;
  text-decoration: none;
}

.news-archive__more:hover {
  text-decoration: underline;
}

/* Pfeile (→) zuverlässig entfernen */
.news-archive a::after { content: none !important; }
.news-archive a span[aria-hidden="true"] { display: none !important; }

.news-archive__actions {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}


/* =========================================================
   TERMINE (termine.php)
   Ziel: wie News & Aktuelles Screenshot:
   - Karte pro Termin
   - Datum rechts als Pill
   - "Details" rechts unten
========================================================= */

.events-archive .card[aria-label="Kommende Termine"] .card__body{
  padding-top: 18px;
}

.events-archive__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.events-archive__item{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 14px;
  background: rgba(255,255,255,0.55);
  padding: 16px 16px 14px;
}

.events-archive__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.events-archive__title{
  font-weight: 700;
  line-height: 1.25;
  flex: 1 1 auto;
  color: inherit;
  text-decoration: none;
}

.events-archive__title:hover{
  text-decoration: underline;
}

.events-archive__date{
  flex: 0 0 auto;
  padding: 5px 10px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-size: 0.92rem;
  opacity: 0.9;
  white-space: nowrap;
}

.events-archive__meta{
  margin-top: 10px;
  display:flex;
  flex-direction:column;
  gap:6px;
  opacity: .92;
}

.events-archive__meta span{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Punkt wie im Screenshot */
.events-archive__meta span::before{
  content:"•";
  opacity:.55;
}

.events-archive__excerpt{
  margin: 10px 0 0;
  opacity: .95;
}

.events-archive__foot{
  margin-top: 12px;
  display:flex;
  justify-content:flex-end;
}

.events-archive__more{
  font-weight: 650;
  text-decoration:none;
}

.events-archive__more:hover{
  text-decoration: underline;
}

/* Pfeile (→) zuverlässig entfernen */
.events-archive a::after{ content:none !important; }
.events-archive a span[aria-hidden="true"]{ display:none !important; }


/* =========================================================
   NEWS-DETAIL (Route: /news?slug=...)
   Ziel: schöneres Layout:
   - Titel links, Datum rechts (Pill)
   - Text als gut lesbarer Block
   - Buttons unten rechts
========================================================= */

.news-detail .news-detail__card{
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 16px;
  background: rgba(255,255,255,0.55);
  padding: 0;
  overflow: hidden;
}

.news-detail .news-detail__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding: 18px 18px 12px;
}

.news-detail .news-detail__title{
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  flex: 1 1 auto;
}

.news-detail .news-detail__date{
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 999px;
  font-size: 0.92rem;
  opacity: 0.9;
  white-space: nowrap;
  margin-top: 2px;
  background: rgba(0,0,0,0.03);
}

.news-detail .news-detail__body{
  padding: 0 18px 14px;
}

.news-detail .news-detail__body p{
  margin: 0;
  line-height: 1.65;
  opacity: .98;
}

/* Absätze aus nl2br wirken wie neue Zeilen — etwas Luft geben */
.news-detail .news-detail__body br + br{
  content:"";
  display:block;
  margin-top: 10px;
}

.news-detail .news-detail__foot{
  padding: 14px 18px 18px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
  border-top: 1px solid rgba(0,0,0,0.06);
}

/* Pfeile (→) sicher entfernen */
.news-detail a::after{ content:none !important; }
.news-detail a span[aria-hidden="true"]{ display:none !important; }