.image-container {
	 position: relative; /* Ermöglicht die Positionierung des Textes relativ zum Container */
	 width: 100%; /* Breite des Containers */
	 height: auto; /* Höhe des Containers */
	 background-image: url('TeslaCoil.jpg'); /* Setze hier die URL deines Bildes ein */
	 background-size: cover; /* Decke den gesamten Container mit dem Bild ab */
	 background-position: center; /* Zentriere das Bild */
	 color: #e9e1f0; /* Textfarbe */
	 text-align: center; /* Zentriere den Text */
}
.ueberschrift {
    display: flex;/* Aktiviert Flexbox */
    justify-content: center;
    align-items: center;/* Zentriert die Elemente vertikal */
    margin: 0;
}
/* Container für das Grid */
.a {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 10px;
    max-width: 3200px;
}        
.h1 {
	padding-right: 200px;
	padding-left: 200px;
}
.a {
	text-decoration: none; /* Entfernt die Unterstreichung des Links */
	color: black; /* Linkfarbe */ 
	margin-bottom: 20px;
	margin-top: 10px;
	display: inline-block; /* Damit der Link wie ein Blockelement aussieht */
	padding: 10px 20px; /* Innenabstand für den Knopf */
	background-color: #9b9c9a; /* Hintergrundfarbe des Knopfs */
	text-decoration: none; /* Keine Unterstreichung */
	border-radius: 5px; /* Abgerundete Ecken */
	transition: background-color 0.3s; /* Übergangseffekt für den Hintergrund */
}
.a:hover {
	background-color: darkgray; /* Hintergrundfarbe beim Hover (wenn der Mauszeiger darüber fährt) */
}
.text {
	position: absolute; /* Positioniere den Text absolut */
	top: 37.5%; /* Vertikale Mitte */
	left: 50%; /* Horizontale Mitte */
	transform: translate(-50%, -50%); /* Verschiebe den Text um die Hälfte seiner Größe zurück */
	font-size: 24px; /* Schriftgröße */
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Schatten für bessere Lesbarkeit */
	color:white;
}
nav {
	width: 100%;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 10px;
	background-color: grey
}
.nav {
	padding: 100px;
	display: inline-block; /* Damit der Link wie ein Blockelement aussieht */
	padding: 10px 20px; /* Innenabstand für den Knopf */
	margin-right: 100px; /* Außenabstand für den Knopf */
	margin-left: 100px;
	background-color: #9b9c9a; /* Hintergrundfarbe des Knopfs */
	color: black; /* Textfarbe */
	text-decoration: none; /* Keine Unterstreichung */
	border-radius: 5px; /* Abgerundete Ecken */
	transition: background-color 0.3s; /* Übergangseffekt für den Hintergrund */
}
.nav:hover {
	background-color: darkgray; /* Hintergrundfarbe beim Hover (wenn der Mauszeiger darüber fährt) */
}
ul {           
	list-style-type: none; /* Entfernt die Aufzählungszeichen */
}
header, footer {
    /*width: 100%;*/
    text-align: center;
    background-color: #333;
    color: white;
	/*margin: 10px;*/
	padding: 10px;
}
.container {
	display: grid;
    grid-template-columns: 1fr 1fr; /* Zwei gleich große Spalten */
    align-items: center; /* Vertikale Ausrichtung */
}
img {       
	max-width: 100%; /* Bild responsive machen */
	height: auto;
}
.img {
	width: 500px;
	padding-left: 20%;
}
p {
	border: 2px solid black; /* Rahmen um den Kasten */
	background-color: lightgray; /* Hintergrundfarbe des Kastens */
	padding: 20px; /* Innenabstand innerhalb des Kastens */
	margin: 20px; /* Abstand um den Kasten herum */
	border-radius: 5px; /* Abgerundete Ecken (optional) */
}
figcaption{
	color: black;
}
table {
	width: 100%; /* Breite der Tabelle */
	border-collapse: collapse; /* Entfernt Abstände zwischen Zellen */
	margin-top: 20px; /* Abstand über der Tabelle */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Schatten für die Tabelle */
	border-radius: 8px; /* Abgerundete Ecken */
}

th, td {
	border: 1px solid #ddd; /* Rand um die Zellen */
	padding: 12px; /* Innenabstand in den Zellen */
	text-align: left; /* Textausrichtung */
}

th {
	background-color: #333; /* Hintergrundfarbe für die Kopfzeilen */
	color: white; /* Textfarbe für die Kopfzeilen */
	font-weight: bold; /* Fettdruck für die Kopfzeilen */
}

tr:nth-child(even) {
	background-color: #f2f2f2; /* Hintergrundfarbe für gerade Zeilen */
}

tr:hover {
	background-color: #ddd; /* Hintergrundfarbe beim Hover über eine Zeile */
}

tr:last-child td {
	border-bottom: none; /* Entfernt den unteren Rand der letzten Zeile */
}