/* content für DIE FRAU DES MEISTERS */ 
 body        
		{ 
		margin: 0;
		padding-left: 5px;
		padding-right: 5px;
		font-family: "Georgia", "Tahoma", "Helvetica", "Arial", serif !important;
		text-align:   adjust;
		color:   #333399;
		background-color:   #F0F8FF;
	}
 ul li             {
		margin: 0;
		padding-left: 5px;
		padding-right: 5px;
		font-family: Tahoma, Helvetica, sans-serif, Arial, Verdana;
		text-align: left;
		color:   #333399;
		background-color: #F0F8FF;
		list-style-type: none;
		font-size:   13pt;
                }
 #container {
		margin: 0em;
		width:  100%; 
		height:  100%;
		text-align:  adjust;
	}
 #header 	{
		height:  18px;
		color: red;
		font-size: 15pt; 
	}
  .max-container {
			max-width: 95%;
            margin: 0 auto;
        }
 .emphasis {
           color:   #333399;
        }
		.narrative {
			color:   #333399;
            margin: 15px 0;
        }
		.scene-description {
            color:   #333399;
            margin: 15px 0;
		}
		.story-segment {
            color:   #333399;
            margin: 15px 0;
		}
 #contents {
        margin:   0em;
        border-left:   1px solid #000000;
        width:   auto; 
        text-align:   left;
        margin-left:  150px; /* WAR 6px -> JETZT 150px, damit der Text RECHTS vom Menü steht! */
        margin-right:  8px;
        top:  30px;
        float:  center;
        padding-left:   15px; /* Abstand vom Trennstrich zum Text */
    }
 #menu {
        height:  auto;
        width:  140px;
        padding:  2px 5px 5px 2px;
        position:  absolute;
        top:  30px;
        left: 5px;
        visibility:  visible;
        font-size:  85%;
        text-indent:  -5px;
		display: flex;
		flex-direction: column;
		gap: 10px;
}
 #menu li {
        list-style:  none;
        margin-top:  0px;
        margin-bottom:  5px;
        background-color:   #F0F8F7;
}   
 #menu a {
    display: block; /* Zwingt die Links im #menu sauber untereinander */
}
 #contents {
        margin:   0em;
        border-left:   1px solid #000000;
        width:   auto; 
        text-align:   left;
        margin-left:  155px !important; /* Verschiebt den Inhaltsbereich sauber nach rechts */
        margin-right:  8px;
        padding-left:   20px; /* Abstand vom Trennstrich zum Text */
        min-height: 400px;
}
 #footer {
		clear:  both;
		height:  20px;
		font-size:   75%;
		color:  #000000;
		text-align:  center;
		margin:   0em;
		width:   auto; 
		margin-left:  140px;
		float:  top;
	}
.tooltiptext {
  opacity: 0;
  transition: opacity 2s;
}
 .tooltip:hover .tooltiptext {
  opacity: 1;
  text-align:  adjust;
}
 hr {
  border:  1px solid blue;
  margin-left: 40px;
  margin-right: 40px;
}
 a {
  color:   #0000ff;
}
a:hover {
  color:   #ff0000;
  text-decoration:   underline;
  background-color:   #BAC6D7;
}
a:link {
  color:   #0000ff;
  text-decoration:   underline;
}
a:visited {
  color:   #880088;
  text-decoration:   underline;
}
a:active {
  color:   #ff0000;
  text-decoration:   none;
}
 /* Red-Theme für H1 und H4 mit Schatten */
h1 {     
    font-size: 25pt; 
    margin-bottom: 1px;
    letter-spacing: -1px;
    text-align: center;
    color: #FF0000 !important;
    text-shadow: 2px 2px 4px #888888;
    page-break-before: always;
}
 h4 {     
    page-break-before: always;
    font-size: 25pt; 
    margin-bottom: 1px;
    letter-spacing: -1px;
    text-align: center;
    color: #FF0000 !important;
    text-shadow: 2px 2px 4px #888888;
}
 h2 {
    font-size:  18pt;
    margin-bottom: 1px;
    letter-spacing: -1px;
    text-align: center;
    color: #FF0000 !important;
    text-shadow: 2px 2px 4px #888888;
  }
 p {
	font-size:   125%;
	text-align:   justify;
	text-indent:   1.2em;
	color:   #333399;
	font-size:   13pt;
}
 pre {
	font-size:   125%;
	text-align:   justify;
	text-indent:   1.2em;
	color:   #333399;
	font-size:   12pt;
}
 .footimg   {
		margin:  0.1em;
		}
 .note       {
	font-size:  75%;
	font-style:   italic;
	text-align:  justify;
	text-indent:  1.2em;
	color:   #333399;
        }
 /* Flexible Container-Steuerung (Bild links, Text rechts) */
.flex-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 15px; /* Abstand zwischen Bild und Text */
    margin-bottom: 1em;
}
 /* Skaliert das Bild innerhalb des Flex-Containers auf genau 45% */
.flex-container img {
    width: 45% !important;
    height: auto;
    flex-shrink: 0; /* Verhindert, dass das Bild gestaucht wird */
}
 /* Sorgt dafür, dass der Text/Absatz den restlichen Platz rechts einnimmt */
.flex-container p,
.flex-container div {
    flex: 1;
    margin-top: 0;
}
/* -------------------------------------------------------------------------------------------*/ 
 .dialogue-box {
            background-color: #ffffff;
            border-left: 1px solid #8c7662;
            padding: 15px 20px;
            margin-bottom: 25px;
            box-shadow: 0 1px 3px rgba(0,0,0,0.05);
			color:   #333399;			
        }
         .speaker-label {
            font-size: 13pt;
			color:   #333399;
            margin-bottom: 8px;                     
        }
         .narrator {
            font-style: italic;
			font-size: 13pt;
			color:   #333399;		
            margin: 15px 0;
        }
 	.story-p {
            margin: 0 0 12px 0;
            text-align: justify;
			color:   #333399;
        }  		
         .author-note {
            font-style: italic;
            color:   #333399;
            margin-top: 1px;
            text-align: center;
            font-size: 0.95rem;        
            padding-top: 1px;
        }
.dialogue Jack {
			font-size: 1.055rem; 
            margin: 0 0 12px 0;
            text-align: justify;
				color:   #333399;
        }   
 		.dialogue Lina {
			font-size: 1.075rem; 
            margin: 0 0 12px 0;
            text-align: justify;
				color:   #333399;
        }  
 		.dialogue Juliette {
			font-size: 1.095rem; 
            margin: 0 0 12px 0;
            text-align: justify;
				color:   #333399;
        } 
 		.scene-description {
           color:   #333399;
            margin: 15px 0;
		}
  .Venice {
             background-color: #ffffff;
             border-left: 1px solid #8c7662;
             padding: 20px 20px;
             margin-bottom: 25px;
             box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 			color:   #333399;
 			font-size: 13pt;
         }
 .Oskar {
             font-size: 13pt;
             color:   #333399;
             margin-bottom: 8px;                     
         }
.Jack {
			font-size: 13pt; 
			color:   #333399;
            text-align: justify;
        }   	
.Jack2 {
			font-size: 13pt; 
			color:   #333399;
            text-align: justify;
			width: 45%;
        }   		
/* Der Container für das gesamte Menü */
.sidebar-menu {
    display: flex;
    flex-direction: column;
    gap: 22px; /* Abstand zwischen den einzelnen Links */
}
 /* Die einzelnen Links im Menü */
.sidebar-link {
    display: block; /* Zwingt den Link in eine eigene Zeile */
    text-decoration: none; /* Entfernt standardmäßig die Unterstreichung */
    color: #333; /* Deine Wunschfarbe für die Links */
    padding: 6px 10px; /* Etwas Klickfläche drumherum */
}
 /* Optional: Ein kleiner Effekt, wenn man mit der Maus drüberfährt */
.sidebar-link:hover {
    background-color: #f0f0f0;
    color: #000;
}