:root {
	/* Basis-HSL-Farben für einfache Anpassung */
	--base-hue: 204; /* HUE für ein Grün, 0-360 */
	--base-saturation: 100%; /* Sättigung */
	--base-lightness: 95%; /* Helligkeit (sehr hell) */
	--white: hsl(0, 0%, 100%);
	--black: hsl(0, 0%, 0%);
	--red: hsl(0, 100%, 50%); /* Für Fehlermeldungen */
	/* Abgeleitete Farben */
	--primary-bg-color: hsl(var(--base-hue), var(--base-saturation),
		var(--base-lightness));
	--secondary-bg-color: hsl(var(--base-hue), 10%, 85%);
	/* Leicht dunkler als primär */
	--text-color: var(--black);
	--border-color: hsl(var(--base-hue), 10%, 50%);
	/* Button Farben - JETZT KORREKT VON DER GRUNDFARBE ABGELEITET */
	--button-bg-color: hsl(var(--base-hue), 90%, 45%);
	--button-hover-bg-color: hsl(var(--base-hue), 90%, 35%);
	--button-active-bg-color: hsl(var(--base-hue), 90%, 25%);
	--button-text-color: var(--white);
	/* Tabellen Farben */
	--table-header-bg: hsl(var(--base-hue), 80%, 30%);
	/* Grundfarbe in stärkerer Form */
	--table-header-text-color: var(--white); /* Textfarbe für Header */
	--table-row-bg: hsl(var(--base-hue), 80%, 99%);
	/* Grundfarbe in abgeschwächter Form für alle Zeilen */
	--table-row-hover-bg: hsl(var(--base-hue), 50%, 95%);
	/* Mouse-Over-Effekt für Zeilen */
	--table-border-color: hsl(var(--base-hue), 10%, 80%);
	/* Panel Farben */
	--panel-header-bg: hsl(var(--base-hue), 80%, 30%);
	/* Dunkleres Blau für Panel Header */
	--panel-header-text-color: var(--white);
	/* Weißer Text im Panel Header */
	--panel-content-bg: hsl(var(--base-hue), 10%, 90%);
	/* Leicht abgesetzter Hintergrund für Panel-Inhalt */
	/* NEU: Farbe für Ihre Box */
	--box-bg-color: hsl(var(--base-hue), 5%, 92%);
	/* Eine sehr helle, leicht entsättigte Version Ihrer Grundfarbe für die Box */
	--box-shadow: hsl(var(--base-hue), 80%, 30%);
	/* Grundfarbe in stärkerer Form */
	/* Dialog Farben */
	--dialog-header-bg: hsl(var(--base-hue), 80%, 30%);
	--dialog-header-text: #ffffff;
	--dialog-content-bg: hsl(var(--base-hue), 10%, 95%);
	/* Button Farben (optional) */
	--button-success-bg: hsl(140, 60%, 35%);
	--button-warning-bg: hsl(40, 90%, 50%);
	--button-cancel-bg: hsl(0, 0%, 70%);
}

/* Globaler Body-Hintergrund */
body {
	background-color: var(--primary-bg-color);
	padding: 0;
	font-family: Arial, sans-serif;
	color: var(--text-color);
	transition: background-color 0.5s ease, color 0.5s ease;
	/* Transition für sanfte Farbübergänge */
}

.responsive-container, .button4-container, .button2-container,
	.tabellen-container, .centered-container, .centered-grid,
	.lightblue-section, .slider-container {
	background-color: var(--primary-bg-color);
	padding: 1rem;
	border-radius: 5px;
	display: flex;
	flex-direction: column; /* Standard: untereinander */
	gap: 1rem;
	margin-bottom: 1rem;
	transition: background-color 0.5s ease, color 0.5s ease;
	color: var(--text-color); /* Sicherstellen, dass Textfarbe stimmt */
}
/* Neue Klasse für Slider-Container mit Panel-Hintergrund */
.slider-container.slider-container-panel-bg {
	background-color: var(--panel-content-bg);
}
/* Neue Klasse für Slider-Container mit Panel-Hintergrund */
.button4-container.button-container-panel-bg {
	background-color: var(--panel-content-bg);
}

/* Media Queries für Container-Layouts */
@media ( min-width : 1000px) {
	.responsive-container {
		flex-direction: row;
	}
	.responsive-container>.text-input, .responsive-container>.error-table {
		flex: 0 0 50%; /* Kein Wachsen, kein Schrumpfen, feste 50% */
		max-width: 50%;
	}
	.responsive-container>.text-input, .responsive-container>.text2-input {
		flex: 1 1 33%;
	}
}

@media ( min-width : 500px) {
	.button4-container {
		flex-direction: row;
	}
}

@media ( min-width : 250px) {
	.button2-container {
		flex-direction: row;
	}
	.slider-container>.slider-eintrag {
		flex: 1 1 25%;
	}
	.slider-container {
		flex-direction: row; /* Elemente nebeneinander */
		align-items: center; /* Vertikal zentrieren */
	}
	.slider-container>.ui-selectonemenu,
		/* PrimeFaces SelectOneMenu Klasse */ .slider-container>.ui-outputtext
		{ /* PrimeFaces OutputText Klasse (oder h:outputText) */
		flex: 1 1 50%; /* Jedes Element nimmt 50% Breite ein */
		width: auto !important;
		/* Wichtig, um inline-style zu überschreiben */
		max-width: 50%;
	}
	.slider-container h\:outputText {
		/* Fallback für h:outputText, falls ui-outputtext nicht greift */
		width: auto !important;
		max-width: 50%;
	}
}

/* Spezifischer Text-Container innerhalb responsive-container */
.responsive-container .text-container {
	background-color: var(--secondary-bg-color);
	padding: 1rem;
	border-radius: 5px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	transition: background-color 0.5s ease, color 0.5s ease;
	color: var(--text-color);
}

/* Textarea Stile */
.text-input .ui-inputtextarea, .ui-inputtextarea {
	width: 100%;
	box-sizing: border-box;
	background-color: var(--white);
	border: 1px solid var(--border-color);
	max-height: calc(1em * 20); /* entspricht 20 Zeilen */
	font-size: 1rem;
	color: var(--text-color); /* Textfarbe der Textarea */
	transition: border-color 0.5s ease, color 0.5s ease, background-color
		0.5s ease;
}

/* PrimeFaces Panel und DataTable im Fehlerbereich */
.error-table .ui-panel, .error-table .ui-panel .ui-panel-content,
	.error-table .ui-datatable {
	background: var(--primary-bg-color);
	border: none !important;
	transition: background-color 0.5s ease, color 0.5s ease;
	color: var(--text-color);
}
/* PrimeFaces Panel Stile */
.ui-panel {
	border-color: var(--border-color) !important;
	transition: border-color 0.5s ease;
}

.ui-panel .ui-panel-titlebar {
	background-color: var(--panel-header-bg) !important;
	color: var(--panel-header-text-color) !important;
	border-color: var(--panel-header-bg) !important;
	/* Passend zum Hintergrund */
	transition: background-color 0.5s ease, color 0.5s ease, border-color
		0.5s ease;
}

.ui-panel .ui-panel-title {
	color: var(--panel-header-text-color) !important;
	transition: color 0.5s ease;
}

.ui-panel .ui-panel-content {
	background-color: var(--panel-content-bg) !important;
	border-color: var(--border-color) !important;
	color: var(--text-color); /* Textfarbe im Panel-Inhalt */
	transition: background-color 0.5s ease, border-color 0.5s ease, color
		0.5s ease;
}

/* Icons für aufklappbare Panels (+/- Symbole) */
/* Für Standard PrimeFaces Icons (Themed Icons) */
.ui-panel .ui-panel-titlebar .ui-icon {
	color: var(--white) !important;
	transition: color 0.5s ease;
}

/* Für PrimeIcons (ab PrimeFaces 6.0) */
.ui-panel .ui-panel-titlebar .pi {
	color: var(--white) !important;
	transition: color 0.5s ease;
}

/* Button-Container */
.button-container {
	display: flex;
	justify-content: center; /* Zentriert horizontal */
	gap: 10px; /* Abstand zwischen den Buttons */
	padding: 10px 0; /* Abstand oben und unten */
	/* alternativ: margin: 10px 0; wenn Abstand nach außen soll */
}

.buttontab-container {
	text-align: left;
	margin-top: 1rem;
}

/* Header Bereiche */
.header-area {
	text-align: center;
	margin: 1rem 0;
	font-size: 1.0rem;
	color: var(--text-color);
	transition: color 0.5s ease;
}

.tabheader-area {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	background-color: var(--primary-bg-color);
	transition: background-color 0.5s ease;
}

.tabheader-area h2 {
	text-align: center;
	margin: 0 auto;
	color: var(--text-color);
	transition: color 0.5s ease;
}

/* Tabellen Container Stile */
.tabellen-container {
	overflow-x: auto; /* Horizontales Scrollen ermöglichen */
	width: 100%;
	max-width: 100vw;
}

@media ( max-width : 700px) {
	.tabellen-container {
		padding: 0;
		gap: 0;
		margin-bottom: 0;
	}
}

/* Tabelle und Spalten Stile */
.tabelle {
	width: 100%; /* Passt sich dem Container an */
	border-collapse: collapse; /* Für saubere Tabellenränder */
}

/* Tabellen-Header */
.tabelle th {
	background-color: var(--table-header-bg) !important;
	color: var(--table-header-text-color) !important;
	/* Weiße Textfarbe für besseren Kontrast */
	padding: 0.8rem;
	text-align: left;
	border: 1px solid var(--table-border-color);
	transition: background-color 0.5s ease, border-color 0.5s ease, color
		0.5s ease;
	vertical-align: middle; /* HIER WURDE ES GEÄNDERT */
}

/* Tabellen-Zeilen und Zellen */
.tabelle td {
	padding: 0.8rem;
	border: 1px solid var(--table-border-color);
	background-color: var(--table-row-bg);
	/* Einheitliche abgeschwächte Grundfarbe */
	transition: background-color 0.3s ease, border-color 0.5s ease, color
		0.5s ease; /* Sanfter Übergang für Hover-Effekt */
	color: var(--text-color);
	vertical-align: middle; /* HIER WURDE ES GEÄNDERT */
}

/* Mouse-Over-Effekt für Tabellenzeilen */
.tabelle tbody tr:hover td {
	background-color: var(--table-row-hover-bg); /* Farbe beim Hover */
}

.col-turnier {
	width: 80%;
	font-size: 1.6rem;
}

.col-datum {
	width: 100px;
	font-size: 1.4rem;
}

@media ( max-width : 800px) {
	.col-datum {
		display: none; /* Spalte ausblenden */
	}
}

.col-bilder {
	width: 50px;
	font-size: 1rem;
	text-align: left;
}

@media ( max-width : 1000px) {
	.col-bilder {
		width: 15px;
	}
}

.col-liga {
	width: 100px;
	font-size: 1.4rem;
	text-align: left;
}

@media ( max-width : 1000px) {
	.col-liga {
		display: none; /* Spalte ausblenden */
	}
}

.col-heim, .col-gast {
	min-width: 500px;
	max-width: 1500px;
	font-size: 1.4rem;
	text-align: left;
}

@media ( max-width : 700px) {
	.col-heim, .col-gast {
		font-size: 1.1rem;
		text-align: left;
		min-width: 150px;
		max-width: 500px;
	}
}

@media ( max-width : 500px) {
	.col-heim, .col-gast {
		font-size: 0.8rem;
		text-align: left;
		min-width: 150px;
		max-width: 500px;
	}
}

.col-bericht {
	width: 125px;
	font-size: 1.4rem;
	text-align: left;
}

@media ( max-width : 700px) {
	.col-bericht {
		font-size: 1.1rem;
		text-align: left;
		width: 100px;
	}
}

@media ( max-width : 500px) {
	.col-bericht {
		font-size: 0.8rem;
		text-align: left;
		width: 85px;
	}
}

.col-ergebnis {
	width: 70px;
	text-align: center;
	font-size: 1.4rem;
}

@media ( max-width : 700px) {
	.col-ergebnis {
		font-size: 1.1rem;
		text-align: left;
		width: 25px;
	}
}

@media ( max-width : 500px) {
	.col-ergebnis {
		font-size: 0.8rem;
		text-align: left;
		width: 20px;
	}
}

/* Button Stile */
.ui-button, .custom-file-input, .myButtonfrei, .myButton {
	/* Grundstile für alle Buttons */
	font-size: 1rem;
	padding: 0.5em 1em;
	background-color: var(--button-bg-color) !important;
	color: var(--button-text-color) !important;
	border: none !important; /* Entfernt den sichtbaren Rahmen */
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.1s ease, color 0.5s
		ease;
	text-align: center; /* Standardmäßig zentriert */
	vertical-align: middle; /* Standardmäßig vertikal mittig */
	display: inline-flex; /* Für Flexbox-Zentrierung von Inhalt */
	align-items: center;
	justify-content: center;
	outline: none !important; /* Entfernt den blauen Fokus-Rahmen */
	box-shadow: none !important;
	/* Entfernt eventuelle vordefinierte Box-Schatten, die als Rahmen wirken könnten */
}

.ui-button:hover, .custom-file-input:hover, .myButtonfrei:hover,
	.myButton:hover {
	background-color: var(--button-hover-bg-color) !important;
	transform: translateY(-2px); /* Leichter Hoch-Effekt beim Hover */
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Schatteneffekt */
}

/* Maus-Down-Effekt (während der Verarbeitung) */
.ui-button:active, .custom-file-input:active, .myButtonfrei:active,
	.myButton:active {
	background-color: var(--button-active-bg-color) !important;
	transform: translateY(0); /* Zurück zur Ausgangsposition */
	box-shadow: none; /* Schatten entfernen */
}

/* Spezifische Button-Breiten und -Höhen */
.myButtonfrei {
	width: 100%;
	text-align: left;
}

.myButton {
	width: 100%;
	height: 40px;
	text-align: left;
}

@media ( max-width : 700px) {
	.myButton {
		font-size: 0.7rem;
		padding: 1px;
	}
}

@media ( max-width : 500px) {
	.myButton {
		font-size: 0.5rem;
		padding: none;
	}
}

/* KI Auswahl Container */
.auswahl-ki-container {
	display: flex;
	height: 100vh;
	width: 100vw;
}

.auswahl-ki-container>* {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Roter Container für Fehler/Warnungen */
.responsive-container .red-container {
	background-color: var(--red);
	padding: 10px;
	color: var(--white);
}

/* Bild- und Auswahl-Container */
#imageContainer {
	position: relative;
	display: inline-block;
}

#selectionRectangle {
	position: absolute;
	border: 2px solid var(--red);
	pointer-events: none;
	display: none;
}

.leftCol {
	white-space: nowrap;
	padding-right: 10px;
	font-weight: 600;
}

.rightCol {
	min-width: 220px;
}

/* Hover-Container (für Zeilen in Tabellen oder ähnlichem) */
.hover-container {
	position: relative;
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
	transition: background-color 0.3s ease;
}

.hover-container:hover {
	background-color: hsla(var(--base-hue), 70%, 70%, 0.1);
	/* Leicht blau, transparent */
}

.hover-container h\:outputText {
	display: block;
	width: 100%;
}

.hover-container button {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 10;
	border: none !important;
	padding: 0;
	margin: 0;
}

/* Zentrierte Container */
.centered-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	border-radius: 10px;
}

.centered-grid {
	margin: 0 auto;
	width: 100%;
}
/* Zusätzliche Stile für den transparenten Download-Button über dem Bild */
.dark-mode-download-button {
	/* Eine neue Klasse für Ihren Download-Button */
	position: absolute;
	top: 0;
	right: 0;
	/* Grundzustand: komplett transparent, kein Rahmen, keine Box-Schatten */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	outline: none !important; /* Entfernt den Fokus-Rahmen */
	width: 50px; /* An Bildbreite anpassen, falls abweichend */
	height: 50px; /* An Bildhöhe anpassen, falls abweichend */
	padding: 0; /* Standard-Padding entfernen */
	display: flex;
	/* Für die Zentrierung des Icons, falls es PrimeFaces erlaubt */
	align-items: center;
	justify-content: center;
	transition: background-color 0.3s ease;
	/* Sanfter Übergang für den Hover-Effekt */
	z-index: 10; /* Stellt sicher, dass der Button über dem Bild liegt */
}

.dark-mode-download-button .ui-button-icon-left {
	color: hsl(0, 0%, 50%);
	/* Icon-Farbe: Ein leichtes Grau, damit es sichtbar ist */
	font-size: 1.5rem; /* Icon-Größe anpassen */
	transition: color 0.3s ease;
}

.dark-mode-download-button:hover {
	/* Leichter Farbstich der Grundfarbe bei Mouse-Over */
	background-color: hsla(var(--base-hue), 50%, 50%, 0.2) !important;
	/* Leichte Grundfarbe mit Transparenz */
	cursor: pointer; /* Zeigt an, dass es klickbar ist */
}

/* Anpassung der Icon-Farbe bei Hover */
.dark-mode-download-button:hover .ui-button-icon-left {
	color: hsl(var(--base-hue), 80%, 30%) !important;
	/* Das Icon wird etwas farbiger beim Hover */
}

/* Dark Mode Anpassungen für den Download-Button */
body.dark-mode .dark-mode-download-button .ui-button-icon-left {
	color: hsl(0, 0%, 70%) !important;
	/* Im Dark Mode etwas helleres Grau für das Icon */
}

body.dark-mode .dark-mode-download-button:hover {
	background-color: hsla(var(--base-hue), 50%, 50%, 0.3) !important;
	/* Im Dark Mode etwas dunklerer Farbstich */
}

body.dark-mode .dark-mode-download-button:hover .ui-button-icon-left {
	color: hsl(var(--base-hue), 80%, 60%) !important;
	/* Icon wird im Dark Mode heller beim Hover */
}

/* Optional: Stile für den Icon selbst, falls PrimeFaces Standard-Padding o.ä. hat */
/* Sie müssen möglicherweise die genaue Klasse für das Icon im PrimeFaces-Button überprüfen */
/* Meistens ist es .ui-icon oder eine Klasse mit "pi" für PrimeIcons */
.ui-button .ui-icon, .ui-button .pi {
	/* Sicherstellen, dass Icons keine zusätzlichen Rahmen oder Hintergründe haben */
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

/* NEU: Stil für Ihre Box */
.my-custom-box {
	background-color: var(--box-bg-color);
	padding: 15px;
	border-radius: 8px;
	border: 1px solid var(--border-color);
	box-shadow: 0 2px 5px var(--box-shadow);
	transition: background-color 0.5s ease;
	/* Für sanften Übergang im Dark Mode */
	width: 100%;
	box-sizing: border-box;
}

/* Dialog Header */
.ui-dialog .ui-dialog-titlebar {
	background-color: var(--dialog-header-bg) !important;
	color: var(--dialog-header-text) !important;
	border: none;
	border-radius: 0.5rem 0.5rem 0 0;
	font-weight: bold;
}

/* Dialog Content */
.ui-dialog .ui-dialog-content {
	background-color: var(--dialog-content-bg);
	font-size: 1rem;
	padding: 1.5rem;
}

/* Dialog Footer */
.dialog-footer-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

/* Responsives Button-Layout */
@media ( max-width : 768px) {
	.dialog-footer-buttons {
		flex-direction: column;
		align-items: stretch;
	}
	.ui-dialog {
		width: 90vw !important;
	}
}

.btn-success {
	background-color: var(--button-success-bg) !important;
	color: white;
}

.btn-warning {
	background-color: var(--button-warning-bg) !important;
	color: black;
}

.btn-cancel {
	background-color: var(--button-cancel-bg) !important;
	color: black;
}

/* Für den sichtbaren Eingabebereich */
.bericht-editor .ql-editor {
	min-height: 300px !important; /* ca. 10 Zeilen */
	font-size: 1.5em !important; /* 1.5x größere Schrift */
	line-height: 1.5em !important;
}

.bericht-editor .ql-toolbar button.ql-image, .bericht-editor .ql-toolbar button.ql-video
	{
	display: none !important;
}
/* Optional: wenn du auch den Toolbar-Abstand anpassen willst */
.bericht-editor .ql-container {
	min-height: 300px;
}

.ql-align-center {
  text-align: center;
}

.ql-align-right {
  text-align: right;
}

.ql-align-left {
  text-align: left;
}

.ql-align-justify {
  text-align: justify;
}