#centerframe{
  position:relative;
  width:92%; 
  left:4%; 
  background: transparent;
  border-color: transparent;
  border-width: 0px;
  border-style: solid;
  /* -ms-user-select: None; */
  /* -moz-user-select: None; */
  /* -webkit-user-select: None; */
  /* user-select: None; */
  font-family: Arial;
  font-size: 1.4em;
}

#Anmeldung{
	position: absolute; /* Entfernt das Element aus dem normalen Dokumentfluss */
	top: 4px; /* Abstand von der oberen Kante des Containers */
	right: 16px; /* Abstand von der rechten Kante des Containers */
	background-color: #f0f0f0; /* Hellgrauer Hintergrund */
	border: 2px solid blue; /* blauer Rahmen */
	border-radius: 12px; /* Abgerundete Ecken */
	padding-left: 10px; /* Innenabstand */
	padding-right: 10px; /* Innenabstand */
}

#Login{
	position: absolute; /* Entfernt das Element aus dem normalen Dokumentfluss */
	top: 150px; /* Abstand von der oberen Kante des Containers */
	right: 16px; /* Abstand von der rechten Kante des Containers */
	background-color: #f0f0f0; /* Hellgrauer Hintergrund */
	border: 2px solid blue; /* blauer Rahmen */
	border-radius: 12px; /* Abgerundete Ecken */
	padding-left: 10px; /* Innenabstand */
	padding-right: 10px; /* Innenabstand */
}

#Logout{
	position: absolute; /* Entfernt das Element aus dem normalen Dokumentfluss */
	top: 256px; /* Abstand von der oberen Kante des Containers */
	right: 16px; /* Abstand von der rechten Kante des Containers */
	background-color: #f0f0f0; /* Hellgrauer Hintergrund */
	border: 2px solid blue; /* blauer Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
	padding-left: 4px; /* Innenabstand */
	padding-right: 10px; /* Innenabstand */
	padding-top: 20px;
}

.Willlesen{
	position: relative;
	display: inline-block;
	background-color: #f0f0f0; /* Hellgrauer Hintergrund */
	border: 2px solid blue; /* blauer Rahmen */
	border-radius: 10px; /* Abgerundete Ecken */
	padding-left: 20px; /* Innenabstand */
	padding-right: 20px; /* Innenabstand */
	padding-top: 20px;
}

#orderbydate{
	text-align: right;
}
#orderbydatenormal{
	text-align: right;
}

#zudenAnkern{
	position: absolute; /* Entfernt das Element aus dem normalen Dokumentfluss */
	width: 160px;
	height: 120px;
	top: 6px; /* Abstand von der oberen Kante des Containers */
	right: 16px; /* Abstand von der rechten Kante des Containers */
	background-color: #f0f0f0; /* Hellgrauer Hintergrund */
	border: 2px solid blue; /* Schwarzer Rahmen */
	border-radius: 12px; /* Abgerundete Ecken */
	padding: 10px; /* Innenabstand */	
}

td {
  vertical-align: middle;
}

.tabu{
	margin-left: 10px;
	margin-top: 0px;
	height: 28px;
	font-family: Courier New;
  font-size: 1em;
}

.tabelle{
	margin-top: -20px;
}

hr {
  border-top: 6px solid #ccc; /* hellblaue Linie, #23b1ef 4px dick */
	border-radius: 4px;
  margin: 5px auto; /* Automatische Zentrierung */
}

#Geburtstag{
	visibility: hidden;
	display: none;
}

.schrift{
  font-family: Arial;
  font-size: 1em;	
}

.rechts{
  float: right;	
}

#fileToUpload{
  font-family: Arial;
  font-size: 1em;
  
  /* Vergrößere das Eingabefeld */
  padding: 10px 20px;

  /* Optische Anpassungen */
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f0f0f0;
  cursor: pointer;  
}

#text{
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
}

#kapitel{
  font-family: Arial;
  font-size: 1.2em;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#bildunterschrift{	
  font-family: Arial;
  font-size: 1em;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#bildbezeichnung{	
  font-family: Arial;
  font-size: 1em;
}

#datum{
  resize: none !important;
  maxlength: 10;
  font-family: Courier New, Courier, monospace;
  font-size: 1em;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#datumbild{
  resize: none !important;
  maxlength: 10;
  font-family: Courier New, Courier, monospace;
  font-size: 1em;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#imagePreview{
	display: block;
}

#imagePreview img {
  display: block;
  margin: 0 auto;
  width: 20%;
  max-width: 100%;
  height: auto;
}

input[type="range"] {
  width: 60%; /* Breite des Schiebereglers */
  height: 30px; /* Höhe des Schiebereglers */
}

#ursula{
	width: 160px;
	height: auto;
}

.datumrechts{
	text-align: right;
}

.bild{
	width: 14%;
}

.hideme{
	visibility: hidden;
}

.inhalt {
	line-height: 1.2;
}

.wasserzeichen {
    /* Das HTML-Element selbst muss keine Größe haben, da das Pseudoelement positioniert wird */
    pointer-events: none; /* Stellt sicher, dass das Div keine Klicks abfängt */
}

.wasserzeichen::before {
    /* 1. Inhalt und Text-Grundlagen */
    content: "UNVERÖFFENTLICHT"; /* !!! Den gewünschten Wasserzeichen-Text hier einfügen !!! */
    font-size: 8vw; /* Schriftgröße, relativ zur Viewport-Breite für Skalierung */
    font-weight: bold;
    color: #000000; /* Schwarz oder eine andere helle Farbe */
    white-space: nowrap; /* Verhindert, dass der Text umbricht */

    /* 2. Positionierung und Stapelung */
    position: fixed; /* Bleibt beim Scrollen an der Position */
    top: 50%;        /* Verschiebt den Ankerpunkt zur Mitte */
    left: 50%;       /* Verschiebt den Ankerpunkt zur Mitte */
    
    /* 3. Transformation und Sichtbarkeit */
    /* Zentriert exakt (wegen top/left 50%) und dreht den Text um -30 Grad */
    transform: translate(-50%, -50%) rotate(-30deg); 
    
    /* 4. Transparenz und Stapelung */
    opacity: 0.06; /* Sehr transparent, um den Inhalt nicht zu überdecken */
    z-index: -1;   /* Absolut wichtig: Platziert das Element HINTER allen anderen Inhalten */
    pointer-events: none; /* Wiederholt für das Pseudoelement: Stellt sicher, dass der Text keine Interaktionen stört */
}

body, .wasserzeichen::before {
    /* Verhindert, dass der Text markiert werden kann */
    -webkit-user-select: none; /* Für ältere Chrome/Safari/Opera */
    -moz-user-select: none;    /* Für Firefox */
    -ms-user-select: none;     /* Für Internet Explorer/Edge */
    user-select: none;         /* Der Standard- und modernste Wert */
}