: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;
}