.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;}

.produktbild {
    border-radius: 8px;
    display: block;
}

*, *::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_neu{
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: linear-gradient(to right, 
     #4e7501 0%,
        #4e7501 82%,
        #5f8612 90%,
        #7fa62f 96%,
        #9fbe62 100%
    );
    border-width:0 1px 0px 0px;border-color:#669933;border-style:solid;
}

#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;
    align-items:center;

    flex:0 0 auto;

    margin: 0em 0.6em 0.4em 0.4em;
    cursor:pointer;

    float:none;
}

#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{
    width:100%;
    height:135px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    border-width:1px 1px 0 1px;
    border-style:solid;
    border-color:#669933;
    border-radius:8px 8px 0 0;
    background-color:#ffffff;

    overflow:hidden;
}

#Logobild{
    display:block;
    flex:1 1 auto;
    min-width:0;
    margin-right:10px;
}

#Logobild img{
    display:block;
    max-width:100%;
    height:auto;
}

.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_neu{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_neu{
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 */

#Navi-Top{background: #4e7501;}

#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: 1.4em 1em 0.4em 0.4em;
}

#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_neu{
min-height:130px;
min-width:445px;
margin-top:0;
margin-bottom:10px;
background-image:url(../bilder/Startseitenbilder/Logo-mit-Krone.jpg);
background-repeat:no-repeat;
}

#shoppingcart{
margin-top:1.1em;
margin-right:1.5em;
}

#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{}
#top{background:rgba(255,255,255,0.8);}
.You-Tube-Tutorial{min-height:400px;}
}