/* =========================================================
   BASE
   ========================================================= */
.na_masthead {
  height: 35px;
  background: #aaaaaa;
}

a,
.alink {
  color: #aaa;
  text-decoration: none;
}

hr {
  border: 1px solid #811811;
}

/* =========================================================
   PAGE CONTAINER
   ========================================================= */
.news-container {
  width: 100%;
  max-width: 1400px;   /* breiter, damit 3 Kacheln gut passen */
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* =========================================================
   OPTIONAL: Layout mit Sidebar (falls auf manchen Seiten genutzt)
   ========================================================= */
.news-flex {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: space-between;
  scroll-behavior: smooth;
}

.news-flex-col2 {
  flex-direction: column;
  flex: 2;
  max-width: 85%;
  position: relative;
  min-width: 350px;
  scroll-behavior: smooth;
  /* WICHTIG: kein left:5% mehr -> verschiebt Layout komisch */
}

/* =========================================================
   NAV / SIDEBAR (falls genutzt)
   ========================================================= */
.news-nav {
  margin-bottom: 4rem;
  margin-left: 2px;
}

.news-nav li {
  list-style: none;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}

.news-sticky {
  position: sticky;
  top: 2rem;
}

.news-sticky h3 {
  color: #811811;
}

/* =========================================================
   ARTICLE PAGE (Einzelartikel mit rechter Spalte)
   ========================================================= */
.article-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px; /* Text | rechte Box */
  gap: 48px;
  align-items: start;
}

.article-body {
  min-width: 0;
}

.article-aside {
  width: 100%;
}

.aside-sticky {
  position: sticky;
  top: 2rem;
  align-self: start;
}

.aside-sticky iframe {
  width: 100%;
  height: 15vh;
  border: 0;
  margin: 10px 0;
}

.article-aside h4 {
  margin-top: 0;
  color: #811811;
}

.aside-links {
  margin: 0 0 12px 0;
  padding: 0;
}

.aside-links li {
  list-style: none;
  margin: 0 0 8px 0;
}

.aside-media {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  margin: 10px 0;
}

/* =========================================================
   NEWS LISTING
   ========================================================= */
.news-article {
  margin-bottom: 40px;
  box-sizing: border-box;
}

/* ===== Featured (Latest News) ===== */
/* Standard: alle featured als normale Liste */
.news-article-featured {
  float: none;
  width: 100%;
  padding: 0;
  border: none;
}

/* NUR die ersten 3 featured als Kacheln */
.news-article-featured:nth-of-type(-n+3) {
  float: left;
  width: 33.333%;
  padding: 0 22px;
}

/* vertikale Trennlinie zwischen den Kacheln */
.news-article-featured:nth-of-type(2),
.news-article-featured:nth-of-type(3) {
  border-left: 1px solid #811811;
}

/* HR unter den ersten 3 aus */
.news-article-featured:nth-of-type(-n+3) hr {
  display: none;
}

/* Nach den ersten 3 Floats: Rest startet sauber darunter */
.news-article-featured:nth-of-type(4) {
  clear: both;
}

/* Featured-Bild */
.news-featured-img {
  display: block;
  width: 100%;
  height: 220px;      /* einheitliche Höhe */
  object-fit: cover;
  margin: 0 0 14px 0;
  border: 0;
}

/* Featured Headline (h3 optisch wie h2) */
.news-article-featured h3 {
  font-size: 1.6rem;
  line-height: 1.1;
  margin: 0 0 0.6rem 0;
}

/* ===== Unfeatured / Compact ===== */
.news-article-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 10px;
}

.news-article-compact header {
  flex: 1;
  min-width: 0;
}

.news-headline-compact {
  font-size: 1.1rem;
  margin: 0;
}

/* Verhindert, dass die Überschrift den Button “wegdrückt” */
.news-headline-compact a {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-moreinfo-compact {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 767px) {

  /* Artikel-Seite: Sidebar unter den Text */
  .article-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .aside-sticky {
    position: static;
  }

  /* Latest News: Kacheln untereinander */
  .news-article-featured:nth-of-type(-n+3) {
    float: none;
    width: 100%;
    padding: 0;
    border-left: none;
  }

  /* Trennlinie mobil horizontal zwischen den Kacheln */
  .news-article-featured:nth-of-type(2),
  .news-article-featured:nth-of-type(3) {
    border-top: 1px solid #811811;
    padding-top: 20px;
    margin-top: 20px;
  }

  /* Compact: Button unter Text */
  .news-article-compact {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .news-flex-col2 {
    min-width: 0;
  }

  .article-body p {
    margin-block-end: 0;
  }
}

/* =========================================================
   FIX: Unfeatured darf nicht neben den Featured-Floats hängen
   ========================================================= */

/* Nach der 3. Featured-Kachel Floats sauber beenden */
.news-article-featured:nth-of-type(3)::after{
  content: "";
  display: block;
  clear: both;
}

/* Sicherheitsnetz: Unfeatured startet immer in neuer Zeile */
.news-article-compact{
  clear: both;
  width: 100%;
}

/* Optional: Headline nicht so aggressiv kürzen (damit “Text nicht fehlt”) */
.news-headline-compact a{
  white-space: normal;   /* statt nowrap */
  overflow: visible;
  text-overflow: clip;
}

/* =========================================================
   FIX: horizontale Trennlinien bei Unfeatured wieder sichtbar
   ========================================================= */

.news-article-compact{
  flex-wrap: wrap;           /* erlaubt Zeilenumbruch */
}

/* HR immer volle Breite unter Text + Button */
.news-article-compact hr{
  flex-basis: 100%;          /* neue Zeile im Flex */
  width: 100%;
  margin-top: 16px;
}