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

    html, body {
        margin: 0;
        padding-left: 0px;
        background-color: rgb(113, 0, 148);
        background-image: none;
        color: white;
        overflow-x: hidden;
    }
    
    
    @keyframes NaviAktiv {
    
        0% {    filter:grayscale(0.8);
                transform: scale(20%);} 
    
        50% {   filter:grayscale(1);
                transform: scale(20%);} 
    
        100% {  filter:grayscale(0.8);
                transform: scale(20%);} 
    
    }
    
    #sale {
        filter: grayscale();
        border-color: #64646486;
        animation-name: NaviAktiv;
        animation-duration: 1s;
        animation-iteration-count: infinite;
    }
    
    #sale:hover {
        animation-name: NaviAktiv;
        animation-duration: 1s;
    }
    
    .Psuchen_alles {
        text-align: left;
        display: flex;
    }
    
    #psuchentext {
        border-top: 0.6vw solid #0094ff;
        border-bottom: 0.6vw solid #0094ff;
        width:89vw;
        font-size: 7vw;
        height: 10vw;
        margin-left: 0vw;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    
    #psuchentext:hover {
        transition: 0.2s;
        border-color: #e61010;
    }
    
    .Psuchenhintergrund {
        float: right;
        right: 0vw;
        place-items: right;
        text-align: center;
        display: block;
        background-color: #00ff3796;
        width: 10vw;
        height: auto;
        cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        border-top: 0.6vw solid #0094ff;
        border-bottom: 0.6vw solid #0094ff;
    }
    
    .Psuchen {
        height: 10vw;
        align-items: center;
    }


.Pfeilefilter{
    position: absolute;
    color: white;
    width: 30vw;
    height: 15vw;
    margin-top: 10vw;
}

    .PfeilLinks {
        left: 0vw;
    }

    .PfeilRechts {
        left: 70vw;
    }

.filter {
    overflow: hidden;
    align-items: center;
    justify-content: baseline;
    text-align:justify;
    height: 30vw;
    width: 120vw;
    user-select: none;
}

.filter2 {
    display: flex;
    align-items: center;
    text-align:justify;
    height: 30vw;
    width: 800vw;
    user-select: none;
    margin-left: 0vw;
}

#allesT:checked ~ .filter2 {
    margin-left: 0vw;
    transition: 0.3s;
}

#acrylicT:checked ~ .filter2 {
    margin-left: -100vw;
    transition: 0.3s;
}

#digitalT:checked ~ .filter2 {
    margin-left: -202vw;
    transition: 0.3s;
}

#clayT:checked ~ .filter2 {
    margin-left: -302vw;
    transition: 0.3s;
}


#crochetT:checked ~ .filter2 {
    margin-left: -402vw;
    transition: 0.3s;
}


#jewelleryT:checked ~ .filter2 {
    margin-left: -502vw;
    transition: 0.3s;
}


#clothingT:checked ~ .filter2 {
    margin-left: -602vw;
    transition: 0.3s;
}


#otherT:checked ~ .filter2 {
    margin-left: -702vw;
    transition: 0.3s;
}



.filter1 {
    width: 120vw;
    text-align: center;
    border-bottom: 0.2vw solid #a1afa00e;
    border-top: 0.2vw solid #a1afa013;
}

.filter1:hover {
    border-bottom: 0.2vw solid #00000000;
    border-top: 0.2vw solid #a1afa000;
}

.filter1AU {
    border-bottom: 0.2vw solid #00000000;
    text-align: center;
    width: 120vw;
}

.filterbild {

    user-select: none;
    height: 15vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
}

.filterbildAU {
    height: 15vw;
}

.filterbild:hover {
    transition: 1s;
    height: 15vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(120%);
}


.filtercheckbox {
    border-top: 0.1vw solid black;
    border-bottom: 0.1vw solid black;
    padding: 0.5vw;
    transform: scale(60%);
}

.filterbox {
    padding: 0.5vw;
}

.filterbox:hover {
    transition: 1s;
    filter:hue-rotate(360deg);
    transform:scale(115%);
}


.digital {
    transform: scale(110%) translateY(0.3vw);
    bottom: 2vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

.digital:hover {
    transform: scale(110%) translateY(0.3vw);
}


    

#container {
    margin-top: 3vw;
    width: 100%;
    justify-content: center;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1vw;
    display: grid;
    grid-template-columns: repeat(1, 95%);
    /*grid-template-rows: repeat(6, 15%);*/
    grid-gap: 5vw;
    padding: 1vw;
}


/*
@keyframes Angebotscroll {
    
    0% {    filter:grayscale(0.8);
            transform: scale(100%);} 

    50% {   filter:grayscale(1);
            transform: scale(105%);} 

    100% {  filter:grayscale(0.8);
            transform: scale(100%);} 

}
*/

.Angebot {
    border-radius: 2.7vw;
    font-size: 3vw;
    display: grid;
    margin-top: 7vw;
    background-color: #000000bd;
    transform: scale(100%);
    width: 92.5vw;
    height: 57vw;
}

.Angebot:hover {
    transition: 0.1s;
    transform:scale(105%);
}


.rahmen {
    margin-left: 0.2vw;
    margin-top: 0.1vw;
    border-radius: 2.5vw;
    position: absolute;
    width: 91.5vw;
    height: 56.5vw;
    z-index: 13;
    user-select:contain;
    transform: scale(101%);
}

.rahmenacrylic {
    filter:hue-rotate(45deg);
}

.rahmendigital {
    filter:hue-rotate(90deg);
}

.rahmenclay {
    filter:hue-rotate(135deg);
}

.rahmencrochet {
    filter:hue-rotate(180deg);
}

.rahmencjewellery {
    filter:hue-rotate(225deg);
}

.rahmenclothing {
    filter:hue-rotate(270deg);
}

.rahmenother {
    filter:hue-rotate(335deg);
}

.Preis{
    position: absolute;
    font-size: 3vw;
    margin-top: 40vw;
    margin-left: 61vw;
    border-bottom: 0.1vw solid rgba(216, 8, 8, 0.226);;
}

.Preisalt {
    position: absolute;
    font-size: 2.3vw;
    margin-top: 37.6vw;
    margin-left: 71vw;

    text-align: right;
    font-style:italic;
    text-decoration:line-through;
    transform: rotate(0deg);
    color: rgb(137, 200, 27);
}

.Versand {
    position: absolute;
    margin-top: 44vw;
    margin-left: 61vw;
    color: #0094ff;
    font-size: 2.5vw;
} 

.Titel{
    display: none;
    /*overflow: hidden;*/
}

.Beschreibung {
    font-size: 5vw;
    position: absolute;
    margin-top: -8vw;
    text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
} 

.Bildanzeige {
    height: 57vw;
    width: 57vw;
    align-items: center;
    display: flex;
}

.Vorschaubild {
    grid-area: Bild;
    border-radius: 3vw;
    border-bottom-right-radius: 0vw;
    box-shadow: 0vw 0vw 0.2vw black;
    max-height: 57vw;
    max-width: 50vw;
}

.Buttons{
    position: absolute;
    z-index: 14;
    user-select: none;
}

.Uebersicht {
    position: absolute;
    opacity: 1;
    height: 8vw;
    margin-top: 47vw;
    margin-left: 50vw;
}

.Uebersichtzwo{
    margin-top: 45vw;
}

.warenkorb {
    position: absolute;
    opacity: 1;
    height: 36vw;
    margin-left: 58vw;
    margin-top: 7vw;
    user-select: none;
}

.warenkorbtext {
    display: none;
}



.produktgruppe {
    color: #00000000;
    position: absolute;
    background-color: #00000000;
    border: none;
    background-image: url("../Vorschaubilder/Verkauf/Warenkorb_300.png");
    background-size: cover;
    background-attachment: fixed;
    width: 20vw;
    height: 36vw;
    margin-left: 58vw;
    margin-top: 7vw;
    z-index: 15;
}

.produktgruppe option{
    background-color: black;
    color: white;
    font-size: 1vw;
    margin-top: 1vw;
}



.filterausblenden{
    display: none;
}

.seitenpos {
    display: flex;
    justify-content: center;
    margin-top: 5vw;
    margin-bottom: 5vw;
}

.seitenpos {
    display: flex;
    justify-content: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.seitennummer {
    display: flex;
}

.Seitenbild {
    height: 8vw;
    padding: 3vw;
}

.Seitenbild:hover {
    transition: 1s;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(120%);
}



.seitennummer:hover {
    transition: 1s;
}

.seitennummerAU {
    filter: grayscale(1);
}

.left {
    margin-left: 0vw;
}

.diashow{
    display: none;
    margin-left: 25%;
    width: 50vw;
    height: 25vw;
    box-shadow: 0px 0px 10px gray;
    position: relative;
}

.diabox {
    position: absolute;
    border: blue;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.diabild {
    display: none;
    width: 100%;
    opacity: 0;
    transition: 2s;
}


.diatext {
    position: absolute;
    top: 0%;
    right: 0%;
    left: 0%;
    top: 18vw;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 2s;
    user-select: none;
}

.diabildaktiv {
    display: block;
    opacity: 1;
}


.Pfeil_L {
    position: absolute;
    font-size: 5vw;
    left: 10%;
    top: 18vw;
    color: white;
    opacity: 0.5;
    transition: 0.3s;
    cursor:move;
    user-select: none;
}

.Pfeil_L:hover {
    opacity: 1;
    transform: scale(130%);
}

.Pfeil_R {
    position: absolute;
    font-size: 5vw;
    right: 10%;
    top: 18vw;
    color: white;
    opacity: 0.5;
    transition: 0.3s;
    cursor:move;
    user-select: none;
}

.Pfeil_R:hover {
    opacity: 1;
    transform: scale(130%);
}

.ausblenden {
    display: none;
}

.mobilausblenden {
    display: none;
}

.Pfeilefilter {
    text-align: center;
}

.filterpfeilmo {
    height: 7vw;
}

.filterpfeilmo:hover {
    transition: 0.3s;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(120%);
}

.EGG {
    display: none;
}


}


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

html, body {
    margin: 0;
    padding-left: 0px;
    background-color: rgb(113, 0, 148);
    background-image: none;
    color: rgb(255, 255, 255);
    overflow-x: hidden;
    cursor: url("../Vorschaubilder/animation/PinselHB.png"), auto;
    background-image: url("../Vorschaubilder/Hintergrund/salehintergrund.png");
    background-size:contain;
    background-repeat: no-repeat;
    font-size: 1.05vw;
}

h1 {
    font-size: 2vw;
}

a:hover {
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
}



@keyframes NaviAktiv {

    0% {    filter:grayscale(0.8);
            transform: scale(20%);} 

    50% {   filter:grayscale(1);
            transform: scale(20%);} 

    100% {  filter:grayscale(0.8);
            transform: scale(20%);} 

}

#sale {
    filter: grayscale();
    border-color: #64646486;
    animation-name: NaviAktiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

#sale:hover {
    animation-name: NaviAktiv;
    animation-duration: 1s;
}

.suche {
    width: 52vw;
    margin-left: 19vw;
}

.Psuchen_alles {
    margin-top: 1vw;
    margin-bottom: 1vw;
}

.Psuchen_alles:hover {
    transform: scale(101%);
}

#psuchentext {
    border-top: 0.2vw solid #0094ff;
    border-bottom: 0.2vw solid #0094ff;
    border-left: 0.2vw solid #0094ff;
    border-right: 0.1 solid black;
    width: 50vw;
    font-size: 1vw;
    height: 2vw;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#psuchentext:hover {
    transition: 0.2s;
    border-color: #e61010;
}

.Psuchenhintergrund {
    position: absolute;
    border: 0.2vw solid #0094ff;
    background-color: #00ff3796;
    width: 3vw;
    height: 2.1vw;
    border-left: none;
    border-bottom-right-radius: 2.5vw;
    border-top-right-radius: 2.5vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
}

.Psuchen {
    width: 2vw;
    height: 2vw;
    align-items: center;
}


.filter {
    display: flex;
    font-size: 2vw;
    justify-content: center;
    height: 3vw;
    padding: 0.2vw;
    user-select: none;
}

.filter1 {
    margin-left: 1vw;
    margin-right: 1vw;
    border-bottom: 0.2vw solid #a1afa0;
}

.filter1:hover {
    border-bottom: 0.2vw solid #000000;
}

.filter1AU {
    margin-left: 1vw;
    margin-right: 1vw;
    border-bottom: 0.2vw solid #000000;
}

.filtercheckbox {
    position: absolute;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    right: 78vw;
    top: 39vw;
    padding: 0.5vw;
    transform: scale(50%);
}

.filterbox {
    padding: 0.5vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
}

.filterbox:hover {
    transition: 1s;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(110%);
}

.filterbild {
    user-select: none;
    position:static;
    height: 2vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
}

.filterbild:hover {
    transition: 1s;
    height: 2vw;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(120%);
}

.filterbildAU {
    filter: grayscale();
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    height: 2vw;
    transform:scale(110%);
}

.filterbildAU:hover {
    transition: 1s;
    filter:hue-rotate(360deg);

}

.digital {
    transform: scale(140%) translateY(0.3vw);
    bottom: 2vw;
    margin-left: 1vw;
    margin-right: 1vw;
}

.digital:hover {
    transform: scale(160%) translateY(0.3vw);
}

#container {
    margin-top: 3vw;
    justify-items: center;
    margin-left: 8.75%;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 1vw;
    display: grid;
    grid-template-columns: repeat(3, 27.5%);
    /*grid-template-rows: repeat(6, 15%);*/
    grid-gap: 5vw;
    padding: 1vw;
}


.Angebot {
    overflow: hidden;
    margin-top: -3vw;
    border: 0.2vw solid rgb(0, 0, 0);
    border-radius: 0.5vw;
    background-size:contain;
    background-attachment:local;
    font-size: 1vw;
    display: grid;
    background-color: #000000;
    transform:scale(100%);
    height: 13vw;
    grid-template: 
        "Bild Titel" 2vw
        "Bild Beschreibung" 3vw
        "Bild Versand" 3vw
        "Bild Preis" 3vw
        "Bild Kosten" 2vw
        /13.5vw 10.5vw;
}

/*#Angebot30 {
    grid-column: 1;
    grid-column-end: 3;
    grid-row: 1;
    grid-row-end: 3;
    transform: scale(210%) translateY(27.5%);
}*/

.Angebot:hover {
    transition: 0.1s;
    transform:scale(105%);
}

.Preis{
    font-size: 0.9vw;
    margin-top: 0.75vw;
    grid-area: Preis;
    border-bottom: 0.1vw solid rgba(216, 8, 8, 0.226);
    text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}

.Preisalt {
    grid-area: Preis;
    text-align: right;
    margin-right: 2vw;
    font-style:italic;
    text-decoration:line-through;
    margin-top: 0.8vw;
    font-size: 0.7vw;
    transform: rotate(0deg);
    color: rgb(137, 200, 27);
}

.Versand {
    grid-area: Versand;
    margin-top: 4.9vw;
    color: #0094ff;
    font-size: 0.6vw;
    text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
} 

.Titel{
    grid-area: Titel;
    margin-top: 2.5%;
    align-content: bottom;
    /*overflow: hidden;*/
}

.Buttons{
    display: flex;
    text-align: end;
    grid-area: Kosten;
    max-height: 100%;
    /*overflow: hidden;*/
}

.Beschreibung {
    grid-area: Beschreibung;
    text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
} 

.Bildanzeige {
    display: flex;
    grid-area: Bild;
    align-items: center;
}

.Vorschaubild {
    border-radius: 1vw;
    border-bottom-right-radius: 0vw;
    border-top-right-radius: 0vw;
    box-shadow: 0vw 0vw 0.2vw black;
    max-width: 13vw;
    max-height: 13vw;
    /*box-shadow: 0.05vw 0vw 6vw rgb(113, 0, 148);
    /*border-right: 0.1vw solid rgba(113, 0, 148, 0.384);*/
}

@keyframes SaleAktiv {
    
    0% {    filter:grayscale(0);
            transform: scale(100%) rotate(-45deg);} 

    50% {   filter:grayscale(1);
            transform: scale(90%) rotate(-45deg);} 

    100% {  filter:grayscale(0);
            transform: scale(100%) rotate(-45deg);} 

}

.SaleRabatt {
    position: absolute;
    width: 10vw;
    z-index: 5000;
    transform: rotate(-45deg);
    margin-left: -2vw;
    animation-name: SaleAktiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

.rahmen {
    border-radius: 0.4vw;
    position: absolute;
    width: 24vw;
    height: 13vw;
    z-index: 10;
    user-select:contain;
    transform: scale(101%);
}

.rahmenacrylic {
    filter:hue-rotate(45deg);
}

.rahmendigital {
    filter:hue-rotate(90deg);
}

.rahmenclay {
    filter:hue-rotate(135deg);
}

.rahmencrochet {
    filter:hue-rotate(180deg);
}

.rahmencjewellery {
    filter:hue-rotate(225deg);
}

.rahmenclothing {
    filter:hue-rotate(270deg);
}

.rahmenother {
    filter:hue-rotate(335deg);
}

.Uebersicht {
    opacity: 0;
    z-index: 100;
    height: 2vw;
    bottom: -5vw;
    right: 8vw;
    position: relative;
    text-shadow: 0vw 0vw 1vw;
}

.Uebersichtzwo {
    left: 0vw;
}

.Uebersicht:hover {
    transition: 0.4s;
    text-shadow: 0vw 0vw 2vw;
    filter: hue-rotate(45deg);
    transform:scale(105%);
}

.Angebot:hover .Uebersicht {
    transition: 0.3s;
    bottom: 1vw;
    opacity: 1;
}

.warenkorb {
    opacity: 0;
    transform:scale(105%);
    bottom: 8vw;
    position: relative;
    z-index: 10000;
    width: 4vw;
    font-size: 0.7vw;
    text-justify: distribute;
    color: #000;
    text-shadow: -0.1vw 0 black, 0 0.1vw black, 0.1vw 0 black, 0 -0.1vw black;
}

.Angebot:hover .warenkorb {
    transition: 0.4s;
    opacity: 100;
}

.Angebot:hover .produktgruppe {
    transition: 0.4s;
    opacity: 100;
}

.warenkorb:hover {
    transition: 0.4s;
    opacity: 100;
    filter: hue-rotate(90deg);
    transform: scale(111%);
}

.warenkorbtext {
    bottom: 5vw;
    left: 0.5vw;
    text-align: center;
    color: #0095ff8f;
    text-decoration: none;
}

.warenkorb:hover {
    transition: 0.4s;
    opacity: 100;
}

.produktgruppe {
    color: #00000000;
    opacity: 0;
    position: absolute;
    background-color: #00000000;
    border: none;
    background-image: url("../Vorschaubilder/Verkauf/Warenkorb_300.png");
    background-size: cover;
    background-attachment: fixed;
    width: 4vw;
    height: 5.5vw;
    grid-area: Versand;
    z-index: 10005;
    bottom: -0.5vw;
}

.produktgruppe option{
    background-color: black;
    color: white;
    font-size: 1vw;
    margin-top: 1vw;
}



.produktgruppe:hover {
    transition: 0.4s;
    opacity: 100;
    filter: hue-rotate(90deg);
    transform: scale(111%);
}

.filterausblenden{
    display: none;
}

.seitenpos {
    display: flex;
    justify-content: center;
    margin-top: 2vw;
    margin-bottom: 2vw;
}

.seitennummer {
    display: flex;
}

.Seitenbild {
    height: 3vw;
    padding: 1vw;
}

.Seitenbild:hover {
    transition: 1s;
    cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    filter:hue-rotate(360deg);
    transform:scale(120%);
}



.seitennummer:hover {
    transition: 1s;
}

.seitennummerAU {
    filter: grayscale(1);
}

.left {
    margin-left: 10vw;
}

.diashow{
    display: none;
    margin-left: 25%;
    width: 50vw;
    height: 25vw;
    box-shadow: 0px 0px 10px gray;
    position: relative;
}

.diabox {
    position: absolute;
    border: blue;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}

.diabild {
    display: none;
    width: 100%;
    opacity: 0;
    transition: 2s;
}


.diatext {
    position: absolute;
    top: 0%;
    right: 0%;
    left: 0%;
    top: 18vw;
    text-align: center;
    color: white;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: 2s;
    user-select: none;
}

.diabildaktiv {
    display: block;
    opacity: 1;
}


.Pfeil_L {
    position: absolute;
    font-size: 5vw;
    left: 10%;
    top: 18vw;
    color: white;
    opacity: 0.5;
    transition: 0.3s;
    cursor:move;
    user-select: none;
}

.Pfeil_L:hover {
    opacity: 1;
    transform: scale(130%);
}

.Pfeil_R {
    position: absolute;
    font-size: 5vw;
    right: 10%;
    top: 18vw;
    color: white;
    opacity: 0.5;
    transition: 0.3s;
    cursor:move;
    user-select: none;
}

.Pfeil_R:hover {
    opacity: 1;
    transform: scale(130%);
}

.ausblenden {
    display: none;
}

.PCausblenden {
    display: none;
}

.PfeilLinks {
    display: none; 
}

.PfeilRechts {
    display: none; 
}


}