/* artikel-breit.css – Einzelartikel mit Artikelliste rechts (wie die Kachel „Neuigkeiten“ auf der Startseite)
   Wird NACH artikel.css geladen. Die Liste selbst nutzt die .nk-* Klassen aus artikel.css. */

.ar-layout { max-width: 1240px; margin: 0 auto; }

/* rechte Spalte: Glas-Kachel wie am Dashboard */
.ar-seite { margin: 34px auto 0; max-width: 760px; }
.ar-seite .nk-liste { gap: 0; }
.ar-seite .nk-alle { margin-top: 6px; }

@media (min-width: 1100px) {
  .ar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 32px;
    align-items: start;
  }
  .ar-layout > .ar { max-width: 760px; width: 100%; margin: 0; justify-self: center; }
  /* Titelbild nicht mehr über die Spalte hinaus und nicht bildschirmhoch */
  .ar-layout .ar-titelbild { margin: 24px 0 28px; }
  .ar-layout .ar-titelbild img { max-height: 460px; object-fit: cover; }

  .ar-seite {
    margin: 0;
    max-width: none;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* „Mehr zum Thema“ unten an die Breite anpassen */
.ar-weitere { max-width: 1240px; }

/* ── Übersicht „Neuigkeiten & Geschichten“: Hauptartikel in der Mitte, Kacheln rundherum ──
   ab 1100 px: 4 Spalten, Hauptartikel links oben über 2 Spalten (eine Reihe hoch), 2 Kacheln daneben, Rest darunter */
.ar-karten.bento .ar-karte:not(.gross) p { -webkit-line-clamp: 2; }

@media (min-width: 700px) {
  .ar-karten.bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-karten.bento .ar-karte.gross {
    grid-column: 1 / -1; position: relative; flex-direction: column; justify-content: flex-end;
    min-height: 340px; border: 0;
  }
  .ar-karten.bento .ar-karte.gross .b { position: absolute; inset: 0; flex: none; min-height: 0; aspect-ratio: auto; }
  .ar-karten.bento .ar-karte.gross .t {
    position: relative; z-index: 1; flex: none; padding: 90px 26px 22px; gap: 8px;
    background: linear-gradient(to top, rgba(10, 22, 40, .88) 0%, rgba(10, 22, 40, .55) 55%, rgba(10, 22, 40, 0) 100%);
  }
  .ar-karten.bento .ar-karte.gross h2 { color: #fff; font-size: 1.55rem; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); }
  .ar-karten.bento .ar-karte.gross p { color: rgba(255, 255, 255, .9); -webkit-line-clamp: 3; font-size: .98rem; }
  .ar-karten.bento .ar-karte.gross time { color: rgba(255, 255, 255, .75); margin-top: 2px; }
  .ar-karten.bento .ar-karte.gross .tg span { background: rgba(255, 255, 255, .9); }
  .ar-karten.bento .ar-karte.gross .tg .pin { background: #f4e7cf; }
}
@media (min-width: 1100px) {
  .ar-karten.bento { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ar-karten.bento .ar-karte.gross { grid-column: 1 / span 2; grid-row: 1; min-height: 300px; }
  .ar-karten.bento .ar-karte.gross h2 { font-size: 1.35rem; }
  .ar-karten.bento .ar-karte.gross p { -webkit-line-clamp: 2; }
  .ar-karten.bento .ar-karte.gross .t { padding: 70px 22px 18px; }
  .ar-karten.bento .ar-karte:not(.gross) .t { padding: 14px 16px 16px; gap: 6px; }
  .ar-karten.bento .ar-karte:not(.gross) h2 { font-size: 1.02rem; }
}