/* Stile für Bildschirme bis zu 999px */
@media (max-width: 999px) {
    body {
        font-size: 100%;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    .page {
        width: 100%;
        /*margin: 0px auto 0px auto;*/
        height: auto;
        border-color: Black;
    }
    .head {
        width: 100%;
        left: 0px;
        /*margin: 0px auto 0px 0px;*/
        background-color: White;
        border-color: white;
        height: auto;
        
    }
    .main {
        width: 100%;
        background-color: White;
        border-color: white;
        height: auto;
        /*overflow: hidden;*/
    }
    .header {
        margin: 0px;
        padding: 0px;
        width: 100%;
        top: 0px;
        left: 0px;
        height: auto;
        background-color: white;
        position: relative;
        overflow: visible;
    }
    .Sprachen {
        height: 30px;
        width: auto;
        padding-top: 4px;
        padding-left: 10px;
        vertical-align: middle;
        background-color: #2B2A29;
        font-weight: bold;
        color: White;
        font-size: large;
        text-decoration-line: underline;
    }
    .Slogan {
        height: auto;
        width: auto;
        padding-bottom: 4px;
        padding-left: 20px;
        vertical-align: middle;
        font-size:small;
        background-color:white;
    }
    .Weltkugel {
        height: 30px;
        width: 30px;
        padding-top: 4px;
        background-color: #2B2A29;
        overflow: hidden;
        text-align: center;
        color: White;
        vertical-align: middle;
        text-align: right;
        text-decoration: none;
        float: left;
    }
    .Content {
        width: auto;
        padding-top: 5px;
        padding-left: 10px;
        margin-top: 0px;
        overflow: hidden;
    }
    .search {
        width: 185px;
        position: relative;
        overflow: visible;
        padding: 0px;
        top: 5px;
        left: 150px;
        height: 30px;
        background-color: White;
    }
    .SocialMedia {
        padding-bottom: 10px;
        padding-top: 10px;
        padding-left: 20px;
    }
    .Impressum {
        height: auto;
        width: auto;
        padding-top: 4px;
        background-color: #2B2A29;
  
        text-align: left;
        color: White;
        text-decoration: none;
        padding-right: 10px;
        padding-left: 20px;
    }

        .Impressum a {
            color: White;
            text-decoration: none;
        }
    .MenueHorizontal {
        width: auto;
        left: 0px;
        padding-left:20px;
        margin: 0px auto 0px 0px;
        background-color: White;
        border-color: white;
        height: auto;
        z-index:0;
    }
    .GroupBildHeaderTextInsert {
        position: absolute;
        top: 5px;
        right: 10px;
        width: 100%;
        height: auto;
        display: flex;
        justify-content: right;
        align-items: top;
        color: white;
        font-size: large;
    }


    .Video {
        padding-left: 20px;
        width: 321px;
        height: 210px;
    }
    .icon img {
        width: 32px;
        height: 32px;
    }
    .RahmenWirHelfenSuchen {
        height: auto;
        margin: 20px 20px 400px 0px;
        padding: 0px 20px 40px 20px ;
        border: dotted;
    }

    .ContainerSearchBox {
        height: 50px;
    }

    .SearchBox {
        height: 50px;
        width: 200px;
        border: thin;
        margin: 0px 20px 0px 0px;
        float: left;
    }

    .LupeSuche {
        height: 40px;
        padding-left: 5px;
    }
    .GroupArtikelBeschreibungRechts {
        vertical-align: top;
        width: 0px;
    }
    .GroupBildLinks {
        width: 215px;
        text-align: right;
        border-bottom: dotted;
        border-width: thin;
    }
    .GroupBildRechts {
        width: 0px;
    }
    .GroupRow {
        width: 680px;
        height: 205px;
    }
    .ArtikelLinks {
        vertical-align: top;
        padding-left: 10px;
        padding-top: 0px;
        width: auto;
    }
    /*dropdown article sub menue #2B2A29*/
        .dropdownSub {
        display: inline-block;
        position: relative;
        z-index: 2;
        background-color: #2B2A29;
        color: white;
        padding: 0px 5px 3px 5px;
        left: 20px;
        width: auto;
        border-bottom-right-radius:5px;
        border-bottom-left-radius:5px;
       border-top-style:solid;
       border-top-color:white;
        
    }

    buttonSub {
        border: none;
        cursor: pointer;
    }

        buttonSub:hover {
            background-color: #ddd;
        }

    .dropdown-optionsSub {
        display: none;
        position: absolute;
        overflow: auto;
        background-color: #fff;
        border-radius: 5px;
        box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
        font-size: smaller;
        width: 200px;
        text-align: left;
    }

    .dropdownSub:hover .dropdown-optionsSub {
        display: block;
    }

    .dropdown-optionsSub a {
        display: block;
        color: #000000;
        padding: 2px;
        text-decoration: none;
    }

        .dropdown-optionsSub a:hover {
            color: #0a0a23;
            background-color: #ddd;
            border-radius: 5px;
        }
    .GroupBildHeader {
        width: 100%;
        height: 100%;
        z-index: 0;
    }
}
/* Stile für Bildschirme über 1000px */
@media (min-width: 1000px) {
    body {
        font-size: 100%;
        font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
        margin: 0px;
        padding: 0px;
        color: #696969;
        background-color: lightgray;
        height: 100%;
        width: auto;
        margin: 0;
        padding: 0;
    }

    .page {
        width: 1000px;
        margin: 0px auto 0px auto;
        height: auto;
        border-color: Black;
    }

    .head {
        width: 1000px;
        left: 0px;
        margin: 20px auto 0px 0px;
        background-color: White;
        border-style: outset;
        border-color: white;
        height: 132px;
        box-shadow: 8px 8px 8px #666;
  
    }

    .main {
        width: 999px;
        margin: 20px auto 0px 0px;
        background-color: White;
        border-style: outset;
        border-color: white;
        height: auto;
        overflow: hidden;
        box-shadow: 8px 8px 8px #666;
    }

    .header {
        margin: 0px;
        padding: 0px;
        width: 1000px;
        top: 0px;
        left: 0px;
        height: 80px;
        background-color:white; /* Textfarbe auf 90% Schwarz setzen rgba(0, 0, 0, 0.2)*/
        /*background-image: url( https://www.hedue.de/pics/header1.png);*/
        position: relative;
        overflow: visible;
    }
    .Slogan {
        height: 50px;
        width: 600px;
        padding-top: 4px;
        padding-left: 10px;
        vertical-align: middle;
        background-color: #2B2A29;
        float: left;

        color: White;
        font-size: large;
        
    }

    .Content {
        width: 980px;
        padding-top: 5px;
        padding-left: 10px;
        margin-top: 0px;
        margin-left: 10px;
        margin-right: 10px;
        overflow: hidden;
    }
    .search {
        width: 185px;
        position: relative;
        overflow: visible;
        padding: 0px;
        left: 250px;
        top: 25px;
        height: 30px;
        background-color: White;
    }
    .heduelogo {
        width: 170px;
        padding-top: 20px;
        padding-left: 20px;
        position:absolute;
    }

    .SocialMedia {
        width: 185px;
        position: relative;
        overflow: visible;
        padding: 0px;
        left: 450px;
        top: -5px;
        height: 36px;
    }
    .Impressum {
        height: 50px;
        width: 380px;
        position:relative;
        padding-top: 4px;
        background-color: #2B2A29;
        float:left;
        text-align: center;
        color: White;
        vertical-align: middle;
        text-align: right;
        text-decoration: none;
        padding-right: 10px;
        float:left;
    }

        .Impressum a {
            color: White;
            text-decoration: none;
        }
    .MenueHorizontal {
        width: 1000px;
        left: 0px;
        margin: 20px auto 0px 0px;
        background-color: White;
        border-style: outset;
        border-color: white;
        height: auto;
        box-shadow: 8px 8px 8px #666;
    }
    .ArtikelBearbeiten {
        background-repeat: no-repeat;
        height: auto;
        width: 100px;
        padding-left: 20px;
        padding-top: 10px;
        font-weight: bold;
        color: White;
        position: absolute;
        left: 1020px;
        top: 600px;
        overflow: visible;
    }
    .GroupBildHeaderTextInsert {
        position: absolute;
        top: 186px;
        right: 10px;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: right;
        align-items: top;
        color: white;
        font-size: 36px;
    }
    .Video {
        padding-left: 40px;
        width: 440px;
        height: 287px;
    }
    .icon img {
        width:48px;
        height:48px;
    }
    .RahmenWirHelfenSuchen {
        height: auto;
        margin: 20px 20px 400px 0px;
        padding: 0px 40px 40px 40px;
        border: dotted;
    }

    .ContainerSearchBox {
        height: 50px;
    }

    .SearchBox {
        height: 50px;
        width: 200px;
        border: thin;
        margin: 0px 20px 0px 0px;
        float: left;
    }

    .LupeSuche {
        height: 40px;
        padding-left: 5px;
    }
    .GroupArtikelBeschreibungRechts {
        vertical-align: top;
        width: 240px;
        border-bottom: dotted;
        border-width: thin;
    }

    .GroupBildLinks {
        width: 215px;
        text-align: right;
        border-bottom: dotted;
        border-right: dotted;
        border-width: thin;
    }

    .GroupBildRechts {
        width: 215px;
        text-align: right;
        border-bottom: dotted;
        border-right: dotted;
        border-width: thin;
    }

    .GroupRow {
        width: 980px;
        height: 205px;
    }
    .ArtikelLinks {
        vertical-align: top;
        padding-left: 10px;
        padding-top: 0px;
        width: 550px;
        float: left;
    }

    .GroupBildHeader {
        width: 950px;
        height: 243px;
        z-index: 0;
    }

}

/* Stile für alle Bildschirme */

.button {
    background-color: #2B2A29;
    border: none;
    color: white;
    padding: 5px 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
   
    font-weight: bold;
    cursor: pointer;
    /* Abgerundete Ecken */
    border-radius: 5px;
}

.buttonHändlerSuchen {
    background-color: #2B2A29;
    border: none;
    color: white;
    padding: 5px 5px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 100%;
    font-weight: bold;
    cursor: pointer;
    /* Abgerundete Ecken */
    border-radius: 5px;
}


.form1 {
}

.Navigation {
    width: 200px;
    height: auto;
    margin-left: 0px;
    margin-top: 0px;
    padding-top: 5px;
    top: 180px;
    float: left;
}

.PartnerLink {
    width: 120px;
    padding: 40px;
}

.Aktuelles {
    overflow: hidden;
    padding-left: 10px;
    border-style: dotted;
}

.DefaultPageBildtext {
    position: absolute;
    text-decoration: none;
    font-size: x-large;
    font-weight: bold;
    color: White;
    margin-left: 10px;
}
.flag {
    margin-left: 4px;
    border-style: none;
}

.GroupArtikelBeschreibungLinks {
    vertical-align: top;
    width: 240px;
    border-bottom: dotted;
    border-width: thin;
}






.Sprachbox {
    padding-top: 5px;
}

.txtSearch {
    margin-top: 3px;
    float: left;
    overflow: hidden;
    width: 150px;
    height: 24px;
}
.Bottom {
    width: 100%;
    height: AUTO;
    float: left;
    text-align: center;
    margin-top: 10px;
    background-color: #2B2A29;
    color: White;
}


.Kurztext {
    padding-left: 0px;
    font-size: x-large;
    font-weight: bold;
    color: Red;
    line-height: 150%;
}

.Subline {
    font-size: smaller;
    line-height: 150%;
}

.Werbetext {
    font-weight: bold;
}
.Langtext {
    margin-right:10px;
}

.Eigenschaften {
    margin-top: 20px;
    margin-left: 0px;
    border-top-style: solid;
    border-top-width: thin;
    font-weight: bold;
    line-height: 150%;
}

.InfoPreisArtNr {
    margin-right: 20px;
    text-align: right;
}
.TechnischeDaten {
    margin-top: 20px;
    margin-left: 0px;
    border-top-style: solid;
    border-top-width: thin;
    font-weight: bold;
    line-height: 150%;
    float: none;
}

.TechnischeDatenTabelle {
    font-weight: normal;
    line-height: 80%;
}

.TechnischeDatenMobil {
    margin-left: 20px;
    font-weight: normal;
}


.Produktvorteile {
    list-style-position: outside;
    list-style-type: square;
    font-weight: normal;
}

.Lieferumfang {
    list-style-position: outside;
    list-style-type: square;
    font-weight: normal;
}

.menu1 {
    padding-left: 4px;
    text-decoration: none;
}

.menu2 {
    padding-left: 10px;
    text-decoration: none;
}

.VariantenMain {
    max-height: 100px;
    border-style: dotted;
    border-color: Black;
    border-width: thin;
}

.VariantenList {
    margin-left: 0px;
}
.VariantenImage {
    float: left;
}

.ArtikelBild {
    float: left;
    width: 200px;
}

.SitemapLinks {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 0px;
    width: 250px;
    float: left;
}
.SitemapText {
    text-align: left;
    font-size: small;
}

.SitemapRechts {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 10px;
    width: 500px;
    float: right;
    border-style: none;
    position: relative;
    overflow: visible;
    text-align: center;
}



.ArtikelTop {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 0px;
}

.ArtikelBestellen {
    margin-top: 20px;
    margin-left: 0px;
    border-top-style: solid;
    border-top-width: thin;
    font-weight: bold;
    line-height: 150%;
    background-color: lightgrey;
}
.ArtikelRechts {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 10px;
    padding-right: 20px;
    width: 300px;
    float: right;
    border-style: none;
    position: relative;
    overflow: visible;
    text-align: center;
}

.ArtikelErsatzteile {
    width: 100%;
    float: left;
    margin-top: 10px;
}

.ArtikelGroup {
    width: 680px;
    border-bottom-style: dotted;
    border-bottom-color: Black;
    float: none;
    border-bottom-width: thin;
    height: auto;
}

.Anmeldedaten {
    height: 114px;
    width: 220px;
    padding-left: 10px;
    padding-top: 0px;
    font-weight: bold;
    color: black;
    background-color: whitesmoke;
    position: absolute;
    left: 1020px;
    top: 0px;
    overflow: visible;
    border-style: outset;
    border-color: white;
    box-shadow: 8px 8px 8px #666;
}
.Bildtext {
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 1px;
}

.Varianten {
    padding-left: 4px;
    font-size: 14px;
    text-decoration: none;
    color: Black;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: White;
}

    .Varianten a {
        text-decoration: none;
        color: Black;
    }

.MenueZeile {
    padding-left: 20px;
    font-size: 14px;
    color: black;
}

    .MenueZeile a {
        text-decoration: none;
        color: black;
    }

.MenueFarbeErste1 {
    padding-left: 4px;
    font-size: 14px;
    text-decoration: none;
    background-color: #008cbf;
    color: white;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: White;
}

    .MenueFarbeErste1 a {
        text-decoration: none;
        color: white;
    }

.MenueFarbeErste2 {
    padding-left: 18px;
    font-size: 12px;
    text-decoration: none;
    background-color: #008cbf;
    color: white;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: White;
}

    .MenueFarbeErste2 a {
        text-decoration: none;
        color: white;
    }

.MenueFarbeZweite1 {
    padding-left: 4px;
    font-size: 14px;
    text-decoration: none;
    background-color: #badcea;
    color: black;
    border-bottom-width: thin;
    border-bottom-style: solid;
    border-bottom-color: White;
}

    .MenueFarbeZweite1 a {
        text-decoration: none;
        color: black;
    }

.MenueFarbeZweite2 {
    padding-left: 18px;
    font-size: 12px;
    text-decoration: none;
    background-color: #badcea;
    color: black;
    border-bottom-width: thin;
    border-bottom-style: dotted;
    border-bottom-color: White;
}

    .MenueFarbeZweite2 a {
        text-decoration: none;
        color: black;
    }

.CheckGrau {
    text-decoration: none;
    color: Gray;
}

    .CheckGrau a {
        text-decoration: none;
        color: Gray;
    }

.CheckGrün {
    text-decoration: none;
    color: Green;
}

    .CheckGrün a {
        text-decoration: none;
        color: Green;
    }

.CheckRot {
    text-decoration: none;
    color: Red;
}

    .CheckRot a {
        text-decoration: none;
        color: Red;
    }

.CheckBlau {
    text-decoration: none;
    color: Blue;
}

    .CheckBlau a {
        text-decoration: none;
        color: Blue;
    }

.grow img {
    height: auto;
    width: 300px;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

    .grow img:hover {
        width: 400px;
        height: auto;
        margin-left: -100px;
    }

.pic {
    float: left;
    height: auto;
    width: 300px;
    overflow: hidden;
}

.BildInEigenschaften {
    height: auto;
    width: 280px;
}

.DeepLink {
    position: absolute;
}

.GroupBild {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}

    .GroupBild:hover {
        -webkit-filter: blur(3px);
    }

.animateCreatorContainer {
    box-shadow: 8px 8px 8px #666;
}

.GewinnspielLinks {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 0px;
    width: 550px;
    float: left;
}

.GewinnspielTop {
    vertical-align: top;
    padding-left: 10px;
    padding-top: 0px;
}

.GewinnspielRechts {
    vertical-align: top;
    width: 200px;
    float: right;
    border-style: none;
    position: relative;
    overflow: visible;
    text-align: left;
}

.GewinnspielBedingungen {
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: white;
    background-color: #008CBF;
    font-weight: bold;
}

.csstab {
    width: 100px;
    display: block;
    float: left;
}

.DictEdit {
    width: 700px;
    margin: 20px auto 0px auto;
    background-color: White;
    border-style: outset;
    border-color: white;
    height: auto;
    overflow: hidden;
    box-shadow: 8px 8px 8px #666;
}

/*dropdown menue*/
.dropdown {
    display: inline-block;
    position: relative;
    z-index:2;
}

button {
    border: none;

    cursor: pointer;
}

    button:hover {
        background-color: #ddd;
    }

.dropdown-options {
    display: none;
    position: absolute;
    overflow: auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
    font-size:smaller;
    width:200px;
    text-align:left;
}

.dropdown:hover .dropdown-options {
    display: block;
}

.dropdown-options a {
    display: block;
    color: #000000;
    padding: 2px;
    text-decoration: none;
    
}

    .dropdown-options a:hover {
        color: #0a0a23;
        background-color: #ddd;
        border-radius: 5px;
    }

/*dropdown main menue*/
.dropdownMain {
    display: inline-block;
    position: relative;
    z-index: 3;
}

buttonMain {
    border: none;
    cursor: pointer;
}

    buttonMain:hover {
        background-color: #ddd;
    }

.dropdown-optionsMain {
    display: none;
    position: absolute;
    overflow: auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
    font-size: smaller;
    width: 200px;
    text-align: left;
    color:black;
    padding-left:4px;
}

.dropdownMain:hover .dropdown-optionsMain {
    display: block;
}

.dropdown-optionsMain a {
    display: block;
    color: #000000;
    padding: 2px;
    text-decoration: none;
}

    .dropdown-optionsMain a:hover {
        color: #0a0a23;
        background-color: #ddd;
        border-radius: 5px;
    }




/*dropdown text message*/
.dropdownText {
    display: inline-block;
    position: relative;
    z-index: 2;
}

buttonText {
    border: none;
    cursor: pointer;
}

    buttonMain:hover {
        background-color: #ddd;
    }

.dropdown-optionsText {
    display: none;
    position: absolute;
    overflow: auto;
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 10px 10px 0px rgba(0,0,0,0.4);
    font-size: smaller;
    width: 300px;
    text-align: left;
    margin:0px;
    padding:5px;
}

.dropdownText:hover .dropdown-optionsText {
    display: block;
}

.dropdown-optionsText a {
    display: block;
    color: #000000;
    padding: 2px;
    text-decoration: none;
}

    .dropdown-optionsText a:hover {
        color: #0a0a23;
        background-color: #ddd;
        border-radius: 5px;
    }


.buttonZurück {
    border: dotted;
    border-color: black;
    color: black;
    padding: 5px 5px;
    margin-top: 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 100%;
    cursor: pointer;
    /* Abgerundete Ecken */
    border-radius: 5px;
}
.shops {
    margin: 0px;
    padding-left: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    width: auto;
    top: 0px;
    left: 0px;
    height: auto;
    position: relative;
    overflow: visible;
}

.shopsTop {
    margin: 0px;
    padding-left: 10px;
    padding-right: 20px;
    padding-top: 20px;
    width: auto;
    top: 0px;
    left: 0px;
    height: auto;
    position: relative;
    overflow: visible;
}

.tablelocaldealers {
    border-bottom-style: dotted;
    border-bottom-color: Gray;
    border-bottom-width: thin;
    vertical-align: top;
    width: 100%;
}

.tableShops {
    vertical-align: top;
    width: 100%;
}

.localdealers {
    margin: 0px;
    padding-left: 20px;
    padding-right: 0px;
    padding-bottom: 20px;
    width: auto;
    top: 0px;
    left: 0px;
    height: auto;
    position: relative;
    overflow: visible;
}

.buttonMenue {
    background-color: #ffffff;
    /*background: linear-gradient(to bottom, #ffffff, #bebebe);*/
    border: 1px solid black; /* Dünner schwarzer Rand */
    border-radius: 20px; /* Runde Ecken */
    padding: 3px 5px 3px 5px; /* Innenabstand für besseren Klickbereich */
    cursor: pointer; /* Zeiger als Mauszeiger */
    transition: background-color 0.3s; /* Weicher Übergang bei Hover */
    margin: 0px  6px 4px 0px;
    box-sizing: border-box;
}

    .buttonMenue:hover {
        background-color: #bebebe; /* Weiße Füllung bei Hover */
    }

.buttonMenueGewählt {
    background-color: #bebebe;
    /*background: linear-gradient(to bottom, #ffffff, #bebebe);*/
    border: 1px solid black; /* Dünner schwarzer Rand */
    border-radius: 20px; /* Runde Ecken */
    padding: 3px 5px 3px 5px; /* Innenabstand für besseren Klickbereich */
    cursor: pointer; /* Zeiger als Mauszeiger */
    transition: background-color 0.3s; /* Weicher Übergang bei Hover */
    margin: 0px 6px 4px 0px;
    box-sizing: border-box;
    white-space: nowrap;
}

    .buttonMenueGewählt:hover {
        background-color: #ffffff; /* Weiße Füllung bei Hover */
    }