.alleBahnen{
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
    padding: 0 8px;
    box-sizing: border-box;
    gap: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width:600px) {
    .alleBahnen {
        grid-template-columns: 1fr 1fr;
        padding: 0 16px;
        max-width: 400px;
    }
}

.Bahn{
    background-color: #00000030;
    width: 100%;
    border-radius: 5px;
    padding: 10px 5px;
    transition: 0.5s ease;
    box-sizing: border-box;
}

.Kegelbild{
    margin: auto;
    padding: 5px;
    /*width: min-content;*/
}

.Kegel{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

.KegelDot{
    position: relative;
    background: var(--dot-off);
    border-radius: 7.5px;
    margin: 2.5px 7.5px 2.5px 7.5px;
    width: 15px;
    height: 15px;
    color: black;
    opacity: 75%;
    box-shadow: #00000080 0px 0px 10px;
    overflow: hidden;
}

.KegelDot::after{
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(#ffdd00 25%, transparent);
    opacity: 0;
    transition: opacity 0.5s ease;
    border-radius: inherit;
    transition-delay: var(--delay);
}

.KegelDot.gefallen::after{
    opacity: 1;
}

.KegelDot.gefallen.liegt{
    background: #00000070;
}

.KegelDot.gefallen.liegt::after{
    opacity: 0.7;
}

.lane{
    padding: 5px;
    white-space: nowrap;
    font-size: 10px;
    text-align: left;
    grid-column: span 2;
}
/*
.one{
    margin-left: 25px;
}

.two{
    margin-left: 37.5px;
}

.seven{
    margin-left: 37.5px;
}

.nine{
}
*/
.yellowCard{
    background: radial-gradient(#ffd000b0, #00000040);
    margin: 5px 2.5px 5px 5px;
    width: 10px;
    height: 10px;
    align-self: end;
}

.yellowCardactiv{
    background: radial-gradient(#ffd000 25%, transparent);
}


.redCard{
    background: radial-gradient(#ac0000b0, #00000040);
    margin: 5px 5px 5px 2.5px;
    width: 10px;
    height: 10px;
    align-self: end;
}

.redCardactiv{
    background: radial-gradient(#ff0000 25%, transparent);
}

.AnzeigeTxt{
    margin: 1px 1px;
    padding: 1px 5px;
}

.Anzeige1{
    display: flex;
    justify-content: center;
}

.Wurf{
    width: 40px;
    text-align: end;
}

.aktKegel{
    width: 40px;
}

.BahnGes{
    width: 40px;
    text-align: end;
}

.Anzeige2{
    display: flex;
    justify-content: center;
}

.Zeit{
    width: 40px;
    text-align: end;
}

.Fehler{
    width: 40px;
}

.Ges{
    width: 40px;
    text-align: end;
}

.teamAnzeige{
    font-size: 8px;
    margin-bottom: 5px;
}

.nameAnzeige{
    font-size: 10px;
}

#btnTicker{
    background-color: var(--bg-shadow);
    padding: 5px;
    color: var(--text);
    border-radius: 5px;
    margin: 10px 0px;
}

.tooltip{
    font-size: 0px;
    text-align: center;
    transition: 1s cubic-bezier(0.85, 0, 0.5, 1);
}

.SetDataContainer{
    display: flex;
    justify-content: center;
    color: var(--set-text);

}

.SetDataContainerHead{
    display: flex;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: var(--set-head-text);
}

.SetDataSet{
    padding: 1px 3px;
}

.SetDataGes{
    padding: 1px 3px;
    width: 30px;
    text-align: right;
}

.SetDataVol{
    padding: 1px 3px;
    width: 25px;
    text-align: right;
}

.SetDataAbr{
    padding: 1px 3px;
    width: 25px;
    text-align: right;
}

.SetDataFW{
    padding: 1px 3px;
    width: 20px;
    text-align: center;
}

.sets{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ffffff1c;
    border-radius: 3px;
    transition: 1s ease;
    transition: 1s linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%, 0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%);
    font-size: 10px;
    height: 0px;
    overflow: hidden;
}

.SetProgressbar{
    background-color: #ffffff;
    padding-top: 1px;
    transition-duration: 1s;
    width: 0px;
}

#btnSets{
    background: linear-gradient(#31475e, #1e2831);
    color: aliceblue;
    border-width: 0px;
    border-radius: 4px;
    padding: 6px;
    box-shadow: 0px 0px 10px #2c3e50;
}

#btnTooltip{
    background: linear-gradient(#31475e, #1e2831);
    color: aliceblue;
    border-width: 0px;
    border-radius: 4px;
    padding: 6px;
    box-shadow: 0px 0px 10px #2c3e50;
}

.cards{
    display: flex;
    grid-column: span 2;
}