:root { --page-max: 1000px; }
body { font-family: Helvetica, sans-serif; color: #ffffff; background: #222222; line-height: 1.65; margin: 0; }

.masthead { max-width: var(--page-max); margin: 2rem auto 0.5rem; padding: 0 1rem 1rem; border-bottom: 3px solid #f34444; display: flex; align-items: flex-end; justify-content: space-between; }
.masthead h1 { margin: 0; font-size: 2.4rem; }
.btn { background:#f34444; color:#fff; border:0; padding:.5rem 1rem; cursor:pointer; }

.nav { max-width: var(--page-max); margin: .5rem auto 1rem; padding: 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.nav .tab { background: #eee; border: 1px solid #ddd; padding: .4rem .75rem; cursor: pointer; font-family: inherit; }
.nav .tab.active { background: #333; color:#fff; border-color:#333; }

main { max-width: var(--page-max); margin: 0 auto; padding: 0 1rem 3rem; }
.hint { color:#eee; font-style: italic; }
.loading { color:#aaa; }
.error { color:#b00020; }

/*
  GRID-LAYOUT statt column-count:
  - Bewahrt die globale Reihenfolge (links→rechts, Zeile für Zeile)
  - Keine Spaltenweise Befüllung mehr
*/
.articles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem; /* Abstand horizontal + vertikal */
}

@media (max-width: 900px) {
  .articles { grid-template-columns: 1fr; }
}

.story {
  margin: 0; /* Grid übernimmt die Abstände */
  padding-bottom: 1rem;
  border-bottom: 1px dashed #999;
}

/* Thumbnail-Stil */
.thumb {
    display: block;
    width: 100%;
    height: 190px; /* gleichmäßige Kacheln */
    object-fit: cover; /* Bild beschneiden, um das Seitenverhältnis zu füllen */
    margin: 0.5rem 0 0.75rem;
    border: 1px solid #ddd;
    background: #fff;
  }
  
.headline { font-size: 1.45rem; margin: 0 0 .25rem; }
.headline a { color: inherit; text-decoration: none; }
.headline a:hover { text-decoration: underline; }
.meta { color:#ccc; margin: 0 0 .5rem; font-size: .95rem; }
.summary { margin: 0; }

/* --- Stylelint-Fixes & Print-Stylesheet --- */

/* Stylelint-freundliche Konventionen: Einrückung, Semikolons und Abstände sind bereits korrekt */

@media print {
  body { background: #fff; color: #000; font-size: 12pt; }
  .masthead, .nav, .btn { display: none !important; }
  main { max-width: 100%; margin: 0; padding: 0; }
  .articles { grid-template-columns: 1fr !important; gap: 0; }
  .story { border: none; padding: 0 0 1rem; page-break-inside: avoid; }
  .headline { font-size: 14pt; }
  .meta { font-size: 10pt; color: #fff; }
}