:root {
    --custom-color: #a0ce4e;
    --custom-color-green: #a0ce4e;
    --custom-color-yellow: rgb(234, 222, 49);
    --custom-color-red: rgb(221, 56, 34);

    
}

html {
    font-size: 16px; /* Standard-Schriftgröße für größere Bildschirme */
}

body {
    font-size: 1rem; /* Entspricht 16px auf großen Bildschirmen, 12px auf kleinen */
}

.bg-light {
    background-color: #f8f9fa !important; /* Override Bootstrap bg-light */
}

.column-header {
    margin-bottom: 1px;
    font-size: 1.2rem; /* Entspricht 19.2px auf großen Bildschirmen, 14.4px auf kleinen */
}


.custom-row {
    background-color: inherit !important; /* wichtig: eigene Farbe priorisieren */
}

.custom-row[data-color="red"] { background-color: var(--custom-color-red) !important; }
.custom-row[data-color="yellow"] { background-color: var(--custom-color-yellow) !important; }
.custom-row[data-color="green"] { background-color: var(--custom-color-green) !important; }
.custom-row[data-color="white"] { background-color: white !important; }

.table td, 
.table th {
    padding-top: 1px;
    white-space: nowrap;
    border-bottom: none; /* Kein unterer Rand für die Tabellenzellen */
    font-size: 0.9rem; /* Entspricht 14.4px auf großen Bildschirmen, 10.8px auf kleinen */
}

.table th {
    font-weight: bold; /* Fettgedruckte Überschriften für bessere Sichtbarkeit */
}

label {
    font-weight: bold;
}

.form-group {
    margin-bottom: 1rem; /* Standardabstand zwischen den Eingabefeldern und Labels */
}
/*Test*/
.ui-autocomplete {
    max-height: 250px;  /* Maximale Höhe der Dropdown-Liste */
    overflow-y: auto;   /* Vertikales Scrollen bei Überschreitung der Höhe */
    overflow-x: hidden; /* Horizontales Scrollen verhindern */
    z-index: 1000;      /* Stellt sicher, dass das Dropdown über anderen Elementen angezeigt wird */
}

/* Nummern-Spalte */
.col-nr {
    width: 40px;
    text-align: center;
}

/* Heimspieler- und Gastspieler-Spalten */
.col-homeplayer, .col-guestplayer {
    width: auto;
    min-width: 150px;
}

/* HCP-Spalten */
.col-hcp {
    width: 80px;
    max-width: 80px;
    min-width: 80px;
}

/* Ergebnis-Spalte */
.col-result {
    width: 80px;
    max-width: 80px;
    min-width: 80px;
    text-align: center;
}

/* Punkte-Spalte */
.col-score {
    width: 80px;
    max-width: 80px;
    min-width: 80px;
    text-align: center;
}

/* Optimierungen für kleine Bildschirme */
@media only screen and (max-width: 575px) {
    .form-control {
        font-size: 1rem; /* Entspricht 12px auf kleinen Bildschirmen */    
    }

    label {
        font-size: 1rem; /* Entspricht 12px auf kleinen Bildschirmen */
    }

    .container-fluid {
        padding-right: 0;
        padding-left: 0;
    }

    .column-header {
        font-size: 1rem; /* Entspricht 12px auf kleinen Bildschirmen */
    }

    .table th,
    .table td {
        font-size: 0.9rem; /* Entspricht 10.8px auf kleinen Bildschirmen */
    }
}

/* Optimierungen für mittlere und große Bildschirme */
@media only screen and (min-width: 576px) {
    .form-control {
        font-size: 1rem; /* Entspricht 16px auf größeren Bildschirmen */
    }

    label {
        font-size: 1rem; /* Entspricht 16px auf größeren Bildschirmen */
    }

    .column-header {
        font-size: 1.2rem; /* Entspricht 19.2px auf größeren Bildschirmen */
    }

    .table th, 
    .table td {
        font-size: 0.9rem; /* Entspricht 14.4px auf größeren Bildschirmen */
    }
}