@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;700&family=Merriweather:wght@700&display=swap');


body {
  margin: 0.3em;
  margin-left: 5%;
  margin-right: 8%;
  font-family: 'EB Garamond', serif;
  font-size: 18px; /* Angenehme Lesbarkeit für Fließtext */
  line-height: 1.6; /* Für besseren Lesefluss */
//  font-family: Times, serif;
  color: black;
  background: #FFFFFF;
}

@media (min-width: 1400px) {
    body {
        margin-left: 20%;
    }
}

p {
  margin: 0;
  /* margin-top: 0.4em; */
  /*text-indent: 1.4em;*/
}

a {
  text-decoration: none;
}

a:link {
  color: #FF0033;
}

a:visited {
  color: #336666;
}

h1, h2 {
    color: blue;
    font-family: 'Merriweather', serif;
}

h1 {
    font-size: 2.5em; /* Große Überschrift für Titel */
    font-weight: 700;
}

h2 {
    font-size: 2em; /* Kleinere Überschriften */
    font-weight: 700;
}


.nohr {
  display: none;
  margin-top: 2em;
}

.initial {
  text-indent: 0;
}

.noindentpar {
  text-indent: 0;
  margin-top: 1.4em;
}

.platz {
  margin: 2em;
}

.hutext {
  font-size: 0.63em;
  font-family: sans-serif;
  font-style: italic;
  text-align: center;
}

.nav {
  margin-bottom: 2em;
  margin-top: 1em;
  background: #FFFF00;
  text-indent: 0;
  text-align: center;
  font-size: 80%;
}

.strophe {
  margin-top: 1em;
  text-indent: 0;
}

P.kapital {
  text-indent: 0;
}

P.kapital::first-letter { font-size: 175%; float: left; }

p.poem {
    margin-top: 1em;
//    font-family: "Book Antiqua", serif;
    font-size: 133%;
  }
p.comment {
    margin-bottom: 1.3em;
    margin-left: 2em;
    font-family: "Book Antiqua", serif;
    font-size: 120%;
    font-style:italic;
    color: darkblue;
  }
p.commentwitte {
    margin-bottom: 1.3em;
    margin-left: 1em;
    font-family: "Book Antiqua", serif;
    font-size: 120%;
    font-style:italic;
  }
div.bild {
  clear: right;
  float: right;
  border: 1px solid #CCC;
  padding: 3px;
}
div.bildinner {
  overflow: hidden;
  text-align: center;
}
div.bildcaption {
  border: medium none;
  text-align: left;
  padding: 3px;
}


/* Anmerkungen im Text */
.annotation {
    cursor: pointer;
    color: #0056b3; /* Eine Farbe, die hervorsticht */
    position: relative;
    font-weight: bold;
}

/* Tooltip-Stil */
.annotation::after {
    content: attr(data-note); /* Holt die Anmerkung aus data-note */
    position: absolute;
    bottom: 125%; /* Platzierung über dem Symbol */
    left: 50%;
    transform: translateX(-50%);
    width: 200px; /* Breite des Tooltips */
    background-color: #f9f9f9;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none; /* Tooltip wird nicht vom Cursor beeinflusst */
    z-index: 10;
    font-size: 14px;
    line-height: 1.4;
}

/* Tooltip anzeigen bei Hover */
.annotation:hover::after {
    opacity: 1;
}

/* Tooltip-Inhalt */
.tooltip-content {
    display: none; /* Standardmäßig unsichtbar */
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    background-color: #f9f9f9;
    color: #333;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
}

/* Tooltip sichtbar bei Hover über Anmerkung */
.annotation:hover .tooltip-content {
    display: block;
}