﻿@media only screen and (max-width: 1080px) {

    html, body {
        margin: 0vw;
        padding: 0vw;
        background-color: rgb(113, 0, 148);
        background-image: none;
        color: white;
    }
    
    #container {
        margin-top: 4vw;
        font-family: sans-serif;
        font-size: 4vw;
        display: grid;
        grid-template-columns: repeat(10, 10vw);
        grid-template-rows: repeat(20, 10vw);
        box-sizing: border-box;
    }
    
.lagerausverkauf {
    font-size: 4vw;
}

    .containermobilnone {
        grid-column-start: 1;
        grid-column-end: 11;
        display: block;   
    }
    
    
    .Vorschaukom {
        display: flex;
        z-index: 1;
        height: 16vw;
    }
    
    .Vorschau {
        z-index: 1;
        width: 14vw;
        height: 14vw;
        border: 0.5vw solid white;
        border-bottom-right-radius: 1vw;
        margin: 0.5vw;
        cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        transition: 0.4s;
        background-size:cover;
    }
    
    
    .Bildlinks {
        position: absolute;
        z-index: 1;
        width: 47.5vw;
        height: 95vw;
    }
    
    .Bildrechts {
        position: absolute;
        z-index: 1;
        width: 47.5vw;
        height: 95vw;
        margin-left: 47.5vw;;
    }
    
    .Angebot_0 {
        display: flex;
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 2;
        grid-row-end: 12;
        box-shadow: 0vw 0vw 0.3vw black;
        border-radius: 5vw;
        height: 95%;
        width: 95%;
        margin-left: 2.5%;
        overflow: hidden;
        background-color: rgba(255, 255, 255, 0.034);
    }
    
    .VorschaubilderIO{
        position: relative;
        height: 100%;
        min-width: 100%;
        right: 0%;
        display: flex;
        justify-content: center;
        align-items:center;
    }
    
    
    .Angebot_0 img {
        position: relative;
        max-height: 100%;
        max-width: 100%;
        right: 0%;
        box-shadow: 2vw 2vw 10vw black;
    }
    
    .nr0 {
        display: none;
    }
    
    .ausMOB {
        display: none;
    }
    
    #Titel {
        grid-column-start: 1;
        grid-column-end: 11;
        grid-row-start: 1;
        grid-row-end: 1;
        border: none;
        font-size: 1vw;
        margin-left: 1vw;
    }
    
    #Beschreibung {
        font-size: 3vw;
        margin-left: 1vw;
        margin-right: 1vw;
        margin-top: -3vw;
        z-index: 1;
    }
    
    @keyframes hintergrunffarbe {
        
        0% {        text-shadow: -100vw -5vw 7vw #ffffff;} 
    
        50% {       text-shadow: 0vw 0vw 7vw #ffffff;} 
    
        100% {      text-shadow: 100vw 5vw 7vw #ffffff;} 
    
    }
    
    #Beschreibunguberschrift{
        color: rgb(255, 255, 255);
        font-size: 3.5vw;
        font-weight: bold;
        text-shadow: 1vw 1vw 0.4vw #00000048;
        margin-left: 1vw;
        margin-right: 1vw;
        padding-top: 2vw;
        padding-bottom: 2vw;
        overflow: hidden;
    
        background-color: #35a90bcd;
        border: 0.2vw solid rgba(0, 245, 33, 0.613);
        border-top: none;
        border-bottom: none;
        border-right: none;
        z-index: 2;
    
        animation-name: hintergrunffarbe;
        animation-duration: 30s;
        animation-iteration-count: infinite;
    }
    
    
    #Preis {
        border: none;
        text-align: center;
    }
    
.Preisalt {
    font-size: 2.7vw;
    text-align: right;
    font-style:italic;
    text-decoration:line-through;
    transform: rotate(0deg);
    color: rgb(137, 200, 27);
}
    
    .Preise {
        float: left;
        margin-left: 5%;
    }
    
    .Lieferung {
        position: absolute;
        margin-left: 5%;
        margin-top: 10vw;
        color: rgba(255, 255, 0, 0.75);
        font-size: 3.7vw;
    }
    
    #Zusatz {
        display: none;
    }
    
    
    
    
    .Beschreibungstext {
        padding: 2vw;
        text-align: left;
        background-color: #f2f2f20b;
        border: 0.2vw solid rgba(0, 245, 33, 0.613);
        border-top: none;
        border-bottom: none;
        border-right: none;
        padding-top: 2vw;
        padding-bottom: 2vw;
        font-size: 3vw;
        z-index: 2;
    }
    
    /*.Reiter:hover {
        background-color: #ddd;
        color: white;
    }*/
    
    
    .aktiv {
        background-color: #04AA6D;
        color: white;
    }
    
    .Titel {
        color: rgb(253, 250, 255);
        border-bottom: 1px solid #0094ff;
        border-bottom-left-radius: 1vw;
        font-size: 5vw;
        text-align: center;
        margin-top: -1vw;
        padding-left: 1.5vw;
    }
    
    #Lager {
        margin-top: -2vw;
        font-size: 1.6vw;
        grid-column-start: 1;
        grid-column-end: 11;
        width: 100%;
        color: #fcfcfc;
        float: right;
    }
    
    .Uebersicht {
        width: 95%;
        border-radius: 10vw;
        box-shadow: 0vw 0vw 1vw;
        margin-top: 10vw;
    }
    
    .Uebersicht:hover {
        transition: 0.4s;
        box-shadow: 0vw 0vw 2vw;
    }
    
    #container h1.Preis {
        text-align: left;
        position: absolute;
        margin: 0px;
        margin-top: -5vw;
        background: #ffffff
    }
    
    
    .produktgruppe {
        display: none;
    
    }
    
    #schluss {
        margin-top: 130vw !important;
    }
    
    
    }
    
    
    
    @media only screen and (min-width: 1080px) { 
    
        body, html {
            cursor: url("../Vorschaubilder/animation/PinselHB.png"), auto;
        }
        
        a:hover {
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        }
        input{
            cursor: url("../Vorschaubilder/animation/PinselH.png"), auto;
        }
    
        html, body {
            margin: 0vw;
            padding: 0vw;
            background-color: rgb(113, 0, 148);
            background-image: none;
            color: white;
        }
        
        #container {
            margin-top: 4vw;
            margin-left: 18vw;
            font-family: sans-serif;
            font-size: 1vw;
            display: grid;
            grid-template-columns: repeat(8, 8.6vw);
            grid-template-rows: repeat(3, 8.6vw);
            grid-gap: 8px;
            padding: 0px;
            box-sizing: border-box;
        }
    
        .containermobilnone {
            grid-column-start: 4;
            grid-column-end: 9;
            grid-row-start: 2;
            grid-row-end: 4;
            display: grid;   
        }
        
        
        
        .Vorschaukom {
            display: flex;
            z-index: 1;
        }
        
        .Vorschau {
            z-index: 1;
            width: 4vw;
            height: 4vw;
            border: 0.1vw solid white;
            border-bottom-right-radius: 1vw;
            margin: 0.1vw;
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
            transition: 0.4s;
            background-size:cover;
        }
        
        .Angebot_0 {
            display: flex;
            grid-column-start: 1;
            grid-column-end: 4;
            grid-row-start: 1;
            grid-row-end: 4;
            box-shadow: 0vw 0vw 0.3vw;
            border-radius: 1vw;
            height: 100%;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.048);
        }
    
        .VorschaubilderIO{
            position: relative;
            height: 100%;
            min-width: 100%;
            right: 0%;
            display: flex;
            justify-content: center;
            align-items:center;
        }
    
        
        .Angebot_0 img {
            position: relative;
            max-height: 100%;
            max-width: 100%;
            right: 0%;
            box-shadow: 2vw 2vw 10vw black;
        }
        
        .nr0 {
            display: none;
        }
        
        #Titel {
            grid-column-start: 4;
            grid-column-end: 9;
            grid-row-start: 1;
            grid-row-end: 1;
            border: none;
            font-size: 1vw;
            margin-left: 1vw;
        }
        
        #Beschreibung {
            grid-column-start: 4;
            grid-column-end: 9;
            grid-row-start: 2;
            grid-row-end: 3;
            border: none;
            font-size: 1vw;
            margin-left: 1vw;
            transform: translateY(-4vw);
            overflow: auto;
            z-index: 10000;
        }
        
        #Preis {
            grid-column-start: 5;
            grid-column-end: 9;
            grid-row-start: 3;
            grid-row-end: 4;
            border: none;
            text-align: right;
        }
        
        .Preisalt {
            font-size: 0.7vw;
            text-align: right;
            font-style:italic;
            text-decoration:line-through;
            transform: rotate(0deg);
            color: rgb(137, 200, 27);
        }
        
        #Zusatz {
            margin-top: 1.4vw;
            width: 80vw;
            background-color: #f2f2f20b;
            overflow: hidden;
            border: 0.2vw solid rgba(255, 255, 255, 0.26);
            border-top: none;
        }
    
        #Zusatz:hover {
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        }
        
        
        .Reiter {
            float: left;
            width: 10vw;
            background-color: #04AA6D;
            color: white;
            text-align: center;
            padding: 0.4vw 1vw;
            font-size: 1.1vw;
        }
        
        .Reiter:hover {
            background-color: #ddd;
            color: white;
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        }
        
        
        .aktiv {
            background-color: #04AA6D;
            color: white;
        }
        
        .BeschreibungstextZWEI {
            float: left;
            text-align: justify;
            margin: 1vw;
            font-size: 1.3vw;
        }
    
        .ausblendenMobil {
            display: none;
        }
        
        .Titel {
            color: rgb(250, 250, 250);
            border-bottom: 1px solid #0094ff;
            border-bottom-left-radius: 1vw;
            font-size: 2vw;
            text-align: left;
            padding-left: 1.5vw;
        }
        
        #Lager {
            z-index: 1000;
            grid-column-start: 8;
            grid-column-end: 9;
            grid-row-start: 1;
            grid-row-end: 1;
            color: #ffffff;
            float: right;
            bottom: 0vw;
            transform: translateY(2.5vw);
        }
        
        .Beschreibungstext {
            text-align: justify;
            margin: 1vw;
            font-size: 1.3vw;
        }
        
        .Uebersicht {
            height: 3.5vw;
            border-radius: 1vw;
            text-align: right;
            position: relative;
            left: 0%;
            bottom: 0%;
            font-weight: bold;
            box-shadow: 0vw 0vw 1vw;
        }
        
        .Uebersicht:hover {
            transition: 0.4s;
            box-shadow: 0vw 0vw 2vw;
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        }
        
        #container h1.Preis {
            text-align: left;
            position: absolute;
            margin: 0px;
            margin-top: -5vw;
            background: #ffffff
        }
        
        #WeiProdukte {
            margin-top: 4vw;
            margin-bottom: 5vw;
            margin-left: 11vw;
            height: 20vw;
            font-family: sans-serif;
            display: grid;
            grid-template-columns: repeat(3, 26vw);
            text-align: center;
        }
    
        .rahmen {
            border-radius: 0.4vw;
            width: 24vw;
            height: 13vw;
            user-select:contain;
            transform: scale(101%);
            overflow: hidden;
            position: relative;
            z-index: 3;
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
        }
    
    
        .BoxinhaltP{
            position: relative;
            width: 24vw;
            height: 13vw;
            background-color: black;
        }
    
    
        .Bildanzeige {
            height: 13vw;
            width: 13vw;
            overflow: hidden;
        }
    
        .Titeltext {
            position: relative;
            z-index: 1;
        }
    
        .Vorschaubild {
            top: -14.1vw;
            border-radius: 1vw;
            border-bottom-right-radius: 0vw;
            box-shadow: 0vw 0vw 0.2vw black;
            height: 12.7vw;
            border-image-width: 4vw;
            overflow: hidden;
            position: relative;
            z-index: 2;
            background-color: black;
        }
    
    
        .produktgruppe {
            background-color: #000000;
            grid-column-start: 4;
            grid-column-end: 7;
            grid-row-start: 3;
            grid-row-end: 3;
            height: 2vw;
            margin-top: 6.8vw;
            margin-left: 2vw;
            margin-right: 1vw;
            color: white;
            border-radius: 0.5vw;
            cursor: url("../Vorschaubilder/animation/PinselG.png"), auto;
    
        }
        
        .produktgruppe option{
            background-color: black;
            color: white;
            font-size: 1vw;
            margin-top: 1vw;
        }
    
    
    
        
    }
    
    .ausblenden {
        display: none;
    }