/* ==========================================================================
   blog.css – Ergaenzungen fuer die vom Generator gebauten Blogseiten.

   Bewusst eine eigene Datei neben site.css: Sie wird nur von den erzeugten
   Seiten geladen, dadurch bleibt die Zwischenspeicher-Marke der uebrigen
   Seiten unberuehrt. Enthaelt ausschliesslich, was es in site.css noch nicht
   gibt - Tabellen, Schlagworte, Abzeichen, Aufmacher, Sprachwahl.
   ========================================================================== */

/* ---------- Tabellen ----------
   Auf schmalen Schirmen wird die Tabelle waagerecht scrollbar, statt
   abgeschnitten zu werden. Die Beschriftung steht unter der Tabelle. */
.tabelle-rahmen{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.8em 0;
  border:1px solid var(--line);
  border-radius:var(--r);
}
.artikel-text table{
  border-collapse:collapse;
  width:100%;
  min-width:32rem;
  font-size:.95rem;
  caption-side:bottom;
}
.artikel-text caption{
  caption-side:bottom;
  padding:10px 14px;
  font-size:.86rem;
  color:var(--muted);
  text-align:left;
}
.artikel-text th,
.artikel-text td{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:top;
  line-height:1.55;
}
.artikel-text thead th{
  background:var(--bg-soft);
  font-family:var(--f-head);
  font-weight:600;
  color:var(--ink-900);
  white-space:nowrap;
}
.artikel-text tbody tr:last-child td{border-bottom:0}

/* ---------- Schlagworte ---------- */
.schlagworte{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 0}
.schlagwort{
  display:inline-block;
  padding:5px 12px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#fff;
  font-size:.82rem;
  color:var(--body);
  text-decoration:none;
}
.schlagwort::before{content:"#";opacity:.5;margin-right:2px}
.schlagwort:hover{border-color:var(--akzent-600);color:var(--akzent-700)}

/* ---------- Abzeichen "Must Read" ---------- */
.abzeichen-zeile{margin:0 0 14px}
.abzeichen{
  display:inline-block;
  padding:4px 10px;
  border-radius:6px;
  font-family:var(--f-head);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.abzeichen--mustread{background:var(--akzent-600);color:#fff}

/* ---------- Aufmacher der Uebersicht ----------
   Steht nur dort, wenn die Redaktion einen Beitrag markiert hat. */
.aufmacher{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:0;
  margin-top:26px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease,box-shadow .15s ease;
}
.aufmacher:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);color:inherit}
.aufmacher__bild{width:100%;height:100%;object-fit:cover;display:block;min-height:220px}
.aufmacher__text{padding:30px 32px;align-self:center}
.aufmacher__text h2{margin:6px 0 10px}
.aufmacher__text p{margin:0 0 16px;color:var(--body)}
@media (max-width:820px){
  .aufmacher{grid-template-columns:1fr}
  .aufmacher__bild{min-height:180px;max-height:260px}
  .aufmacher__text{padding:24px 22px}
}

/* ---------- Sprachwahl und Rueckwege ---------- */
.sprachwahl{display:flex;gap:10px;margin:18px 0 0;font-size:.9rem}
.sprachwahl a{
  padding:4px 10px;border:1px solid var(--line);border-radius:6px;
  text-decoration:none;color:var(--body);
}
.sprachwahl a:hover{border-color:var(--akzent-600);color:var(--akzent-700)}
.zurueck{margin:34px 0 0}
.mehr-zeile{margin:24px 0 0}