﻿body { 
    height:100vh;
    padding:0;
    margin:0;
}

body.small-sm.HideBodyDuringStartProcess{
    display:none;
    visibility:hidden;
    opacity:0;
    background:none;
    background-image:none;
}

.MobileMenu,
#IconNaviMobile,
#MobileHead,
#RightContainerModal,
.small-sm #BreadcrumbContainer,
.languageselect
{
    display:none;
}

body.small-sm #Preloader{ 
    position: fixed;
    display:block;
    left: 0; 
    top: 0; 
    z-index: 10001; 
    width: 100%; 
    height: 100%; 
    overflow: visible; 
    background: #fff url(/images/Warteanzeige.gif) no-repeat center center;
}

body.small-sm{
    background:none;
    background:#fff;
    padding:0;
    margin:0;
    background:url(/images/fond_bg.jpg) repeat-x 0px 0px #fff;
}

body.small-sm.device #OuterCenterBox, body.small-sm.device #InnerCenterBox, body.small-sm.device #container , body.small-sm.device #ContentContainer {
    position:relative;
    width:586px;
}

body.small-sm #container , body.small-sm #ContentContainer {
    width:586px;
}


body.small-sm.MobileMenuOpen{
    overflow:hidden;
    position:fixed;
}

.small-sm #logo,
.small-sm #LinkBox{
    display:none;
}

.small-sm .MobileMenu,
.small-sm #MobileHead,
.small-sm #IconNaviMobile
{
    display:block;
}
.small-sm #SendSite,
.small-sm #BookmarkSite,
.small-sm #Warenkorb{
    position:relative;
    left:0;
}

.small-sm #head{
    position:fixed;
    left:50%;
    top:0;
    height:0px;    
    background:none;
    z-index:1000;
    width:584px;
    margin-left:-292px;
}

/* Für mobilgeräte */
.small-sm.device #head{
    position:fixed;
    left:0;
    top:0;
    height:0px;    
    background:none;
    z-index:1000;
    width:584px;
    margin-left:0px;
}

.small-sm  .headMobilePosition{
    position:relative;
    margin: 0px auto 0px auto;
    width:584px;
    height:0px;
}
.small-sm #head #search{
    top:10px; 
    left:inherit;
    right:20px;
    width:auto;
}
.small-sm #head #search input{
    height:22px;
    border:none;
    border-radius:1px;
}

.small-sm #head #search a{
    float:right;
    margin-left:8px;
    background:url(/images/search_mobile.gif) no-repeat 0px 0px;  
}

.small-sm #head  #search a:hover
{
	background:url(/images/search_mobile.gif) no-repeat 0px -21px;
}


.small-sm #head a.headlink{
    /* color:#fff;
    top:10px;
    left:inherit;
    right:12px;
    background: url(/images/content_link_white.png) no-repeat;
    background-position:0 4px; */
    display:none;
}

.small-sm #head a.headlink:hover,
.small-sm #head a.headlink:active,
.small-sm #head a.headlink:focus{
    color:#000;
    background: url(/images/content_link_black.png) no-repeat;
    background-position:0 4px;
}

.small-sm #RightContent #IconNaviMobile div{
    display:block;
    margin: 0 0 0 11px;
    border:1px solid #fff;
    width:59px;
    float:left;
}

.small-sm #IconNaviMobile
{
    /* position:absolute;
    top:0; */
    margin-left:13px;
    margin-bottom:20px;
    width:100%;
    height:26px;
}

#IconNaviMobile a
{
    /* position:absolute;
    top:0; */
    margin-left:0;
    width:100%;
    height:25px;
    background:#fc6803;
}

#IconNaviMobile #SendSite a
{
    background:url(/images/mobile_SendSite.gif) no-repeat center 1px #fc6803;
}

#IconNaviMobile #BookmarkSite a
{
    background:url(/images/mobile_bookmark.gif) no-repeat center 1px #fc6803;
}

#IconNaviMobile #Warenkorb a
{
    background:url(/images/mobile_warenkorb.gif) no-repeat center 1px #fc6803;
}


#IconNaviMobile #SendSite a:hover,
#IconNaviMobile #BookmarkSite a:hover,
#IconNaviMobile #Warenkorb a:hover
{
    background-position: center -23px;
}


.small-sm #MobileHead{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:42px;
  background:#fc6803;
  z-index:999;
  webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.2);
}

.small-sm .MobileHeadContent,
.small-sm .MobileHead2Positioning{
    position:relative;
    display:block;
    margin: 0px auto 0px auto;
    width:584px;
    height:45px;
}

/* für Mobilgeräte */
.small-sm.device .MobileHead2Positioning{
    position:absolute;
    right:0px;
    display:block;
    /* margin: 0px auto 0px auto; */
    width:380px;
    height:45px;
}
 
/* für Mobilgeräte */
.small-sm.device .MobileHeadContent{
    position:absolute;
    display:block;
    /* margin: 0px auto 0px auto; */
    width:584px;
    height:45px;
}




.small-sm .MobileHead2Positioning{
    height:0; /* liegt über logo und Hamburger, verhindert sonst Clicks */
}

.small-sm #MobileLogo{
    position: absolute;
    display:inline-block;
    left: 50px;
    top: 12px;
    width: 87px;
    white-space: nowrap;
    z-index: 90;
}

.small-sm #MobileLogo a{
    position:absolute;
    right:0;
    background:none;
}

.small-sm #container{
    background:none;
    background:#fff;
    width:564px;
    position:relative;
    border-top:none;
}

.small-sm #LeftContent{
    float:left;
    margin-top:45px;
    padding:0 0 0 10px;
    background:none;
}
/*
//Fehler: Überschreibt den Playbutton in de SlideShow der Startseite 
.small-sm #LeftContent a{
   background-position:0px 3px;
}
*/

.small-sm #LeftContent div.list p {
    padding: 0px 0px 0px 12px;
    background: url(/images/list.gif) no-repeat 3px 7px;
    margin: 0px 0px 2px 0px;
    border: none;
}

.small-sm #RightContainer{
    width:265px;
    float:none;
    position:fixed;
    left:0;
    top:0;
    bottom:0;
    z-index:20000;
    overflow-y:hidden; /* Nicht auto: sonst kein Scrollen auf dem iPad  */
    overflow-x:hidden;
    -webkit-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
    -moz-box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.5);
    
    background: #e5e5e5;
    /* 
    background: -moz-linear-gradient(left,  #e5e5e5 0%, #e5e5e5 60%, #eaeaea 40%, #eaeaea 100%); 
    background: -webkit-linear-gradient(left,  #e5e5e5 0%,#e5e5e5 60%,#eaeaea 40%,#eaeaea 100%); 
    background: linear-gradient(to right,  #e5e5e5 0%,#e5e5e5 60%,#eaeaea 40%,#eaeaea 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#eaeaea',GradientType=1 );  
    */

    -webkit-transform: translate3d(-200%, 0, 0);
    -moz-transform: translate3d(-200%, 0, 0);
    -ms-transform: translate3d(-200%, 0, 0);
    -o-transform: translate3d(-200%, 0, 0);
    transform: translate3d(-200%, 0, 0);

    /* VORSICHT: VERHINDERT SCROLLEN DES MENÜS AUF DEM IPAD */
    /*
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    */
    
}

.small-sm.MobileMenuOpen #RightContainer{
    left: 0 !important;
    display:block;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0); 
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease; 
}

.small-sm #RightContainer.fadeOutAnimation{
    -webkit-transition: -webkit-transform 500ms ease;
    -moz-transition: -moz-transform 500ms ease;
    -o-transition: -o-transform 500ms ease;
    transition: transform 500ms ease;
}

.small-sm #RightContainer.HideOnStart{
    visibility:hidden;
}

.small-sm #RightContent{
    position:absolute;
    display:block;
    background:#e5e5e5;
    width:100%;
    padding-top:15px;
    top:0;
    left:0;
    bottom:1px;
    overflow:hidden;
    overflow-y:scroll;
    overflow-x:hidden;
    /* BUGGY Verhindert das Scrollen im Fixed Container */
    /* -webkit-overflow-scrolling: touch; */
}

.small-sm.MobileMenuOpen #RightContainerModal{
    position:fixed;
    display:block;
    top:0;
    right:0;
    bottom:0;
    left:0;
    overflow:hidden;
    z-index:9000;
    background: rgba(0,0,0,0.3);
}

/* 
.small-sm #RightContainer a img{
    display:none;
}
 */
.small-sm #navi{
    height:auto;
    background:#fff;
    z-index:1000;
} 

.small-sm .languageselect{
  margin:0px 0 13px 25px;
  width:203px;
  display:block;
}

.small-sm #RightContent div.MobileMenu{
  background-color:#fc6803;
  width:203px;
  margin-bottom:15px;
  border:1px solid #fff;
  /* margin:0 0 15px 0;
  padding:14px 0 0 0;
  webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.05);
  box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.2); */
}

.small-sm .MobileMenu .linie{
  display:none;
}
.small-sm #RightContent .MobileMenu div.link a{
  left:0px;
  padding:5px 5px 5px 15px;
}
.small-sm #RightContent .MobileMenu div.link, 
.small-sm #RightContent .MobileMenu a {
  background-image:none;
  width:100%;
  color:#fff;
  font-weight:bold;
  padding-bottom:0px;
  display:block;
}


.small-sm #RightContent .MobileMenu div.link{
    border-top:1px solid #fff;
}

.small-sm #RightContent .MobileMenu div.link:first-of-type{
    border:none;
}

.small-sm #RightContent div.link,
.small-sm #RightContent div.link a
{
    margin-bottom:0;
}

.small-sm #RightContent .MobileMenu div.link a:hover,
.small-sm #RightContent .MobileMenu div.link a:active,
.small-sm #RightContent .MobileMenu div.link a:focus {
  color:#000 !important;
  cursor:pointer;
}

.small-sm .MobileMenu div.link{
  margin-bottom:10px;
}

.small-sm .HamburgerMenu{
  cursor:pointer;
  box-sizing:border-box;
  position:absolute;
  display:inline-block;
  padding:12px 12px 10px 10px;
  left:0px;
  top:0px;
  width:48px;
  height:40px;
  background-image:none;
  background:#fc6803;
}

.small-sm .HamburgerMenu span{
  display:block;
  width:26px;
  height:3px;
  background-color:#fff;
  margin-bottom:3px;
}

.small-sm #RightContent div.link {
    background: url(/images/sec_nav_link.gif) no-repeat 0px 7px;
}

/*Link-BOX*/
.small-sm .link
{
	background-position:0px 3px;
}

.small-sm  #copyright
{
    width:564px;
    box-sizing:border-box;
    padding-left:10px;
    margin-left:10px;
    background-size:100% 30px;
}
.small-sm  #CopyrightContent
{
    width:auto;
    box-sizing:border-box;
    padding-left:0;
}

.small-sm  #creadot
{
    display:inline-block;
    margin-right:5px;
    width:150px;
}

.small-sm .ShopForm .formtable  select{
    max-width:150px;
}

/*
#####################################
FONT-SIZES TEST
#####################################
*/

/* ------------------- FONT SIZE 9px ----------------------- */
.small-sm .olist span
{
    font-size:9px; 
    font-family:arial, tahoma, verdana, helvetica, sans-serif;
    
    color:#f00;
    text-decoration:underline;
}


/* ------------------- FONT SIZE 10px ---------------------- */
.small-sm #login, 
.small-sm #copyright #hinweis, 
.small-sm #copyright, 
.small-sm #copyright a, 
.small-sm .text_ohne_bild td, 
.small-sm .text td, 
.small-sm .text_ohne_bild td b, 
.small-sm .text td b{
    /* font-size:10px; */
    font-size:12px;
}

/* ------------------- FONT SIZE 11px ---------------------- */
body.small-sm , 
.small-sm #search input, 
.small-sm #search a, 
.small-sm #language select, 
.small-sm #BreadCrumb, 
.small-sm .list p b sup, 
.small-sm .picturetext sup, 
.small-sm sup, 
.small-sm .einspaltig b, 
.small-sm .zweispaltig b, 
.small-sm .dreispaltig b, 
.small-sm .einspaltig p, 
.small-sm .zweispaltig p, 
.small-sm .dreispaltig p, 
.small-sm .einspaltig .link, 
.small-sm .zweispaltig .link, 
.small-sm .dreispaltig .link, 
.small-sm #RightContent sup, 
.small-sm #login input, 
.small-sm .small, 
.small-sm .buttonContainer a, 
.small-sm .text_ohne_bild .formtable, 
.small-sm .text_ohne_bild .formtable td, 
.small-sm .formtable input, 
.small-sm .formtable  select, 
.small-sm .formtable  option , 
.small-sm #LinkBox a, 
.small-sm .TabHead td, 
.small-sm .text_ohne_bild td input, 
.small-sm .text td input, 
.small-sm #RightContent p, 
.small-sm #RightContent b, 
.small-sm .text_ohne_bild .formtable b, 
.small-sm .pageindex_longform b,  
.small-sm .pageindex_longform p,  
.small-sm .pageindex_longform .link
 {
    font-size:14px;
}

/* ------------------- FONT SIZE 12px ---------------------- */
.small-sm #RightContent, 
.small-sm #RightContent a, 
.small-sm #login, 
.small-sm h3{
    /* font-size:11px; */
    font-size:14px;
}

/* ------------------- FONT SIZE 13px ---------------------- */
.small-sm h4{
    /* font-size:13px; */
    font-size:14px;
}

/* ------------------- FONT SIZE 14px ---------------------- */
.small-sm h2{
    /* font-size:16px; */
    font-size:20px;
}

/* ------------------- FONT SIZE 16px ---------------------- */
.small-sm h1{
    font-size:24px;
}


/* -------- FONT SIZE IN COMBINATION MIT LINE-HEIGHT ------- */
.small-sm #BreadCrumb a {
    /* font-size:10px; */
    font-size:14px;
}

.small-sm .picturetext p, 
.small-sm .picturetext {
    /* line-height:10px; 
    font-size:9px; */
    line-height:14px; 
    font-size:12px;
}

.small-sm .text_ohne_bild table th, 
.small-sm .text table th, 
.small-sm .text_ohne_bild td input, 
.small-sm .text td input {
    /* line-height:10px; 
    font-size:10px; */
    line-height:12px; 
    font-size:12px;
}

/* Sprachauswahl im Head ausblenden */
.small-sm #head #language{
    display:none;
}


/* Automatisch generierte Telefonnummer links hintergrundbilder aktualisieren */
/* .small-sm.device #RightContent div p a{
    background:none;
} */
a[href^="tel"]{
    color:inherit;
    text-decoration:none;
    background:none;
}

/* 
.small-sm #language{
    top:10px;
    left:210px;
}
.small-sm.device #language{
    top:10px;
    left:0px;
}

.small-sm #language select{
    width:120px;
}
 */

