@page { margin: 2cm }
        p { margin-bottom: 0.25cm; background: transparent }
        h1 { text-align: center; margin-bottom: 0.21cm; background: transparent }
        h1.western { font-family: "Liberation Sans", sans-serif; font-size: 18pt }
        h1.cjk { font-family: "Microsoft YaHei"; font-size: 18pt }
        h1.ctl { font-family: "Arial"; font-size: 18pt }

		h2 { text-align: left; margin-bottom: 0.21cm; background: transparent }
		h2.western { font-family: "Liberation Sans", sans-serif; font-size: 18pt }
		h2.cjk { font-family: "Microsoft YaHei"; font-size: 18pt }
		h2.ctl { font-family: "Arial"; font-size: 18pt }

        a.cjk:visited { so-language: zxx }
        a.ctl:visited { so-language: zxx }

        /* CSS für Bilder */
		img {
			width: 85%;
			max-width: 800px;
			min-width: 300px;
			height: auto;
			border: 2px solid black; /* Optional: Rahmen */
			box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optional: Schatten */
			margin: 20px auto; /* Zentriert das Bild */
			display: block; /* Sorgt für zentrierte Darstellung bei Verwendung von margin */
			border-radius: 5px;
			padding: 5px;
		}
		
		img.small-img {
			width: 50%;
		}		

		math {
			font-size: 1.0em;
			font-family: "Latin Modern Math", "Cambria Math", serif;
		}	
		
        #Content {
            font-size: 12pt; /* Schriftgröße des gesamten Inhalts */
            line-height: 0.6; /* Zeilenhöhe für bessere Lesbarkeit */
        }
        #Content_Head {
            font-size: 20pt; /* Spezielle Schriftgröße für Überschriften */
            font-family: "Liberation Sans", sans-serif; /* Font für den Header */
        }
        #warningMessage {
            // display: none; /* Versteckt den Hinweis standardmäßig */
            padding: 6px;
            background-color: #ffcc00;
            color: black;
            font-weight: bold;
            text-align: center;
            margin: 15px 0;
            border: 1px solid #cc9900;
            border-radius: 5px;
            font-size: 16px;
        }    
        
		#headertitle {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 10px;
			background-color: #00eeff;
			font-family: "Arial";
			color: black;
			font-weight: bold;
			text-align: center;
			margin: 15px 0;
			border: 1px solid #aaff00;
			border-radius: 5px;
			font-size: 24px;
		}

		#headertitle2 {
			display: flex;
			align-items: center;
			justify-content: left;
			position: relative;
			padding: 5px;
			/* background-color: #00eeff; */
			font-family: "Arial";
			color: black;
			font-weight: bold;
			text-align: center;
			margin: 10px 0;
			/* border: 1px solid #aaff00;
			border-radius: 3px; */
			font-size: 22px;
		}

		#headertitle3 {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding: 5px;
			/* background-color: #00eeff; */
			font-family: "Arial";
			color: black;
			font-weight: bold;
			text-align: center;
			margin: 10px 0;
			/* border: 1px solid #aaff00;
			border-radius: 3px; */
			font-size: 18px;
		}

		/* Hamburger menu */
		.menu-icon {
			position: absolute;
			left: 10px;
			font-size: 24px;
			cursor: pointer;
		}

		.menu {
			display: none;
			position: absolute;
			top: 64px;
			left: 10px;
			background: white;
			border: 1px solid #aaa;
			border-radius: 5px;
			box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
			opacity: 0;
            transition: opacity 0.3s ease-out; /* Übergang für die Opazität */
		}

        .menu.show {
            display: block;
            opacity: 1; /* Wenn das Menü angezeigt wird, wird es sichtbar */
        }

		.menu ul {
			list-style: none;
			padding: 10px;
			margin: 0;
		}

		.menu ul li {
            padding: 4px 8px; /* oben/unten 4px, links/rechts 8px */			
			cursor: pointer;
		}

		.menu ul li:hover {
			background-color: #ddd;
		} 

		.menu hr {
			margin-top: 10px;
			margin-bottom: 4px;
			border: none;
			border-top: 1px solid #ccc;
		}		
        
		/* Styles for tables */
		table {
            border-collapse: separate; /* Muss 'separate' sein, damit border-spacing funktioniert */
            border-spacing: 12px; /* Old: 12px - Abstand zwischen Zellen */
            /* border: 1px solid black; */
            border: none;
        }		

		table.small-spacing {
            border-spacing: 2px;
        }		

		
        td, th {
            border: none;
            /* border: 1px solid gray; */
			padding-left:  15px;  /* Abstand nach links */
			padding-right: 15px; /* Abstand nach rechts */
			padding-top: 0;      /* Kein Abstand nach oben */
			padding-bottom: 0;   /* Kein Abstand nach unten */
            text-align: center;
        }
		
		table.gross-padding td {
          padding: 0 15px; /* oben/unten 0px, links/rechts 15px */
          border-collapse: collapse;
          border: 1px solid black;
        }
        
		.text-left {
			text-align: left;
		}
		
		
        @media (max-width: 768px) {
            table {
                width: 100%; /* Tabelle passt sich an kleinere Bildschirme an */
            }

            td {
                display: block; /* Jede Zelle wird gestapelt */
                width: 100%; /* Passt jede Zelle an die volle Breite an */
            }

            textarea {
                width: calc(100% - 20px); /* Textarea füllt den verfügbaren Platz */
            }
        }

		/* Flex-Container */
		.container {
			display: flex;
			gap: 2rem; /* Abstand zwischen Inhalt und Bild */
			align-items: flex-start;
		}

		/* Linke Seite (Content) */
		#Content {
			flex: 1;
		}

		/* Rechte Seite (Bild) */
		.sidebar-image {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: flex-start;
		}

		.sidebar-image img {
			max-width: 100%;
			height: auto;
		}

		/* Smartphone/Tablet: Bild kommt unter den Content */
		@media (max-width: 800px) {
			.container {
			flex-direction: column;
			}
		}		
		
		figure {
			display: block;
			margin: 20px auto;
			text-align: center; /* Zentriert alles innerhalb von Figure */
		}

		figcaption {
			font-size: 10pt;
			font-style: italic;
			color: #000000;
			margin-top: 8px; /* Kleiner Abstand zum Bild */
			line-height: 1.2;
		}
		
		.sidebar-image {
			flex: 1;
			display: flex;
			flex-direction: column; /* Bild über Beschriftung */
			align-items: center;    /* Alles zentriert */
		}

		.sidebar-image figcaption {
			margin-top: 0.5rem;
			text-align: center;
			font-size: 0.9rem;
			color: #555; /* dezentes Grau */
		}
		
		.code-container {
			/* Hintergrund und Rahmen */
			background-color: #f5f5f5;      /* Hellgrau */
			border: 2px solid #333;         /* Dunkler Rahmen */
			border-radius: 8px;             /* Abgerundete Ecken */
    
			/* Abstände */
			padding: 20px;
			margin: 20px auto;              /* 'auto' links/rechts zentriert das Element */
    
			/* Breite und Ausrichtung */
			width: 80%;                     /* Oder eine feste Breite wie 600px */
			max-width: 400px;             
			min-width: 250px;
			overflow-x: auto;               /* Scrollbalken, falls der Code zu breit ist */
    
			/* Schriftart erzwingen */
			font-family: 'Courier New', Courier, monospace;
			white-space: pre;               /* Behält Formatierung bei */
			text-align: center;
  		}		

        .equation-box {
          margin: 20px auto;
          padding: 15px;
          background-color: #f9f9f9;
          /* border-left: 5px solid #007bff; */ /* Blauer Akzentbalken */
          text-align: center;            /* Zentriert die Gleichung */
          font-family: "Times New Roman", serif;
          font-size: 1.2em;
          /* font-style: italic; */
        }

        .sqrt {
          text-decoration: overline;
        }