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

#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;
}

#menu li {
        list-style:  none;
        margin-top:  0px;
        margin-bottom:  5px;
        background-color:   #F0F8F7;
}   

#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: 0.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;
}
 
		
.footimg   {
		margin:  0.1em;
		}
		
.note       {
	font-size:  75%;
	font-style:   italic;
	text-align:  justify;
	text-indent:  1.2em;
	color:  #452E7B;
        }
        
@media print {body  {display:none;}}

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