.bohell10{font-size:0.6875em;color:black;}
.bohell11{font-size:0.75em;color:black;}
.bohell12{font-size:0.8125em;color:black;}
.bohell13{font-size:0.875em;color:black;}
.bohell14{font-size:0.9375em;color:black;}
.bohyper10{font-size:0.6875em;color:#951E9C;text-decoration:none;}
.bohyper10:hover{font-size:0.6875em;color:#F27302;text-decoration:none;}
.bohyper11{font-size:0.75em;color:#951E9C;text-decoration:none;}
.bohyper11:hover{font-size:0.75em;color:#F27302;text-decoration:none;}
.bohyper12{font-size:0.8125em;color:#951E9C;text-decoration:none;}
.bohyper12:hover{font-size:0.8125em;color:#F27302;text-decoration:none;}
.bohyper13{font-size:0.875em;color:#951E9C;text-decoration:none;}
.bohyper13:hover{font-size:0.875em;color:#F27302;text-decoration:none;}
.bohyper14{font-size:1.1em;color:#951E9C;text-decoration:none;}
.bohyper14:hover{font-size:1.1em;color:#F27302;text-decoration:none;}
.bohyper20{font-size:1.25em;color:#951E9C;text-decoration:none;}
.bohyper20:hover{font-size:1.25em;color:#F27302;text-decoration:none;}
.ob0{color:#5a7077;text-decoration:none;}
.ob{color:#5a7077;font-weight:bold;}
.obl{color:#951E9C;text-decoration:none;font-weight:bold;}
.obl:hover{color:#F27302;text-decoration:none;font-weight:bold;}

body{margin:0;background-color:#f2e9e1;color:#1A1F2B;font-family:Arial;font-size:1em;}
.page-wrapper{max-width:1200px;margin:0 auto;padding:0 1%;}
.main{background:#ffffff;color:#1A1F2B;border-width:0 1px 1px 1px;border-color:#669933;border-style:solid;min-height:600px;}
.mainContent{color:#333;padding-top:0.2em;}
a{text-decoration:none;}
h1{font-size:16px;}
h2{font-size:14px;}
h3{font-size:12px;}
img{border:0;}
img:not([src]){visibility:hidden;}

*, *::before, *::after{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

.You-Tube-Tutorial{min-height:280px;}

.Fehler-Input{color:#a94442;background-color:#f2dede;font-size:1.3em;}
.Fehler-OK{color:black;background-color:#ffffff;font-size:1.3em;border-radius:5px;padding-left:5px;}

#logobox{
    display:none;
    min-height:80px;
    min-width:158px;
    margin-left:0.65em;
    margin-top:1em;
    margin-bottom:1em;
    overflow:auto;
    float:left;
    width:45%;
    background-image:url(../bilder/Startseitenbilder/Logo-Gluecksperle-klein.jpg);
    background-repeat:no-repeat;
}

aside, footer{padding:0.6em 20px;}
section{padding:0 20px;}
.main{width:100%;float:left;border-radius:0 0 8px 8px;}
.main-nav{float:left;width:80%;margin:0.5em;display:none;}
.mainContent{width:100%;min-height:400px;}
footer{clear:left;padding:1em 0 0 0;}

#navi{font-size:0.7em;margin-top:0.8em;margin-left:0.5em;}
#you-are-here{display:none;}

#Navi-Top{float:left;width:100%;background-color:#4e7501;}
#Menue{font-size:1em;float:left;margin-left:0;margin-right:auto;cursor:pointer;background-color:#4e7501;padding:0.6em;border-width:0 0.0625em 0 0;border-color:white;border-style:solid;}
#Sprache{float:left;margin:auto;}
#Einzelartikel{display:none;width:300px;}
#luppe_{display:none;}

.bomenue{font-size:0.8em;color:#ffffff;text-decoration:none;height:100%;padding:0.6em;float:left;margin-left:0;margin-right:auto;cursor:pointer;background-color:#4e7501;border-width:0 0.0625em 0 0;border-color:white;border-style:solid;}
.bomenue2{font-size:1em;color:#ffffff;text-decoration:none;height:100%;float:left;margin-left:0;margin-right:auto;cursor:pointer;}

.Ebene0{width:100%;padding:10px;border-width:1px;border-style:solid;border-color:#f2e9e1;background-color:#4e7501;}
.Ebene0X{width:100%;padding:10px;border-width:1px;border-style:solid;border-color:#f2e9e1;background-color:#8aac03;}
.Ebene1{width:100%;padding:10px 10px 10px 25px;border-width:1px;border-style:solid;border-color:#f2e9e1;background-color:#629302;}
.Ebene2{width:100%;padding:10px 10px 10px 40px;border-width:1px;border-style:solid;border-color:#f2e9e1;background-color:#87b2b0;}
.Ebene3{width:100%;padding:10px 10px 10px 55px;border-width:1px;border-style:solid;border-color:#f2e9e1;background-color:#b7a7c4;}

/* Warenkorbtext ist immer sichtbar, das Perlenkorb-Bild erst ab 700 px. */
#shoppingcart{
    display:flex;
    float:right;
    align-items:center;
    margin:0.4em;
    cursor:pointer;
}

#Perlenkorb_{
    display:none;
    flex:0 0 auto;
    margin:0;
}

#Perlenkorb_ img{
    display:block;
    width:auto;
    height:auto;
}

#WKX{
    margin:0;
    cursor:pointer;
    text-align:left;
}

#Perlenkorb{
    margin-top:1.2em;
    margin-right:2em;
}

.service-link{position:relative;cursor:pointer;background-color:#4e7501;border-width:0.0625em;border-color:white;border-style:solid;padding:0.46875em 0.9375em;}
#Services{font-size:0.8em;}

#top{width:100%;float:left;margin:0.5em auto;border-radius:6px;display:flex;min-height:60px;align-items:center;}
#top-1{margin:auto;width:20%;text-align:right;padding-right:5%;}
#suchformular{width:80%;display:flex;margin:auto 0;padding-left:2%;}
#top3-2{float:left;vertical-align:middle;display:flex;margin-left:2%;}
#top-1-2{margin:auto;width:20%;text-align:right;padding-right:5%;}

#top2{
    float:left;
    width:100%;
    min-height:113px;
    border-width:1px 1px 0 1px;
    border-style:solid;
    border-color:#669933;
    border-radius:8px 8px 0 0;
    background-color:#ffffff;
}

.Artikelinfo{display:none;}
#links{width:100%;margin-top:2em;}
#rechts{width:100%;float:left;}

#Teaser1{width:0;float:left;}
#Teaser2{max-width:250px;text-align:center;margin:0 auto;}
#Teaser3{width:0;float:left;}
#Teaser4{max-width:250px;text-align:center;margin:25px auto 10px auto;}
#Teaser5{width:0;float:left;}

#Willkommen{padding-top:1em;}
#Willkommen2{margin-left:10%;margin-right:10%;text-align:center;}

#Marken-neu{width:80%;margin-right:auto;margin-left:auto;}

#unten{max-width:1200px;margin:10px auto 0 auto;min-height:60px;display:flex;border-radius:5px;}

.faq_tabelle{width:95%;border-color:#006361;border-width:1px;border-style:solid;margin-bottom:25px;margin-left:auto;margin-right:auto;overflow-x:auto;}
.faq_celle{color:#006361;padding:0.6em;font-weight:bold;}

#ueberschrift{width:90%;}
#Text{width:90%;}
#BNachname_Seitenkopf{display:none;}

.Perlengeschaeft{width:100%;padding:3% 5% 5% 5%;}
.Perlengeschaeft-2{border-radius:8px;background-color:#ffffff;border-style:solid;border-color:#5939a9;border-width:1px;}
.Perlengeschaeft-Ueberschrift{font-size:0.8em;padding:10px 25px;background-color:#5939a9;border-radius:8px 8px 0 0;width:100%;font-weight:bold;color:#ffffff;text-align:center;}
.Perlengeschaeft-Inhalt{width:100%;padding:5%;text-align:center;}

input{border-radius:5px;padding-left:5px;}
input:focus{box-shadow:0 0 2px 2px #9ab4fe;}

.neuer_Button{background-color:#fefffc;padding:0.8em;border-style:solid;border-width:1px;border-radius:5px;border-color:#328b02;display:inline-block;}

.Formular_Zelle_links{display:none;text-align:right;padding-bottom:10px;}
.Formular_Zelle_rechts{text-align:left;padding-left:15px;padding-bottom:10px;}
.Formular_input{font-size:1.3em;}

.cd-top.cd-is-visible{visibility:visible;opacity:1;}
.cd-top.cd-fade-out{opacity:0.5;}
.back-to-top{position:fixed;display:none;bottom:20px;right:20px;padding:0;}

#Neuigkeiten{display:none;}
#PERLEN{display:none;}
#Zubehoer{display:none;}
#Schmuck{display:none;}
#Perlenlaeden{display:none;}
#Service{display:none;}
#Tutorial{margin-bottom:3em;}

/* Suchfeld und Autocomplete */
.suche_box{position:relative;display:flex;align-items:center;gap:8px;}
.suche_input_wrap{position:relative;}

#autocomplete{
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    background:white;
    border:1px solid #ccc;
    z-index:1000;
    display:none;
    max-height:300px;
    overflow-y:auto;
}

.ac_item{padding:6px 8px;cursor:pointer;}
.ac_item:hover,
.ac_active{background:#f0f0f0;}

.ac_all_results{background:#ffe58a;padding:8px;cursor:pointer;font-weight:bold;text-align:center;}
.ac_all_results:hover{background:#ffd84a;}

/* Smartphone: schmaleres Suchfeld */
@media only screen and (max-width:600px){
    #Einzelartikel{width:210px;}
}

/* Tablet: schmaleres Suchfeld */
@media only screen and (min-width:601px) and (max-width:900px){
    #Einzelartikel{width:240px;}
}

@media only screen and (min-width:21.5em){ /* ab 344 px */
    #logobox{display:block;}
}

@media only screen and (min-width:22em){
    #Einzelartikel{display:flex;}
    #luppe_{display:flex;}
}

@media only screen and (min-width:33.125em){ /* ab 530 px */
    #logobox{
        min-height:100px;
        min-width:331px;
        margin-left:0.65em;
        margin-top:0.4em;
        margin-bottom:0.4em;
        overflow:auto;
        float:left;
        width:45%;
        background-image:url(../bilder/Startseitenbilder/Logo-Gluecksperle-0.jpg);
        background-repeat:no-repeat;
    }
}

@media only screen and (min-width:38.75em){ /* ab 620 px */
    #Neuigkeiten{display:inline;}
    #PERLEN{display:inline;}
    #Zubehoer{display:inline;}
    #Schmuck{display:inline;}
    #Perlenlaeden{display:inline;}
    #Service{display:inline;}

    #navi{font-size:0.8em;}
    #you-are-here{display:inline;}
    #Menue{display:none;}

    #Teaser1{width:15%;float:left;}
    #Teaser2{width:30%;max-width:30%;float:left;text-align:center;margin:0 auto;}
    #Teaser3{width:10%;float:left;}
    #Teaser4{width:30%;max-width:30%;float:left;text-align:center;margin:0 auto;}
    #Teaser5{width:15%;float:left;}

    .faq_tabelle{width:80%;}
    #ueberschrift{width:80%;}
    #Text{width:80%;}
    #BNachname_Seitenkopf{display:inline;text-align:right;}

    .Formular_Zelle_links{display:table-cell;text-align:right;}
    .Beschriftung_Zelle{display:none;}
    .Perlengeschaeft-Ueberschrift{font-size:0.9em;}
}

@media only screen and (min-width:43.75em){ /* ab 700 px */
    #Perlenkorb_{
        display:block;
        margin-right:12px;
    }

    #shoppingcart{
        margin:0.7em 2em 0.7em 0;
    }
    
    #Perlenkorb{
        margin:0;
    }

    #navi{font-size:0.9em;}
    #Services{font-size:0.855em;}
    .Artikelinfo{display:inline;}
    .Perlengeschaeft-Ueberschrift{font-size:1em;}
    .Perlengeschaeft-Inhalt{display:grid;}
    .You-Tube-Tutorial{min-height:350px;}
}

@media only screen and (min-width:50.875em){ /* ab 814 px */
    .bomenue{font-size:1em;}
    .Perlengeschaeft-Ueberschrift{font-size:1.1em;}
    .Perlengeschaeft-Inhalt{display:flex;}
}

@media only screen and (min-width:59.5em){ /* ab 952 px */
    #logobox{
        min-height:130px;
        min-width:445px;
        margin-top:0;
        margin-bottom:10px;
        background-image:url(../bilder/Startseitenbilder/Logo-Gluecksperle.jpg);
        background-repeat:no-repeat;
    }

    #shoppingcart{
        margin-top:1.1em;
    }

    #Willkommen2{margin-left:5%;margin-right:5%;}
    #Perlenladen-links{width:50%;}
    #Perlenladen-rechts{width:50%;padding:2em;}
    #Perlenladen-Graz{width:50%;}
    #Perlenladen-Linz{width:50%;}
    #Tutorial{margin-top:3em;margin-bottom:2em;}

    #links{width:50%;float:left;margin-top:4em;}
    #rechts{width:50%;float:right;}

    #Marken-neu{width:100%;}

    #Teaser1{width:10%;float:left;}
    #Teaser2{width:40%;max-width:40%;float:left;text-align:center;}
    #Teaser3{width:10%;float:left;}
    #Teaser4{width:40%;max-width:40%;float:left;text-align:center;}
    #Teaser5{width:0;float:left;}

    .Perlengeschaeft-Ueberschrift{font-size:1.3em;}
}

@media only screen and (min-width:64em){ /* ab 1024 px */
    footer{
        padding-top:0;
        max-width:1200px;
        border-width:0 1px 1px 0;
    }

    body{padding:0 0 30px 0;}

    body_mit_Hintergrund{
        background-image:url(../bilder/Startseitenbilder/Ornamente.jpg);
        background-position:center center;
        background-size:cover;
        background-attachment:fixed;
        background-repeat:no-repeat;
        padding:0 0 30px 0;
    }

    .main{border-width:0 1px 1px 1px;}
    .Perlengeschaeft-Ueberschrift{font-size:1.4em;}
    #unten{background:rgba(255,255,255,0.8);}
    #top{background:rgba(255,255,255,0.8);}
    .You-Tube-Tutorial{min-height:400px;}
}