/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&display=swap");

/* Falls du die TT Neoris-Dateien hast, lege sie unter /fonts/ ab */
@font-face{
  font-family: "TT Neoris";
  src:
    url("/fonts/tt-neoris-bold.woff2") format("woff2"),
    url("/fonts/tt-neoris-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root{
  --page-bg:#1a1c21;            /* heller/dunkler Grauton (heller als vorher) */
  --text:#0;                    /* wird direkt gesetzt, s. unten */
  --fg:#ffffff;                 /* Textfarbe */
  --muted:#c7cbd2;              /* dezente Meta */
  --blue:#0d47a1;               /* kleines Quadrat */
}

/* Container */
#news{
  max-width:1280px;
  margin:2rem auto;
  margin-top: 8rem;
  padding:0 1rem;
  /* Grundfarbe */
  color:var(--fg);
}

/* Body-Font auf dem #news-Container „einschließen“ */
#news, #news *{
  -webkit-text-fill-color: var(--fg);
  color: var(--fg);
  font-family: "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Seite etwas heller machen */
html, body{
  background:#1a1c21;
}

/* Grid: 4 Spalten, auto-Höhe, keine Spans */
#news .news-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:auto;
  grid-auto-flow:row;
  gap:1.1rem;
}
#news .news-grid > *{ grid-column:span 1 !important; grid-row:auto !important; }
#news [class*="size-"]{ grid-column:span 1 !important; grid-row:auto !important; }

/* Karte: keine Linien, clean */
#news .card{
  display:flex;
  flex-direction:column;
  background:transparent;
  /* keine border-top/border-left mehr */
}

/* Bild oben (16:9) */
#news .card-media{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
}
#news .card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* Inhalt */
#news .card-body{
  padding:.9rem .95rem .2rem .95rem;
  display:flex; flex-direction:column; gap:.55rem;
}

/* Dunkelblaues Quadrat + Rubrik + Datum */
#news .meta-line{
  display:flex; align-items:center; gap:.55rem;
  color:var(--muted);
  font-size:.92rem; letter-spacing:.2px;
}
#news .meta-square{
  width:12px; height:12px; background:var(--blue); flex:0 0 12px;
}
#news .meta-text{ display:flex; gap:.6rem; flex-wrap:wrap; }
#news .meta-text .rubrik{
  text-transform:uppercase; font-weight:700; letter-spacing:.35px; color:#ffffff;
}
#news .meta-text .date{ color:var(--muted); }

/* Überschriften in TT Neoris (fett) – deutlich größer */
#news .card-title{
  font-family: "TT Neoris", "News Cycle", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight:700;
  font-size: clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem);
  line-height:1.22;
  letter-spacing:.2px;
}

/* Teaser-Text */
#news .card-teaser{
  color:#ffffff;
  opacity:.95;
  line-height:1.5;
  font-size:1.02rem;
}

/* Hellgrauer Abschlussstreifen entfernen (Markup kann bleiben) */
#news .card-stripe{ display:none; }

/* Responsive */
@media (max-width:1200px){
  #news .news-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:860px){
  #news .news-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
  #news .news-grid{ grid-template-columns:1fr; }
}

#news .card-media img{
  width:100%; height:100%; object-fit:cover; display:block;
  /* Mask: bleibt 70% voll sichtbar, fade auf 100% */
  -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
  mask-image:         linear-gradient(to bottom, black 70%, transparent 100%);
}

/* in eurer (globalen) CSS, z. B. layout.css */
:root{
  --page-bg:#1a1c21; /* euer (hellere) Seitenhintergrund */
  --fg:#ffffff;
}

/* ===== Top News Header ===== */
#news .news-header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  padding:0 .25rem;
  margin:0 0 .5rem 0;
}

#news .news-heading{
  font-family:"TT Neoris","News Cycle",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700;
  font-style:italic;         /* fett + kursiv */
  font-size:clamp(1.2rem,1rem + 1.2vw,1.8rem);
  line-height:1.1;
  margin:0;
  letter-spacing:.2px;
}

#news .news-all{
  font-weight:700;
  font-size:.95rem;          /* etwas kleiner */
  text-decoration:underline; /* unterstrichen */
  color:#fff;
}
#news .news-all:hover{ opacity:.85; }

#news .news-strip{
  height:4px;
  background:var(--blue);    /* nutzt dein bestehendes Dunkelblau */
  margin:.25rem 0 1rem 0;
}

/* Karte vollflächig klickbar */
#news .card { position: relative; }
#news .card-link{
  position:absolute; inset:0; z-index:1;
}

/* dezent: Bild leicht zoomen, Titel unterstreichen beim Hover */
#news .card-media img{ transition: transform .28s ease; }
#news .card:hover .card-media img{ transform: scale(1.03); }
#news .card:hover .card-title{ text-decoration: underline; }
#news .card{ cursor: pointer; }