/* derherristmeinhirte.com — Archetyp „broadsheet", Palette
   „newsprint-grey-and-oxblood", Ornament „hairline-column-rules".
   Dieses Stylesheet gehört diesem Site allein; keine Regel wird mit einem
   anderen Verzeichnis der Flotte geteilt.

   SCHRIFTEN. Die Varianzmatrix weist Old Standard TT (Auszeichnung) und
   PT Serif (Lauftext) zu, selbst gehostet und subsettet. Dieser Bau liefert
   keine Schriftdateien aus: Die Lizenz jedes konkreten Downloads —
   Weitergabe, Namensnennung, Subsetting — ist vor dem Einbau zu prüfen, und
   diese Prüfung steht aus. Bis dahin nähern die Systemstapel unten den
   gewollten Zeitungston an. Kein Font-CDN, niemals. */

:root {
  --zeitungsgrau: #e9e7e2;
  --druckschwarz: #211f1d;
  --ochsenblut: #6e1423;
  --haarlinie: #b9b5ad;
  --satzspiegel: 64rem;
  --auszeichnung: "Old Standard TT", "Century Schoolbook", "Georgia", "Times New Roman", serif;
  --lauftext: "PT Serif", "Charter", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--zeitungsgrau);
  color: var(--druckschwarz);
  font-family: var(--lauftext);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.1rem);
  line-height: 1.62;
}

.zeitungskopf {
  max-width: var(--satzspiegel);
  margin: 0 auto;
  padding: 1.9rem 1.2rem 0.9rem;
  text-align: center;
  border-bottom: 3px solid var(--druckschwarz);
}
.zeitungskopf .blattname {
  font-family: var(--auszeichnung);
  font-size: clamp(1.5rem, 1rem + 2.4vw, 2.6rem);
  letter-spacing: 0.02em;
  margin: 0;
}
.zeitungskopf .untertitel {
  font-size: 0.85rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochsenblut);
  margin: 0.4rem 0 0;
}

.laufleiste {
  max-width: var(--satzspiegel);
  margin: 0 auto;
  padding: 0.55rem 1.2rem;
  border-bottom: 1px solid var(--haarlinie);
  font-family: var(--auszeichnung);
  font-size: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.2rem 1.1rem;
}
.laufleiste a { color: var(--druckschwarz); text-decoration: none; }
.laufleiste a:hover, .laufleiste a:focus { text-decoration: underline; }
.laufleiste [aria-current="page"] { color: var(--ochsenblut); border-bottom: 2px solid var(--ochsenblut); }

.blattinhalt {
  max-width: var(--satzspiegel);
  margin: 0 auto;
  padding: 1.6rem 1.2rem 3rem;
}

.aufmacher {
  font-family: var(--auszeichnung);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.7rem);
  line-height: 1.18;
  margin: 0 0 0.6rem;
}
.dachzeile {
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ochsenblut);
  margin: 0 0 0.35rem;
}
.vorspann {
  font-size: 1.08rem;
  font-style: italic;
  max-width: 46rem;
  margin: 0 0 1.4rem;
}

/* Der Spaltensatz mit Haarlinien-Spaltenstegen — das Ornament dieses Sites */
.spaltensatz {
  column-width: 20rem;
  column-gap: 2.2rem;
  column-rule: 1px solid var(--haarlinie);
  margin: 0 0 1.6rem;
}
.spaltensatz p { margin: 0 0 1rem; }

.zwischenzeile {
  font-family: var(--auszeichnung);
  font-weight: 400;
  font-size: 1.28rem;
  border-top: 1px solid var(--haarlinie);
  padding-top: 0.7rem;
  margin: 1.9rem 0 0.7rem;
  column-span: all;
}

q { quotes: "\201E" "\201C"; font-style: normal; }
q::before, q::after { color: var(--ochsenblut); }

.schriftwort {
  margin: 1.4rem 0;
  padding: 1rem 1.2rem;
  background: #f6f4ef;
  border-top: 3px solid var(--ochsenblut);
  border-bottom: 1px solid var(--haarlinie);
  break-inside: avoid;
}
.schriftwort .fundstelle {
  display: block;
  font-family: var(--auszeichnung);
  font-size: 0.82rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ochsenblut);
  margin-bottom: 0.3rem;
}

.vergleichsleiste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.2rem;
  margin: 1.4rem 0;
}
.vergleichsleiste .schriftwort { margin: 0; }

.versspalten { list-style: none; margin: 1.2rem 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem; }
.versspalten a { color: var(--druckschwarz); }
.versspalten .spaltentitel { font-family: var(--auszeichnung); color: var(--ochsenblut); }

.anzeigenblock {
  border: 3px double var(--druckschwarz);
  padding: 1.1rem 1.3rem;
  margin: 2rem auto 0;
  max-width: var(--satzspiegel);
  font-size: 0.95rem;
}
.anzeigenblock .ladenzeile { margin: 0.5rem 0 0; }
.anzeigenblock .tokenvermerk { margin: 0.5rem 0 0; font-size: 0.78rem; color: #5a564f; }
.anzeigenblock a { color: var(--ochsenblut); }

.impressum {
  border-top: 3px solid var(--druckschwarz);
  margin-top: 2rem;
  font-size: 0.84rem;
  color: #4c4943;
}
.impressum > div {
  max-width: var(--satzspiegel);
  margin: 0 auto;
  padding: 1.5rem 1.2rem 2.2rem;
}
.impressum a { color: var(--druckschwarz); }