/* Grüntöne:
    #ecffeb -> sehr helles grün, fast weiß
    #d9ffd7 -> helles grün
    #b0ffae -> grün
    #45a049 -> dunkles grün
*/
    
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* Beginn: Main-Layout der Website (für alle Bildschirmgrößen)                         */

    body {
        font-family: Arial, sans-serif;   /* globale Schriftart */
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        align-items: center;
    }
    header, main, footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px;
        width: 100%;
        max-width: 800px;
    }
    header {
        background-color: #f8f9fa;
        padding: 10px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 10px;
    }
    footer {
        padding: 0px 0px 10px 0px; 
        background-color: #f8f9fa;
        text-align: center;
        margin-top: 50px;
        border-top: 1px solid #ddd;
    }

    .headerlauftextdiv {
        width: 350px;
        height: 20px;
        background-color: #f8f9fa;
        border: none;
        overflow: hidden;
        position: relative;
    }
    .headerlauftext {
        position: absolute;
        bottom: -50px;
        width: 100%;
        text-align: center;
        font-size: 14px;
        color: Crimson;
        font-weight: bold;
        animation: hochrollen 7s linear infinite;
    }
    
    
    /* - - - - - - - - Beginn: Haupt-Navigation oben  */
    nav {
        background-color: transparent;
        position: relative;
        z-index: 9999; /* Hohe Priorität für das Navigationsmenü */
    }
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
    }
    nav ul li {
        position: relative;
        margin: 0px 5px 0px 5px; 
    }
    nav ul li a { /* nicht gehoverte Ansicht des Hauptmenüs */
        display: block;
        padding: 5px 20px 5px 20px;
        color: #FFFFFF;
        background-color: #555;
        text-decoration: none;
        border-radius: 5px; 
    }
    nav ul li a:hover,
    nav ul li .navgruppe:focus {
        background-color: #555; /* hovern über dem hauptmenü */
    }
    .navlistitemdropdown .navlinks {  
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #FFFFFF;  
        border-radius: 5px;
        border: 1px solid #555;
    }
    .navlistitemdropdown:hover .navlinks,
    .navlistitemdropdown:focus-within .navlinks { 
        display: block;
        margin: 0px;
    }
    .navlistitemdropdown .navlinks a {
        display: block;
        white-space: nowrap;
        background-color: #FFFFFF;   /* hintergrundfarbe untermenü */
        color: #45a049;   /* schriftfarbe untermenü */
    }
    .navlistitemdropdown .navlinks a:hover {
        background-color: #45a049; 
        color: #ffffff;
        border-radius: 5px; 
    }
        
    nav ul li .adminnavlink {
        color: Crimson !important; 
        background-color: #ffffff !important;
    }
    nav ul li .adminnavlink:hover {
        color: #FFFFFF !important;
        background-color: Crimson !important;
    }
    
    nav .no-link {
        color: inherit; /* Farbe erben, keine spezielle Linkfarbe */
        text-decoration: none; /* Unterstreichung entfernen */
        pointer-events: none; /* Klick deaktivieren */
        cursor: default; /* Zeigt den Standard-Cursor statt den Link-Cursor */
    }
    /* - - - - - - - - Ende: Haupt-Navigation oben */
    
    
    /* - - - - - - - -  Beginn: eigene Schriftarten */
    .live-tafel_weiss16 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: white;
        font-size: 16px;
        text-align: center;
    } 
    .live-tafel_rot16 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #ff0000;
        font-size: 16px;
        text-align: center;
    } 
    .live-tafel_gruen16 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #00ff00;
        font-size: 16px;
        text-align: center;
    } 
    .live-tafel_schwarz16 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: black;
        font-size: 16px;
        text-align: center;
    } 
    .live-tafel_cyan16 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: cyan;
        font-size: 16px;
        text-align: center;
    } 
    .live-tafel_weiss24 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: white;
        font-size: 24px;
        text-align: center;
    }  
    .live-tafel_weiss30 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: white;
        font-size: 30px;
        text-align: center;
    }  
    .live-tafel_rot30 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #ff0000 ;
        font-size: 30px;
        text-align: center;
    }  
    .live-tafel_gruen30 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #00ff00;
        font-size: 30px;
        text-align: center;
    }  
    .live-tafel_schwarz32 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: black;
        font-size: 32px;
        text-align: center;
    }  
    .live-tafel_cyan30 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: cyan;
        font-size: 30px;
        text-align: center;
    }   
    .live-tafel_cyan60 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: cyan;
        font-size: 60px;
        text-align: center;
    }  
    .live-tafel_rot60 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #ff0000;
        font-size: 60px;
        text-align: center;
    }  
    .live-tafel_gruen60 {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #00ff00;
        font-size: 60px;
        text-align: center;
    }  
    
    .text_anzeigetafel_rot {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #ff0000;
        font-size: 14px;
        padding: 0px 5px 0px 5px;
    }   
    .text_anzeigetafel_gruen {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: #00ff00;
        font-size: 14px;
        padding: 0px 5px 0px 5px;
    }  
    .text_anzeigetafel_weiss {
        font-family: VCR_OSD_MONO_1, sans-serif;
        color: white;
        font-size: 14px;
        padding: 0px 5px 0px 5px;
    } 

    .text_rot {
        color: #ff0000;
    }   
    .text_gruen {
        color: #00ff00;
    }  
    .text_weiss {
        color: white;
    } 
    
    .livelogfile {
        width: 400px;
        border: 2px solid white; 
        border-collapse: collapse;
        background-color: gray;
        margin: auto;
    }
    .livelogfile th {
        border: none;
        font-size: 10px;
        background-color: #aaaaaa;
    }
    .livelogfile td {
        font-size: 11px;
        border-bottom: 1px dashed white;
        background-color: #cccccc;
    }
    .livelogfile th:nth-child(1),
    .livelogfile td:nth-child(1) { /* Spalte 1 */
        width: 20px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .livelogfile th:nth-child(2),
    .livelogfile td:nth-child(2) { /* Spalte 2 */
        width: 40px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .livelogfile th:nth-child(3),
    .livelogfile td:nth-child(3) { /* Spalte 3 */
        width: 90px;
        text-align: left;
        padding: 5px 0px 5px 0px; 
    }
    .livelogfile th:nth-child(4),
    .livelogfile td:nth-child(4) { /* Spalte 4 */
        width: 140px;
        text-align: left;
        padding: 5px 0px 5px 0px;
    }
    .livelogfile th:nth-child(5),
    .livelogfile td:nth-child(5) { /* Spalte 5 */
        width: 80px;
        text-align: left;
        padding: 5px 10px 5px 0px;
    }
    .livelogfile tr:hover {
        background-color: white; 
    }    
    /* - - - - - - - -  Ende: eigene Schriftarten */
    
    .saisonkpitabelle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #45a049; /* Hintergrundfarbe der Anzeige */
        padding: 10px;
        border: 5px solid #000; /* Äußerer Rahmen */
        border-radius: 10px; /* Abgerundete Ecken */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für 3D-Effekt */
        gap: 3px; /* Abstand zwischen den Zeilen */
    }
    .saisonkpitabelle tr {
        color: white;
        padding: 5px;
    }
    .saisonkpitabelle td {
        padding: 0 10px 0 10px;
        font-weight: bold;
    }
    
    /* - - - - - - - - Beginn: Flip-Display Anzeige und Effekte */

    .anzeigetafel {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #333; /* Hintergrundfarbe der Anzeige */
        padding: 10px;
        border: 5px solid #000; /* Äußerer Rahmen */
        border-radius: 10px; /* Abgerundete Ecken */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5); /* Schatten für 3D-Effekt */
        gap: 3px; /* Abstand zwischen den Zeilen */
    }

    .anzeigereihe {
        display: flex;
        flex-direction: row;
        justify-content: center; /* Zentrierung der Buchstaben in der Zeile */
        /*margin: 5px;*/
    }

    .splitflapimg_small {
        display: inline-block;
        width: 9px;
        height: 16px;
        background-size: cover;
        background-position: center;
        margin: 2px; /* Abstand zwischen den Buchstaben */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); /* Leichter 3D-Effekt */
        border: none; /* Entfernt den Rahmen der Buchstaben */
    }

    .splitflapimg_medium {
        display: inline-block;
        width: 19px;
        height: 32px;
        background-size: cover;
        background-position: center;
        margin: 2px; /* Abstand zwischen den Buchstaben */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); /* Leichter 3D-Effekt */
        border: none; /* Entfernt den Rahmen der Buchstaben */
    }

    .splitflapimg_large {
        display: inline-block;
        width: 38px;
        height: 64px;
        background-size: cover;
        background-position: center;
        margin: 2px; /* Abstand zwischen den Buchstaben */
        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6); /* Leichter 3D-Effekt */
        border: none; /* Entfernt den Rahmen der Buchstaben */
    }

/* - - - - - - - - Ende: Flip-Display Anzeige und Effekte */



    
    /* - - - - - - - - Beginn: Angaben für Formulare */
    .formularbereich {          /* Klasse für umschließendes DIV eines jeden Formulars (<DIV>) */
        display: flex;
        width: 100%; /* 330px */
        justify-content: center;
        margin: 25px 0px 25px 0px;
    }
    .formularklasse {           /* Klasse für das Formular selbst (<FORM>) */
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .formulartext { 
        font-size: 14px;
        color: #000000;
    } 
    
    .frmeingabefeld { /* Eingabefelder im Formular */
        display: block;
        box-sizing: border-box;
        height: 32px; 
        width: 180px;
        padding: 6px;
        margin: 5px 3px 3px 5px;
        border: 1px solid #45a049;
        border-radius: 5px;
        font-size: 14px;
        text-align: left;
    }
    .frmeingabefeldreadonly { /* Eingabefelder im Formular */
        display: block;
        box-sizing: border-box;
        height: 32px; 
        width: 180px;
        padding: 6px;
        margin: 5px 3px 3px 5px;
        border: 1px solid #45a049;
        border-radius: 5px;
        font-size: 14px;
        text-align: left;
        background-color: #dddddd;
    }
    
    .frmbutton {    /* Buttons im Formular */
        box-sizing: border-box;
        display: block;
        width: 200px;
        padding: 6px;
        margin: 20px 0 0 0; /* nur oben */
        background-color: #45a049;
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
        transition: background-color 0.3s ease; /* Weicher Übergang für den Hover-Effekt */
    }
    .frmbutton:hover {
        background-color: #57b259;
    }
    .cancelbutton {    /* Buttons im Formular */
        box-sizing: border-box;
        display: block;
        width: 200px;
        padding: 6px;
        margin: 20px 0 0 0; /* nur oben */
        background-color: Crimson;
        border-radius: 10px;
        color: #ffffff;
        font-size: 14px;
        transition: background-color 0.3s ease; /* Weicher Übergang für den Hover-Effekt */
    }
    .sort-button {
        background-color: #f0f0f0;
        border: 1px solid #ccc;
        padding: 5px 10px;
        cursor: pointer;
        font-size: 14px;
    }

    /* - - - - - - - - Ende: Angaben für Formulare */  
    
    a {
        color: #45a049;
        text-decoration: none;
        padding: 5px 10px;
        /* border: 1px solid transparent; */
       /* border-radius: 5px;*/
    }
    a:hover {
        color: #ffffff;
        background-color: #45a049;
        text-decoration: none;
        /* border: 1px solid #45a049; */
        border-radius: 5px;
    }
    a.spielerlink {
        color: black; 
    }
    a.spielerlink:hover {
        color: white;  
        background-color: #45a049; 
        border-radius: 3px;
    }

    .fussnote {
        width: 80%; 
        text-align: justify;
        font-size:0.8em;
    }
    .info { /* Text "Info" in Userdaten für Tooltip */
        font-size: 0.8em;
        color: #45a049;
        text-decoration: underline;
        cursor: pointer;
        position: relative;
    }

    /* versteckte Checkbox für Tooltip */
    .infoCheckbox {
        display: none;
    }

    /* Tooltip-Darstellung */
    .infoCheckbox + .info::after {
        content: attr(data-tooltip);
        position: absolute;
        display: none;
        background-color: #ffffff;
        color: #45a049;
        border: 1px solid #555;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
        z-index: 10;
        width: 250px; 
        white-space: normal;
        left: -200px; 
        top: -55px;
        text-align: justify; 
    }

    /* Tooltip anzeigen, wenn Checkbox aktiviert ist */
    .infoCheckbox:checked + .info::after {
        display: block;
    }
    
    .links  { text-align: left; }
    .rechts { text-align: right; }
    .mitte  { text-align: center; }
    
    .hover-row:hover {
        background-color: grey;
    }
    
    .dopologo {
        width: 200px; 
        height: 200px;
    }
    .header-klein { /* Text "Poker Team DoPo Esslingen" ganz oben */
        margin: 5px 0px 0px 0px;
        background-color: transparent;
        font-size: 14px;
        color: #000000;
    }
  
    .header-gross { /* Ausweis der aktuell ausgewählten Seite */
        padding: 5px;
        margin: 15px 0px 10px 0px;
        border: 1px solid black;
        border-radius: 5px;
        background-color: transparent;
        font-size: 16px;
        font-weight: bold;
        color: #000000;
    }

    .footerdirektlink { /* Ausweis der aktuell ausgewählten Seite */
        font-family: Arial; 
        font-size: 10pt;
        font-weight:bold;
        color: #333333;
        background-color: transparent;
        cursor: pointer;
        position: relative; 
    } 
    
    .footerlive { /* Ausweis der aktuell ausgewählten Seite */
        font-size: 12px;
        color: #45a049;
        cursor: pointer; /* Zeigt an, dass es klickbar ist */
        position: relative; /* Erforderlich für das Tooltip */
    }

    .footercopyright {
        font-family: Arial; 
        font-size: 10pt; 
        color: #333333;
        margin: 10px 0px 10px 0px;
    } 
    .footerminitext {
        font-family: Arial; 
        font-size: 10pt;
        color: #333333;
        margin: 5px 0px 0px 0px;
        background-color: transparent;
    }   
    .myheadline {
        font-size: 16px;
        font-weight: bold;
        color: #000000; 
        margin-bottom: 0px;  
    }
    .mysubline {
        font-size: 14px;
        color: #666; 
        margin-top: 0px; 
    }
    .actionpositive {
        width: 80%;
        color: green;
        border: 1px solid green;
        border-radius: 10px;
        padding: 15px;
        margin: 30px 0px 30px 0px;
        text-align: center;
    }
    .actionnegative {
        width: 80%;
        color: Crimson;
        border: 1px solid Crimson;
        border-radius: 10px;
        padding: 15px;
        margin: 30px 0px 30px 0px;
        text-align: center;
    }
    .infoanmeldungerforderlich {
        width: 80%;
        color: white;
        border: 3px solid Crimson;
        border-radius: 10px;
        padding: 15px;
        margin: 30px 0px 30px 0px;
        text-align: center;
    }

    .rangbesser {
        color: green;
        font-weight: bold;
        font-size: 0.8em;
    }
    .rangschlechter {
        color: Crimson;
        font-weight: bold;
        font-size: 0.8em;
    } 
    .rangneu {
        color: green;
        font-weight: bold;
        font-size: 0.8em;
    }
    
    .spielerdaten label { 
        font-weight: bold;
        margin: 10px;
    }
    
.spielerdatendropdown {
    font-size: 12pt;        /* Schriftgröße */
    height: 32px;           /* Höhe */
    width: 180px;           /* Breite (optional, anpassbar) */
    background-color: #ffffff; /* Hintergrundfarbe */
    color: #333333;         /* Schriftfarbe */
    border: 1px solid #45a049; /* Rahmenfarbe und Stil */
    border-radius: 5px;     /* Abgerundete Ecken, falls gewünscht */
    padding: 5px;           /* Innenabstand */
}

.spieltagdropdown {
    font-size: 12pt;        /* Schriftgröße */
    height: 32px;           /* Höhe */
    width: 130px;           /* Breite (optional, anpassbar) */
    background-color: #45a049; /* Hintergrundfarbe */
    color: #ffffff;         /* Schriftfarbe */
    border: 1px solid #000000; /* Rahmenfarbe und Stil */
    border-radius: 5px;     /* Abgerundete Ecken, falls gewünscht */
    padding: 5px;           /* Innenabstand */
}

.quartalsstacksdropdown {
    font-size: 12pt;        /* Schriftgröße */
    height: 32px;           /* Höhe */
    width: 150px;           /* Breite (optional, anpassbar) */
    background-color: #45a049; /* Hintergrundfarbe */
    color: #ffffff;         /* Schriftfarbe */
    border: 1px solid #000000; /* Rahmenfarbe und Stil */
    border-radius: 5px;     /* Abgerundete Ecken, falls gewünscht */
    padding: 5px;           /* Innenabstand */
}

.saisondropdown {
    display: inline-block;
    font-size: 10pt;       
    font-weight: bold;
    height: 32px;   
    width: 115px; 
    background-color: #ffffff; 
    color: #333333; 
    border: 1px solid #45a049; 
    border-radius: 5px; 
    padding: 5px; 
}

.mehrzeiligeseingabefeld { 
    display: block;
    box-sizing: border-box;
    height: 36px; 
    width: 100px;
    padding: 4px;
    border: 1px solid #45a049;
    border-radius: 5px;
    font-size: 12px;
    text-align: left;
    overflow-y: auto; /* Zeigt Scrollbalken, wenn nötig */
    resize: vertical; /* Ermöglicht Anpassung der Höhe */
    white-space: pre-wrap; /* Erlaubt Umbrüche im Text */
}

.kurzeseingabefeldRot { 
    height: 32px; 
    width: 30px; 
    border: 1px solid #45a049; 
    border-radius: 5px; 
    font-size: 12px; 
    font-weight: bold;
    text-align: center; 
    color: Crimson;
}
.kurzeseingabefeldGruen { 
    height: 32px; 
    width: 30px; 
    border: 1px solid #45a049; 
    border-radius: 5px; 
    font-size: 12px; 
    font-weight: bold;
    text-align: center; 
    color: #45a049;
}
.kurzeseingabefeldSchwarz { 
    height: 32px; 
    width: 30px; 
    border: 1px solid #45a049; 
    border-radius: 5px; 
    font-size: 12px; 
    font-weight: bold;
    text-align: center; 
    color: black;
}

    .spielerdaten .profilbild {
        width: 200px; 
        height: auto; 
        border: 1px solid black;
    }
    #map {              /* Google-Maps-Kartendarstellung */
        width: 100%;
        height: 100vh;
        margin: 0;
        padding: 0;
    }
    .infoWindowImage {  /* Google-Maps-Kartendarstellung */
        border: 1px solid #000000;
        max-width: 120px;
        max-height: 150px;
        object-fit: contain;
    }
    
    .debug-table {
        border: 1px solid Crimson;
        border-collapse: collapse;
        font-size: 0.8em;
    }
    .debug-table td {
        border: 1px dashed Crimson;
        padding: 5px 10px 5px 10px; 
        text-align: left;
    }
    .debug-table tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .debug-table tr:hover td {
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }
    
  
    .saisonsiegertabelle {
        width: 550px;
        border: none;
        border-collapse: collapse;
        font-family: 'Consolas', 'Menlo', 'Fira Code', monospace;
        font-size: 12px;
    }
    .saisonsiegertabelle th {
        padding: 10px 0px 10px 10px;
        text-align: left;
        background-color: #000000;
        color: #ffffff;
    }
    .saisonsiegertabelle td {
        border-bottom: 1px dashed #45a049;
        padding: 5px 10px 5px 10px; 
    }
    .saisonsiegertabelle td:nth-child(3) {
        text-align: left;
    }
    .saisonsiegertabelle td:nth-child(4) { 
        text-align: left;
    }
    .saisonsiegertabelle td:nth-child(5) { 
        text-align: left;
    }
    .saisonsiegertabelle tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .saisonsiegertabelle tr:hover td {
        font-weight: bold;
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }

    .eliminationstable {
        width: 300px;
        border: none;
        border-collapse: collapse;
        font-family: 'Consolas', 'Menlo', 'Fira Code', monospace;
        font-size: 12px;
    }
    .eliminationstable th {
        padding-bottom: 10px; /* Fügt Abstand innerhalb der Kopfzeilen ein */
    }
    .eliminationstable td {
        border-bottom: 1px dashed #45a049;
        padding: 5px 10px 5px 10px; 
    }
    .eliminationstable td:nth-child(2) {
        text-align: right;
    }
    .eliminationstable td:nth-child(3) { 
        text-align: right;
    }
    
    .punkteliste {
        width: 240px;
        border: none;
        border-collapse: collapse;
    }
    .punkteliste td {
        border-bottom: 1px dashed #45a049;
        padding: 5px 10px 5px 10px; 
    }
    .punkteliste td:nth-child(1) { /* Spalte 1 */
        text-align: left;
    }
    .punkteliste td:nth-child(2) { /* Spalte 2 */
        text-align: right;
    }
    .punkteliste tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .punkteliste tr:hover td {
        font-weight: bold;
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }

    
    .turniere {
        width: 350px;
        border: none;
        border-collapse: collapse;
    }
    .turniere td {
        border-bottom: 1px dashed #45a049;
        padding: 5px 10px 5px 10px; 
    }
    .turniere td:nth-child(1) { /* Spalte 1 */
        text-align: left;
    }
    .turniere td:nth-child(2) { /* Spalte 2 */
        text-align: right;
    }
    .turniere tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .turniere tr:hover td {
        font-weight: bold;
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }
    
    .blindstufen {
        width: 360px;
        border: none;
        border-collapse: collapse;
    }
    .blindstufen td {
        border-bottom: 1px dashed #45a049;
    }
    .blindstufen th:nth-child(1),
    .blindstufen td:nth-child(1) { /* Spalte 1 */
        width: 100px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .blindstufen th:nth-child(2),
    .blindstufen td:nth-child(2) { /* Spalte 2 */
        width: 100px;
        text-align: center;
        padding: 5px 0px 5px 0px; 
    }
    .blindstufen th:nth-child(3),
    .blindstufen td:nth-child(3) { /* Spalte 3 */
        width: 80px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    }
    .blindstufen th:nth-child(4),
    .blindstufen td:nth-child(4) { /* Spalte 4 */
        width: 80px;
        text-align: right;
        padding: 5px 10px 5px 0px;
    }
    .blindstufen tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .blindstufen tr:hover td {
        font-weight: bold;
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }
    .blindstufen .pause td {
        color: #45a049; /* Grüne Schriftfarbe */
        font-style: italic; /* Kursiver Text */
        background-color: #f9fff9; /* Ganz leichtes Grün als Hintergrund */
    }
    .blindstufen .pause:hover td {
        border: 1px solid #e0f4e0; /* Gleiche Farbe wie der Hintergrund der Pause-Zeilen beim Hovern */
        background-color: #e0f4e0;
    }


    .ranglistenbonus {
        width: 280px;
        border: none;
        border-collapse: collapse;
    }
    .ranglistenbonus td {
        border-bottom: 1px dashed #45a049;
    }
    .ranglistenbonus th:nth-child(1),
    .ranglistenbonus td:nth-child(1) { /* Spalte 1 */
        width: 160px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .ranglistenbonus th:nth-child(2),
    .ranglistenbonus td:nth-child(2) { /* Spalte 2 */
        width: 100px;
        text-align: right;
        padding: 5px 0px 5px 0px; 
    }
    .ranglistenbonus th:nth-child(3),
    .ranglistenbonus td:nth-child(3) { /* Spalte 3 */
        width: 100px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    }
    .ranglistenbonus tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .ranglistenbonus tr:hover td {
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }
    .ranglistenbonus .zwischenheadline td {
        color: #45a049; /* Grüne Schriftfarbe */
        font-style: italic; /* Kursiver Text */
        background-color: #f9fff9; /* Ganz leichtes Grün als Hintergrund */
    }
    .ranglistenbonus .zwischenheadline:hover td {
        border: 1px solid #e0f4e0; /* Gleiche Farbe wie der Hintergrund der Pause-Zeilen beim Hovern */
        background-color: #e0f4e0;
    }
    
    
    
    .adminspieltagtabelle {
        width: 550px;
        border: none;
        border-collapse: collapse;
    }
    .adminspieltagtabelle td {
        border-bottom: 1px dashed #45a049;
        font-size: 14px;
    }
    .adminspieltagtabelle th:nth-child(1),
    .adminspieltagtabelle td:nth-child(1) { /* Spalte 1 */
        width: 80px;
        text-align: left;
        padding: 5px; 
    }
    .adminspieltagtabelle th:nth-child(2),
    .adminspieltagtabelle td:nth-child(2) { /* Spalte 2 */
        width: 370px;
        text-align: left;
        padding: 5px;  
    }
    .adminspieltagtabelle th:nth-child(3),
    .adminspieltagtabelle td:nth-child(3) { /* Spalte 4 */
        width: 50px;
        text-align: center;
        padding: 5px; 
    }
    .adminspieltagtabelle th:nth-child(4),
    .adminspieltagtabelle td:nth-child(4) { /* Spalte 5 */
        width: 50px;
        text-align: left;
        padding: 5px;
    }
    .adminspieltagtabelle tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .adminspieltagtabelle tr:hover td {
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }

    
        
    .adminsaisontabelle {
        width: 260px;
        border: none;
        border-collapse: collapse;
    }
    .adminsaisontabelle tr {
        vertical-align: middle;
    }
    .adminsaisontabelle td {
        border-bottom: 1px dashed #45a049;
        font-size: 14px;
        vertical-align: middle;
    }
    .adminsaisontabelle th:nth-child(1),
    .adminsaisontabelle td:nth-child(1) { /* Spalte 1 */
        width: 80px;
        text-align: left;
        padding: 5px; 
    }
    .adminsaisontabelle th:nth-child(2),
    .adminsaisontabelle td:nth-child(2) { /* Spalte 2 */
        width: 180px;
        text-align: left;
        padding: 5px;  
    }
    .adminsaisontabelle tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .adminsaisontabelle tr:hover td {
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }

    
    
    
    
    .ul-li-seitenmitte ul {
        list-style-type: none; /* Keine Aufzählungszeichen */
        margin: 0 auto; /* Zentrieren */
        padding: 0; /* Kein zusätzlicher Abstand um die Liste */
        max-width: 80%; /* Maximale Breite von 80 % */
    }
    .ul-li-seitenmitte ul li {
        background-color: #f0f0f0; /* Hintergrundfarbe der Listenelemente */
        margin-bottom: 5px; /* Abstand zwischen den Listenelementen */
        padding: 10px; /* Innenabstand der Listenelemente */
        border-radius: 5px; /* Abgerundete Ecken */
        transition: background-color 0.3s ease; /* Glatter Übergang bei Farbänderung */
    }
    .ul-li-seitenmitte ul li:hover {
        background-color: #dcdcdc; /* Hellgrauer Hintergrund beim Hovern */
    }


    .tabellenRahmen {
        width: 400px;
        margin: 0 auto; /* Zentriert das div horizontal */
        text-align: center; /* Zentriert den Text innerhalb des div */
        border: 1px solid #45a049; /* Beachte: Es sollte "1px" statt "1 px" sein */
        border-collapse: collapse;
    }

    .DealerJeTisch {
        width: 400px;
        border-collapse: collapse;
        margin: 10px auto; /* Zentriert die Tabelle horizontal */
    }
    .DealerJeTisch th { 
        background-color: white;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: left;
        padding: 5px 10px 5px 10px;
    } 
    .DealerJeTisch td {
        padding: 5px 10px 5px 10px;
        text-align: left;
    }
    .no-dealer {
        background-color: Crimson;
        color: white;
        text-align: left;
    }
    
    .gamedayAktiveSpieler {
        width: 500px;
        border: none;
        border-collapse: collapse;
    }
    .gamedayAktiveSpieler th { 
        background-color: white;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: left;
        font-size: 12px;
    } 
    .gamedayAktiveSpieler td {
        border-bottom: 1px dashed #45a049;
        padding: 10px 0px 10px 0px;
    }
    .gamedayAktiveSpieler tr:hover {
        background-color: Honeydew; /* Hellgrauer Hintergrund beim Hovern */
    }
    .gamedayAktiveSpieler tr:hover td {
        border: 1px solid Honeydew; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }


    .spieltagteilnehmer {
        width: 360px;
        border: none;
        border-collapse: collapse;
    }
    .spieltagteilnehmer th { 
        background-color: white;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        text-align: left;
        font-size: 12px;
    } 
    .spieltagteilnehmer td {
        border-bottom: 1px dashed #45a049;
        padding: 10px 0px 10px 0px;
    }
    .spieltagteilnehmer tr:hover {
        background-color: Honeydew; /* Hellgrauer Hintergrund beim Hovern */
    }
    .spieltagteilnehmer tr:hover td {
        border: 1px solid Honeydew; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }

    
    
    
    .eliminationdokumentation {
        width: 360px;
        border: none;
        border-collapse: collapse;
    }
    .eliminationdokumentation td {
        border-bottom: 1px dashed #45a049;
        padding: 10px 0px 10px 0px;
        text-align: left;
    }
    .eliminationdokumentation tr:hover {
        background-color: Honeydew; /* Hellgrauer Hintergrund beim Hovern */
    }
    .eliminationdokumentation tr:hover td {
        border: 1px solid Honeydew; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }
    
    
    .myBigButtonJa {
        font-size: 18px; 
        font-weight: bold;
        width: 80px;
        padding: 10px 20px; 
        background-color: #45a049; /*#4CAF50; */ 
        color: white; 
        border: none; 
        border-radius: 10px; 
        cursor: pointer; 
    }

    .myBigButtonNein {
        font-size: 18px; 
        font-weight: bold;
        width: 80px;
        padding: 10px 20px; 
        background-color: Crimson; 
        color: white; 
        border: none; 
        border-radius: 10px; 
        cursor: pointer; 
    }

    .myBigButtonDisabled {
        font-size: 18px; 
        font-weight: normal;
        width: 80px;
        padding: 10px 20px; 
        background-color: #dcdcdc; 
        color: white; 
        border: none; 
        border-radius: 10px; 
        cursor: not-allowed;
    }

    .myEliminationButton {
        font-size: 18px; 
        font-weight: normal;
        width: 80px;
        padding: 10px 20px; 
        background-color: #4c7c3c; 
        color: white; 
        border: none; 
        border-radius: 10px; 
        cursor: not-allowed;
    }
    
    .SpielerButton {
        font-size: 18px; 
        font-weight: bold;
        width: 140px;
        padding: 10px; 
        background-color: Crimson; 
        color: white; 
        border: none; 
        border-radius: 10px; 
        cursor: pointer; 
    }
    .AnnulierenButton {
        font-size: 14px; 
        font-weight: bold;
        width: 20px;
        padding: 3px; 
        background-color: Crimson; 
        color: white; 
        border: none; 
        border-radius: 5px; 
        cursor: pointer; 
    }
    
    .confirmDeletionButton {
        font-size: 18px; 
        font-weight: bold;
        width: 240px;
        padding: 10px; 
        background-color: white; 
        color: Crimson; 
        border: none; 
        border-radius: 10px; 
        cursor: pointer; 
    }    
    .confirmDeletionButton:hover {
        font-weight: bold; 
        background-color: Crimson; 
        color: White; 
        border-radius: 10px; 
        cursor: pointer; 
    }
    .cancelDeletionButton {
        font-size: 18px; 
        font-weight: bold;
        width: 240px;
        padding: 10px; 
        background-color: white; 
        color: #45a049; 
        border: none; 
        border-radius: 10px; 
        cursor: pointer; 
    }    
    .cancelDeletionButton:hover {
        font-weight: bold; 
        background-color: #45a049; 
        color: White; 
        border-radius: 10px; 
        cursor: pointer; 
    }
    
    
.grosseCheckbox { 
    display: flex; /* Ermöglicht Flexbox-Layout */ 
    display: inline-block; 
    position: relative; 
    width: 40px; /* Breite der Checkbox */ 
    height: 40px; /* Höhe der Checkbox */ 
    margin: 0px; /* Abstand */ 
    background-color: white; /* Hintergrundfarbe */ 
    border-radius: 10px; /* Abgerundete Ecken */ 
    cursor: pointer; 
} 

.grosseCheckbox input[type="checkbox"] { 
    display: flex; 
    appearance: none; /* Entfernt die Standarddarstellung */ 
    position: absolute; /* Position außerhalb der Ansicht */ 
    width: 40px; 
    height: 40px; 
    margin: 0; 
    cursor: pointer; 
    background-color: Crimson; /* Hintergrundfarbe */ 
   /* border: 3px solid Crimson; */
    border-radius: 10px; /* Abgerundete Ecken */ } 

.grosseCheckbox input[type="checkbox"]:checked { 
    display: flex; 
    background-color: #45a049; /* Farbe wenn abgehakt */ 
    border-radius: 10px; /* Abgerundete Ecken */ 
    border: none; 
}
.checkboxText {
    padding-left:11px;
    padding-top: 10px;
    color: white; 
    position: absolute;
    z-index: 1; 
    pointer-events: none;
}

    
    
    .punktejespieltag {
        width: 560px;
        border: none;
        border-collapse: collapse;
        margin: 20px 0px 0px 0px;
    }
    .punktejespieltag th { 
        font-size: 12px;
        font-weight: bold; 
        color: #000000; 
        background-color: Gainsboro;
        vertical-align: top; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
    } 
    .punktejespieltag td {
        border-bottom: 1px dashed #45a049;
        font-size: 14px;
    }
    .punktejespieltag .sp1 {
        width: 40px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .punktejespieltag .sp2 { 
        width: 100px;
        text-align: left;
        padding: 5px 0px 5px 0px; 
    }
    .punktejespieltag .sp3 { 
        width: 60px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    }
    .punktejespieltag .sp4 { 
        width: 60px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    } 
    .punktejespieltag .sp5 { 
        width: 60px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    } 
    .punktejespieltag .sp6 { 
        width: 60px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    } 
    .punktejespieltag .sp7 { 
        width: 60px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    } 
    .punktejespieltag .sp8 { 
        width: 60px;
        text-align: right;
        padding: 5px 10px 5px 0px;
    } 
    .punktejespieltag tr:hover {
        background-color: #eeeeee; /* Hellgrauer Hintergrund beim Hovern */
    }
    .punktejespieltag tr:hover td {
        border: 1px solid #eeeeee; /* Gleiche Farbe wie der Hintergrund, um die Ränder zu verbergen */
    }  
    
    .strikethrough {
        text-decoration: line-through;
        color: grey;
        background-color: #ffe6e6; /* zartes Rot */
    }
    .stacksInfoBox {
        font-size: 0.8em;
        display: none;
        position: absolute;
        background-color: Lightcyan;
        border: 1px solid #45a049;
        padding: 10px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        z-index: 20;
    }
    
    .info-box {
        display: none;
        position: absolute;
        background-color: #ecffeb;
        border: 1px solid #45a049;
        padding: 10px;
        margin: 10px;
        /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */
        z-index: 20;
    }
    
    .infoboxpunkte {
        width: 480px;        
        border-collapse: collapse;
    }
    .infoboxpunkte th { 
        font-size: 12px;
        font-weight: bold;  
        background-color: #d9ffd7; 
        border-top: 1px solid #45a049;  
        border-bottom: 1px solid #45a049;  
    }
    .infoboxpunkte td {
        border-bottom: 1px dashed #45a049; 
        font-size: 12px;
    }
    .infoboxpunkte .sp1 {
        width: 60px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .infoboxpunkte .sp2 { 
        width: 40px;
        text-align: center;
        padding: 5px 0px 5px 0px; 
    }
    .infoboxpunkte .sp3 { 
        width: 60px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    }
    .infoboxpunkte .sp4 { 
        width: 60px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    } 
    .infoboxpunkte .sp5 { 
        width: 60px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    } 
    .infoboxpunkte .sp6 { 
        width: 60px;
        text-align: center;
        padding: 5px 0px 5px 0px;
    } 
    .infoboxpunkte .sp7 { 
        width: 60px;
        text-align: right;
        padding: 5px 0px 5px 0px;
    } 
    .infoboxpunkte .sp8 { 
        width: 60px;
        text-align: right;
        padding: 5px 10px 5px 0px;
        
    } 
    .infoboxpunkte tr:hover {
        background-color: #ffffff; /* weisser Hintergrund beim Hovern */
        font-weight: bold;
    }
    .infoboxpunkte tr:hover td {
        border-bottom: 1px dashed #45a049;        
    }    
    
    .infoboxeliminations {
        width: 340px;        
        border-collapse: collapse;
    }
    .infoboxeliminations th { 
        font-size: 12px;
        font-weight: bold;  
        background-color: #d9ffd7; 
        border-top: 1px solid #45a049;  
        border-bottom: 1px solid #45a049;  
    }
    .infoboxeliminations td {
        border-bottom: 1px dashed #45a049; 
        font-size: 12px;
    }
    .infoboxeliminations .sp1 {
        width: 80px;
        text-align: left;
        padding: 5px 0px 5px 10px; 
    }
    .infoboxeliminations .sp2 { 
        width: 140px;
        text-align: center;
        padding: 5px 0px 5px 0px; 
    }
    .infoboxeliminations .sp3 { 
        width: 120px;
        text-align: center;
        padding: 5px 10px 5px 0px;
    }
    .infoboxeliminations tr:hover {
        background-color: #ffffff; /* weisser Hintergrund beim Hovern */
        font-weight: bold;
    }
    .infoboxeliminations tr:hover td {
        border-bottom: 1px dashed #45a049;        
    }    
    
    
    .dealertabelle {
        border: none;
        border-collapse: collapse;
        margin: 20px 0px 0px 0px;
    }
    .dealertabelle th { 
        font-size: 12px;
        font-weight: bold; 
        color: #000000; 
        background-color: Gainsboro;
        vertical-align: top; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
        padding: 10px 10px 10px 10px;
    } 
    .dealertabelle td {
        border-bottom: 1px dashed #45a049;
        font-size: 14px;
        padding: 5px 5px;
    }
    .dealertabelle tr:hover {
        background-color: #eeeeee;
        font-weight: bold;
    }
      
.my-flex-container {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    gap: 5px; /* Abstände zwischen Elementen */
}   
.adminSpielerliste {
   /* width: 620px; */
    border: none; 
    border-collapse: collapse; 
    text-align: center;
}
.adminSpielerliste th {
    font-size: 12px; 
    font-weight: bold;
    height: 30px;
    vertical-align: top;
}
.adminSpielerliste td {
    height: 30px;
    font-size: 12px; 
    font-weight: bold;
    border-bottom: 1px dashed #45a049;
    vertical-align: middle;
    text-align: left;
    padding-left: 5px;
}
.adminSpielerliste a {
    font-size: 10px; 
    font-weight: bold;
    height: 30px; 
    padding: 3px; 
    color: #45a049; 
    border: none; 
    text-align: center; 
    vertical-align: middle;
    display: inline-block;
    word-wrap: nowrap; 
    white-space: normal; 
}
.adminSpielerliste a:hover {
    color: white;
    background-color: #45a049;
    border-radius: 3px;
}
.adminSpielerliste tr:hover {
    background-color: #f1f1f1;
    border: 1px solid black;
}

.buttonMussPWwechseln {
    font-size: 10px; 
    font-weight: normal;
    width: 104px; 
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: white; 
    color: black; 
    border: none; 
    text-align: center; 
    display: inline-block; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.buttonResetPW {
    font-size: 10px; 
    font-weight: bold;
    width: 104px; 
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: white; 
    color: Crimson; 
    border: 1px solid Crimson; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}

.buttonEDIT {
    font-size: 10px; 
    font-weight: bold;
    width: 34px;
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: white; 
    color: blue; 
    border: 1px solid blue; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.buttonDELETE {
    font-size: 10px; 
    font-weight: bold;
    width: 49px;
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: Crimson; 
    color: white; 
    border: 1px solid Crimson; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.buttonNEW {
    font-size: 10px; 
    font-weight: bold;
    width: 49px;
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: #45a049; 
    color: white; 
    border: 1px solid #45a049; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.statusInaktiv {
    font-size: 10px; 
    font-weight: bold;
    width: 94px;
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: Crimson; 
    color: white; 
    border: 1px solid Crimson; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.statusAktiv {
    font-size: 10px; 
    font-weight: bold;
    width: 94px; 
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: #45a049; 
    color: white; 
    border: 1px solid #45a049; 
    text-align: center; 
    display: inline-block;
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.statusMussAusloggen {
    font-size: 10px; 
    font-weight: bold;
    width: 94px; 
    height: 24px; 
    margin: 3px;
    padding: 1px; 
    background-color: Crimson; 
    color: white; 
    border: 1px solid Crimson; 
    text-align: center; 
    display: inline-block;
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.statusMussNichtAusloggen {
    font-size: 10px; 
    font-weight: bold;
    width: 94px; 
    height: 24px; 
    margin: 3px;
    padding: 1px; 
    background-color: #45a049; 
    color: white; 
    border: 1px solid #45a049; 
    text-align: center; 
    display: inline-block;
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
.statusIsAdmin {
    font-size: 10px; 
    font-weight: bold;
    width: 64px; 
    height: 24px; 
    margin: 3px;
    padding: 1px; 
    background-color: black; 
    color: white; 
    border: 1px solid black; 
    text-align: center; 
    display: inline-block;
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal;
    border-radius: 3px; 
}
.statusNoAdmin {
    font-size: 10px; 
    font-weight: bold;
    width: 64px; 
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: #DCDCDC; 
    color: black; 
    border: 1px solid #DCDCDC; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}

.NeuerSpielerButton {
    font-size: 18px; 
    font-weight: bold;
    width: 300px;
    padding: 10px; 
    background-color: Crimson; 
    color: white; 
    border: none; 
    border-radius: 10px; 
    cursor: pointer; 
}

.adminKorrekturbereichliste {
    width: 330px;
    border: none; 
    border-collapse: collapse;
    text-align: center;
}

.adminKorrekturbereichliste th {
    font-size: 12px; 
    font-weight: bold;
    /* height: 30px; */
    vertical-align: top;
    /* padding: 10px; */
}
.adminKorrekturbereichliste tr {
    padding: 5px;
}
.adminKorrekturbereichliste td {
    height: 30px;
    font-size: 12px; 
    font-weight: bold;
    border-bottom: 1px dashed #45a049;
    vertical-align: middle;
    text-align: left;
    padding: 5px;
}


.adminKorrekturliste {
    width: 600px;
    border: none; 
    border-collapse: collapse;
    text-align: center;
}

.adminKorrekturliste th {
    font-size: 12px; 
    font-weight: bold;
    /* height: 30px; */
    vertical-align: top;
    /* padding: 10px; */
}
.adminKorrekturliste tr {
    padding: 5px;
}
.adminKorrekturliste td {
    height: 30px;
    font-size: 12px; 
    font-weight: bold;
    border-bottom: 1px dashed #45a049;
    vertical-align: middle;
    text-align: left;
    padding: 5px;
}


.buttonCHANGE {
    font-size: 10px; 
    font-weight: bold;
    width: 53px;
    height: 24px; 
    margin: 3px;
    padding: 1px;
    background-color: white; 
    color: blue; 
    border: 1px solid blue; 
    text-align: center; 
    display: inline-block; 
    cursor: pointer; 
    word-wrap: nowrap; 
    white-space: normal; 
    border-radius: 3px; 
}
/* Ende: Main-Layout der Website (für alle Bildschirmgrößen)                           */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */




/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* Beginn: Angaben für grosse Bildschirmgrößen:                                        */
@media (min-width: 600px) {
    .nurKleinerBildschirm {
        display: none;
    }
    .nurGrosserBildschirm {
        color: #BBBBBB;
        margin: 0px 0px 0px 10px;
        padding: 0px;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        font-weight: normal;
        text-align: left;
    }
    
    table.spielerdaten { 
        width: 500px;
        border-collapse: collapse;
        margin: 20px 0px 0px 0px; 
    }
    .spielerdaten tr td {
        padding: 10px;
        vertical-align: bottom;
    }
    .spielerdaten .mytd { 
        border-bottom: 1px dashed #45a049;
        vertical-align: bottom;
    }
    
    /**/
    
    table.rangliste { 
        width: 580px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
    
    .rangliste .sp1 { width: 60px; padding-left: 5px; }     /* Rang       */
    .rangliste .sp2 { width: 100px; }                       /* Spieler         */
    .rangliste .sp3 { width: 60px; }                        /* Punkkte Total    */
    .rangliste .sp4 { width: 60px; }                        /* Delta Zu Vorg.   */
    .rangliste .sp5 { width: 60px; }                        /* Delta Zu P18     */
    .rangliste .sp6 { width: 60px; }                        /* DS Pkte          */
    .rangliste .sp7 { width: 60px; }                        /* Anz. Final Table */
    .rangliste .sp8 { width: 60px; }                        /* Anz. Buy-Ins      */
    .rangliste .sp9 { width: 60px; padding-right: 5px; }    /* Anwesenheitsquote */
    .rangliste th.myth {
        color: #000000; 
        background-color: Gainsboro;
        vertical-align: top; 
        font-weight: bold; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 10;
    }
    .rangliste td {
        border-bottom: 1px dashed #45a049;
        padding: 5px 0px 5px 0px; 
    }    
    .rangliste th.myth p {
        border: none;
        padding: 0px;
        margin: 0px;
        top: 0;
        cursor: pointer;
    }
    .rangliste tr:hover {           
        background-color: #eeeeee;
        font-weight: bold;
        
    }
    /**/
        
    
    table.finaltableliste { 
        width: 530px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }

    .finaltableliste tr:hover {           
        background-color: #eeeeee;
        font-weight: bold;
    }
    .finaltableliste .sp1 { width: 110px; border-right: 1px dashed #45a049} /* Rang       */
    .finaltableliste .sp2 { width: 70px; border-right: 1px dashed #45a049} /* Name       */
    .finaltableliste .sp3 { width: 35px; border-right: 1px dashed #45a049} /* Pkte Total */
    .finaltableliste .sp4 { width: 35px; border-right: 1px dashed #45a049;} /* Zu Vorg.   */
    .finaltableliste .sp5 { width: 35px; border-right: 1px dashed #45a049;} /* Zu P18     */
    .finaltableliste .sp6 { width: 35px; border-right: 1px dashed #45a049;} /* DS Pkte    */
    .finaltableliste .sp7 { width: 35px; border-right: 1px dashed #45a049} /* DS Rang    */
    .finaltableliste .sp8 { width: 35px; border-right: 1px dashed #45a049}             /*  */
    .finaltableliste .sp9 { width: 35px; border-right: 1px dashed #45a049}             /*  */
    .finaltableliste .sp10 { width: 35px; border-right: 1px dashed #45a049}             /*  */
    .finaltableliste .sp11 { width: 35px; border-right: 1px dashed #45a049}             /*  */
    .finaltableliste .sp12 { width: 35px; border-right: 1px dashed #45a049}             /*  */
    .finaltableliste th.myth {
        color: #000000; 
        background-color: Gainsboro;
        vertical-align: top; 
        font-weight: bold; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .finaltableliste td {
        padding: 3px 0px 3px 0px; 
    }
    .finaltableliste th .anzInHeadline {
        font-weight: normal;
        font-size: 0.9em; 
    }

    /**/
    table.jahresstackliste { 
        width: 650px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
    

    .jahresstackliste .rang-27 + .rang-28 {  /* setzt genau zwischen tr-Klasse "rang-27" und tr-Klasse "rang-28" eine Linie */
        border-top: 1px solid Crimson;
    }
    
    .jahresstackliste tr:hover {           
        background-color: #eeeeee;
        font-weight: bold;
    }
    .jahresstackliste .sp01 { width: 40px; } /* Kann nicht   */
    .jahresstackliste .sp02 {  }             /* Spielername  */
    .jahresstackliste .sp03 { width: 65px; } /* Basis-Stack  */
    .jahresstackliste .sp04 { width: 65px; } /* Rang Bonus   */
    .jahresstackliste .sp05 { width: 65px; } /* Buy-In Bonus */
    .jahresstackliste .sp06 { width: 65px; } /* Bounty Bonus */
    .jahresstackliste .sp07 { width: 65px; } /* FT Bonus     */
    .jahresstackliste .sp08 { width: 65px; } /* DS Bonus     */
    .jahresstackliste .sp09 { width: 65px; } /* Top-3 Bonus  */  
    .jahresstackliste .sp10 { width: 65px; } /* DS Rang      */ 
    
    .jahresstackliste th.myth {
        color: #000000; 
        background-color: #ffffff;
        vertical-align: top; 
        font-weight: bold; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .jahresstackliste td {
        border-bottom: 1px dashed #45a049;
        padding: 3px 0px 3px 0px; 
    }
    /**/
    
    
    /**/
    table.quartalsstackliste { 
        width: 500px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
  
    /*  Im Quartalsturnier keine Einschränkung der Teilnehmeranzahl, daher wird der Style nicht angewendet */
    .quartalsstackliste .rang-27 + .rang-28 {  /* setzt genau zwischen tr-Klasse "rang-27" und tr-Klasse "rang-28" eine Linie */
        border-top: 1px solid Crimson;      
    }
    
    .quartalsstackliste tr:hover {           
        background-color: #eeeeee;
        font-weight: bold;
    }
    .quartalsstackliste .sp01 { width: 50px; } /* Dealer Checkbox */
    .quartalsstackliste .sp02 {  }              /* Spieler Name       */
    .quartalsstackliste .sp03 { width: 80px; } /* Basis Stack */
    .quartalsstackliste .sp04 { width: 80px; } /* Rang Bonus */
    .quartalsstackliste .sp05 { width: 70px; } /* Dealer Bonus */
    .quartalsstackliste .sp06 { width: 80px; } /* Gesamt Stack */

    .quartalsstackliste th.myth {
        color: #000000; 
        background-color: #ffffff;
        vertical-align: top; 
        font-weight: bold; 
        border-bottom: 1px solid #000000;
        border-top: 1px solid #000000;
        padding: 10px 0px 10px 0px;
        margin: 0px 5px 0px 5px;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .quartalsstackliste td {
        border-bottom: 1px dashed #45a049;
        padding: 3px 0px 3px 0px; 
    }
    /**/
    
    .photo-wrapper { /* für Kontaktliste Profilbildanzeige */
        position: absolute;
        z-index: 100;
    }
    .hover-photo {   /* für Kontaktliste Profilbildanzeige */ 
        display: block;
        margin-left: 100px;
    }
    table.kontaktliste { 
        width: 550px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
    .kontaktliste th  {
        color: #0000FF; 
        background-color: #dddddd;
        vertical-align: top; 
        font-weight: bold; 
        border: 1px solid #ffffff;
        padding: 10px 5px 10px 5px;
        position: sticky;
        top: 0;
        z-index: 1;
    }
    .kontaktliste td {
        border-bottom: 1px dashed #45a049;
        padding: 6px 0px 6px 0px; 
        vertical-align: middle;
        text-align: left; /* Ensure text is left-aligned */
    }
    .kontaktliste tr:hover { 
        background-color: #eeeeee;
    }
    .kontaktliste .sp1 { 
        width: 100px; 
        margin-left: 5px;
        text-align: left;
        font-weight: bold;
        padding-left: 4px;
    }
    .kontaktliste .sp2 { 
        width: 120px; 
        text-align: left;
    }
    .kontaktliste .sp3 { 
        width: 100px; 
        text-align: left;
    }
    .kontaktliste .sp4 { 
        width: 230px; 
        margin-right: 5px;
        text-align: left;
    }
}
/* Ende: Angaben für grosse Bildschirmgrößen                                           */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */ 
/* Beginn: Angaben für kleine Bildschirmgrößen:                                        */
@media (max-width: 600px) {

  .saisonsiegertabelle,
  .saisonsiegertabelle thead,
  .saisonsiegertabelle tbody,
  .saisonsiegertabelle th,
  .saisonsiegertabelle td,
  .saisonsiegertabelle tr {
    display: block;
    width: 100%;
  }

  .saisonsiegertabelle thead {
    display: none; /* Tabellenkopf ausblenden */
  }

  .saisonsiegertabelle tr {
    margin-bottom: 20px;
    border: 1px solid #45a049;
    padding: 15px;
    background-color: #f9f9f9;
    border-radius: 8px;
  }

  .saisonsiegertabelle td {
    text-align: left;
    padding: 12px;
    position: relative;
    font-size: 16px;
    line-height: 1.4;
  }

  .saisonsiegertabelle td::before {
    content: attr(data-label);
    font-weight: bold;
    display: block;
    margin-bottom: 6px;
    color: #333;
    font-size: 14px;
  }

  .thumbnail {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }

  .myheadline,
  .mysubline {
    font-size: 18px;
    text-align: center;
    padding: 10px;
  }




    table.jahresstackliste { 
        width: 330px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
    .jahresstackliste {
        font-size: 8pt; /* Reduzierte Schriftgröße */
    }
    .jahresstackliste th, .jahresstackliste td {
        padding: 4px;
    }
    .jahresstackliste th.myth {
        display: block;
        display: none; /* blendet die Überschriften aus: */
        border: none; /* entfernt den Rahmen der Kopfzelle */
    }
    .jahresstackliste tr {
        display: block; /* Zeilen in Blöcke umwandeln */
        margin-bottom: 10px;
    }
    .jahresstackliste td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .jahresstackliste td::before {
        content: attr(data-label); /* Überschrift aus dem Attribut data-label */
        position: absolute;
        left: 10px;
        text-align: left;
        font-weight: bold;
    }

    /**/
    table.quartalsstackliste { 
        width: 330px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-size: 10pt; 
        margin: 20px 0px 0px 0px; 
    }
    .quartalsstackliste {
        font-size: 8pt; /* Reduzierte Schriftgröße */
    }
    .quartalsstackliste th, .quartalsstackliste td {
        padding: 4px;
    }
    .quartalsstackliste th.myth {
        display: block;
        display: none; /* blendet die Überschriften aus: */
        border: none; /* entfernt den Rahmen der Kopfzelle */
    }
    .quartalsstackliste tr {
        display: block; /* Zeilen in Blöcke umwandeln */
        margin-bottom: 10px;
    }
    .quartalsstackliste td {
        display: block;
        text-align: right;
        padding-left: 50%;
        position: relative;
    }
    .quartalsstackliste td::before {
        content: attr(data-label); /* Überschrift aus dem Attribut data-label */
        position: absolute;
        left: 10px;
        text-align: left;
        font-weight: bold;
    }

    .nurGrosserBildschirm {
        display: none;
    }
    .nurKleinerBildschirm{
        color: #BBBBBB;
        margin: 0px 0px 0px 0px;
        padding: 0px 60px 0px 0px;
        font-family: Arial, sans-serif;
        font-size: 10pt;
        font-weight: normal;
        border-top: none !important;
    }
    
    
    nav ul {
        display: block;
    }
    nav ul li {
        width: 250px;
        margin: 5px 0px 5px 0px; 
    }
    nav ul li a {
        text-align: center;
        padding: 10px 0px 10px 0px;
        width: 250px;
        margin: 0 auto;
    }
    .navlistitemdropdown .navlinks {
        position: static; 
        background-color: #FFFFFF;
        border-radius: 5px;
        border: 1px solid #555;
    }
    .navlistitemdropdown .navlinks a {
        border-right: 1px solid #555;
        border-radius: 0px;
    }
    
    nav .no-link {
        color: inherit; /* Farbe erben, keine spezielle Linkfarbe */
        text-decoration: none; /* Unterstreichung entfernen */
        pointer-events: none; /* Klick deaktivieren */
        cursor: default; /* Zeigt den Standard-Cursor statt den Link-Cursor */
    }


    /**/

    table.spielerdaten {  
        width: 350px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        margin: 20px 0px 0px 0px;  
    }
    .spielerdaten tr {
        display: flex;
        flex-direction: column;
        margin-bottom: 20pt;
        border: 1px solid #ccc;
        padding: 8px;
        border-radius: 4px;
    }
    .spielerdaten tr:hover {
        background-color: #C1FFC1;
    }
    .spielerdaten, .spielerdaten thead, .spielerdaten tbody, .spielerdaten th, .spielerdaten td, .spielerdaten tr {
        display: block;
    }
    .spielerdaten th.myth {
        color: 0000ff;
        position: static;
        top: 0;
        z-index: 1;
        display: none; /* blendet die Überschriften aus: */
    }
    .spielerdaten tr {
        border-bottom: 1px solid #000000;
    }
    
    /* setzt genau zwischen tr-Klasse "rang-18" und tr-Klasse "rang-19" eine Linie */
    /*
    .spielerdaten .rang-18 + .rang-19 {  
        border-top: 3px solid Crimson;
    }
    */
    .spielerdaten .rang-27 + .rang-28 {  /* setzt genau zwischen tr-Klasse "rang-27" und tr-Klasse "rang-28" eine Linie */
        border-top: 3px solid Crimson;
    }
    
    .spielerdaten td {
        display: flex;
        padding: 2px 5px 2px 5px; 
        border-bottom: 1px dashed #45a049;
        align-items: center;  /* Vertikale Zentrierung */
    }
    .spielerdaten td:before { /* zeigt Zeilenüberschriften an: */
        content: attr(data-label);
        width: 150px;
        text-align: right;
        font-size: 10pt;
        padding-right: 10px;
        display: flex;
        align-items: center;  
    }

    /* verkleinert die Schriftgröße für den Text "Wohnort lt. Google" 
    .spielerdaten td[data-label="Wohnort lt. Google:"]:before {
        font-size: 10pt; 
        text-align: right;
    } */
    
    .spielerdaten th.myth {
        display: none; /* blendet die Überschriften aus: */
        border: none; /* entfernt den Rahmen der Kopfzelle */
    }
    .spielerdaten .header-row {
        border: none;
    }
    
    /**/
    
    .rangliste { 
        width: 350px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-weight: bold;
        margin: 20px 0px 0px 0px;  
    }
    .rangliste tr:hover {
        background-color: #dddddd;
    }
    .rangliste, .rangliste thead, .rangliste tbody, .rangliste th, .rangliste td, .rangliste tr {
        display: block;
    }
    .rangliste th.myth {
        position: static;
        top: 0;
        z-index: 1;
        display: none; /* blendet die Überschriften aus: */
    }
    .rangliste tr {
        padding: 10px 0px 10px 0px;
        border-bottom: 1px solid #000000;
    }
    
    /* setzt genau zwischen tr-Klasse "rang-18" und tr-Klasse "rang-19" eine Linie */
    /*
    .rangliste .rang-18 + .rang-19 {  
        border-top: 3px solid Crimson;
    }
    */
    .rangliste .rang-27 + .rang-28 {  /* setzt genau zwischen tr-Klasse "rang-27" und tr-Klasse "rang-28" eine Linie */
        border-top: 3px solid Crimson;
    }
    
    .rangliste td {
        display: flex;
        padding: 2px 5px 2px 5px; 
        border-bottom: 1px dashed #45a049;
    }
    .rangliste td:before { /* zeigt Zeilenüberschriften an: */
        content: attr(data-label);
        width: 200px;
        text-align: right;
        font-size: 12pt;
        font-weight: normal;
        padding-right: 20px; 
    }

    /**/
    
    .finaltableliste { 
        width: 350px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-weight: bold;
        margin: 20px 0px 0px 0px;  
    }
    .finaltableliste tr:hover {
        background-color: #dddddd;
    }
    .finaltableliste, .finaltableliste thead, .finaltableliste tbody, .finaltableliste th, .finaltableliste td, .finaltableliste tr {
        display: block;
    }
    .finaltableliste th.myth {
        position: static;
        top: 0;
        z-index: 1;
        display: none; /* blendet die Überschriften aus: */
    }
    .finaltableliste tr {
        padding: 10px 0px 10px 0px;
        border-bottom: 1px solid #000000;
    }
    
    /* setzt genau zwischen tr-Klasse "rang-18" und tr-Klasse "rang-19" eine Linie */
    /*
    .finaltableliste .rang-18 + .rang-19 {  
        border-top: 3px solid Crimson;
    }
    */
    .finaltableliste .rang-27 + .rang-28 {  /* setzt genau zwischen tr-Klasse "rang-27" und tr-Klasse "rang-28" eine Linie */
        border-top: 3px solid Crimson;
    }
    
    .finaltableliste td {
        display: flex;
        padding: 2px 5px 2px 5px; 
        border-bottom: 1px dashed #45a049;
    }
    .finaltableliste td:before { /* zeigt Zeilenüberschriften an: */
        content: attr(data-label);
        width: 200px;
        text-align: right;
        font-size: 12pt;
        font-weight: normal;
        padding-right: 20px; 
    }
    
    /**/
    .kontaktliste { 
        width: 350px; 
        border-collapse: collapse; 
        page-break-after: always; 
        font-family: Arial; 
        font-weight: bold;
        margin: 20px 0px 0px 0px;  
    }
    .kontaktliste tr:hover {
        background-color: #C1FFC1;
    }
    .kontaktliste, .kontaktliste thead, .kontaktliste tbody, .kontaktliste th, .kontaktliste td, .kontaktliste tr {
        display: block;
    }
    .kontaktliste th.myth {
        position: static;
        top: 0;
        z-index: 1;
        display: none; /* blendet die Überschriften aus: */
    }
    .kontaktliste tr {
        padding: 10px 0px 10px 0px;
        border-bottom: 1px solid #000000;
    }

    .kontaktliste td {
        display: flex;
        padding: 2px 5px 2px 5px; 
        border-bottom: 1px dashed #45a049;
    }
    
    .kontaktliste td:before { /* zeigt Zeilenüberschriften an: */
        content: attr(data-label);
        width: 100px;
        text-align: right;
        font-weight: normal;
        font-size: 12pt;
        padding-right: 20px; 
    }
    .kontaktliste th.myth {
        display: none; /* blendet die Überschriften aus: */
        border: none; /* entfernt den Rahmen der Kopfzelle */
    }
    

    .infoCheckbox + .info::after {
        left: -150px; /* Passe die Position an, um den Tooltip vollständig sichtbar zu machen */
        width: 200px; /* Passe die Breite an die Bildschirmgröße an */
        right: auto; /* Setze den rechten Rand außer Kraft */
        transform: translateX(-50%); /* Zentriere den Tooltip */
    }


}
/* Ende: Angaben für kleine Bildschirmgrößen                                           */
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */