body {
    overflow: hidden;
}

* {
    margin: 0vh;
    user-select: none;
    padding: 0vh;
    line-height: normal;
    -webkit-user-drag: none;
}

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    gap: 1.48vh;
}

.shop {
    position: relative;
}

.shop-content {
    display: flex;
    padding-top: 3.24vh;
    padding-left: 4.91vh;
    padding-right: 4.91vh;
    padding-bottom: 4.91vh;
    flex-direction: column;
    gap: 0.93vh;
    border-radius: 2.41vh;
    background: var(--colorBg);
    align-items: center;
}

.close-btn {
    top: 2.04vh;
    right: 1.39vh;
    width: 3.24vh;
    height: 3.24vh;
    position: absolute;
    display: flex;
    align-items: center;
    transform: scale(.8);
    justify-content: center;
    border-radius: 0.37vh;
    transition: .3s ease;
    background: radial-gradient(115.72% 115.72% at 51.43% 51.43%,var(--color-closeBtn) 0%, var(--color-closeBtnSec) 100%);
}

.close-btn:hover {
    box-shadow: 0vh 0vh 0.28vh 0vh var(--color-closeBtnHover) inset, 0vh 1.2vh 1.48vh 0vh var(--color-closeBtnShadow);
}

.close-btn svg {
    transition: .3s ease;
}

.close-btn:hover svg {
    transform: rotate(-90deg);
}

.close-btn:active {
    opacity: .8;
}

.basket {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1.02vh;
    width: 36.94vh;
    height: 71.77vh;
    border-radius: 2.41vh;
    background: var(--color-bgBasket);
    animation: slideInFromRight 0.5s ease-out;
}

/* Animation-Klasse */
.basket.visible {
    animation: slideInFromRight 0.5s ease-out;
    display: flex;
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(100%);
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}



.header {
    position: relative;
    display: inline-flex;
    justify-content: space-between;
    min-width: 68.7vh;
    min-height: 8.06vh;
    gap: 3.06vh;
}

.header-desc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.server-names{
    display: flex;
    align-items: center;
    gap: 0.74vh;
}

.server-Name {
    font-family: "Gilroy-ExtraBold";
    font-size: 4.12vh;
    background: radial-gradient(70.24% 70.24% at 50% 50%, #FFF 0%, #696969 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.server-secName {
    font-family: "BrothershipRegular";
    height: 3.06vh;
    padding: 1vh;
    margin-top: 0.8vh;
    margin-left: -1vh;
    font-size: 3.89vh;
    background: radial-gradient(70.24% 70.24% at 50% 50%, var(--color-prim) 0%, var(--color-nameSec) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.header-secDesc {
    margin-top: -0.28vh;
    color: #ffffff40;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
}

.categorys {
    right: 0vh;
    display: flex;
    align-items: flex-start;
    margin-top: 0.74vh;
    gap: 1.02vh;
}

.category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.83vh;
    transition: .3s ease;
}

.category:active {
    opacity: .7;
}

.category-name {
    color: #ffffff8c;
    font-family: "Gilroy-SemiBold";
    font-size: 1.11vh;
    transition: .3s ease;
}

.icon-svg {
    position: absolute;
    max-height: 1.39vh;
    width: auto;
    opacity: .5;
    filter: grayscale(1) brightness(100);
}

.category-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 6.02vh;
    height: 4.72vh;
}

.category-box img {
    margin-top: 0.19vh;
}

.category:hover .icon-svg {
    filter: none;
}

.svgImage {
    transition: .3s ease;
    filter: grayscale(1) brightness(500%);
}

.category:hover .svgImage {
    transition: .3s ease;
    filter: none;
}

.category:hover .category-name {
    color: #FFF;
}

.category:hover .icon-svg {
    filter: none;
    opacity: 1;
}

.selectedCategory .svgImage {
    filter: none;
}

.selectedCategory .category-name {
    color: #FFF;
}

.selectedCategory .icon-svg {
    filter: none;
    opacity: 1;
}

.items {
    display: flex;
    width: 69.17vh;
    min-height: 54.63vh;
    max-height: 54.63vh;
    overflow: scroll;
    align-items: flex-start;
    align-content: flex-start;
    gap: 1.94vh;
    flex-wrap: wrap;
}

.items::-webkit-scrollbar {
    display: none;
}

.item {
    position: relative;
    display: flex;
    padding: 0.93vh;
    flex-direction: row;
    align-items: center;
    align-content: flex-end;
    gap: 0.74vh 4.72vh;
    transition: .3s;
    border-radius: 0.56vh;
    max-height: 26.2vh;
    max-width: 21.76vh;
    flex-wrap: wrap;
    background: radial-gradient(81.11% 81.11% at 50% 38.29%, #ffffff26 0%, #ffffff00 100%);
    box-sizing: border-box;
    animation: slideInFromBottom 0.5s ease-out;
}

@keyframes slideInFromBottom {
    0% {
        transform: translate(10%);
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    100% {
        transform: translate(0);
        opacity: 1;
    }
}

.item:hover {
    border-radius: 0.56vh;
    box-sizing: border-box;
    border: 0.09vh solid var(--color-itemBorder);
    background: radial-gradient(138.29% 141.46% at 57.3% 0%, var(--color-itemBg) 0%, #1a96cf00 100%);
    box-shadow: 0vh 0vh 1.2vh 0vh var(--color-shadowItem) inset, 0vh 0vh 3.33vh 0vh var(--color-shadowItem);
}


.item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19.91vh;
    height: 16.02vh;
    border-radius: 0.19vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, #ffffff29 0%, #ffffff00 100%);
}

.item-img img:hover {
    width: 18vh;
    height: auto;
    transition: ease-in-out 0.1s;
}

.item-img img {
    object-fit: contain;
    width: 16vh;
    height: auto;
    transition: ease-in-out 0.1s;
}

.item-desc {
    display: flex;
    width: 19.54vh;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.item-descTxt {
    color: #ffffff40;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
    font-weight: 400;
}

.item-iBox {
    display: flex;
    width: 19.54vh;
    justify-content: space-between;
    align-items: center;
    gap: 0.74vh;
}

.item-name {
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
}

.item-price {
    color: #FFF;
    padding: 0.19vh 0.46vh;
    font-family: "Gilroy-Regular";
    font-size: 1.2vh;
    background: radial-gradient(393.74% 190.13% at 50% 50%, var(--color-itemPrice) 0%, #72e67e00 100%);
    box-shadow: 0vh 0vh 2.41vh 0vh var(--color-itemPriceShadow);
}

.basket-btn {
    display: flex;
    width: 19.91vh;
    height: 3.52vh;
    justify-content: center;
    align-items: center;
    gap: 0.93vh;
    opacity: .7;
    color: #FFF;
    font-family: "Gilroy-Regular";
    font-size: 1.3vh;
    border-radius: 0.56vh;
    background: radial-gradient(84.18% 84.18% at 50% 50%, #ffffff29 0%, #ffffff00 100%);
    transition: .3s ease;
}


.basket-btn:hover {
    opacity: 1;
}

.basket-btn:active {
    opacity: .7;
}

.line-bottom {
    position: absolute;
    bottom: -0.19vh;
    left: 1.74vh;
    width: 3.89vh;
    height: 0.37vh;
    background: #FFF;
    box-shadow: 0vh -0.19vh 3.06vh 0vh #FFF;
}

.top-content {
    margin-top: 2.45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.76vh;
}


#vehicleShowcaseContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 29.1685vh;
    height: 24.1667vh;

    margin-top: 4.2222vh;
}

#upperSVG {
    position: absolute;
    margin-left: -29.6vh;
    margin-top: 1vh;
    width: 7.8vh;
    height: auto;
}

#lowerSVG {
    position: absolute;
    margin-left: 29.2vh;
    margin-top: 29.8519vh;
    width: 7.8vh;
    height: auto;
}

#vehicleBg {
    position: absolute;
    width: 29.1685vh;
    height: 29.1667vh;
    animation: spinIn 1s ease-out forwards;
    transform-origin: center;
}

@keyframes spinIn {
    0% {
        transform: rotate(0deg) scale(0.6);
        opacity: 0;
    }
    100% {
        transform: rotate(360deg) scale(1);
        opacity: 1;
    }
}


#selectedVehicle {
    position: absolute;
    width: 24vh;
    height: auto;
    animation: scaleIn 0.6s ease-out forwards;
}

@keyframes scaleIn {
    0% {
        transform: scale(0.0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.selectedVehicleName {
    color: #FFF;
    font-family: "Gilroy-Regular";

    font-style: normal;
    font-weight: 400;
    font-size: 1.8519vh;
    line-height: 2.1296vh;
}

#selectedVehicleCategory {
    margin-top: -1.2vh;
}

#optionsContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;

    width: 26.2963vh;
    height: 16.9444vh;

    margin-top: 3.6111vh;

    gap: 2.4074vh;
}

#rentingTimeContainer {
    width: 26.2963vh;
    height: 7.4074vh;
}

.optionContainerHeader {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4778vh;
    max-width: 26vh;
}

.firstHeading {
    font-family: 'Gilroy-Medium';
    font-style: normal;
    font-weight: 500;
    font-size: 1.8519vh;

    background: radial-gradient(70.24% 70.24% at 50% 50%, #FFFFFF 0%, #696969 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;

    white-space: nowrap; /* Text in einer Zeile halten */
}

.secondHeading {
    font-family: "BrothershipRegular";
    font-style: normal;
    font-weight: 400;
    font-size: 1.8519vh;
    margin-bottom: -0.8vh;
    padding-top: 0.1vh;

    background: radial-gradient(70.24% 70.24% at 50% 50%, var(--color-prim) 0%, var(--color-nameSec) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    
    white-space: nowrap; /* Text in einer Zeile halten */
    margin-left: -0.1vh;
    padding-left: 0.1vh;
}

.lineImg {
    flex-grow: 1;
    min-width: 6vh;
}

#chooseTimeContainer {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;

    margin-top: 0.463vh;
    gap: 2vh;
    width: 26.0185vh;
    height: 4.7222vh;

    background: radial-gradient(84.18% 84.18% at 50% 50%, #ffffff29 0%, #ffffff00 90%);
    border-radius: 0.5556vh;
}

#leftButton {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    margin-left: 1vh;

    width: 2.1296vh;
    height: 2.1296vh;

    background: var(--arrowButtonBg);
    box-shadow: 0vh 0vh 3.3333vh var(--color-shadow), inset 0vh 0vh 1.2037vh var(--color-shadow);
    border-radius: 0.2778vh;
    transform: matrix(-1, 0, 0, 1, 0, 0);
    transition: all 0.2s ease;
}

#leftButton:hover {
    filter: brightness(90%);
}

#leftButton:active {
    filter: brightness(80%);
}



#leftButtonSVG {
    box-sizing: border-box;

    position: absolute;
    width: 2.1296vh;
    height: 2.1296vh;

    box-shadow: inset 0vh 0vh 1.2037vh var(--color-shadow);
    border-radius: 0.2778vh;
}

#rightButtonSVG {
    box-sizing: border-box;

    position: absolute;
    width: 2.1296vh;
    height: 2.1296vh;

    margin-left: 0vh;

    box-shadow: inset 0vh 0vh 1.2037vh var(--color-shadow);
    border-radius: 0.2778vh;
}

#rightButton {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    margin-left: auto;
    margin-right: 1vh;

    width: 2.1296vh;
    height: 2.1296vh;

    background: var(--arrowButtonBg);
    box-shadow: 0vh 0vh 3.3333vh var(--color-shadow), inset 0vh 0vh 1.2037vh var(--color-shadow);
    border-radius: 0.2778vh;
    transition: all 0.2s ease;
}

#rightButton:hover {
    filter: brightness(90%);
}

#rightButton:active {
    filter: brightness(80%);
}

.arrow {
    width: 0.3241vh;
    height: 0.6481vh;
    scale: 200%;
}

.minutesText {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;
    line-height: 1.4815vh;

    margin-left: auto;

    color: #FFFFFF;
}

.minutesInput {
    font-family: 'Gilroy-Regular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.2963vh;
    line-height: 1.4815vh;

    margin-left: auto;

    background: transparent;
    border: none;
    color: white;
    outline: none;
}



#colorContainer {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    margin-top: 0.463vh;
    width: 26.0185vh;
    height: 4.7222vh;

    overflow-x: scroll;

    gap: 0.28vh;

    background: radial-gradient(84.18% 84.18% at 50% 50%, #ffffff29 0%, #ffffff00 100%);
    border-radius: 0.5556vh;
}

#colorContainer::-webkit-scrollbar {
    display: none;
}

#colorContainer .active {
    border: 0.0926vh solid var(--color-prim);
}

.colorItem {
    min-width: 2.6778vh;
    min-height: 2.6778vh;
    border-radius: 0.0926vh;
    transition: all 0.2s ease;
}

.colorItem:first-child {
    margin-left: 0.9259vh;
}

.colorItem:last-child {
    margin-right: 0.9259vh;
}

.colorItem:hover {
    filter: brightness(80%);
}

.colorItem:active {
    filter: brightness(70%);
}


#rentButton {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0 1.8519vh 0 1.8519vh;

    box-sizing: border-box;

    margin-top: 1.7593vh;

    width: 26.0185vh;
    height: 5vh;

    padding: 1.7593vh;

    background: var(--rentButtonBg);

    box-shadow: 0vh 0vh 3.3333vh var(--rentButtonShadow);
    border-radius: 0.5556vh;
    transition: all 0.2s ease;
}

#rentButton:hover {
    filter: brightness(80%);
}

#rentButton:active {
    filter: brightness(70%);
}

#rentButton .item-price {
    margin-left: auto;
}

#rentButtonSVG {
    position: absolute;
    width: 26.0185vh;
    height: 5vh;
    margin-left: -1.8vh;
}


.carshopelement {
    position: absolute;
    z-index: 2;
    left: 1.1vw;
	bottom: 4.5vh;
    width: 0.6vw;
}

.carshopelement2 {
	position: absolute;
	z-index: 2;
	right: 1.1vw;
    top: 12.5vh;
	width: 0.6vw;
}

.leftgradiant {
	position: absolute;
	top: 5vh;
	left: -2vw;
	width: 6vw;
	height: 10vh;
  
	background: var(--BlurColorSoft);
	filter: blur(6vw);
}

.leftgradiant2 {
	position: absolute;
	top: 58vh;
	left: -2vw;
	width: 6vw;
	height: 10vh;
  
	background: var(--BlurColorSoft);
	filter: blur(6vw);
}

.rightgradiant {
	position: absolute;
	top: 35vh;
	left: 15vw;
	width: 6vw;
	height: 10vh;
  
	background: var(--BlurColorSoft);
	filter: blur(6vw);
}

.rightgradiant2 {
	position: absolute;
	top: 58vh;
	left: 38vw;
	width: 6vw;
	height: 10vh;
  
	background: var(--BlurColor);
	filter: blur(6vw);
}































#timeLeftContainer {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

    gap: 0.8333vh;

    padding-right: 0.9259vh;

    position: absolute;
    width: var(--timeLeftWidth);
    height: 5.0926vh;
    right: var(--timeLeftRight);
    bottom: var(--timeLeftBottom);
    
    background: var(--timeLeftContainerBg);
    border: 0.0926vh solid var(--timeLeftBorder);
    border-radius: 0.463vh;

    opacity: 1;

    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#clockContainer {
    display: flex;
    align-items: center;
    justify-content: center;

    margin-left: 0.9259vh;

    width: 3.2407vh;
    height: 3.2407vh;

    background: var(--clockContainerBg);
    border: 0.0926vh solid var(--clockContainerBorder);
    border-radius: 0.2778vh;
}

#clockSVG {
    height: 1.8519vh;
    box-shadow: 0vh 0.3704vh 6.8704vh var(--color-shadow);
}

#timeLeftColumn {
    margin-top: 0.7vh;

    display: flex;
    flex-direction: column;

    font-family: 'Gilroy-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 1.0259vh;

    background: radial-gradient(131.25% 131.25% at 50% 50%, #FFFFFF 0%, #696969 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}


#timeLeft {
    font-family: 'BrothershipRegular';
    font-style: normal;
    font-weight: 400;
    font-size: 1.8519vh;
    line-height: 2.3vh;

    background: var(--timeLeftText);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}