.platzbelegung-feld.belegung {
            background-color: rgba(2, 
                                   9, 
                                   207, 0.78) ; /* Transparenz */
            color: #ffffff;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.belegung:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #0209cf; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.belegung::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #0209cf;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.belegung:hover::before {
            background-color: #0209cf; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.belegung:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.belegung:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.belegung {
            background-color: #0209cf;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                    .gaststunden {
                background-color: #0209cf;
            }
            
            i.buchung-normal{
                color: #0209cf;
            }
            
            i.buchung-normal-icon{
                color: #ffffff !important;
            }
            
            .progress-bar-buchung-normal{
                background-color: #0209cf;
            }
                    .platzbelegung-feld.training {
            background-color: rgba(0, 
                                   230, 
                                   226, 0.78) ; /* Transparenz */
            color: #ffffff;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.training:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #00e6e2; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.training::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #00e6e2;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.training:hover::before {
            background-color: #00e6e2; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.training:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.training:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.training {
            background-color: #00e6e2;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                .platzbelegung-feld.spiel {
            background-color: rgba(2, 
                                   177, 
                                   6, 0.78) ; /* Transparenz */
            color: #ffffff;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.spiel:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #02b106; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.spiel::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #02b106;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.spiel:hover::before {
            background-color: #02b106; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.spiel:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.spiel:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.spiel {
            background-color: #02b106;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                .platzbelegung-feld.turnier {
            background-color: rgba(235, 
                                   255, 
                                   59, 0.78) ; /* Transparenz */
            color: #000000;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.turnier:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #ebff3b; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.turnier::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #ebff3b;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.turnier:hover::before {
            background-color: #ebff3b; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.turnier:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.turnier:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.turnier {
            background-color: #ebff3b;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                .platzbelegung-feld.gesperrt {
            background-color: rgba(222, 
                                   27, 
                                   27, 0.78) ; /* Transparenz */
            color: #000000;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.gesperrt:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #de1b1b; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.gesperrt::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #de1b1b;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.gesperrt:hover::before {
            background-color: #de1b1b; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.gesperrt:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.gesperrt:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.gesperrt {
            background-color: #de1b1b;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                .platzbelegung-feld.markiert {
            background-color: rgba(195, 
                                   229, 
                                   195, 0.78) !important; /* Transparenz */
            color: #000000 !important;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.markiert:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #c3e5c3; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.markiert::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #c3e5c3;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.markiert:hover::before {
            background-color: #c3e5c3; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.markiert:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.markiert:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.markiert {
            background-color: #c3e5c3;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                .abo-ribbon {
            position: absolute;
            background-color: #00cd00;
            color: #ffffff;
            width: 30px;
            right: 0px;
            top: 10px; /* Platz oberhalb */
            border-radius: 4px 0px 0px 4px; /* Abgerundete Ecken */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        .abo-ribbon:after {
            display: block;
            position: absolute;
            content: " ";
            background-color: #00cd00;
            width: 8px;
            height: calc(100% - 20px); /* Platz oben und unten */
            right: 26px;
            top: 10px;
            transform: skew(20deg);
            border-radius: 2px;
        }

        .legende-abo-ribbon {
            position: absolute;
            background-color: #00cd00;
            color: #ffffff;
            width: 19px;
            right: -0.5px;
            top: 2px;
            border-radius: 4px 0px 0px 4px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
        }

        .legende-abo-ribbon:after {
            display: block;
            position: absolute;
            content: " ";
            background-color: #00cd00;
            width: 8px;
            height: calc(100% - 20px);
            right: 15px;
            top: 10px;
            transform: skew(20deg);
            border-radius: 2px;
        }
                .current-time-line {
            visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: calc(100% - var(--time-column-width, 0px)); /* Breite der Zeitspalte abziehen */
            height: 2px;
            background-color: #ff6b6b;
            z-index: 10; /* Damit die Linie über der Tabelle liegt */
            pointer-events: none; /* Interaktion mit der Linie verhindern */
        }

        .current-time-label {
            position: absolute;
            width: 70px; /* Größe der Ellipse */
            height: 20px;
            background-color: #ff6b6b;
            color: #ffffff;
            font-size: 12px;
            font-weight: bold;
            text-align: center;
            line-height: 20px;
            border-radius: 10px; /* Ellipsenform */
            z-index: 11; /* Über der Linie */
            visibility: hidden;
        }
        
                .platzhead {
            width:100%;
            text-align:center;
            border-bottom:1px solid #dddddd !important; 
            background-color: #343a40 !important;
            color: #e3e3e3 !important;
        }
        
        .platzhead-uhrzeit {
            background-color: #343a40 !important;
            color: #e3e3e3 !important;
        }
        
        .platz-select-woche{
            background-color: #343a40 !important;
        }

                /* Standard-Uhrzeit-Box */
        @media (min-width: 800px) {
            .uhrzeit-box {
                background-color: rgba(247, 247, 247, 1); /* Dezente Hintergrundfarbe */
                color: #343a40;
                font-weight: bold;
                padding: 4px 10px; /* Reduzierter Innenabstand */
                border-radius: 20px; /* Mehr Rundung für weiche Optik */
                min-width: 50px;
                text-align: center;
                box-shadow: none; /* Kein Schatten, damit Zeilenhöhe konstant bleibt */
            }
        }
        
        .belegungszeile.odd-row td {
            background-color: rgba(240,240,240,0.8);
        }
        .belegungszeile.even-row td {
            background-color: rgba(245,245,245,0.8);
        }
        .slot.odd-row {
            background-color: rgba(240,240,240,0.8);
        }
        .slot.even-row {
            background-color: rgba(245,245,245,0.8);
        }

        /* Sicherstellen, dass die .uhrzeittabelle-Spalte dieselbe Farbe erhält */
        .belegungszeile.odd-row .uhrzeittabelle {
            background-color: rgba(240,240,240,0.8);
        }
        .belegungszeile.even-row .uhrzeittabelle {
            background-color: rgba(245,245,245,0.8);
        }

        /* Standard-Zeilenfarben */
        .belegungszeile.odd-row td {
            background-color: rgba(240,240,240,0.8);
        }
        .belegungszeile.even-row td {
            background-color: rgba(245,245,245,0.8);
        }

        /* Nur Zellen mit past-time bekommen den dunkleren Hintergrund */
        .belegungszeile.odd-row td.past-time,
        .belegungszeile.odd-row td.forbidden-time {
            background-color: rgba(220,220,220,0.8);
        }

        .belegungszeile.even-row td.past-time,
        .belegungszeile.even-row td.forbidden-time {
            background-color: rgba(225,225,225,0.8);
        }

        /* Überschreibe explizit auch die .uhrzeittabelle-Spalte in "past-time" und "forbidden-time"-Zeilen */
        .belegungszeile:has(td.past-time).odd-row .uhrzeittabelle,
        .belegungszeile:has(td.forbidden-time).odd-row .uhrzeittabelle {
            background-color: rgba(220,220,220,0.8);
        }

        .belegungszeile:has(td.past-time).even-row .uhrzeittabelle,
        .belegungszeile:has(td.forbidden-time).even-row .uhrzeittabelle {
            background-color: rgba(225,225,225,0.8);
        }


        /* Stil der Uhrzeittabelle-Spalte (weitere Eigenschaften) */
        .uhrzeittabelle {
            position: sticky;
            top: -15px;
            left: 0;
            background-color: inherit; /* Erbt die Hintergrundfarbe der Zeile */
            color: #343a40;
            font-weight: bold;
            border-right: 2px solid #dddddd;
            text-align: center;
            padding: 5px;
            font-size: inherit;
            height: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            vertical-align: middle !important;
        }
        
        @media (max-width: 767px) {
            .uhrzeittabelle {
                top: -5px;
            }
        }
                /* Preis (Ecke oben rechts) */
        .preiscontainer {
            color: #e3e3e3;
            background-color: #343a40;
            position: absolute;
            padding: 9px 8px 8px 8px !important;
            right: 10px;
            top: 7px;
            height: 45px;
            vertical-align: middle !important;
            z-index: 1;
            box-shadow: 1.5px 0.5px 30px rgba(0, 0, 0, .2);
            border-radius: 8px;
        }

        .preisinhalt {
            font-size: 19px;
            padding-left: 5px;
            padding-right: 5px;
        }
        
                .platzbelegung-feld.arbeitsdienst {
            background-color: rgba(52, 
                                   58, 
                                   64, 0.78) ; /* Transparenz */
            color: #fffffff;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.arbeitsdienst:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #343a40; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.arbeitsdienst::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #343a40;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.arbeitsdienst:hover::before {
            background-color: #343a40; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.arbeitsdienst:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.arbeitsdienst:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.arbeitsdienst {
            background-color: #343a40;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }
                    .arbeit {
            /*    background-color:#109618;*/
                background-color: #343a40;
            }
            
            i.arbeit-normal{
                color: #343a40;
            }
            
            i.arbeit-normal-icon{
                color: #fffffff !important;
            }
            
            .progress-bar-arbeit-normal{
                background-color: #343a40;
            }
                    .platzbelegung-feld.veranstaltung {
            background-color: rgba(255, 
                                   186, 
                                   66, 0.78) ; /* Transparenz */
            color: #000000;
            position: relative;
            border-radius: 8px; /* Abgerundete Ecken */
            backdrop-filter: blur(2px); /* Glas-Effekt */
            <!--box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.5), 0 4px 6px rgba(0, 0, 0, 0.1);-->
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px rgba(0, 0, 0, 0.15); /* 3D-Effekt */
            transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
            height: 100%;
            min-height: 38px;
            padding: 10px 0px 0px 20px;
        }

        .platzbelegung-feld.veranstaltung:hover {
            transform: translateY(-1px); /* Hebt die Zelle */
            background-color: #ffba42; /* Zelle nimmt die Farbe des Streifens */
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
            z-index: 20;
        }

        .platzbelegung-feld.veranstaltung::before {
            content: "";
            position: absolute;
            top: 10px; /* Platz oben */
            bottom: 10px; /* Platz unten */
            left: 5px; /* Streifen nach rechts versetzen */
            width: 6px; /* Breite des Streifens */
            background-color: #ffba42;
            border-radius: 4px; /* Abgerundete Ecken */
            box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1); /* 3D-Effekt */
            transition: background-color 0.3s ease; /* Nur Farbe ändern */
            backdrop-filter: blur(5px); /* Glas-Effekt */
        }

        .platzbelegung-feld.veranstaltung:hover::before {
            background-color: #ffba42; /* Streifen übernimmt ebenfalls die Farbe der Zelle */
            box-shadow: none; /* Kein Schatten beim Hover */
            backdrop-filter: blur(5px); /* Glas-Effekt bleibt erhalten */
        }
        
        .time-belegung {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
        }
        
        .time-belegung-small {
            display: none; /* Element standardmäßig ausblenden */
            z-index: 10;
            text-overflow: ellipsis;
        }

        .platzbelegung-feld.veranstaltung:hover .time-belegung {
           display: inline; /* Beim Hover anzeigen */
        }
        
        .platzbelegung-feld.veranstaltung:hover .time-belegung-small {
           display: inline; /* Beim Hover anzeigen */
        }

        .btn.veranstaltung {
            background-color: #ffba42;
            margin-right: 10px;
            width: 30px;
            height: 30px;
            opacity: 1;
        }