/* content.css */
/* Textinhalt der Tabs */
.container label #content {
	text-align: center;
	opacity: 0.75; /* Standardmäßige geringere Sichtbarkeit */
	transition: opacity 0.8s cubic-bezier(0.11, 0.65, 0.04, 1);
	writing-mode: vertical-rl; /* Text vertikal ausrichten */
	transform: rotate(
		180deg
	); /* Text umdrehen, damit er von unten nach oben liest */
}

/* Wenn ein Tab gehovt wird, wird der Inhalt sichtbarer */
.container label:hover #content {
	opacity: 1;
	writing-mode: horizontal-tb; /* Text horizontal ausrichten */
	transform: rotate(0deg); /* Text in normale Richtung drehen */
	position: absolute;
	top: 25px;
	right: 2%;
	font-size: 4.5rem;
	font-weight: 1000;
}

.tab-content {
	display: none; /* Inhalt ist nicht sichtbar */
	color: white; /* Standard-Textfarbe */
	text-align: left;
	font-size: 1.5rem;
	position: absolute; /* Position absolut für die Anzeige */
	top: 15%; /* Positionieren */
	align-items: center;
	transform: translateX(0); /* Zentrieren */
	line-height: 1.5;
	font-weight: 400;
}

.tab-content-frontpage {
	display: none;
	color: rgb(255, 0, 0);
	text-align: left;
	font-size: 1.5rem;
	position: absolute;
	top: 15%;
	align-items: center;
	transform: translateX(0);
	line-height: 1.5;
}

/* Spezifische Stile für den Inhalt von tab_1 */
#tab_1-content h3 {
	color: rgb(0, 0, 0); /* Beispiel: Ändert die Textfarbe zu Blau */
	font-size: 1.3rem; /* Beispiel: Ändert die Schriftgröße */
	text-align: left; /* Beispiel: Text linksbündig ausrichten */
}

#tab_1-content h6 {
	color: rgb(0, 0, 0); /* Beispiel: Ändert die Textfarbe zu Grün */
	font-size: 14px; /* Beispiel: Ändert die Schriftgröße */
	font-style: italic; /* Beispiel: Macht den Text kursiv */
	text-align: left; /* Beispiel: Text linksbündig ausrichten */
}

.tab-content h1 {
	max-width: 1000px;
	margin-left: auto;
	text-align: right;
	font-weight: 600;
	font-size: 1.75rem;
}

.tab-content h3 {
	max-width: 1000px;
	margin-right: auto;
	text-align: right;
	font-weight: 300;
	font-size: 1.25rem;
}

.tab-content h6 {
	max-width: 1000px;
	text-align: right;
	font-weight: 400;
	position: relative;
	margin-left: auto;
	line-height: 1.5;
}

/* Zeige den Tab-Inhalt beim Hover an */
.container label:hover .tab-content {
	display: block; /* Inhalt wird beim Hover angezeigt */
	z-index: 10;
}