:root{
    --green: #00bf2d;
    --darkgrey: #252525;
    --darkgrey2: rgba(56,62,85,1);
    --lightgrey: #6C7876;
    --white: #dddddd;
    --red: red;
    --grey: gray;
}

@font-face{
    font-family: "Segoe UI Web";
    src: url("../../../../css/segoeui.ttf");
}


@media only screen and (min-width: 1000px){

    ::-webkit-scrollbar{
        width: 15px;
    }
    ::-webkit-scrollbar-track{
        background: var(--darkgrey2);
    }
    ::-webkit-scrollbar-thumb{
        border-radius: 15px;
        background: var(--green);
    }

    


    /*General*/
    body{
        color: var(--white);
        background: rgb(37,37,37);
        background: linear-gradient(-30deg, var(--darkgrey2) 0%, var(--darkgrey) 40%, var(--darkgrey) 60%, var(--darkgrey2) 100%);
        background-attachment: fixed;
        font-family: "Segoe UI Web";
        font-size: 2.6vh;
        overflow-x: hidden;
    }
    a{
        text-decoration: none;
        color: var(--white);
        transition: 1s;
    }




    /*Top*/
    #top{
        width: 100%;
    }
    #topcontent{
        height: 23vh;
    }
    .logosmall{
        float: left;
        margin-left: 2vw;
        height: 13vh;
    }


    #menu{
        padding-left: 5vw;
        float: right;
    }
    .menuentry{
        float: right;
        margin-top: 3vh;
        margin-right: 3vw;
        font-weight: 700;
        padding: 1vh;
        border-radius: 2vh;
    }
    .menuentry:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }

    .menumietliste{
        font-family: "Font Awesome 6 Free";
        font-size: 4.5vh;
        width: 6vw;
        text-align: center;
        padding: 10px;
        margin-top: 4vh;
    }


    #basket{
        display: none;
        float: right;
        margin-top: 20px;
        margin-right: 50px;
        margin-left: 30px;
    }
    .basketview{
        float: right;
        margin-top: 20px;
        margin-right: 50px;
        margin-left: 30px;
    }

    /*landingpage*/

    .landingcontent{
        text-align: center;
    }

    .landingheading{
        height: 55vh;
        width: 105%;
        margin-left: -2.5%;
        padding-left: 10%;
        padding-top: 8%;
        background-image: url("../media/background.jpg");
        background-size: cover;
        background-position-y: center;
        background-attachment: fixed;
        vertical-align: middle;
        text-align: left;
        color: rgb(0,255,0);
        font-size: 5vh;
    }
    .landingheading h2{
        font-size: 9vh;
        margin-bottom: 0;
    }
    .landingheading h4{
        margin-top: 0;
    }

    .landingequiplink{
        width: 45vw;
        height: 4.5vh;
        background-color: var(--green);
        border-radius: 2vw;
        display: block;
        margin: auto;
        margin-top: 2vw;
        padding: 10px;
    }
    .landingequiplink:hover{
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }

    .equipset{
        margin-bottom: 10vh;
    }

    .equipsetshead{
        height: 20vh;
        width: 105%;
        margin-left: -2.5%;
        background-image: url("../media/clubmixer.jpg");
        background-size: cover;
        background-position-y: center;
        background-attachment: fixed;
        text-align: center;
        vertical-align: middle;
        color: rgb(0,255,0);
        font-size: 8vh;
        padding-top: 5%;
    }

    .equipsethead{
        color: var(--green);
    }

    .landingbottomimg{
        height: 45vh;
        width: 105%;
        margin-left: -2.5%;
        padding-left: 10%;
        padding-top: 8%;
        background-image: url("../media/abiball.jpg");
        background-size: cover;
        background-position-x: center;
        background-attachment: fixed;
        vertical-align: middle;
        text-align: left;
        color: rgb(0,255,0);
        font-size: 2.5vw;
    }
    
    /*Main*/

    #mainsmall{
    }

    /*Filter*/
    .filtersearch{
    }
    #searchtb{
        width:50%;
        font-family: "Segoe UI";
        font-size: 3vh;
        border-radius: 1vw;
        border: none;
        border: var(--green) 1px solid;
        background-color: rgba(255,255,255,0.3);
        color: var(--white);
        padding: 10px;
        position: relative;
        left: 25%;
    }
    #searchtb:focus-visible{
        box-shadow: 0px 0px 10px 5px  var(--green);
        transition: 0.5s;
        outline: none;
        border: none;
    }

    #searchbtn{
        font-family: "Font Awesome 6 Free";
        font-size: 3vh;
        border-radius: 2vh;
        border: none;
        padding: 7px;
        position: relative;
        left: 26%;
        background-color: var(--white);
    }
    #searchbtn:hover{
        box-shadow: 0px 0px 10px 5px  var(--green);
        background-color: var(--green);
        transition: 0.5s;
    }

    .maintable{
        width: 100%;
        margin-top: 0;
    }
    .tdfilter{
        border: none;
        width: 20%;
        vertical-align: top;
    }
    .tdcontent{
        border: none;
        vertical-align: top;
    }

    .filterheadfmb{
        display: none;
    }

    .filter{
        background-color: rgba(255,255,255,0.3);
        border-radius: 2vw;
        text-align: center;
        width: 100%;
        border: 2px var(--green) solid;
        overflow: hidden;
        font-size-adjust: 0.4;
        position: relative;
        top: -3vw;
    }
    .filter a{
    }

    .filterheadd{
        border-top-left-radius: 2vw;
        border-bottom-right-radius: 2vw;
        width: 15vw;
        height: 3vw;
        background: var(--green);
        color: var(--white);
        position: relative;
        left: -3px;
        font-size: 2.6vh;
    }

    .filterheadf{
        border-top-right-radius: 2vw;
        border-bottom-right-radius: 2vw;
        width: 15vw;
        height: 3vw;
        background: var(--green);
        color: var(--white);
        position: relative;
        left: -3px;
        font-size-adjust: 0.5;
    }
    

    .clearfilterbtn{
        border-top-right-radius: 2vw;
        border-bottom-left-radius: 2vw;
        padding-top: 5px;
        width: 10vw;
        height: calc(3vw - 5px);
        background: var(--green);
        color: var(--white);
        font-family: "Font Awesome 6 Free";
        display: block;
        font-size-adjust: 0.5;
    }
    .clearfilterbtn:hover{
        box-shadow: 0px 0px 10px 5px var(--red);
        background-color: var(--red);
        transition: 0.5s;
    }

    

    .date{
        border-right: var(--lightgrey) solid 1px;
        padding: 1vw;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: left;
    }

    #datep{
        font-family: "Segoe UI";
        font-size: 1vw;
        border-radius: 1vw;
        border: none;
        border: var(--lightgrey) 1px solid;
        padding: 5px;
    }

    #datep:focus-visible{
        box-shadow: 0px 0px 10px 5px  var(--green);
        transition: 0.5s;
        outline: none;
        border: none;
    }

    .filteravailable{
        width: 80%;
        margin-top: 20px;
        margin-bottom: 50px;
        margin-left: 3vw;
        text-align: left;
    }

    #availablecb{
        width: 1.5vw;
        height: 1.5vw;
        border-radius: 2vw;
        cursor: pointer;
    }

    .oberkat{
        margin-top: 20px;
        margin-bottom: 2vw;
        margin-left: 3vw;
        text-align: left;
    }
    .filtertitle{
        font-weight: 600;
        margin-bottom: 10px;
        height: 90%;
        display: block;
    }
    .oberkat a{
        display: block;
    }

    .oberkat a:hover{
        text-shadow:0px 0px 5px var(--green), 0px 0px 15px var(--green);
    }
    .selkat{
        color: var(--green);
        display: block;
    }

    .unterkat{
        margin-top: 20px;
        margin-left: 5vw;
        text-align: left;
        margin-bottom: 2vw;
    }
    .unterkat a{
        display: block;
    }
    .unterkat a:hover{
        text-shadow:0px 0px 5px var(--green), 0px 0px 15px var(--green);
    }

    /* content*/
    #content{
        width: 97%;
        padding-left: 1%;
        text-align: center;
        margin-bottom: 5vh;
    }

    #content::after{
        content: "";
        clear: both;
        display: table;
    }
    .third{
        background-color: var(--green);
        color: white;
        width: 20%;
        height: 28vw;
        float: left;
        margin: 6vw;
        border-radius: 2vw;
        text-align: center;
        font-weight: 700;
        transition: 1s;
    }
    .third:hover{
        background-color: #34d0ff;
        transition: 0.5s;
        transform: scale(1.05);
    }
    .quarter{
        background: linear-gradient(0deg, var(--green) 50%, transparent 70%);
        color: white;
        width: 15.8vw;
        height: 32vw;
        float: left;
        margin: 1.5vw;
        border-radius: 2vw;
        text-align: center;
        font-weight: 700;
        transition: 1s;
        position: relative;
    }
    .quarter:hover{
        background: linear-gradient(0deg, var(--green) 100%, transparent 100%);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transition: 0.5s;
        transform: scale(1.05);
    }
    .prodtext{
        background-color: var(--green);
        position: absolute;
        bottom: 0px;
        border-radius: 2vw;
        height: calc(13vw - 2 * 20px);
        width: calc(100% - 2 * 20px);
        padding: 20px;
    }

    .thirdimg{
        margin-top: 3vw;
        margin-bottom: 1vw;
        width: 80%;
        border-radius: 2vw;
    }


    /*Produkt Seite*/
    .pdktitle{
        font-weight:700;
        font-size-adjust: 0.8;
        margin-right: 7vw;
        width: 85%;
        border-radius: 2vw;
        background-color: var(--green);
        color: var(--white);
        padding: 1vw;
        margin: auto;
    }
    .pdkimg{
        float: left;
        margin-left: 7vw;
        padding: 2vw;
        width: 25vw;
    }
    
    .pdkrent{
        margin-right: 7vw;
        margin-top: 2vw;
        border-radius: 2vw;
        width: 50%;
        background-color: var(--white);
        color: var(--darkgrey);
        padding: 1vw;
        text-align: left;
        float: right;
    }
    .pdkprc{
        width: 100%;
        border-radius: 2vw;
        text-align: left;
    }

    .pdkrentbtn{
        width: 7vw;
        height: 3vw;
        color: var(--white);
        background-color: var(--green);
        border-radius: 2vw;
        font-family: "Font Awesome 6 Free";
        margin-left: 10px;
        font-size: 3vh;
    }
    .pdkrentbtn:hover{
        box-shadow: 0px 0px 15px 5px  var(--green);
        transition: 0.5s;
        transform: scale(1.02);
    }

    .pdkprccount{
        font-size: 2vh;
    }
    .pdkprclb{
        font-size: 2.8vh;
        font-weight: 600;
    }
    .pdkcount{
        width: 6vw;
        height: 3vw;
        border-radius: 2vw;
        background: var(--white);
        border: var(--grey) 1px solid;
        text-align: center;
        font-size: 2vh;
    }

    .pdkcount option{
        font-size: 1.5vh;
    }

    .pdkinfos{
        float: right;
        margin-right: 7vw;
        width: 50%;
        background-color: var(--white);
        color: var(--darkgrey);
        padding: 1vw;
        margin-top: 2vw;
        border-radius: 2vw;
        text-align: left;
    }
    .small{
        font-size-adjust: .4;
        font-style: italic;
        font-weight: 400;
        color: var(--grey);
    }
    .disabledbtn{
        background-color: var(--grey) !important;

    }
    .disabledbtn{
        box-shadow: 0px 0px 0px 0px  var(--gray) !important;
        transform: scale(1.00) !important;
    }
    

    /*Mietliste*/
    .mldate{
        background-color: var(--white);
        color: var(--darkgrey);
        border-radius: 2vw;
        text-align: center;
        height: 4vw;
        overflow: hidden;
    }
    .mldate .filterdate{
        padding-top: 10px;
        margin-right: 10vw;
    }
    .mldate .filterheadd{
        float: left;
    }
    .mldate #datep{
        margin-right: 20px;
    }
    .mldate #searchbtn{
        position: unset;
    }
    table{
        width: 80%;
        margin: auto;
        border-collapse: collapse;
        margin-top: 3vw;
        margin-bottom: 3vw;
        font-size: 2.5vh;
    }
    th, td{
        border-bottom: 1px solid;
    }

    .gotocheckout{
        width: 30vw;
        height: 5vw;
        line-height: 5vw;
        margin-top: 1vh;
        margin: auto;
        font-weight: 700;
        padding: 1vh;
        border-radius: 2vw;
        background: var(--green);
    }
    .gotocheckout:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }


    /*Checkout*/
    .checkoutform{
        width: 50%;
        margin: auto;
        background: var(--white);
        color: var(--darkgrey);
        border-radius: 2vw;
        text-align: left;
        padding: 2vw;
    }
    #perdata{
        width: 90%;
        margin-right: 10%;
        font-size-adjust: .9;
        color: var(--darkgrey);
        border-radius: 1vw;
        margin-top: 15px;
    }

    .anmerkunglb{
        color: var(--grey);
        font-style: italic;
        font-size-adjust: .35;
    }
    .checkoutprice{
        font-weight: 400; 
        color: var(--grey);
        font-size-adjust: .4;
    }

    #msgform{
        font-size-adjust: .8;
        border-radius: 1vw;
    }

    #subbutton{
        width: 30vw;
        height: 5vw;
        margin-top: 1vh;
        margin: auto;
        font-weight: 700;
        padding: 1vh;
        border-radius: 2vw;
        background: var(--green);
        color: var(--white);    
        font-size-adjust: 1.2;
        margin-left: 9vw;
    }
    #subbutton:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }

    /*## ADMIN ##*/

    .admininfolb{
        margin:auto;
        width: 50%;
        background-color: var(--white);
        color: var(--darkgrey);
        padding: 1vw;
        margin-top: 2vw;
        margin-bottom: 2vw;
        border-radius: 2vw;
        text-align: left;
    }



    .goto{
        width: 50vw;
        height: 2vw;
        margin-left: 22.5vw;
        background-color: #00A3D4;
        color: white;
        border-radius: 2vw;
        display: table;
        margin-top: 8vh;
        padding: 1vw;
        transition: 0.5s;
    }
    .goto:hover{
        background-color: #34d0ff;
        transition: 0.5s;
        transform: scale(1.05);
    }
    .addtobasket{
        background-color: white;
        color: #00A3D4;
        border-radius: 2vw;
        height: 1vw;
        display: table;
        transition: 0.5s;
        font-size: 1.6vw;
        padding: 0.4vw;
        margin-top: 0.3vw;
        position: absolute;
        bottom: 0;
    }
    .addtobasket:hover{
        transition: 0.5s;
        transform: scale(1.05);
    }

    .rentprice{
        position: absolute;
        bottom: 1vw;
        width: 100%;
        text-align: center;
        left: 0;
    }

    .cardimg{
        height: 85px;
    }

    .errormsg{
        background-color: darkred;
        color: white;
        padding: 10px;
        border-radius: 10px;
    }

    #footer{
        width: 100%;
        padding-left: 5vw;
        padding-top: 5vh;
        color: var(--white);
        border-top: 2px solid var(--white);
    }
}

@media only screen and (max-width: 1000px){

    ::-webkit-scrollbar{
        width: 15px;
    }
    ::-webkit-scrollbar-track{
        background: var(--darkgrey2);
    }
    ::-webkit-scrollbar-thumb{
        border-radius: 15px;
        background: var(--green);
    }

    /*General*/
    html {
        width: 100vw;
        overflow-x: hidden;
      }
    body{
        color: var(--white);
        background: rgb(37,37,37);
        background: linear-gradient(-30deg, var(--darkgrey) 60%, var(--darkgrey2) 100%);
        background-attachment: fixed;
        font-family: "Segoe UI Web";
        font-size: 4.2vw;
        overflow-x: hidden;
    }
    a{
        text-decoration: none;
        color: var(--white);
        transition: 1s;
    }

    #top{
        width: 100%;
    }
    .logosmall{
        margin-left: 8vw;
        margin-top: 4vw;
        width: 60%;
        z-index: 99;
        position: relative;
    }

    #menu::before {
        font-family: "Font Awesome 6 Free";
        content: "";
        font-size: 5vh;
        display: inline-block;
        width: 90%;
        text-align: right;
        margin-bottom: 3vh;
    }

    #menu{
        padding-left: 5vw;
        height: 5vh;
        max-height: 5vh;
        overflow: hidden;
        transition: max-height 1s;
        position: relative;
        top: -7vh;
    }
    

    .menuentry{
        width: 80% !important;
        margin-top: 3vh;
        margin-right: 3vw;
        font-weight: 700;
        padding: 1.2vh;
        border-radius: 2vh;
        display: inline-block;
        background: var(--green);
        color: var(--white);
        text-align: center;
        height: 3vh;
        font-size-adjust: .6;
    }
    .menuentry:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }
    .menumietliste{
        font-family: "Font Awesome 6 Free";
        width: 6vw;
        text-align: center;
        margin-top: 4vh;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }
    .menumietliste::after {
        content: "Warenkorb";
        font-family: "Segoe UI";
        margin-left: 5vw;
      }

    #basket{
        display: none;
        float: right;
        margin-top: 20px;
        margin-right: 50px;
        margin-left: 30px;
    }
    .basketview{
        float: right;
        margin-top: 20px;
        margin-right: 50px;
        margin-left: 30px;
    }

    /*landingpage*/

    .landingcontent{
        text-align: center;
    }

    .landingheading{
        height: 55vw;
        width: 105%;
        margin-left: -2.5%;
        padding-top: 30%;
        background-image: url("../media/background.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        vertical-align: middle;
        color: rgb(0,255,0);
        font-size: 5vw;
    }
    .landingheading h2{
        font-size: 8vw;
        margin-bottom: 0;
    }
    .landingheading h4{
        margin-top: 0;
    }

    .landingequiplink{
        width: 60vw;
        height: 10vw;
        background-color: var(--green);
        border-radius: 2vw;
        display: block;
        margin: auto;
        padding: 10px;
    }
    .landingequiplink:hover{
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }
    .equipsets{
        text-align: left;
    }

    .equipset{
        margin-bottom: 5vw;
    }

    .equipsetshead{
        height: 35vw;
        width: 105%;
        margin-left: -2.5%;
        padding-top: 30%;
        background-image: url("../media/clubmixer.jpg");
        background-size: cover;
        background-position: center;
        background-attachment: fixed;
        text-align: center;
        vertical-align: middle;
        color: rgb(0,255,0);
        font-size: 8vw;
    }

    .equipsethead{
        color: var(--green);
    }

    .landingbottomimg{
        height: 40vw;
        width: 105%;
        margin-left: -2.5%;
        padding-left: 10%;
        padding-top: 8%;
        background-image: url("../media/abiball.jpg");
        background-size: cover;
        background-position-x: center;
        background-attachment: scroll;
        vertical-align: middle;
        text-align: left;
        color: rgb(0,255,0);
        font-size: 2.5vw;
    }

    /*Filter*/
    .filtersearch{
    }
    #searchtb{
        width:60%;
        font-family: "Segoe UI";
        border-radius: 2vh;
        font-size: 5vw;
        border: none;
        border: var(--green) 1px solid;
        background-color: rgba(255,255,255,1);
        color: var(--darkgrey);
        padding: 10px;
        position: relative;
        left: 14%;
    }
    #searchtb:focus-visible{
        box-shadow: 0px 0px 10px 5px  var(--green);
        transition: 0.5s;
        outline: none;
        border: none;
    }

    #searchbtn{
        font-family: "Font Awesome 6 Free";
        font-size: 5vw;
        border-radius: 2vh;
        border: none;
        padding: 7px;
        position: relative;
        left: 17%;
    }
    #searchbtn:hover{
        box-shadow: 0px 0px 10px 5px  var(--green);
        background-color: var(--green);
        transition: 0.5s;
    }

    .maintable{
        width: 100%;
        margin-top: 0;
    }
    .tdfilter{
        border: none;
        vertical-align: top;
        max-width: 0px;
    }
    .tdcontent{
        max-width: 100%;
        border: none;
        vertical-align: top;
    }


    .filterheadfmb{
        border-radius: 2vw;
        width: 65vw;
        height: 5vw;
        padding: 30px;
        background: var(--green);
        color: var(--white);
        font-size: 5vw;
        margin: auto;
        margin-top: 3vw;
        text-align: center;
    }

    .filter{
        background-color: rgba(255,255,255,0.2);
        border-radius: 2vw;
        text-align: center;
        width: 98%;
        border: 5px var(--green) solid;
        overflow: hidden;
        font-size-adjust: 0.4;
        position: relative;
        top: 5vw;
        font-size: 5vw;
        display: none;
    }
    .filter a{
    }

    .filterheadd{
        border-top-left-radius: 2vw;
        border-bottom-right-radius: 2vw;
        width: 30vw;
        height: 8vw;
        background: var(--green);
        color: var(--white);
        position: relative;
        left: -3px;
    }

    .filterheadf{
        border-top-right-radius: 2vw;
        border-bottom-right-radius: 2vw;
        width: 30vw;
        height: 8vw;
        background: var(--green);
        color: var(--white);
        position: relative;
        left: -3px;
    }
    

    .clearfilterbtn{
        border-top-right-radius: 2vw;
        border-bottom-left-radius: 2vw;
        padding-top: 5px;
        width: 30vw;
        height: 8vw;
        background: var(--green);
        color: var(--white);
        font-family: "Font Awesome 6 Free";
        display: block;
        font-size-adjust: 0.5;
    }
    .clearfilterbtn:hover{
        box-shadow: 0px 0px 10px 5px var(--red);
        background-color: var(--red);
        transition: 0.5s;
    }

    

    .date{
        border-right: var(--lightgrey) solid 1px;
        padding: 1vw;
        margin-top: 20px;
        margin-bottom: 20px;
        text-align: left;
    }

    #datep{
        font-family: "Segoe UI";
        font-size: 3vw;
        border-radius: 2vw;
        border: none;
        border: var(--lightgrey) 1px solid;
        padding: 5px;
    }

    #datep:focus-visible{
        box-shadow: 0px 0px 10px 5px  var(--green);
        transition: 0.5s;
        outline: none;
        border: none;
    }

    .filteravailable{
        width: 80%;
        margin-top: 20px;
        margin-bottom: 50px;
        margin-left: 3vw;
        text-align: left;
    }

    #availablecb{
        width: 5vw;
        height: 5vw;
        border-radius: 2vw;
        cursor: pointer;
    }

    .oberkat{
        margin-top: 20px;
        margin-bottom: 2vw;
        margin-left: 3vw;
        text-align: left;
    }
    .filtertitle{
        font-weight: 600;
        margin-bottom: 10px;
        height: 90%;
        display: block;
    }
    .oberkat a{
        display: block;
        margin-bottom: 15px;
    }

    .oberkat a:hover{
        text-shadow:0px 0px 5px var(--green), 0px 0px 15px var(--green);
    }
    .selkat{
        color: var(--green);
        display: block;
    }

    .unterkat{
        margin-top: 20px;
        margin-left: 5vw;
        text-align: left;
        margin-bottom: 2vw;
    }
    .unterkat a{
        display: block;
        margin-bottom: 15px;
    }
    .unterkat a:hover{
        text-shadow:0px 0px 5px var(--green), 0px 0px 15px var(--green);
    }

    
    /*Main*/

    #main{
        margin-top: 60vw;
        width: 110%;
        margin-left: -5%;
    }

    #mainsmall{
    }



    #content{
        width: 87%;
        padding: 5%;
        text-align: center;
        margin-bottom: 10vw;
    }
    #content::after{
        content: "";
        clear: both;
        display: table;
    }
    .third{
        background: linear-gradient(270deg, var(--green) 50%, transparent 90%);
        color: white;
        width: 100%;
        padding-top: 10vw;
        height: 15vw;
        float: left;
        margin: 2vw;
        border-radius: 2vw;
        text-align: center;
        font-weight: 700;
        transition: 0.5s;
    }
    .third:hover{
        background: linear-gradient(270deg, var(--green) 50%, transparent 90%);
        transition: 0.5s;
        transform: scale(1.05);
    }
    .quarter{
        background: linear-gradient(270deg, var(--green) 50%, transparent 90%);
        color: white;
        width: 100%;
        padding-top: 7vw;
        height: 18vw;
        float: left;
        margin: 2vw;
        border-radius: 2vw;
        text-align: left;
        font-weight: 700;
        transition: 0.5s;
    }

    .thirdimg{
        margin-top: -7vw;
        padding-right: 5vw;
        height: 25vw;
        float: left;
    }
    .goto{
        background-color: #00A3D4;
        color: white;
        width: 100%;
        padding-top: 3vw;
        padding-bottom: 3vw;
        height: auto;
        float: left;
        margin: 2vw;
        border-radius: 2vw;
        text-align: center;
        font-weight: 700;
        transition: 0.5s;
    }
    .goto:hover{
        background-color: #34d0ff;
        transition: 0.5s;
        transform: scale(1.05);
    }
    .addtobasket{
        background-color: white;
        color: #00A3D4;
        border-radius: 2vw;
        height: 17vw;
        width: 30%;
        display: table;
        transition: 0.5s;
        font-size: 5vw;
        padding: 0.4vw;
        margin-top: -13vw;
        float: right;
        padding-top: 8%;
        text-align: center;
    }
    .addtobasket:hover{
        transition: 0.5s;
        transform: scale(1.05);
    }


    /*Product*/

    .pdktitle{
        position: relative;
        top: -5vh;
        font-weight: 600;
        font-size: 6vw;
    }
    .pdkrent{
        background-color: var(--green);
        color: var(--white);
        border-radius: 6vw;
        margin-top: 2vw;
        padding: 4vw;
        padding-bottom: 8vh;
    }
    .pdkinfos{
        background-color: var(--white);
        color: var(--darkgrey);
        border-radius: 6vw;
        padding: 4vw 10vw;
        position: relative;
        top: -5vh;
        text-align: left;
    }

    .pdkprclb{
        font-size: 6vw;
        font-weight: 600;
    }
    .small{
        font-size: 2vw;
        font-weight: 400;
    }

    .pdkrentbtn{
        width: 15vw;
        height: 15vw;
        color: var(--green);
        background-color: var(--white);
        border-radius: 50%;
        font-family: "Font Awesome 6 Free";
        margin-left: 3vw;
        font-size: 6vw;
    }
    .pdkrentbtn:hover{
        box-shadow: 0px 0px 15px 5px  var(--green);
        transition: 0.5s;
        transform: scale(1.02);
    }
    .disabledbtn{
        background-color: var(--grey) !important;
        color: var(--white) !important;

    }
    .disabledbtn{
        box-shadow: 0px 0px 0px 0px  var(--gray) !important;
        transform: scale(1.00) !important;
    }

    .pdkprccount{
        font-size: 4vw;
    }
    .pdkprclb{
        font-size-adjust: 0.8;
        font-weight: 600;
    }
    .pdkcount{
        width: 15vw;
        height: 15vw;
        border-radius: 50%;
        background: var(--white);
        border: var(--grey) 1px solid;
        text-align: center;
        font-size: 5vw;
    }


    /*Mietliste*/
    .mldate{
        background-color: var(--white);
        color: var(--darkgrey);
        border-radius: 2vw;
        text-align: center;
        height: 27vw;
        margin-bottom: 3vw;
    }

    .mldate .filterheadd{
        top: 0px;
        border-top-right-radius: 0px;
        border-top-left-radius: 2vw;
        padding-top: 10px;
    }

    .mldate .filterdate{
        padding-top: 1vw;
        margin-right: -5vw;
    }
    .mldate #datep{
        width: 20%;
        margin-right: 3%;
    }
    .mldate #searchbtn{
        position: unset;
        margin-top: 1vh;
    }
    table{
        width: 90%;
        margin: auto;
        border-collapse: collapse;
        margin-top: 3vw;
        margin-bottom: 3vw;
    }
    th, td{
        border-bottom: 1px solid;
    }
    .cardimg{
        width: 20vw;
    }

    .gotocheckout{
        width: 75vw;
        height: 9vw;
        line-height: 8vw;
        margin-top: 1vh;
        margin: auto;
        font-weight: 700;
        padding: 1vh;
        border-radius: 2vw;
        background: var(--green);
    }
    .gotocheckout:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }


    /*Checkout*/
    .checkoutform{
        width: 95%;
        margin: auto;
        background: var(--white);
        color: var(--darkgrey);
        border-radius: 2vw;
        text-align: left;
        padding: 2vw;
        line-height: 13vw;
    }
    #perdata{
        float: right;
        width: 65%;
        margin-right: 1vw;
        font-size: 7vw;
        color: var(--darkgrey);
        border-radius: 1vw;
        margin-top: 15px;
    }

    .anmerkunglb{
        color: var(--grey);
        font-style: italic;
        font-size: 2vw;
    }
    .checkoutprice{
        font-weight: 400; 
        color: var(--grey);
        font-size: 3vw;
    }

    #msgform{
        font-size: 4vw;
        border-radius: 1vw;
        width: 100%;
    }

    #subbutton{
        width: 75vw;
        height: 11vw;
        line-height: 8vw;
        margin-top: 1vh;
        margin: auto;
        font-weight: 700;
        padding: 1vh;
        border-radius: 2vw;
        background: var(--green);
        color: var(--white);    
        font-size: 6vw;
        margin-left: 9vw;
    }
    #subbutton:hover{
        background: var(--green);
        box-shadow: 0px 0px 30px 15px  var(--green);
        transform: scale(1.05);
        transition: 0.5s;
    }

    /*## ADMIN ##*/

    .admininfolb{
        margin:auto;
        width: 80%;
        background-color: var(--white);
        color: var(--darkgrey);
        padding: 1vw;
        margin-top: 2vw;
        margin-bottom: 6vw;
        border-radius: 2vw;
        text-align: left;
    }

    .cardtable{
        font-size: 3vw;
    }

    .producttable{
        font-size: 2vw;
    }

    #footer{
        font-size: 12pt;
        width: 95%;
        float: left;
        padding-left: 5vw;
        padding-top: 5vh;
        color: #00A3D4;
        background-color: white;
    }

    .errormsg{
        background-color: darkred;
        color: white;
        padding: 10px;
        border-radius: 10px;
    }
}