@font-face{font-family:'Vollkorn';src:url('fonts/vollkorn.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Karla';src:url('fonts/karla.woff2') format('woff2');font-weight:300 700;font-display:swap}

:root{
  --papier:#f6f4ef;
  --tinte:#211d19;
  --siegellack:#8a3033;
  --tinte-blass:rgba(33,29,25,.55);
  --linie:rgba(33,29,25,.16);
}
*{margin:0;padding:0;box-sizing:border-box}
html{font-size:17px}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:'Vollkorn',Georgia,serif;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Kopf */
header{padding:2.2rem 1.5rem 0;text-align:center}
.wortmarke{
  font-family:'Karla',sans-serif;font-weight:600;
  font-size:.82rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--tinte);text-decoration:none;
}
.wortmarke .jahre{
  display:block;margin-top:.45rem;font-weight:400;
  font-size:.68rem;letter-spacing:.26em;color:var(--tinte-blass);
}
nav.rubriken{
  margin-top:1.6rem;padding:.75rem 0;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  display:flex;justify-content:center;gap:1.9rem;flex-wrap:wrap;
  font-family:'Karla',sans-serif;font-size:.78rem;
  letter-spacing:.14em;text-transform:uppercase;
}
nav.rubriken a{color:var(--tinte-blass);text-decoration:none;padding:.15rem 0}
nav.rubriken a:hover{color:var(--siegellack)}
nav.rubriken a[aria-current]{color:var(--siegellack);border-bottom:2px solid var(--siegellack)}

/* Inhalt */
main{flex:1;width:100%;max-width:34rem;margin:0 auto;padding:3.2rem 1.5rem 2rem}
.zyklus{
  font-family:'Karla',sans-serif;font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--siegellack);
}
h1{font-weight:600;font-size:1.9rem;line-height:1.2;margin:.55rem 0 2.3rem}
h1 .untertitel{display:block;font-weight:400;font-style:italic;font-size:1.05rem;line-height:1.4;margin-top:.5rem;color:var(--tinte)}
main.uebersicht h1{margin-bottom:1.2rem}

.gedicht{font-size:1.18rem;line-height:1.95}
.gedicht p + p{margin-top:2.6rem}

/* Startseite */
.eingang{text-align:center;padding-top:1.2rem}
.eingang h1{font-size:1.35rem;font-weight:400;line-height:1.7;margin:0 0 2.6rem}
.rubrikliste{list-style:none;display:grid;gap:.9rem}
.rubrikliste a{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1.05rem 1.2rem;border:1px solid var(--linie);
  color:var(--tinte);text-decoration:none;
}
.rubrikliste a:hover{border-color:var(--siegellack)}
.rubrikliste .name{font-size:1.15rem}
.rubrikliste .stand{
  font-family:'Karla',sans-serif;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-blass);
  white-space:nowrap;
}

/* Gedicht-Uebersicht */
.zyklusblock{margin-top:2.4rem}
.zyklusblock:first-of-type{margin-top:.6rem}
.zyklusblock h2{
  font-family:'Karla',sans-serif;font-weight:600;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--siegellack);
  margin-bottom:1rem;
}
.titelliste{list-style:none}
.titelliste li{border-bottom:1px solid var(--linie)}
.titelliste li:first-child{border-top:1px solid var(--linie)}
.titelliste a{
  display:block;padding:.75rem .2rem;font-size:1.12rem;
  color:var(--tinte);text-decoration:none;
}
.titelliste a:hover{color:var(--siegellack)}

/* Verse */
.versliste{list-style:none;counter-reset:vers}
.versliste li{
  counter-increment:vers;position:relative;
  padding:1.05rem 0 1.05rem 3rem;
  border-bottom:1px solid var(--linie);
  font-size:1.12rem;line-height:1.75;
}
.versliste li:first-child{border-top:1px solid var(--linie)}
.versliste li::before{
  content:counter(vers);position:absolute;left:.15rem;top:1.18rem;
  font-family:'Karla',sans-serif;font-size:.74rem;letter-spacing:.06em;
  color:var(--siegellack);
}

/* Platzhalter-Rubrik */
.folgt-hinweis{font-size:1.12rem;line-height:1.8;color:var(--tinte-blass)}

/* Siegel */
.siegel{margin:3.2rem 0 0;display:flex;align-items:center;gap:1rem}
.siegel::before,.siegel::after{content:"";height:1px;background:var(--linie);flex:1}
.siegel-marke{
  width:2.9rem;height:2.9rem;border-radius:50%;
  background:var(--siegellack);color:var(--papier);
  display:flex;align-items:center;justify-content:center;
  font-family:'Vollkorn',serif;font-weight:600;font-size:1.05rem;letter-spacing:.04em;
  box-shadow:0 1px 0 rgba(33,29,25,.25), inset 0 0 0 2px rgba(246,244,239,.35);
  user-select:none;
}

/* Blaettern */
.blaettern{
  margin-top:2.6rem;display:flex;justify-content:space-between;gap:1rem;
  font-family:'Karla',sans-serif;font-size:.85rem;
}
.blaettern a{color:var(--tinte-blass);text-decoration:none;max-width:46%}
.blaettern a:hover{color:var(--siegellack)}
.blaettern .richtung{
  display:block;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;margin-bottom:.25rem;
}
.blaettern .weiter{text-align:right;margin-left:auto}

/* Fuss */
footer{
  padding:2rem 1.5rem 2.4rem;text-align:center;
  font-family:'Karla',sans-serif;font-size:.74rem;
  letter-spacing:.1em;color:var(--tinte-blass);
}
footer a{color:inherit;text-decoration:none}
footer a:hover{color:var(--siegellack)}
footer .folgt{opacity:.55;cursor:default}

a:focus-visible{outline:2px solid var(--siegellack);outline-offset:3px}

@media (max-width:480px){
  html{font-size:16px}
  nav.rubriken{gap:1.1rem}
  .gedicht{font-size:1.1rem;line-height:1.9}
}
@media (prefers-reduced-motion:no-preference){
  main{animation:auftauchen .5s ease-out both}
  @keyframes auftauchen{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* Rechtstexte */
.rechtstext{font-size:1.02rem;line-height:1.8}
.rechtstext h2{
  font-family:'Karla',sans-serif;font-weight:600;font-size:.8rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--siegellack);
  margin:2.2rem 0 .7rem;
}
.rechtstext p + p{margin-top:.8rem}
.hinweisbox{
  font-family:'Karla',sans-serif;font-size:.85rem;line-height:1.6;
  border:1px solid var(--siegellack);color:var(--siegellack);
  padding:.8rem 1rem;margin-bottom:.5rem;
}
footer .rechte{display:inline-block;margin-bottom:.5rem}

/* Briefe */
.rubrik-einleitung{font-family:'Karla',sans-serif;font-size:.92rem;line-height:1.7;color:var(--tinte-blass);margin-bottom:2.4rem}
.brief{margin-top:3rem}
.brief:first-of-type{margin-top:0}
.brief h2{font-weight:600;font-size:1.35rem;line-height:1.35;margin-bottom:.5rem}
.einordnung{font-style:italic;font-size:1.02rem;line-height:1.7;color:var(--tinte-blass);margin-bottom:1.4rem}
.brief figure{margin:1.6rem 0}
.brief img{width:100%;height:auto;display:block;border:1px solid var(--linie)}
.brief figcaption{font-family:'Karla',sans-serif;font-size:.74rem;letter-spacing:.08em;color:var(--tinte-blass);margin-top:.5rem}
.brieftext{font-size:1.12rem;line-height:1.85}
.brieftext p + p{margin-top:.9rem}
.brieftext .briefkopf{text-align:right;font-style:italic;color:var(--tinte-blass);margin-bottom:1.4rem}

/* Briefrubrik */
.briefdatum{font-family:'Karla',sans-serif;font-size:.82rem;letter-spacing:.1em;color:var(--tinte-blass);margin:-1.7rem 0 1.4rem}
.klartext-titel{font-family:'Karla',sans-serif;font-weight:600;font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:var(--siegellack);margin:2.4rem 0 1rem}
.briefliste{list-style:none}
.briefliste li{border-bottom:1px solid var(--linie)}
.briefliste li:first-child{border-top:1px solid var(--linie)}
.briefliste a{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.9rem .2rem;color:var(--tinte);text-decoration:none}
.briefliste a:hover .anlass{color:var(--siegellack)}
.briefliste .anlass{font-size:1.12rem}
.briefliste .datum{font-family:'Karla',sans-serif;font-size:.76rem;letter-spacing:.1em;color:var(--tinte-blass);white-space:nowrap}

/* Abbildungen global: nie breiter als die Textspalte, auf jedem Geraet */
img{max-width:100%;height:auto}
main figure{margin:1.6rem 0}
main figure img{width:100%;display:block;border:1px solid var(--linie)}
main figcaption{font-family:'Karla',sans-serif;font-size:.74rem;letter-spacing:.08em;color:var(--tinte-blass);margin-top:.5rem}

/* Nachtraege am Rand eines Bogens (ab Fassung 32) */
.brieftext .nachtrag-hinweis{font-style:italic;font-size:.95rem;color:var(--tinte-blass);margin-top:2rem;margin-bottom:.4rem}