@font-face {
    font-family: 'Oswald';
    src: url('/fonts/Oswald-Light.ttf');
}

*{font-family: Helvetica, Arial, sans-serif;}
body{margin:0px;background-color:#1A1A1A;}
body,th,td,a,input,button,textarea{font-size:16px;line-height: 1.4;}
input[type=text],textarea{width:350px;}
textarea{height:150px;}

ul{margin:0px;}
div{box-sizing: border-box;} /* Hack, damit %-Angaben funzen */

#head{position:fixed;top:0px;left:0px;z-index:1002;}
#foot{background-color:black;}
#content{padding:15px;}
#alles,#head_inner,#foot_inner{margin:auto auto;width:1200px;max-width:100%;}
#alles{color:white;border:1px solid #111111;min-height:100%;}
#head,#foot{width:100%;background-color:black;}
#foot_inner{color:white;padding:30px 30px 30px 15px;}
#head_inner{padding:0px 15px 0px 15px;}

#flags{float:right;margin-top:27px;margin-right:5px}
#flags img{height:17px;width:30px;}

#content{width:900px;max-width:100%;float:left;padding-top:90px;}
#rechts{width:250px;float:right;padding:80px 15px 15px 15px;}
.rechts_navi,.unavi{display:block;color:#999;font-size:14px;padding:15px 10px 15px 0px;border-bottom:1px solid #333;}
.rechts_navi:hover,.unavi:hover{color:#F2AB12;}

.preis_weiss{color:white;}
.preis{color:white;font-weight:bold;font-size:20px;}
.artikeldetailsbild{width:500px;float:left;margin-right:10px;margin-bottom:10px;border: 2px solid #F2AB12;}
.zustandsklasse{display:none;border:2px solid #F2AB12;}
.tab_link{display:inline-block;padding:10px;border:1px solid #F2AB12;}
.tab_link_aktiv,.tab_link:hover{background-color:#F2AB12;color:white;}

.pad{padding:10px;}

#navi{float:left;}
.navi{display:inline-block;color:#999;font-size:18px;padding:25px 40px 25px 40px;border-right:1px solid #333;text-transform: uppercase;}
.navi:hover{color:#F2AB12;}
#logo{width:230px;cursor:pointer;float:left;margin-top:4px;}

/* Unter-Navi */
.unavi_div{width:250px;margin-left:-4px;background-color:rgba(0,0,0,0.9);padding:10px;}
.unavi_div{
    position: absolute;
    visibility: hidden;
    opacity:0;
    transition:visibility 0.4s linear,opacity 0.4s linear;
    height: 0;
    z-index: 1000;
}
.navlink{display:inline-block;}
.navlink:hover .unavi_div,
.navlink:active .unavi_div,
.navlink:focus .unavi_div,
.navlink:focus-within .unavi_div
{
  visibility: visible;
  height: auto;
  opacity:1;
}
/* Ende Unter-Navi */

/* mobile Navi */
#menubutton{display:none;font-size:30px;color:#999;padding:20px 20px 20px 0px;font-weight:normal;}
#navi_mobile{position:absolute;left:0px;top:70px;width:250px;margin-left:-1px;background-color:rgba(0,0,0,0.9);padding:10px;}
#navi_mobile a{display:block;font-family: 'Oswald', Helvetica, Arial, sans-serif;font-weight: 600;color:#999;font-size:14px;padding:15px 10px 15px 0px;border-bottom:1px solid #888;text-transform: uppercase;}
#navi_mobile a:hover,#navi_mobile a.gelb{color:#F2AB12;}

/* Ende mobile Navi */

#breadcrumbs,#breadcrumbs a{font-size:12px;color:white;font-weight:normal;}

div.hinweis,div.fehler{background-color:#B9FFB9;font-weight:bold;display:block;text-align:left;padding:12px;border:2px solid #00ff00;border-radius:7px;margin-bottom:10px;}
div.fehler{background-color:#FEC6C6;border:2px solid #ff0000;}
a{transition: all 0.4s ease;color:#F2AB12;user-select:none;cursor:pointer;font-weight:bold;text-decoration:none;}

h1,h2,h3,h4,h5,h6,.navi{font-family: 'Oswald', Helvetica, Arial, sans-serif;font-weight: 600;}
h1{background-color:#F2AB12;display:inline-block;font-size:20px;line-height:40px;padding:0px 10px 0px 10px;}
h2{color:#F2AB12;margin:0px;}
h3{color:#F2AB12;font-size:20px;margin:0px 0px 10px 0px;}
h4{background-color:#F2AB12;font-size:20px;padding:5px;}
h5{color:#F2AB12;font-size:20px;margin:0px 0px 10px 0px;}

.gelb{color:#F2AB12;}
.schwarz{background-color:#000000;}

input[type=button],input[type=submit],button,.button{display:inline-block;cursor:pointer;white-space:nowrap;border:1px solid black;text-decoration:none;color:white;background-color:#F2AB12;border-radius:5px;font-weight:bold;border:0px;padding:10px;cursor:pointer;margin:5px 5px 5px 0px;}
input[type=button]:hover,input[type=submit]:hover,button:hover,.button:hover{background-color:#000000;}

/*
input[type=button],input[type=submit],button,.button{display:inline-block;cursor:pointer;white-space:nowrap;border:1px solid black;text-decoration:none;color:white;background-color:#111111;border-radius:5px;font-weight:bold;border:0px;padding:10px;cursor:pointer;margin:5px 5px 5px 0px;}
input[type=button]:hover,input[type=submit]:hover,button:hover,.button:hover{background-color:#555;}
*/

hr{color:#888;background:#888;height:1px;border:none}

.l{float:left;}
.r{float:right;}
.c{clear:both;}

.contentbild{width:300px;border: 2px solid #F2AB12;}
.galeriebild{
    border: 2px solid #F2AB12;
    float: left;
    margin: 0px 20px 20px 0px;
    height: 150px;
    width: 150px;
    object-fit: cover;
    object-position: middle center;
}

.galerieportalbild{
    height: 200px;
    object-fit: cover;
    object-position: middle center;
}

.galeriename{
    margin-top:-45px;
    padding:5px;
    background-color:rgba(0,0,0,0.5);
    z-index:40000;
    color:#F2AB12;
    font-size:16px;
    font-weight:bold;
    margin-left:2px;
    width: calc(100% - 2px);
    display:inline-block;
    text-align:center;
}

.bild100{width:100%;}
#bild_pfeil_zurueck,#bild_pfeil_vor{position:absolute;top:150px;z-index:1001;font-size:50px;padding:20px;}
#bild_pfeil_zurueck{float:left;left:0px;}
#bild_pfeil_vor{float:right;right:0px;}

meinraster2.raster2{width:48%;margin-bottom:20px;font-size:14px;text-align:justify;}
.raster2bild{width:100%;margin-bottom:10px;border: 2px solid #F2AB12;}
meinraster2.raster2:nth-of-type(odd){float:left;margin-right:10px;}
meinraster2.raster2:nth-of-type(even){float:right;margin-left:10px;}

meinraster3.raster3{width:calc( 33% - 20px );margin-bottom:20px;float:left;margin-right:20px;font-size:13px;text-align:justify;}
.raster3bild{width:100%;margin-bottom:10px;border: 2px solid #F2AB12;}

.artikelgalerie{
    height: 200px;
    object-fit: cover;
    object-position: middle center;
}

.rechtsbild{width:100%;margin-bottom:10px;}

.slider_img{
    width:100%;
    height:300px;
    object-fit: cover;
    object-position: middle center;
}

#slider_navi{
    position:absolute;
    width:870px;
    max-width:calc(100% - 30px);
    z-index:3;
    margin-top:110px;
}

#slider_navi a{
    font-size:50px;
    padding:20px;
}

.slider_text{
    margin-top:-85px;
    background-color:rgba(0,0,0,0.5);
    position:absolute;
    width:870px;
    max-width:calc(100% - 30px);
    z-index:4;
    padding:10px;
}
.slider_text font{font-family: 'Oswald', Helvetica, Arial, sans-serif;font-weight: 600;text-transform: uppercase;}

#slider_zurueck{float:left;left:0px;}
#slider_vor{float:right;right:0px;}
#slider_wrapper{overflow: hidden;}

.cb_rechts{float:right;margin:0px 0px 10px 10px;}
.cb_links{float:left;margin:0px 10px 10px 0px;}

.rechts_block{width:100%;float:none;}
.foot_block{width:300px;font-size:14px;float:left;margin-right:50px;margin-bottom:20px;color:#999;}

.yt_link { position: relative; display: inline-block;width:100%;}
.yt_playbutton{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: url(/images/playbutton.jpg) no-repeat center center;
}

@media(max-width: 1165px)
{
    #menubutton{display:block;}
    #navi{display:none;}
    /* Rechte Spalte nach unten:*/
    #rechts{float:left;width:100%;padding:0px 15px 15px 15px;}
    .rechts_block{width:200px;float:left;margin-right:10px;}
}

@media(max-width: 600px)
{
    input[type=text],textarea{width:100%;}

    .slider_text,.slider_text font{font-size: 14px;}
    .slider_text{margin-top:-56px;}
    /*
    .slider_text{
        zoom: 0.8;
        -moz-transform: scale(0.8);
        -moz-transform-origin: top left;
    }
      */
    /*
    .slider_text_inner
    {
        zoom: 0.8;
        -moz-transform: scale(0.8);
        -moz-transform-origin: top left;
    }
    */

    /* 2er-Raster auf 100% */
    .raster2{width:100%;margin-bottom:20px;}
    .raster2bild{width:100%;margin-bottom:10px;}
    meinraster2.raster2:nth-of-type(odd),meinraster2.raster2:nth-of-type(even){float:none;margin-left:0px;margin-right:0px;}

    #navi{display:none;}
    #alles{width:100%;margin:0 0;}
    #content{width:100%;float:none;}
    #rechts{width:100%;float:none;}

    .contentbild{width:100%;}
    .cb_links,.cb_rechts{float:none;margin:0px 0px 10px 0px;}

    .rechts_block{float:none;}
    .rechts_block:nth-of-type(even){float:right;margin-left:10px;}
    .rechts_block:nth-of-type(odd){float:left;margin-right:10px;}

    meinraster3.raster3{width:calc( 50% - 20px );margin-bottom:20px;}
    .raster3bild{width:100%;margin-bottom:10px;}
    meinraster3.raster3:nth-of-type(even){float:right;margin-left:10px;}
    meinraster3.raster3:nth-of-type(odd){float:left;margin-right:10px;}

    .foot_block{width:100%;float:none;margin-right:0px;}

    .artikeldetailsbild{width:100%;float:none;margin-right:0px;}
}

@media(max-width: 500px)
{
    /* 3er-Raster auf 100% */
    .raster3{width:100%;margin-bottom:20px;}
    .raster3bild{width:100%;margin-bottom:10px;}
    meinraster3.raster3:nth-of-type(even),meinraster3.raster3:nth-of-type(odd){float:none;margin-left:0px;margin-right:0px;}

    /* Galerie-Bilder in 2er-Raster */
    .galeriebild{margin:0px 0px 10px 0px;}
    .galeriebild_link{float:none;}
    .galeriebild_link:nth-of-type(even){float:right;}
    .galeriebild_link:nth-of-type(odd){float:left;}

    .rechts,.rechts_block{width:100%;float:none;}
    .rechts_block:nth-of-type(odd){float:none;margin-left:0px;}
    .rechts_block:nth-of-type(even){float:none;margin-right:0px;}
}

@media(max-width: 400px)
{
    #logo{width:50%;margin-top:10px;}
    .slider_text,.slider_text font{font-size: 12px;}
    .slider_text{margin-top:-52px;}
    /*
    .slider_text{zoom: 0.6;}
    */
    /*
    .slider_text_inner
    {
        zoom: 0.6;
        -moz-transform: scale(0.6);
        -moz-transform-origin: top left;
    }
    */
}

@media(max-width: 365px)
{
    /* Galerie-Bilder auf 100% und 50px größer*/
    .galeriebild{width:200px;height:200px;margin:0px 0px 10px 0px;}
    .galeriebild_link{float:none;}
    .galeriebild_link:nth-of-type(odd){float:none;}
    .galeriebild_link:nth-of-type(even){float:none;}
}