/* =========================================================
   Prepper News — Broadsheet-Stylesheet
   Reines CSS, keine externen Abhängigkeiten, keine Fonts von Drittservern
   ========================================================= */

:root {
  --papier:   #f7f4ec;
  --papier-2: #efeadc;
  --tinte:    #16140f;
  --grau:     #57534a;
  --rot:      #8a1c1c;
  --linie:    #b7ad99;
  --doppelt:  3px double var(--tinte);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--papier);
  color: var(--tinte);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  font-size: 17px;
  line-height: 1.55;
}

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

/* ---------- Kopf der Zeitung ---------- */

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--tinte);
  color: var(--papier);
  padding: .4rem .8rem;
  z-index: 10;
}
.skip-link:focus { left: .5rem; top: .5rem; }

.masthead {
  text-align: center;
  padding: 1.6rem 0 .6rem;
  border-bottom: var(--doppelt);
}
.masthead h1 {
  font-size: clamp(2.6rem, 9vw, 4.6rem);
  font-weight: 900;
  letter-spacing: .015em;
  line-height: 1;
  text-transform: none;
}
.masthead h1 .amp { color: var(--rot); }

.datum-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: center;
  align-items: baseline;
  padding: .45rem .5rem;
  border-bottom: 1px solid var(--tinte);
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grau);
}
.datum-zeile .motto { letter-spacing: .06em; font-style: italic; text-transform: none; }

/* ---------- Hauptnavigation ---------- */

.hauptnav {
  border-bottom: var(--doppelt);
  padding: .45rem 0;
}
.hauptnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .2rem 1.8rem;
}
.hauptnav a {
  color: var(--tinte);
  text-decoration: none;
  font-variant: small-caps;
  letter-spacing: .12em;
  font-size: 1.02rem;
  padding: .15rem .2rem;
  border-bottom: 1px solid transparent;
}
.hauptnav a:hover, .hauptnav a:focus-visible {
  border-bottom-color: var(--rot);
  color: var(--rot);
}

/* ---------- Layout-Raster ---------- */

.ausgabe {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(15rem, 1fr);
  gap: 2rem 2.4rem;
  padding: 1.8rem 0 2.4rem;
}

.spalte-voll { grid-column: 1 / -1; }

@media (max-width: 52rem) {
  .ausgabe { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Artikel ---------- */

.kicker-top {
  grid-column: 1 / -1;
}

.artikel { margin-bottom: 2.2rem; }

.kicker {
  display: inline-block;
  color: var(--grau);
  font-size: .78rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-top: 1px solid var(--tinte);
  border-bottom: 1px solid var(--tinte);
  padding: .25rem .6rem;
  margin-bottom: .6rem;
}
.kicker.rot { color: var(--papier); background: var(--rot); border-color: var(--rot); }

h2.schlagzeile {
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  line-height: 1.12;
  margin: .2rem 0 .45rem;
  font-weight: 900;
}
h3.zwischentitel {
  font-size: 1.25rem;
  margin: 1.25rem 0 .45rem;
  font-style: italic;
  font-weight: 700;
}

.autor-zeile {
  color: var(--grau);
  font-size: .82rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .8rem;
}
.autor-zeile b { color: var(--tinte); }

.artikel p { margin: 0 0 .85rem; text-align: justify; hyphens: auto; }
.artikel p + p { text-indent: 1.1em; }
.artikel [id]:first-of-type { text-indent: 0; }

.artikel .hier-wo-es-laengt:empty { display: none; }

.artikel > p.first::first-letter {
  font-size: 3.1em;
  float: left;
  line-height: .82;
  padding: .08em .12em 0 0;
  font-weight: 700;
}

.artikel ul.checklist {
  margin: .4rem 0 1rem 1.4rem;
  list-style: none;
}
.artikel ul.checklist li { margin-bottom: .45rem; text-indent: 0; }
.artikel ul.checklist li::before { content: "—  "; color: var(--grau); }

.zitat-box {
  border-top: 1px solid var(--tinte);
  border-bottom: 1px solid var(--tinte);
  margin: 1rem 0;
  padding: .8rem .4rem;
  font-style: italic;
  text-align: center;
  font-size: 1.08rem;
}

.weiterlesen {
  display: inline-block;
  color: var(--tinte);
  font-variant: small-caps;
  letter-spacing: .1em;
  text-decoration: none;
  border-bottom: 1px solid var(--rot);
}
.weiterlesen:hover, .weiterlesen:focus-visible { color: var(--rot); }

/* ---------- Randspalte ---------- */

.randspalte article { margin-bottom: 1.6rem; }

.randspalte h4.spaltenkopf {
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  border-bottom: var(--doppelt);
  padding-bottom: .3rem;
  margin-bottom: .6rem;
}

.randspalte p { font-size: .92rem; margin-bottom: .6rem; text-align: left; }

.notiz dl { margin: .2rem 0 .6rem; }
.notiz dt { font-weight: 700; font-variant: small-caps; letter-spacing: .06em; }
.notiz dd { margin: 0 0 .55rem 0; color: var(--grau); font-size: .92rem; }

.merk {
  background: var(--papier-2);
  border: 1px solid var(--linie);
  padding: .7rem .8rem;
  font-size: .92rem;
}

/* ---------- Teaser-Rubriken (Platzhalter-Sektion) ---------- */

.rubrik-teaser {
  border-top: 1px solid var(--tinte);
  padding-top: .7rem;
}
.rubrik-teaser .rubrik-name {
  font-variant: small-caps;
  letter-spacing: .1em;
  font-weight: 700;
  font-size: 1.05rem;
}
.rubrik-teaser p { font-size: .95rem; color: var(--grau); }
.rubrik-teaser .status {
  display: inline-block;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--rot);
  border: 1px solid var(--rot);
  padding: .1rem .45rem;
  margin-top: .4rem;
}

.trenner { grid-column: 1 / -1; border-bottom: 1px solid var(--linie); margin: .6rem 0; }

/* ---------- Ausstattungsliste ---------- */

.stückeliste {
  list-style: none;
  columns: 2;
  column-gap: 2.6rem;
  column-rule: 1px solid var(--linie);
  margin-top: .8rem;
}
@media (max-width: 46rem) { .stückeliste { columns: 1; } }

.stückeliste li {
  break-inside: avoid;
  margin-bottom: .5rem;
  padding-left: 1.45em;
  text-indent: -1.45em;
  text-align: left;
}
.stückeliste li::before { content: "☐   "; color: var(--grau); }
.stückeliste li b { text-indent: 0; }

.liste-gruppe { margin-top: 1.9rem; }
.liste-gruppe h3 {
  border-bottom: var(--doppelt);
  padding-bottom: .25rem;
  margin-bottom: .2rem;
}
.liste-gruppe .unterzeile {
  color: var(--grau);
  font-size: .88rem;
  font-style: italic;
  margin-bottom: .3rem;
}

/* ---------- Fuß der Seite ---------- */

.seitenfuss {
  border-top: var(--doppelt);
  padding: 1rem 0 2.2rem;
  text-align: center;
  color: var(--grau);
  font-size: .85rem;
}
.seitenfuss nav {
  margin-bottom: .5rem;
  letter-spacing: .08em;
}
.seitenfuss nav a {
  color: var(--tinte);
  text-decoration: none;
  margin: 0 .7rem;
  font-variant: small-caps;
}
.seitenfuss nav a:hover, .seitenfuss nav a:focus-visible { color: var(--rot); }
.seitenfuss .fuss-zeile { font-style: italic; }

/* ---------- Rechtsseiten ---------- */

.rechtsseite main { padding: 2rem 0 2.6rem; max-width: 46rem; margin: 0 auto; }
.rechtsseite h2.schlagzeile { font-size: clamp(1.7rem, 4vw, 2.6rem); margin-bottom: .3rem; }
.rechtsseite .unterzeile-datum {
  border-bottom: 1px solid var(--tinte);
  padding-bottom: .6rem;
  margin-bottom: 1.2rem;
  font-size: .8rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grau);
}
.rechtsseite h3 { margin: 1.5rem 0 .5rem; font-size: 1.18rem; }
.rechtsseite p { margin-bottom: .8rem; text-align: justify; hyphens: auto; }
.rechtsseite ul { margin: .3rem 0 1rem 1.4rem; }
.rechtsseite li { margin-bottom: .45rem; }
.rechtsseite small.hinweis { display: block; color: var(--grau); margin-top: 1.2rem; }

/* ---------- Hilfsklassen für Rubrikraster ---------- */

.schmal { max-width: 52rem; }

.rubrik-titel {
  /* unterzeile-datum ohne Linie, mit Abstand nach unten */
  border: none;
  margin-bottom: .8rem;
}

.ressort-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.4rem;
}

a { color: inherit; }

/* ---------- Drucken ---------- */

@media print {
  body { background: #fff; font-size: 11.5pt; }
  .skip-link, .hauptnav { display: none; }
  .ausgabe { grid-template-columns: 1fr; }
  .listegruppe-break { break-before: page; }
  a { text-decoration: none; color: var(--tinte); }
}