/* zehabspreizer.de — Sagenbuch-Look. Nur dieses eine Stylesheet, keine Dependencies. */

:root {
  --papier: #f7f1e3;
  --papier-tief: #efe6d0;
  --tinte: #2f2a20;
  --braun: #5b4a21;
  --braun-hell: #7a6430;
  --linie: #d8cbaa;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papier-tief);
  color: var(--tinte);
  font-family: Georgia, "Times New Roman", "Liberation Serif", serif;
  font-size: 19px;
  line-height: 1.75;
}

.blatt {
  max-width: 44rem;
  margin: 0 auto;
  background: var(--papier);
  min-height: 100vh;
  padding: 2.2rem 2.4rem 3rem;
  box-shadow: 0 0 40px rgba(60, 45, 10, 0.18);
}

header.kopf { text-align: center; border-bottom: 3px double var(--linie); padding-bottom: 1.2rem; margin-bottom: 1.6rem; }
.kopf .obertitel { font-variant: small-caps; letter-spacing: 0.25em; color: var(--braun-hell); font-size: 0.85rem; margin: 0; }
.kopf h1 { font-size: 2rem; color: var(--braun); margin: 0.3rem 0 0.2rem; font-weight: normal; }
.kopf .untertitel { font-style: italic; color: var(--braun-hell); margin: 0; font-size: 1rem; }

nav.leiste { text-align: center; font-variant: small-caps; letter-spacing: 0.12em; font-size: 0.95rem; margin: 0 0 2rem; }
nav.leiste a { color: var(--braun); text-decoration: none; padding: 0 0.55rem; }
nav.leiste a:hover { text-decoration: underline; }
nav.leiste a.hier { color: var(--tinte); border-bottom: 2px solid var(--braun); }

h2 { font-size: 1.35rem; color: var(--braun); font-weight: normal; margin: 2.4rem 0 0.8rem; text-align: center; }
h2::after { content: ""; display: block; width: 5rem; height: 1px; background: var(--linie); margin: 0.5rem auto 0; }

p { margin: 0 0 0.9rem; text-align: justify; hyphens: auto; }

/* Initiale am Kapitelanfang */
.kapitel > p:first-of-type::first-letter {
  font-size: 3.2em; float: left; line-height: 0.85;
  padding: 0.04em 0.08em 0 0; color: var(--braun);
}

.schluss { text-align: center; font-style: italic; color: var(--braun-hell); margin-top: 2.4rem; }

/* Figuren & Wörterbuch */
.eintrag { border-top: 1px solid var(--linie); padding-top: 1.1rem; margin-top: 1.6rem; }
.eintrag h3 { font-size: 1.15rem; color: var(--braun); font-weight: normal; margin: 0 0 0.4rem; }
.eintrag .art { font-style: italic; color: var(--braun-hell); font-size: 0.9rem; }

.hinweis { text-align: center; font-style: italic; color: var(--braun-hell); border: 1px solid var(--linie); padding: 1.4rem; margin: 2.5rem 0; }

footer.fuss { border-top: 3px double var(--linie); margin-top: 3rem; padding-top: 1rem; text-align: center; font-size: 0.85rem; color: var(--braun-hell); font-style: italic; }
footer.fuss a { color: var(--braun-hell); }

@media (max-width: 640px) {
  body { font-size: 17px; }
  .blatt { padding: 1.4rem 1.1rem 2rem; }
  .kopf h1 { font-size: 1.5rem; }
}