<style>
	/* Einbindung von Google Fonts */
	@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

	/* Stil für den gesamten Text auf der Website */
	body {
	  font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
	  font-size: 16px; /* Grundlegende Schriftgröße */
	}
	
	

	/* Stil für Überschriften (h1 - h6) auf der Website */
	h1, h2, h3, h4, h5, h6 {
	    font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		color: #ffffff;		
	}

    .ueberschrift {
      text-align: left;
      vertical-align: middle;
	  font-weight: normal;
      color: green;
      font-size: 26px; /* Hier kannst du die Schriftgröße anpassen */
 
    }

    .fussZeile {
      text-align: left;
      vertical-align: middle;
	   font-weight: normal;
      color: green;
      font-size: 20px; /* Hier kannst du die Schriftgröße anpassen */
 
    }

	/* Stil für spezifische Elemente (z. B. Absätze, Links, etc.) auf der Website */
	p, a, li {
	  font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
	}


    html, body {
        height: 100%;
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        height: 97%;
        border: 1px solid #ccc;
        max-width: 1200px;
        margin: 0 auto; /* Hier wird das Layout zentriert */
    }

    .footer {
        padding: 2px;
		height: 40px;		
        background-color: #8c8c8c;
        color: #fff;
        text-align: center;
    }
	
    .header {
        padding: 20px;
		height: 60px;		
        background-color: #8c8c8c;
        color: #fff;
        text-align: center;
    }
    .content {
        flex-grow: 1;
        display: flex;

    }

    .column {
        float: left;
        width: 50%;
        justify-content: center;
        overflow: auto;
        border: 1px solid #ccc;
        padding: 10px;
		
    }

    .column:last-child {
        border-right: none;
    }

    .col1 {
        height: 90px;
        width: 100%;
        background-color: #cccccc;
    }

    .col2 {
        flex-grow: 1;
        height: calc(100vh - 330px);
        overflow-y: auto;
    }

    .col3 {
        height: 70px;
        background-color: #cccccc;
    }

	/*Gesallung e Links */
	.register-link, .forgot-password-link {
		display: block;
		margin-top: 10px;
		text-decoration: none;
		color: #ffffff;
	}

    table {
        width: 100%;
        border-collapse: collapse;
		  font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		  font-size: 16px; /* Grundlegende Schriftgröße */
    }

    th, td {
        border: 1px solid #ccc;
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;		
        padding: 5px;
    }
	
	/* Abwechselnde Zeilenfarben für die Tabelle */
	#liste tr:nth-child(odd) {
		background-color: #f9f9f9; /* Helle Farbe für ungerade Zeilen */
	}

	#liste tr:nth-child(even) {
		background-color: #e3e3e3; /* Dunkle Farbe für gerade Zeilen */
	}	
	


 .overlay {
        position: absolut   /*fixed; */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.3); /* Halbtransparenter Hintergrund */
        display: none; /* Standardmäßig ausgeblendet */
        z-index: 9999; /* Hoher z-Index, um das Overlay über anderen Inhalten zu platzieren */
    }

    .loading-indicator {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: green;
        font-size: 24px;
    }	
	
	.flat-button {
	  display: inline-block;
	  padding: 10px 20px;
	  margin: 10px; 
	  background-color: #999999; /* Hintergrundfarbe */
	  color: #fff; /* Textfarbe */
	  text-align: center;
	  text-decoration: none;
	  border:  2px solid #ffffff;
	  border-radius: 5px;
	  cursor: pointer;
	  font-size: 16px;
	  
	}

	/* Hover-Effekt: Farbe ändert sich beim Überfahren mit der Maus */
	.flat-button:hover {
	  background-color: #00bb00; 
	}

	/* Aktiver Zustand: Farbe ändert sich, wenn der Button gedrückt wird */
	.flat-button:active {
	  background-color: #ff0000;
	}
	
	/* Stil für die Tabelle mit grüner Rahmenfarbe */
	.search-table {
		width: 100%;
		border-collapse: collapse;
		border: 1px solid green;		/* Grüne Rahmenfarbe */	
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;
	}

	/* Stil für Tabellenzeilen mit grüner Rahmenfarbe */
	.search-table tr {
	  border-bottom: 1px solid green; /* Grüne Rahmenfarbe für Zeilen */
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;	  
	}

	/* Stil für Tabellenelemente (Zellen) mit grüner Rahmenfarbe */
	.search-table th, .search-table td {
	  border: 1px solid green; /* Grüne Rahmenfarbe für Zellen */
	  padding: 6px;
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;
	  text-align: left;
	}

	/* Stil für Überschriften (th) in der Tabelle */
	.search-table th {
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;
		background-color: #f2f2f2; /* Hintergrundfarbe der Überschriften */
		color: green;  
	}



	/* gestalltung Formulare */	
        label {
            display: block;
            margin-bottom: 5px;
            color: #ffffff;
        }	
	
	
    .reg-div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		max-width: 400px;
		margin: 0 auto;
		padding: 20px;
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);        width: 500px;
        background-color: rgba(0, 0, 0, 0.5); /* Halbtransparenter Hintergrund */
        z-index: 9999; /* Hoher z-Index, um das Overlay über anderen Inhalten zu platzieren */

    }

	.vid-div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		max-width: 852px;
		margin: 0 auto;
        width: 852px;
        /*   background-color: rgba(0, 0, 0, 0.5);Halbtransparenter Hintergrund */
        z-index: 9999; /* Hoher z-Index, um das Overlay über anderen Inhalten zu platzieren */
	}

	.msg-div {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
		max-width: 600px;
		margin: 0 auto;
        width: 600px;
        z-index: 9999; /* Hoher z-Index, um das Overlay über anderen Inhalten zu platzieren */
	}
		
	/* Standard-Radio-Button-Grafik Ändern*/

	input[type="radio"] {
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		outline: none;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		border: 2px solid #ccc;
        cursor: pointer;
		font-family: Arial, sans-serif; /* Open Sans als Schriftart verwenden */
		font-size: 16px; /* Grundlegende Schriftgröße */
		text-decoration: none;		
	}

	/* Stil für den ausgewählten Radio-Button */
	input[type="radio"]:checked {
		background-color: green; /* Ändere die Farbe hier auf Grün */
		border-color: green;
	}	
	
	.form-group {
		margin-bottom: 20px;
		width: 400px;
	}

	label {
		font-family: Arial, sans-serif;
		display: block;
		font-weight: bold;
	}

	input[type="text"],
	input[readonly],	
	input[type="email"],
	input[type="password"] {
		width: 100%;
		padding: 10px;
		margin-bottom: 10px;
		font-size: 16px;
		border: 1px solid #ccc;
		border-radius: 4px;
		cursor: pointer; /* Zeiger-Cursor */
	}
	
	select {
		width: 100%; /* Breite auf 100% setzen, um es an den Container anzupassen */
		padding: 10px; /* Innenabstand anpassen */
		font-size: 16px; /* Schriftgröße anpassen */
		border: 1px solid #ccc; /* Rand hinzufügen */
		border-radius: 5px; /* Abgerundete Ecken */
		background-color: #fff; /* Hintergrundfarbe */
		color: #333; /* Textfarbe */
		cursor: pointer; /* Zeiger-Cursor */
	}
	

	.form-group:last-child {
		margin-bottom: 0;
	}	
	

</style>