/* 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:   #452E7B;
		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: #452E7B;
		background-color: #F0F8FF;
		list-style-type: none;
		font-size:   13pt;
                }
	
#container {
		margin: 0em;
		width:  100%; 
		height:  100%;
		text-align:  adjust;
	}
	
#header 	{
		height:  18px;
		float:  top;
	}

 .max-container {
			max-width: 95%;
            margin: 0 auto;
        }

.emphasis {
              color: black;
        }
		.narrative {
			color: black;
            margin: 15px 0;
        }
		.scene-description {
            color: black;
            margin: 15px 0;
		}
		.story-segment {
            color: black;
            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:    #452E7B;
	font-size:   13pt;
}

pre {
	font-size:   125%;
	text-align:   justify;
	text-indent:   1.2em;
	color:    #452E7B;
	font-size:   12pt;
}
		
.footimg   {
		margin:  0.1em;
		}
		
.note       {
	font-size:  75%;
	font-style:   italic;
	text-align:  justify;
	text-indent:  1.2em;
	color:  #452E7B;
        }
        

/* 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);
        }

        .speaker-label {
            font-weight: bold;
            font-size: 11pt;
            color: black;
            margin-bottom: 8px;                     
        }

        .narrator {
            font-style: italic;
            color: black;
            margin: 15px 0;
        }

	.story-p {
            margin: 0 0 12px 0;
            text-align: justify;
			color: black;
        }  		

        .author-note {
            font-style: italic;
            color: black;
            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:  black ;
        }   

		.dialogue Lina {
			font-size: 1.075rem; 
            margin: 0 0 12px 0;
            text-align: justify;
			color:  black ;
        }  

		.dialogue Juliette {
			font-size: 1.095rem; 
            margin: 0 0 12px 0;
            text-align: justify;
			color:  black ;
        } 

		.scene-description {
            color:  black ;
            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: blue;

			font-size: 13pt;

        }

.Oskar {

            font-size: 13pt;

            color: black;

            margin-bottom: 8px;                     

        }
		
/* 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;
}