/* Grundlayout */

body {
  margin: 0;
  padding: 0;
  background-color: #1a1a1a;
  color: #f3efe7;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.8;
}

/* Startseite */
.cover-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background:
    linear-gradient(rgba(10, 10, 10, 0.80), rgba(10, 10, 10, 0.75)),
    url("bilder/titelbild.jpg") center center / cover no-repeat,
    #1a1a1a;
}

.book-cover {
  width: min(90%, 900px);

  box-sizing: border-box;

  padding: 5rem 3rem;

  text-align: center;

  flex: 1;

  display: flex;
  flex-direction: column;
  justify-content: center;
}

.author {
  margin: 0 0 2.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: #e0b979;
}

.book-cover h1 {
  margin: 0;
  font-size: clamp(3.5rem, 8vw, 7rem);
  font-weight: normal;
  line-height: 1.05;
  color: #fffaf0;
}

.subtitle {
  margin-top: 2rem;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #e0b979;
}

.intro-link {
  margin-top: 2rem;
}

.intro-link a {
  color: #b4a894;

  text-decoration: none;

  font-size: 0.9rem;
  font-style: italic;
  letter-spacing: 0.05em;

  border-bottom: 1px solid transparent;
  padding-bottom: 0.12rem;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.intro-link a:hover {
  color: #e7d8bd;

  border-bottom: 1px solid rgba(231, 216, 189, 0.65);
}

.motto {
  margin: 2.5rem auto 0;
  max-width: 38rem;
  font-style: italic;
  color: #b4a894;
}

.cover-nav {
  margin-top: 3.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}

.nav-top,
.nav-bottom {
  display: flex;
  justify-content: center;
}

.nav-main {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
}

.cover-nav a {
  color: #b4a894;
  text-decoration: none;
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.25s ease;
  padding-bottom: 0.15rem;
  transition: all 0.25s ease;
}

.cover-nav a:hover {
  color: #ffebcb;
  border-bottom: 1px solid #e7d8bd;
}

.cover-footer {
  position: absolute;
  bottom: 1.5rem;
  width: 100%;
  text-align: center;
}

.cover-footer a {
  color: #8e8579;
  text-decoration: none;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
}

.cover-footer a:hover {
  color: #ffebcb;
}

/* Unterseiten */

nav {
  padding: 1.25rem 2rem;
  text-align: center;
  border-bottom: 1px solid rgba(212, 179, 122, 0.15);
  background-color: #151515;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}

nav a,
.article-list a {
  color: #e7d8bd;
  text-decoration: none;
}

nav a:hover,
.article-list a:hover {
  text-decoration: underline;
}

main,
article {
  width: min(90%, 760px);
  margin: 0 auto;
  padding: 4rem 0;
}

main h1,
article h1 {
  font-size: 2.5rem;
  font-weight: normal;
  color: #fffaf0;
}

.article-list {
  list-style: none;
  padding: 0;
}

.article-list li {
  margin-bottom: 1rem;
}

footer {
  width: 100%;

  text-align: center;

  padding: 3rem 0 2rem;

  font-size: 0.78rem;
  letter-spacing: 0.08em;
}

footer a {
  color: #7f776c;

  text-decoration: none;

  border-bottom: 1px solid transparent;

  padding-bottom: 0.1rem;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

footer a:hover {
  color: #bfae94;

  border-bottom: 1px solid rgba(191, 174, 148, 0.6);
}


img {
  max-width: 100%;
  height: auto;
}

/* Vorwort- und Textseiten */

.text-page {
  min-height: 100vh;

  background:
    linear-gradient(rgba(12, 12, 12, 0.82),
    rgba(12, 12, 12, 0.82)),
    url("bilder/vorwort.jpg") center center / cover no-repeat fixed,
    #1a1a1a;

  color: #f3efe7;
}

/* Links innerhalb von Textseiten */

.text-content a {
  color: #c3ac84;

  text-decoration: none;

  border-bottom: 1px solid rgba(216, 199, 170, 0.45);

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.text-content a:hover {
  color: #fffaf0;

  border-bottom: 1px solid #fffaf0;
}

/* Verweise zwischen Hauptbereichen */

.section-links {
  margin: 4rem auto 3rem;

  width: fit-content;

  padding: 0.9rem 1.4rem;

  background: rgba(0, 0, 0, 0.22);

  border-radius: 2px;

  backdrop-filter: blur(2px);

  text-align: center;

  font-size: 0.9rem;
  letter-spacing: 0.06em;

  color: #8f8577;
}

.section-links a {
  color: #bfae94;

  text-decoration: none;

  border-bottom: 1px solid transparent;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.section-links a:hover {
  color: #fffaf0;

  border-bottom: 1px solid rgba(255, 250, 240, 0.7);
}

.section-links span {
  margin: 0 0.8rem;

  color: #6f675d;
}

/* Navigation oben */

.sub-nav {
  padding: 2rem 0 0;
  text-align: center;
  background: transparent;
  border: none;
}

.sub-nav a {
  color: #b4a894;
  text-decoration: none;
  font-size: 0.9rem;
  letter-spacing: 0.08em;

  border-bottom: 1px solid transparent;
  padding-bottom: 0.15rem;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.sub-nav a:hover {
  color: #fffaf0;

  border-bottom: 1px solid rgba(255, 250, 240, 0.7);
}

.sub-nav a:hover {
  color: #ffebcb;
}

/* Textbereich */

.text-content {
  width: min(88%, 720px);

  margin: 4rem auto 0;
  padding-bottom: 6rem;
}

.text-content h1 {
  margin-bottom: 3rem;

  font-size: 2.4rem;
  font-weight: normal;
  text-align: center;

  color: #fffaf0;
}

.mobile-break {
  display: inline;
}

.text-content p {
  margin-bottom: 2rem;

  font-size: 1.08rem;
  line-height: 2;

  color: #ddd6ca;
}

/* Impressum */

.imprint-page {
  min-height: 100vh;

  background: #151515;

  color: #d8d1c5;
}

.imprint-content {
  width: min(88%, 620px);

  margin: 5rem auto 0;

  padding-bottom: 6rem;

  text-align: center;
}

.imprint-content h1 {
  margin-bottom: 3rem;

  font-size: 1.8rem;
  font-weight: normal;

  letter-spacing: 0.05em;

  color: #f3efe7;
}

.imprint-content p {
  margin-bottom: 2.2rem;

  line-height: 1.9;

  color: #b7aea2;
}

.mail-link {
  color: #b4a894;
  text-decoration: none;
  border-bottom: 0.5px solid #6f675d;
}

.mail-link:hover {
  color: #ffebcb;
  border-bottom-color: #e7d8bd;
}

.mail-link:visited {
  color: #b4a894;
}

.copyright-note {
  margin-top: 4rem;

  font-size: 0.9rem;

  line-height: 1.8;

  color: #978d80;

  font-style: italic;
}

.preface-signature {
  margin-top: 4rem;

  text-align: right;

  font-size: 0.95rem;

  color: #978d80;

  font-style: italic;
}

/* Bereichsseiten */

.section-page {
  min-height: 100vh;

  color: #f3efe7;
}

.section-content {
  width: min(88%, 760px);

  margin: 4rem auto 0;

  padding-bottom: 6rem;
}

.section-content h1 {
  margin-bottom: 2.5rem;

  font-size: 2.7rem;
  font-weight: normal;

  text-align: center;

  color: #fffaf0;
}

.section-intro {
  max-width: 42rem;

  margin: 0 auto 4rem;

  text-align: center;

  font-style: italic;

  line-height: 2;

  color: #c2b6a4;
}

.text-list {
  list-style: none;

  padding: 0;

  margin-top: 4rem;
}

.text-list li {
  margin-bottom: 1.5rem;

  text-align: center;
}

.text-list a {
  color: #d8c7aa;

  text-decoration: none;

  font-size: 1.05rem;

  border-bottom: 1px solid transparent;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.text-list a:hover {
  color: #fffaf0;

  border-bottom: 1px solid rgba(255,250,240,0.7);
}

/* Deaktiviert am 04.06.2026
   Ist ersetht durch entsprechende Regeln
   in den Abschnitten zu den einzelnen Übersichtsseiten
   "Gedichtseiten" ersetzt.
*/

/*
.poems-page {
  background:
    linear-gradient(rgba(10,10,10,0.82),
    rgba(10,10,10,0.84)),
    url("bilder/gedichte.jpg")
    center center / cover no-repeat fixed;
}

.shortpoems-page {
  background:
    linear-gradient(rgba(10,10,10,0.86),
    rgba(10,10,10,0.88)),
    url("bilder/kuerzestgedichte.jpg")
    center center / cover no-repeat fixed;
}

.stories-page {
  background:
    linear-gradient(rgba(10,10,10,0.82),
    rgba(10,10,10,0.86)),
    url("bilder/kurzgeschichten.jpg")
    center center / cover no-repeat fixed;
}

.christmas-page {
  background:
    linear-gradient(rgba(10,10,10,0.84),
    rgba(10,10,10,0.88)),
    url("bilder/weihnachten.jpg")
    center center / cover no-repeat fixed;
}
  */

/* Gedichtseite */

.poems-page {
  min-height: 100vh;

  background:
    linear-gradient(rgba(10,10,10,0.82),
    rgba(10,10,10,0.86)),
    url("bilder/gedichte.jpg")
    center center / cover no-repeat fixed;

  color: #181611;
}

.section-content {
  width: min(90%, 1000px);

  margin: 4rem auto 0;

  padding-bottom: 6rem;
}

.section-content h1 {
  margin-bottom: 2.5rem;

  text-align: center;

  font-size: 2.8rem;
  font-weight: normal;

  color: #fffaf0;
}

.section-intro {
  max-width: 42rem;

  margin: 0 auto 4rem;

  text-align: center;

  line-height: 2;

  font-style: italic;

  color: #c2b6a4;
}

.year-block {
  margin-top: 5rem;
}

.year-block h2 {
  margin-bottom: 2rem;

  text-align: center;

  font-size: 1rem;
  font-weight: normal;

  letter-spacing: 0.18em;

  color: #988d80;
}

.multi-column {
  column-count: 2;

  column-gap: 5rem;

  max-width: 900px;

  margin: 0 auto;

  padding: 0;

  list-style: none;
}

.multi-column li {
  break-inside: avoid;

  margin-bottom: 1.1rem;

  text-align: center;
}

.multi-column a {
  color: #d8c7aa;

  text-decoration: none;

  border-bottom: 1px solid transparent;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.multi-column a:hover {
  color: #fffaf0;

  border-bottom: 1px solid rgba(255,250,240,0.7);
}

/* Einzelne Gedichtseiten */

.poem-single-page {
  min-height: 100vh;

  background: #151515;

  color: #f3efe7;
}

.poem-content {
  width: min(88%, 760px);

  margin: 4rem auto 0;

  padding-bottom: 6rem;
}

.poem-content h1 {
  margin-bottom: 4rem;

  text-align: center;

  font-size: 2.4rem;
  font-weight: normal;

  color: #fffaf0;
}

.poem-image {
  margin: 0 auto 4rem;

  text-align: center;
}

.poem-image img {
  width: min(100%, 520px);

  border-radius: 2px;

  opacity: 0.9;
}

.poem-text {
  max-width: 28rem;

  margin: 0 auto;

  text-align: left;

  font-size: 1.08rem;

  line-height: 2.2;

  color: #e2dbcf;
}

.poem-text p {
  margin-bottom: 2.5rem;
}

/* Breitere Varianten für längere Gedichte */

.poem-text-wide {
  max-width: 34rem;
}

.poem-text-extra-wide {
  max-width: 38rem;
}

/* Navigation auf Einzelgedichtseiten */

.poem-top-nav {
  display: flex;

  justify-content: space-between;

  align-items: center;

  width: min(88%, 760px);

  margin: 2rem auto 0;
}

.site-title-link {
  font-size: 0.95rem;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: #978d80;
}

/* Zwischenüberschriften in Gedichten */

.poem-text h2 {
  margin-top: 5rem;
  margin-bottom: 2.5rem;

  font-size: 1rem;
  font-weight: normal;
  font-style: italic;

  letter-spacing: 0.14em;

  color: #b4a894;

  text-transform: none;
}

/* Signatur / Datierung */

.poem-meta {
  margin-top: 4rem;

  text-align: right;

  font-size: 0.9rem;

  letter-spacing: 0.05em;

  color: #978d80;

  font-style: italic;
}

/* Einrückungen innerhalb von Gedichten */

.indent {
  display: inline-block;

  margin-left: 2rem;
}

.strophe-indent {
  margin-left: 2rem;
}

.poem-pagination {
  margin-top: 6rem;

  display: flex;

  justify-content: space-between;

  gap: 2rem;
}

.poem-pagination a {
  color: #b4a894;

  text-decoration: none;

  border-bottom: 1px solid transparent;

  padding-bottom: 0.15rem;

  transition:
    color 0.25s ease,
    border-color 0.25s ease;
}

.poem-pagination a:hover {
  color: #fffaf0;

  border-bottom: 1px solid rgba(255,250,240,0.7);
}

/* Kürzestgedichte */

.shortpoems-page {
  min-height: 100vh;

  background:
    linear-gradient(rgba(10,10,10,0.70),
    rgba(10,10,10,0.82)),
    url("bilder/kuerzestgedichte.jpg")
    center center / cover no-repeat fixed;

  color: #f3efe7;
}

.shortpoem-content {
  max-width: 700px;
}

.shortpoem {
  margin-top: 5rem;

  text-align: center;
}

.shortpoem h2 {
  margin-bottom: 2rem;

  font-size: 0.95rem;
  font-weight: normal;

  letter-spacing: 0.12em;

  color: #b4a894;

  text-transform: lowercase;
}

.shortpoem-text {
  line-height: 2.2;

  color: #e2dbcf;
}

/* Datierung der Kürzestgedichte */

.shortpoem-meta {
  margin-top: 1.8rem;

  text-align: center;

  font-size: 0.82rem;

  letter-spacing: 0.05em;

  color: #8f867a;

  font-style: italic;
}

.poem-divider {
  margin-top: 4rem;

  text-align: center;

  color: #7f776c;

  font-size: 1.2rem;
}

/* Weihnachtsgedichte */

.christmas-page {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(10,10,10,0.78),
      rgba(10,10,10,0.86)
    ),
    url("bilder/weihnachtsgedichte.jpg")
    center center / cover no-repeat fixed;

  color: #f3efe7;
}

.christmas-title {
  text-align: center;
}

/* Weihnachtsgedichtliste */

.christmas-page .multi-column {
  column-count: 1;

  max-width: 500px;
}

/* Einzelne Weihnachtsgedichte */

.christmas-poem-page {
  min-height: 100vh;

  background:
    linear-gradient(
      #1d1b1a,
      #24211f
    );

  color: #f3efe7;
}

/* Kurzgeschichten */

.stories-page {
  min-height: 100vh;

  background:
    linear-gradient(
      rgba(10,10,10,0.73),
      rgba(10,10,10,0.83)
    ),
    url("bilder/kurzgeschichten.jpg")
    center center / cover no-repeat fixed;

  color: #f3efe7;
}

.stories-content {
  max-width: 760px;
}

.stories-single-column {
  max-width: 520px;

  margin: 5rem auto 0;

  column-count: 1;
}

.stories-single-column li {
  margin-bottom: 1.6rem;
}

/* Einzelne Kurzgeschichten */

.story-single-page {
  min-height: 100vh;

  background:
    linear-gradient(
      #171717,
      #1f1f1f
    );

  color: #f3efe7;
}

.story-content {
  width: min(90%, 860px);

  margin: 4rem auto 0;

  padding-bottom: 6rem;
}

.story-content h1 {
  margin-bottom: 1rem;

  text-align: center;

  font-size: 2.4rem;
  font-weight: normal;

  color: #fffaf0;
}

.story-author {
  margin-bottom: 1.9rem;

  text-align: center;

  font-size: 0.9rem;

  letter-spacing: 0.08em;

  color: #978d80;
}

.story-image {
  margin-bottom: 4rem;

  text-align: center;
}

.story-image img {
  width: min(100%, 720px);

  opacity: 0.92;
}

.story-text {
  max-width: 42rem;

  margin: 0 auto;

  font-size: 1.08rem;

  line-height: 2.05;

  color: #e2dbcf;
}

.story-text p {
  margin-bottom: 1.8rem;
}

.story-meta {
  margin-top: 5rem;

  text-align: right;

  font-size: 0.9rem;

  font-style: italic;

  color: #978d80;
}

/* Mobilgeräte */
@media (max-width: 700px) {
  .book-cover {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .book-cover h1 {
    transform: translateX(-3px);
  }

  .subtitle,
  .cover-nav a {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
  }

  .cover-nav {
    flex-direction: column;
    gap: 0.9rem;
  }

  .cover-footer {
    position: static;
    margin-top: 3rem;
  }

  .multi-column {
    column-count: 1;

    column-gap: 0;
}

  .poems-page,
  .shortpoems-page,
  .christmas-page,
  .stories-page {
    background-attachment: scroll;
  }

  .poem-pagination {
    flex-direction: column;

    align-items: center;

    gap: 1.2rem;
  }

  .poem-text {
    max-width: 22rem;
  }

  .story-text {
    max-width: 100%;

    font-size: 1rem;

    line-height: 1.9;
  }

  .section-links {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    font-size: 0.9rem;
  }

  .section-links span {
    display: none;
  }

  
  .mobile-break::before {
    content: "-";
  }

  .mobile-break::after {
    content: "\A";
    white-space: pre;
  }

  .shortpoems-page h1 {
  font-size: 2.5rem;
}

.stories-page h1 {
  font-size: 2.6rem;
}


}