/* 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; }
}

/* ── Hochformat-Titelbild: ganz zeigen statt abschneiden, daneben unscharf dasselbe Bild ── */
.ar-titelbild.hoch { position: relative; overflow: hidden; border-radius: 20px; box-shadow: 0 24px 50px -28px rgba(31,58,92,.6);
  display: grid; place-items: center; background: #16243a; }
.ar-titelbild.hoch::before { content: ''; position: absolute; inset: -30px; background: var(--bild) center / cover no-repeat;
  filter: blur(26px) saturate(1.2) brightness(.85); }
.ar-titelbild.hoch img, .ar-layout .ar-titelbild.hoch img { position: relative; width: auto; max-width: 100%; height: auto;
  max-height: min(78vh, 720px); object-fit: contain; border-radius: 0; box-shadow: 0 10px 40px rgba(0,0,0,.35); }

/* ── Artikel mit eingebetteter eigener Seite (Feld „Eigene Seite statt Text“) ── */
.ar-layout.mit-seite { display: block; max-width: 1240px; }
.ar-layout.mit-seite > .ar { max-width: none; width: 100%; margin: 0; }
.ar-layout.mit-seite .ar-kopf, .ar-layout.mit-seite .ar-brot, .ar-layout.mit-seite .art-text,
.ar-layout.mit-seite .ar-teilen, .ar-layout.mit-seite .ar-copyright, .ar-layout.mit-seite .ar-quelle { max-width: 760px; }
.ar-layout.mit-seite .ar-titelbild { max-width: 900px; }
.ar-layout.mit-seite .ar-seite { position: static; max-height: none; max-width: none; margin-top: 34px; }
.ar-einbettung { margin: 24px 0 8px; }
.ar-einbettung iframe { display: block; width: 100%; height: 900px; border: 0; background: transparent; color-scheme: light; }
.ar-einbettung-link { margin: 8px 0 0; font-size: .82rem; text-align: right; }
.ar-einbettung-link a { color: var(--g-muted, #5b7189); text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.ar-einbettung-link a:hover { color: var(--g-blau-tief, #2d5a78); }
.ar-einbettung-link svg { width: 14px; height: 14px; }