/*
         BannerExpress V3.1 CSS
         Design: Kreativagentur Freudenschrei UG | https://www.freudenschrei.ug
         ======================
         Grundfarben: #ff5a00 (Orange), #ffb615 (Gelb-Orange), #0e0e0e (Schwarz), #ededed (Grau)
         #d0d7e0 (Grau-Blau), #f5f5f5 (Grau Hell), #685B50 (Braungrau)
*/

/* Links */
a { -webkit-transition: all 0.2s ease; -moz-transition   : all 0.2s ease; }
a:link, a:visited {
        text-align: left;
         font-size: 1.0em;
         color: #5c5c5c;
         font-weight: normal;
         text-decoration:underline;
}

a:hover {
         font-weight: normal;
         color: #ff5400;
         text-decoration:none;
}

a.nohover { color: #685B50 !important; }
a.light { color: #FFFFFF !important; }
a.light:hover { color: #000000 !important; }

a.button:link, a.button:visited, .button, div[class^="button_"] {
         display: inline-block;
         cursor: pointer;

         color: #5c5c5c;
         text-align: center;
         font-size: 0.9em;
         font-weight: 500;
         text-shadow: rgba(255, 255, 255, 0.99) 1px 1px 0px;

         -webkit-box-shadow: 0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        box-shadow:         0px 5px 10px -5px rgba(0, 0, 0, 0.25);

         padding: 3px 10px 3px 10px;
         margin: 2px 0px 5px 0px;

         background: #ededed;
         border: 0px;
         text-decoration:none;
}

a.button:hover, a.button.active, .box a.button, .button:hover, .button.active, div[class^="button_"].active {
         text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px;
         color: #FFFFFF;
         background: #ff5400;
         text-decoration:none;
}

div[class^="button_"]:hover {
         text-shadow: rgba(255, 255, 255, 0.99) 1px 1px 0px;
         color: #685B50;
         background: #ededed;
         text-decoration:none;
         padding: 2px 9px 2px 9px;
         border: 1px #8F8F8F solid;
}

a.button.active:hover {
         text-shadow: rgba(0, 0, 0, 0.50) 1px 1px 0px;
         color: #FFFFFF;
         background: #0e0e0e;
         text-decoration:none;
}

a.button.block {
        width: calc(100% - 20px);
         display: block;
}

a.button.big {
        font-size: 1.3em;
         padding: 6px 10px;
}

a.button.bigger {
        font-size: 1.5em;
         padding: 10px 20px 10px 20px;
}

a.button_color {
         display: inline-block;
         cursor: pointer;
         margin: 20px;
         padding: 15px 30px;

         color: #FFFFFF !important;
         text-align: center;
         font-size: 1.3em;
         font-weight: 600;
         font-style: normal;
         text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 1px;
         text-decoration: none;


         border: none;
         background-size: 300% 100%;

         border-radius: 50px;
         moz-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
         -webkit-transition: all .4s ease-in-out;
         transition: all .4s ease-in-out;

         background-image: linear-gradient(to right, #f5ce62, #e43603, #ff9c82, #e85a19);
         box-shadow: 0 4px 15px 0 rgba(0, 0, 0, 0.25);
}
a.button_color:hover {
         background-position: 100% 0;
         moz-transition: all .4s ease-in-out;
         -o-transition: all .4s ease-in-out;
         -webkit-transition: all .4s ease-in-out;
         transition: all .4s ease-in-out;
}
a.button_color:focus { outline: none; }
.color1 { background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19) !important; }
.color2 { background-image: linear-gradient(to right, #fc6076, #ff9a44, #ef9d43, #e75516) !important; }
a.button_color.small { margin: 5px; padding: 10px 15px; font-size: 1.2em; }


/* Überschriften */
h1 {
         font-size: 1.8em;
         font-weight: 700;
         text-align: left;
         color: #2c2119;
         margin: 0px 0px 5px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h2 {
         display: block;
         font-size: 1.5em;
         font-weight: 700;
         text-align:left;
         color:#432e2e;
         line-height: 1.4em;
         margin: 20px 0px 10px 0px;
         padding: 0px 0px 0px 0px;
         vertical-align:top;
}

h3, .h3 {
         display: inline-block;
         background: #ff5400;

         font-size: 1.4em;
         font-weight: 700;
         text-align:left;
         color:#FFFFFF;
         text-decoration:none;
         text-transform: uppercase;

         margin-bottom: 10px;
         margin-top: 0px;
         padding: 2px 10px 2px 10px;
         vertical-align:top;
}

h4 {
         display: inline-block;
         font-size: 1.2em;
         font-weight: 500;
         text-align:left;
         color:#000000;
         margin: 5px 0px 5px 0px;
         padding: 5px 0px 5px 0px;
         vertical-align:top;
}

h5 {
         font-size: 0.9em;
         font-weight: normal;
         text-align:left;
         color:#7F7F7F;

         margin: 5px 0px 5px 0px;
         padding: 5px 10px 5px 10px;

         vertical-align:top;
         background: #FFFFFF;

         border: 1px #cfcfcf solid;
}

h5.error {
         color:#FFFFFF;
         vertical-align:top;
         background: #c51d20;
         border: 1px #a51315 solid;
         padding: 5px 15px 5px 15px;
}

h5.ok {
         color:#FFFFFF;
         vertical-align:top;
         background: #7aaf14;
         border: 1px #659112 solid;
         padding: 5px 15px 5px 15px;
}

h1.center, h2.center, h3.center, h4.center, h5.center { text-align: center; }

h1, h2, h3, h4, h5 { font-family: 'Poppins'; }

/* Standarts */
html { height:100%; }
body {
         background:#FFFFFF;
         font-size: 100%;
         width: 100%;
         height: 100%;
         margin: 0;
         padding: 0;
         min-width: 800px;
}

body, tr, td, div {
         font-family: 'Poppins';

         font-weight: 400;
         font-size: 1.0em;
         vertical-align:top;
         text-align:left;
         color: #000000;
}

.l         { float:left; }
.c        { text-align: center;}
.r         { float:right; }
.inline         { display: inline-block; }
.text_inline { display: inline; }
.block         { display: block; }
.hide         { display: none !important; }
.show         { display: block !important; }
img         { border: 0px; }
.clear         { clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
.pad        { padding: 10px; }
.pad_big        { padding: 20px !important; }
.pad_top        { padding: 20px 0px; }
.pad_top_only        { padding: 20px 0px 0px 0px; }
.pad_l         { padding: 0px 0px 0px 10px; }
.pad_m         { padding: 0px 10px 0px 10px; }
.pad_r         { padding: 0px 10px 0px 0px; }
.pad_s        { padding: 5px; }
.pad_l_big         { padding: 0px 0px 0px 25px; }
.pad_m_big         { padding: 0px 25px 0px 25px; }
.pad_r_big         { padding: 0px 25px 0px 0px; }
.margin        { margin: 5px 5px 5px 5px !important; }
.small        { font-size: 0.8em !important; }
.smaller        { font-size: 0.6em !important; }
.big        { font-size: 1.3em !important; }
.line        { border-bottom: 2px #BFBFBF dotted; }
.round        { -webkit-border-radius: 4px !important; -moz-border-radius: 4px !important; border-radius: 4px !important; }
.round_big { -webkit-border-radius: 10px !important; -moz-border-radius: 10px !important; border-radius: 10px !important; }
.round_bigger { -webkit-border-radius: 50px !important; -moz-border-radius: 50px !important; border-radius: 50px !important; }
.align_right, .a_r { text-align: right; }
.align_left, .a_l { text-align: left !important; }
.align_center, .a_c { text-align: center; }
.align_justify, .a_j { text-align: justify; }
.texti        { text-indent: 100%; white-space: nowrap; overflow: hidden; }
hr         { border: 0px #FFFFFF; border-bottom: 3px #DFDFDF dotted; height: 0px; }
td         { vertical-align: middle; padding: 2px 5px; }
.shadow  { -webkit-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.15); box-shadow: 0px 0px 10px 6px rgba(0, 0, 0, 0.15); }
.shadow-s  { -webkit-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.10); -moz-box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.10); box-shadow: 0px 0px 3px 2px rgba(0, 0, 0, 0.10); }
.shadow-in  { -webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.15); -moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.15); box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, 0.15); }
.shadow-box  { -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15); box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.15); }
::-moz-selection { background: #ff5400; color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px; }
::selection { background: #ff5400; color: #FFFFFF; text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px; }

.noshadow { -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0) !important; -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0) !important; box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.0) !important; }
.nospan { cell-spacing: 0; cell-padding: 0; padding: 0; margin: 0; }
.nodeco { text-decoration: none !important; }

.old_price { display: inline-block; color: #DF0000; text-decoration: line-through; padding: 2px 5px; }

.h_line {
         display: inline-block;
         background: #ff5a00;
         width: 50px;
         height: 6px;
         margin: 0px auto 30px auto;
         -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
}
.h_line.dark { background: #000000; }
.h_line.light { background: #FFFFFF; }

.w100  { width: 100% !important; }
.w80  { width: 80% !important; }
.w75  { width: 75% !important; }
.w70  { width: 70% !important; }
.w66  { width: 66% !important; }
.w60  { width: 60% !important; }
.w50  { width: 50% !important; }
.w45  { width: 45% !important; }
.w40  { width: 40% !important; }
.w33  { width: 33.333% !important; }
.w20  { width: 20% !important; }
.w16  { width: 16.6667% !important; }
.w10  { width: 10% !important; }

.w75pad  { width: calc(75% - 20px); margin: 0px 10px; }
.w50pad  { width: calc(50% - 20px); margin: 0px 10px; }
.w66pad  { width: calc(66.666% - 20px); margin: 0px 10px;  }
.w50pad  { width: calc(50% - 20px); margin: 0px 10px;  }
.w33pad  { width: calc(33.333% - 20px); margin: 0px 10px;  }
.w25pad  { width: calc(25% - 24px); margin: 0px 10px;  }
.w20pad  { width: calc(20% - 24px); margin: 0px 10px;  }

img.w66 { width: 66%; height: auto; max-width: 600px; }
img.w50 { width: 50%; height: auto; max-width: 600px; }
img.w33 { width: 33%; height: auto; max-width: 600px; }

img.content { height: auto; max-width: 100%; }
img.content_image_l { float: left; width: 50%; height: auto; max-width: 600px; margin-right: 50px; }
img.content_image_r { float: right; width: 50%; height: auto; max-width: 600px; margin-left: 50px; }

img.filter-grey { filter: grayscale(100%); transition: 0.5s; }
img.filter-grey:hover { filter: grayscale(0%); }

.s { color: black; background-color: black; }
.w { color: white; background-color: white; }

.text_light { color: #FFFFFF !important; text-shadow: rgba(0, 0, 0, 0.25) 1px 1px 1px;  }

.head { background: #ff5a00; color: #FFFFFF; font-weight: 600; font-size: 1.1em; }
.head_sub { background: #eb8a56; color: #FFFFFF; font-weight: 600; font-size: 1.0em; }
.head2 { background: #000000; color: #FFFFFF; font-weight: 600; font-size: 1.1em; }
.foot { background: #FFFFFF; border-top: 2px #ff5a00 solid; color: #000000; font-weight: 600; font-size: 1.1em; }

.bg, .bg0 { background: #FFFFFF; }
.bg1 { background: #f5f5f5; }
.bg1 { background: #fbf8f7; }
.bg2 { background: #d0d7e0; }
.bg2 { background: #fde8df; }
.bg3 { background: #546067; }
.bg4 { background: #9CCD1C; }
.bg5 { background: #ff5400; }
.bg6 { background: #FFD11B; }
.bg7 { background: #BF0000; }

.orange1 { background: #ff5a00; }
.orange2 { background: #e55100; }
.orange3 { background: #ff6d1e; }

.blur { -webkit-filter: blur(10px); filter: blur(10px); filter: Blur(Strength=50); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='50'); }

ol li { margin: 5px 0px 10px 0px; }
ol li b { color: #000000; }
ol li span { color: #6F6F6F; }

.background_clipped {
         -webkit-clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0% 100%);
         clip-path: polygon(0 60px, 100% 0, 100% calc(100% - 60px), 0% 100%);
         margin: 20px 0px;
         min-height: 50px;
}
.background_poly {
         background: #ff5a00 url(../images/bg_poly.jpg) bottom center no-repeat;
         background-size: cover;
}

.background_poly_grey {
         background: #d6d6d6 url(../images/bg_poly_grey.jpg) bottom center no-repeat;
         background-size: cover;

         -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
         -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
         box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);

         min-height: 80px;
}

.background_poly_grey_light {
         background: #e5e5e5 url(../images/bg_poly_grey_light.jpg) bottom center no-repeat;
         background-size: cover;

         -webkit-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
         -moz-box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
         box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);

         min-height: 80px;
}

/* Shop Message */
#shop_message {
         display: none;
         position: fixed;
         width:360px;
         min-height:20px;
         z-index:10;
         left: calc(50% - 150px);
         bottom: 0px;
         padding: 20px;

         background: #DFDFDF;
         border: 1px none #000000;
         -webkit-border-top-left-radius: 10px;
         -webkit-border-top-right-radius: 10px;
         -moz-border-radius-topleft: 10px;
         -moz-border-radius-topright: 10px;
         border-top-left-radius: 10px;
         border-top-right-radius: 10px;

         -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);
         -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);
         box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);

         text-align: center;
}
#shop_message.ok { background: #9CCD1C !important; color: #FFFFFF !important; }
#shop_message.error { background: #BF0000 !important; color: #FFFFFF !important; }


/* Site */
#wrapper {
         width: 90%;
         min-width: 800px;
         max-width: 1400px;

         padding: 0px 0px 0px 0px;
         margin: 0px auto 0px auto;

         background-color: #FFFFFF;

         -webkit-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);
         -moz-box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);
         box-shadow: 0px 0px 35px 0px rgba(0,0,0,0.2);
}

.in {
         width: calc(100% - 200px);
         padding: 0px 100px;
         margin: 0px auto;
}

#top_bar {
         display: block;
         position: relative;
         z-index: 100;

         background: #FFFFFF;
         width: 100%;

         height: 60px;
         padding: 10px 0px;
         margin: 0px 0px 0px 0px;
         -webkit-transition: all 0.8s ease-out;
         -moz-transition   : all 0.8s ease-out;
}
#top_bar.sticky { position: fixed; width: calc(90% - 0px); max-width: 1400px; top: 0px; left: auto; right: auto; z-index: 100; }
#top_bar .in { width: calc(100% - 60px); padding: 0px 30px; }

#top_bar.bg, #top_bar:hover {
         background: #EFEFEF;
        -webkit-box-shadow: 0px 0px 6px 3px rgba(0, 0, 0, 0.10);
        -moz-box-shadow:    0px 0px 6px 3px rgba(0, 0, 0, 0.10);
        box-shadow:         0px 0px 6px 3px rgba(0, 0, 0, 0.10);
}

#top_bar #logo, #top_bar #navigation, #top_bar #clients { border: 0px #000000 solid; }

#top_bar #logo {
         float:left;
         width: 220px;
         margin: 8px 20px 0px 0px;
}

#top_bar #logo img {
        height: inherit;
         width: 100%;
}

#top_bar #navigation {
         float:left;
         width: calc(100% - 550px);
         padding: 10px 0px;
         margin: 5px 0px 0px 0px;
         text-align: center;
}

#top_bar #navigation.logout { width: calc(100% - 600px); }

#top_bar #navigation a {
         display: inline-block;
         margin: 0px 0px 0px 0px;
         text-transform: uppercase;
         text-decoration: none;
         padding: 5px 10px;
         font-size: 1.1em;
         color: #000000;
         text-shadow: rgba(255,255,255,0.4) 1px 1px 0px;
}

#top_bar #clients {
         float:right;
         width: auto;
         height: 40px;
         margin-top: 14px;
         text-align: right;
}
#top_bar #clients a.login, #top_bar #clients a.logout { width: 50px; height: 40px; padding: 9px 10px 13px 10px; }

#top_bar #clients a {
         width: 100%;
         background: #DFDFDF;
         padding: 8px 10px 18px 10px;
         text-decoration: none;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}
#top_bar #clients a:hover, #top_bar #clients a:hover { background: #ff5a00; }
#top_bar #clients a:hover .icon, #top_bar #clients a:hover .icon { background-image: url(../images/be_icons_light.png) !important;  }

#top_bar #header_contact { float: right; padding-top: 7px; margin-right: 10px; }
#top_bar #header_contact [class^="button_"] {
         display: inline-block;
         background: #ff5a00;
         padding: 5px 20px 5px 10px;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
         border: 0px;
         line-height: 1.3em;
}
#top_bar #header_contact a[class^="button_"] { font-size: 0.9em; }
#top_bar #header_contact [class^="button_"] .icon { margin-top: 3px; }
#top_bar #header_contact [class^="button_"] b {
         float: right;
         margin: 0px 0px 0px 10px;

         font-size: 0.9em;
         font-weight: 600;
         text-align: left;
         color: #FFFFFF;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
}
#top_bar #header_contact [class^="button_"] b span { display: block; font-size: 1.0em; font-weight: 500; margin-top:-2px; }
#top_bar #header_contact [class^="button_"] b span.small { color: #000000; font-size: 0.9em; font-weight: normal; }

#top_bar .sub_navigation {
         background:#ff5a00;
         width: 100%;
         height: 26px;
         padding: 12px 0px;
         margin-top: 10px;
        -webkit-box-shadow: inset 0px 15px 5px -10px rgba(0, 0, 0, 0.10);
        -moz-box-shadow:    inset 0px 15px 5px -10px rgba(0, 0, 0, 0.10);
        box-shadow:         inset 0px 15px 5px -10px rgba(0, 0, 0, 0.10);

         text-align: center;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 1px;
}

#top_bar .sub_navigation a { color: #FFFFFF; text-decoration: none; padding: 0px 5px; }
#top_bar .sub_navigation a:hover { color: #000000; }
#top_bar .sub_navigation .kunde { float:right; padding-top: 3px; font-size: 0.9em; color: #FFFFFF; }

#top_bar .sub_navigation .arrow_box {
        position: relative;
        background: #ff5a00;
}
#top_bar .sub_navigation .arrow_box:after {
         right: 5px;
         bottom: 25px;
         border: solid transparent;
         content: " ";
         height: 0;
         width: 0;
         position: absolute;
         pointer-events: none;
         border-color: rgba(255, 90, 0, 0);
         border-bottom-color: #ff5a00;
         border-width: 22px;
         margin-left: -22px;
}

#preise-angebote {
         display: none;
         text-align: center;
         margin-top: 10px;
}

#preise-angebote.cl { margin-top: 0px; font-size: 1.1em; }

#preise-angebote a {
        display: inline-block;
         padding: 8px 8px 4px 8px;
         background: #f5f5f5;
         font-size: 0.9em;
         text-decoration: none;
         text-transform: uppercase;

         -webkit-border-radius: 0px 0px 6px 6px !important;
         -moz-border-radius: 0px 0px 6px 6px !important;
         border-radius: 0px 0px 6px 6px !important;

        -webkit-box-shadow: inset 0px 10px 8px -10px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 10px 8px -10px rgba(0,0,0,0.25);
        box-shadow: inset 0px 10px 8px -10px rgba(0,0,0,0.25);
}
#preise-angebote a:hover { background: #ff5a00; color: #FFFFFF; }
#preise-angebote a:before { content:" # "; }


/* Hero Banner */
#hero_banner {
         width: 100%;
         height: 460px;
         background-image: url(../images/hero_banner_w.jpg);
         background-position: right center;
         background-repeat: no-repeat;
         background-size: 98%;

         background-color: rgb(245,245,245);
         background-color: -moz-linear-gradient(top,  rgba(245,245,245,1) 0%, rgba(237,237,237,1) 100%);
         background-color: -webkit-linear-gradient(top,  rgba(245,245,245,1) 0%,rgba(237,237,237,1) 100%);
         background-color: linear-gradient(to bottom,  rgba(245,245,245,1) 0%,rgba(237,237,237,1) 100%);

}

#hero_banner .text {
         display: inline-block;
         width: 480px;
         height: 250px;
         padding: 0px 0px 0px 50px;
         margin: 50px 0px 0px 50px;
         text-overflow: hidden;
         color:#000000 !important;
         text-shadow: rgba(255,255,255,0.4) 1px 1px 0px;

         font-family: 'Poppins', sans-serif;
}

#hero_banner h1 {
         display: inline-block;
         background: #ff5a00;
         padding: 5px 10px;
         margin: 10px 0px;

         font-size: 1.1em;
         color: #FFFFFF;
         text-shadow: rgba(0,0,0,0.1) 1px 1px 0px;
         text-transform: uppercase;
}
#hero_banner h1, #hero_banner h2 {
         font-family: 'Poppins', sans-serif;
         font-weight: 400;
}

#hero_banner h2 { font-size: 2.2em; }
/*
#hero_banner .text b {
         display: block;
         font-size: 1.4em;
         font-weight: 600;
         margin-bottom: 10px;
} */

#hero_banner .text u {
        text-decoration: none;
         font-weight: 600;
         font-size: 1.1em;
}

#site { padding: 50px 0px 50px 0px; }
#site.startseite { padding: 0px 0px 50px 0px; }
#site li.dot { list-style: circle !important; }

#footer {
         display: block;
         padding: 20px 0px 50px 0px;

         text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
         font-size: 0.9em;
}
#footer .in { padding: 0px; }

#footer .copy {
         display: block;
         width: 100%;
         height: 60px;
         margin: 10px 0px;

         text-align: center;
         font-size: 3.0em;
}

#footer .copy span {
        display: inline-block;
         width: 280px;
         height: 60px;
         text-align: center;
}

#footer .copy span img {
         display: inline-block;
         height: auto;
         width: 100%;
}
#footer .copy .l_l {
        display: inline-block;
        width: calc(50% - 150px);
         height: 50px;
         background: transparent url(../images/footer_line_left.png) center right no-repeat;
}

#footer .copy .l_r {
        display: inline-block;
        width: calc(50% - 150px);
         height: 50px;
         background: transparent url(../images/footer_line_right.png) center left no-repeat;
}

#footer .box {
        float: left;
         width: calc(25% - 50px);
         border: 0px rgba(0, 0, 0, 0.10) solid;
         padding: 25px;
}

#footer .box b {
        display: block;
         color: #ff5400;
         font-weight: 700;
         text-transform: uppercase;
         padding-bottom: 10px;
}

#footer .box a {
         display: block;
         max-width: 240px;
         color: #7c7c7c;
         text-decoration: none;
         padding: 10px 0px;
         border-top: 2px #9F9F9F dotted;
}
#footer .box a:hover { color: #ff5400; }

#footer .box div.l { color: #BFBFBF; }
#footer .box div.r { color: #7c7c7c; }

#footer .info {
        text-align: center;
         padding: 10px 0px;
        font-size: 0.8em;
         color: #DFDFDF;
         text-decoration: none;
}

#footer .info span.sep { display: inline-block; padding: 0px 10px; }

#freudenschrei {
        text-align: center;
         padding: 10px 0px;
}

#freudenschrei a {
        font-size: 0.9em;
         color: #9F9F9F;
         text-decoration: none;
}
#freudenschrei a:hover { color: #ff5400; }

/* Tabs */
div[id^="tabs_"] {
        width: 100%;
         margin: 40px 0px;
}

div[id^="tabs_"] .top {
         background: #FFFFFF;
         width: 100%;
         height: 50px;
         border-bottom: 1px #BFBFBF solid;
         text-align: center;
}

div[id^="tabs_"] .top .button {
        display: inline-block;
         padding: 8px 10px 8px 10px;
         min-width: 140px;
         margin: 0px 5px;

         cursor: pointer;
         text-align: center;
         text-transform: uppercase;
         font-size: 1.3em;
         font-weight: 600;
         color: #7F7F7F;

         background-color: #FFFFFF;
        border-left: 1px #BFBFBF solid;
         border-right: 1px #BFBFBF solid;
         border-top: 1px #BFBFBF solid;
         border-bottom: 1px #BFBFBF solid;

         -webkit-border-top-left-radius: 5px;
        -webkit-border-top-right-radius: 5px;
        -moz-border-radius-topleft: 5px;
        -moz-border-radius-topright: 5px;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
}

div[id^="tabs_"] .top .button.active {
        border-top: 1px #BFBFBF solid;
        background-color: #ececec;
         border-bottom: 1px #ececec solid;
}

div[id^="tabs_"] div[class^="content_"] {
        border-top: 1px #BFBFBF solid;
        background: #ececec;
         margin-top: -2px;
         text-align: center;
         padding: 10px 10px;
}

div[id^="tabs_"] div[class^="content_"] img {
        width: calc(16.66666666666667% - 34px);
         height: inherit;
         margin: 15px;
}

div[id^="tabs_"] .bg1 { background-color: #FFFFFF; }
div[id^="tabs_"] .bg2 { background-color: #f6f6f6; }
div[id^="tabs_"] .bg3 { background-color: #dfdcdb; }
div[id^="tabs_"] .bg4 { background-color: rgba(150,200,30,0.3); }

div[id^="tabs_"] div[class^="content_"] .sub_content {
        border: 1px rgba(0,0,0,0.25) solid;
         padding: 15px 10px 10px 10px;
         -webkit-box-shadow: inset 0px 10px 5px -5px rgba(0,0,0,0.25);
        -moz-box-shadow: inset 0px 10px 5px -5px rgba(0,0,0,0.25);
        box-shadow: inset 0px 10px 5px -5px rgba(0,0,0,0.25);
}

#tabs_preise { margin: 60px 0px 20px 0px; }
#tabs_preise .top { background: transparent; height: 42px; }
#tabs_preise .top .button { background-color: #ececec; border-bottom: 1px #ececec solid; padding: 6px 8px 6px 8px; min-width: 60px; margin: 0px 5px; text-transform: uppercase; font-size: 1.2em; }
#tabs_preise .top .button.active { background-color: #FFFFFF; border-bottom: 1px #ffffff solid; border-top: 3px #ff5a00 solid; padding: 5px 8px 5px 8px; }
#tabs_preise div[class^="content_"] { padding: 10px 20px; background-color: #FFFFFF; }

.faq { cursor:pointer;  margin-bottom:5px; padding:0px; background: #f7f7f7; border-bottom: 2px #ff5a00 solid; }
.faq .icon { float:right; margin: 5px 5px 0px 0px; }
.faq h3 { font-size: 1.3em; margin: 0px; }
.faq_box { display: none; margin-bottom:5px; }

/* Login-Register-Box */
#login_box {
         display: none;
         position: absolute;
         z-index: 1000;
         top: 0;
         left: 0;

         width: 300px;

         background: #FFFFFF;

         -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
         padding: 20px 25px 5px 25px;

         -webkit-box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.4);
        -moz-box-shadow:    0px 10px 10px -5px rgba(0, 0, 0, 0.4);
        box-shadow:         0px 10px 10px -5px rgba(0, 0, 0, 0.4);

         text-align: center;
}

#login_box.show {
        display: block;
         position: relative;
         z-index: 1;
         top: 0;
         left: 0;
         border: 4px #ff5400 solid;
         float:right;
}

#login_box.show_direkt {
        display: block;
         position: relative;
         border: 4px #ff5400 solid;
         float:none;
         width: calc(100% - 58px);
}

#login_box b {
        font-size: 1.8em;
         color: #ff5a00;
         display: block;
         margin-bottom: 15px;
}
#login_box .logo { margin-bottom: 10px; padding-bottom: 10px; width: 100%; filter: grayscale(100%); opacity: 0.5;  text-align: center; border-bottom: #EFEFEF 1px solid; }
#login_box .logo img { width: 60%; height: auto; margin: 0px auto; }

#login_box.show_direkt b { display: none; }
#login_box .line { width: 100%; padding: 20px 0px 10px 0px; border-bottom: #EFEFEF 1px solid; }
#login_box.show_direkt .line { float:left; width: calc(50% - 20px); padding: 20px 0px 10px 0px; border-bottom: #EFEFEF 1px solid; }
#login_box.show_direkt .line:nth-child(3) { float:right; }

#login_box .icon { float:left; width: 30px; height: 30px; border: #FFFFFF 2px solid; margin-right: 5px; background-image: url(../images/be_icons.png) !important;  }
#login_box .icon.info, #login_box .icon.passwort { margin-left: 5px; margin-right: 0px; }
#login_box .icon.info { cursor: pointer; }
#login_box .icon.user { margin-right: 5px; }

#login_box input[type="text"], #login_box input[type="password"] { float:left; width: calc(100% - 78px); margin: 0px; border: #FFFFFF 2px solid; text-align: center; height: 34px; padding: 0px 10px; background: #FFFFFF; -webkit-box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.00); -moz-box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.00); box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.00); }
#login_box input[type="submit"] { font-size: 1.2em; width: 100%; border: #FFFFFF 0px solid; margin-top: 20px; }

#login_box div[class^="info_"]{ font-size: 0.7em; text-align:center; padding: 10px 0px 5px 0px; color: #FFFFFF; border: 0px #000000 solid; }

#login_box div.text { text-align: left; font-size: 0.8em; padding: 5px 0px; }
#login_box div.text input[type="checkbox"] { float:left; display: block; width: 30px; padding: 2px; margin: 2px 2px 40px 2px; }
#login_box a { color: #000000; }
#login_box a:hover { color: #000000; }
#login_box #error_massage_login { background: #DF0000; color: #FFFFFF; padding: 2px; text-align: center; font-size: 0.8em; }
#login_box .pass { display: block; text-align: center; font-size: 0.9em; border: 1px #f5f5f5 solid; padding: 3px 5px; margin-bottom: 20px; }


div[id^="f_"], #password_check { background: #DF0000; color: #FFFFFF; padding: 2px; font-size: 0.7em; text-align: left; margin-top: -7px; }
#f_passwort, #password_check { width: calc(100% - 53px); margin-left: 2px; float:left; }
#password_check { background: #EFEFEF; }

#register_box .kurz{ background:#DF0000; color: #FFFFFF; }
#register_box .schwach{ background: #ffa500; color: #FFFFFF; }
#register_box .gut{ background:#000; color: #FFFFFF; }
#register_box .stark{ background:#009000; color: #FFFFFF; }

#register_content .l { width: calc(100% - 450px); max-width: 900px; }
#register_content .r { width: 420px; }

/* Kontakt Form */
#kontakt_formular { }
#kontakt_formular .datenschutz, #kontakt_sitewide .datenschutz { padding: 5px 0px; }
#kontakt_formular input[type="text"] { width: calc(100% - 0px); }
#kontakt_formular select { width: calc(100% - 0px); }
#error_massage_kontakt { position: relative; background: #DF0000; color: #FFFFFF; display: block; text-align: center; }

#kontakt_sitewide {
         display: none;
         z-index: 15000;
         position: fixed;
         top: 0px;

         min-width: 500px;
         max-width: 900px;
         padding: 0px 0px;

         border: 0px;
         margin-top: 0px;
}
#kontakt_sitewide #error_massage_kontakt { background: #000000; margin-bottom: 10px; }
#kontakt_sitewide #error_massage_kontakt:after { top: 100%; left: 5%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: #000000; border-width: 10px; margin-left: -10px; }


#kontakt_sitewide b.top {
         display: block;
         margin: 10px auto 10px auto;
         text-align: center;
         padding: 5px;
         color: #FFFFFF;
         font-size: 1.4em;
         text-shadow: 1px 1px 0px rgba(0,0,0,0.5);
}

#kontakt_sitewide .close_button {
         float: right;
         cursor: pointer;
         margin-right: 25px;
}

#kontakt_sitewide form { padding: 10px 15px; width: calc(100% - 50px); margin: 0px auto; }
#kontakt_sitewide form input, #kontakt_sitewide form select, #kontakt_sitewide form textarea { width: 100%; border: 0px #ff5a00 solid; }
#kontakt_sitewide form label { width: 100px; float:left; color: #FFFFFF; padding-top: 7px; }
#kontakt_sitewide form input[name="anfrage_kid"], #kontakt_sitewide form input[name="anfrage_aid"], #kontakt_sitewide form input[name="anfrage_rid"] { width: 150px; float: right; }
#kontakt_sitewide form input[name="anfrage_name"], #kontakt_sitewide form input[name="anfrage_email"] { width: calc(50% - 4px); }
#kontakt_sitewide form input[name="anfrage_email"] { float: right; }
#kontakt_sitewide form .datenschutz { color: #FFFFFF; }
#kontakt_sitewide form .datenschutz a { color: #FFFFFF; }
#kontakt_sitewide form .datenschutz input[name="datenschutz"] { width: 20px; display: inline; }
#kontakt_sitewide form .ok { border: 0px #ff5a00 solid !important; }
#kontakt_sitewide form .error { border: 0px #ff5a00 solid !important; border-bottom: 4px #000000 solid !important; }
#kontakt_sitewide form input[type="submit"]{ margin-top: 5px; background: #000000; }

/* PLZ-Abfrage */
#plz_abfrage {
         display: block;
         position: fixed;
         z-index: 50000;
         top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

         background-color: rgba(240, 240, 240, 1.0);
         width: 100%;
         height: 100%;

         text-align: center;
}

#plz_abfrage .box {
         display: block;
         position: fixed;
         top: calc(40% - 125px);
            left: calc(50% - 150px);

         background-color: rgba(255, 255, 255, 1.0);
         -webkit-box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.15);
         -moz-box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.15);
         box-shadow: 0px 0px 30px 20px rgba(0, 0, 0, 0.15);

         z-index: 50001;
         width: 270px;
         min-height: 150px;
         font-size: 0.9em;

         text-align: center;
}
#plz_abfrage .box .error { color: #DF0000; text-align: center; font-weight: bold; }
#plz_abfrage .box input { width: 100%; text-align: center; }
#plz_abfrage .box input[type="number"] { font-size: 1.6em; padding: 3px 10px; margin-bottom: 5px; }


/* Schatten */
#shadow {
         display: none;
         position: fixed;
         top: 0px;
            left: 0px;
            right: 0px;
            bottom: 0px;

         z-index: 150;
        background: #ff8400; /* Old browsers */
        background: -moz-linear-gradient(-45deg,  #ff8400 0%, #ff5a00 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(-45deg,  #ff8400 0%,#ff5a00 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(135deg,  #ff8400 0%,#ff5a00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8400', endColorstr='#ff5a00',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

         width: 100%;
         height: 100%;
         cursor: pointer;
}
#shadow .icon.cross { cursor: pointer; float: right; margin: 10px; }
.noScroll { overflow: hidden; position: fixed; }

#upload iframe { border: 0px #000000 solid; width: 100%; height: 450px; margin: 10px 0px; }



/* Contentbox */
.box {
         width: calc(100% - 34px);
         border: 2px rgba(0, 0, 0, 0.10) solid;
         padding: 10px 15px;
         margin: 0px 0px 10px 0px;
}
.box.inline { width: auto; min-width: calc(10% - 34px); }
.box.ok { border: 2px rgba(120, 175, 20, 1.0) solid; margin-top: -6px; }
.box.error { border: 2px rgba(200, 30, 30, 1.0) solid; margin-top: -6px; }
.box h3 { margin-top: -42px; float:left; }
.box h3.block { margin-top: -42px; float:none; text-align: center; }

.background_winter {
         display: block;
         width: 90%;

         background: transparent url(../../../uploads/aktion_winter_bg.png) center bottom no-repeat;
         background-size: 100%;
         padding: 5% 5% 20% 5%;

         font-family: 'Merriweather';
         text-align: center;
         color: #002047;
}
.background_winter h1 {
         font-size: 2.6em;
         font-family: 'Dancing Script';
         text-align: center;
         color: #083871;
         margin-bottom: 30px;
}

.background_winter i {
         font-size: 1.8em;
         font-family: 'Dancing Script';
}

/* Seitenanzeige */
#pages {
         width: 100%;
         line-height:30px;
         padding: 5px 0px;
         text-align: center;
}

#pages a:link, #pages a:visited {
         display: inline-block;
         height: 27px;
         width: 27px;

         color: #685B50;
         text-align: center;
         text-decoration:none;
         font-size: 0.9em;
         font-weight: 500;
         text-shadow: rgba(255, 255, 255, 0.99) 1px 1px 0px;

         -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        box-shadow:         inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);

         padding: 3px 5px 3px 5px;
         margin: 5px 1px 2px 1px;

         background: #FFFFFF;
         text-decoration:none;

         -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
}

#pages a:first-child, #pages a:last-child {
        background: #ff5400;
         text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
         color: #FFFFFF;
}

#pages a:hover {
         background: #ff5400;
         color: #FFFFFF;
         text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 0px;
}

#pages div {
         display: inline-block;
         height: 27px;
         width: 27px;

         font-size: 0.9em;
         color: #000000;
         font-weight: normal;
         text-decoration:none;
         text-align:center;
         text-shadow: #FFFFFF 1px 1px 0px;

         padding: 3px 5px 3px 5px;
         margin: 5px 1px 2px 1px;

         background: #DFDFDF;
         border: 1px #DFDFDF solid;

         -webkit-box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow:    inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);
        box-shadow:         inset 0px 0px 5px 0px rgba(0, 0, 0, 0.15), 0px 5px 10px -5px rgba(0, 0, 0, 0.25);

         -webkit-border-radius: 0px;
        -moz-border-radius: 0px;
        border-radius: 0px;
}

/* Top */
#top {
         position: fixed;
         z-index: 10;
         bottom: 20px;
         right: 20px;
         display: none;

         background: #ff5400;
         padding: 6px 10px 6px 12px;

         font-size: 0.9em;
         color: #FFFFFF;
         text-shadow: #FF3F00 1px 1px 0px;

         cursor: pointer;
}

#top .show { display: block; }
#top b { display: inline; font-weight: bold; padding-top: 0px !important; }

/* SCode */
#scode {
         display: block;
         float: left;
         margin: 0px 0px;
         padding: 0px;
         width: calc(6 * 16px);
         line-height: 6px !important;
         padding: 10px 5px 10px 5px;
         border: 0px #000000 solid;
}

#scode span, #scode span.black, #scode span.white {
         display: inline-block !important;
         padding: 0px !important;
         margin: 0px !important;
         height: 6px !important;
         width: 4px !important;
         line-height: 6px !important;
         border: 0px #000000 solid;
}

input[type="text"].sc, #kontakt_sitewide input[type="text"].sc { font-size: 1.4em; width: 150px !important; padding: 5px 10px; font-weight: bold; text-align: center; }
#scode span.black { background-color:#000000; color:#000000; }
#scode span.white { background-color:#FFFFFF; color:#FFFFFF; }


#kontakt_sitewide .sc { text-align: right; }
#kontakt_sitewide .sc b { color: #FFFFFF; }
#kontakt_sitewide #scode span.black { background-color:#FFFFFF; color:#FFFFFF; }
#kontakt_sitewide #scode span.white { background-color:#FF7100; color:#FF7100; }

/* Kunden */
#kundenbereich {}
#kundenbereich .stats { width: 100%; }
#kundenbereich .stats .item {
         display: inline-block;
         float: left;
         background: #f5f5f5;
        width: calc(20% - 28px);
         margin: 2px;
         padding: 10px;
         border: 1px #CFCFCF solid;

         text-shadow: rgba(255,255,255,0.2) 1px 1px 0px;
         text-align: center;
         cursor: pointer;
         text-transform: uppercase;
}

#kundenbereich .stats .item:hover {
         background: #ff5a00;
         color: #FFFFFF;
         border: 1px #ff5a00 solid;
         text-shadow: rgba(0,0,0,0.2) 2px 2px 0px;
         -webkit-transition: all 0.4s ease;
            -moz-transition   : all 0.4s ease;
}

#kundenbereich .stats .item .icon { margin: 20px 0px; }

#kundenbereich .stats .item span {
        display: block;
        font-size: 2.2em;
         font-weight: bold;
         margin-top: 10px;
         text-transform: none;
}

#kundenbereich .stats .item u {
        text-decoration: none;
         color: #ff5a00;
}

#kundenbereich .stats .item:hover u {
        text-decoration: none;
         color: #000000;
}

#kundenauftraege {}

#kundenauftraege #tabs tr { cursor: pointer; }
#kundenauftraege #tabs tr[data-aid^="order_"]:hover > td { background: #ff5a00; color: #FFFFFF; }
#kundenauftraege #tabs [id^="order_"] { display: none; }

form[id^="wk_artikel_"] { display: inline-block;  }

#preise b { font-weight: 600; }
#preise td a { color: #000000; }
#preise td > form { margin: 5px; }
#preise td span { display: block; font-size: 0.9em; color: #5F5F5F; font-style: italic; text-align: right; }
#preise .margin { margin: 2px 2px 4px 2px !important; cursor: pointer; }
#preise.background { background:#FFFFFF url(../images/bg_preise.jpg) left top no-repeat; background-size: 100%; }


/* Unterseiten */
#bestellvorgang { }
#bestellvorgang img { margin: 5%; width: 90%; height: auto; max-width: 450px; }
#bestellvorgang .item_block { display: block; padding: 50px 0px 50px 0px; }
#bestellvorgang .line { margin: 20px 0px; }
#bestellvorgang .optionen { }
#bestellvorgang .optionen a { float: left; display: block; width: calc(33.333% - 80px); padding: 30px; margin: 15px; text-align: center; color: #FFFFFF; text-decoration: none; text-shadow: rgba(0,0,0,0.4) 1px 1px 1px; opacity: 0.9; }
#bestellvorgang .optionen a:first-child { margin-left: 0px; }
#bestellvorgang .optionen a:last-child { margin-right: 0px; }
#bestellvorgang .optionen a:hover { opacity: 1.0; }
#bestellvorgang .optionen a span { display: block; width: 100%; min-height: 150px; text-align: center; margin: 0px 0px; color: #FFFFFF; }
#bestellvorgang .optionen a b { display: block; text-align: center; margin: 20px 0px; color: #FFFFFF; text-decoration: none; font-size: 1.6em; font-weight: 600; }

#bestellvorgang .splash { background:transparent url(../images/bg_splash.png) top left no-repeat; background-size: 90%; }
#bestellvorgang .splash2 { background:transparent url(../images/bg_splash2.png) top left no-repeat; background-size: 90%; }
#bestellvorgang .splash3 { background:transparent url(../images/bg_splash3.png) top left no-repeat; background-size: 90%; }

#preise_sonstiges { text-align: center; }

.briefing_item { margin: 5px 0px; }
.briefing_item:nth-child(odd){ background: rgba(0,0,0,0.05); padding: 5px 10px; }
.briefing_item:nth-child(even){ background: rgba(0,0,0,0.0); padding: 5px 10px; }
.briefing_item h4 { margin: 0px 0px 5px 0px; padding: 0px; }

#preise_sonstiges .item {
        display: inline-block;
         width: calc(25% - 48px);

         border: 2px rgba(0, 0, 0, 0.10) solid;
         padding: 10px 15px;
         margin: 0px 5px 10px 5px;
         -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;

         font-size: 0.9em;
         text-align: center;
}

#preise_sonstiges .item h3 {
        display: block;
         background: #FFFFFF;
         height: 40px;
         color: #000000;
         font-size: 0.9em;
         text-align: center;
}

#preise_sonstiges .item .text {
         display: block;

         height: 100px;
         font-size: 0.9em;
         text-align: center;

}

#pp_top {
         display: block;
         width: 100%;
         background:#FFFFFF url(../images/bannerdesign-partnerprogramm.png) center right no-repeat;
         /*background-size: auto 90%; */
         height: 530px;
         margin-top: -50px;
}

#pp_top .text {
        width: calc(100% - 600px);
         max-width: 600px;
         font-size: 1.2em;
         padding-top: 100px;
}

#pp_top .text h2 { font-size: 1.2em; }
#pp_top .text h3 { font-size: 1.6em; margin-bottom: 20px; }



/* Artikel */
#artikel_ansicht {}

#artikel_ansicht .a_info {
        float: left;
         width: calc(100% - 300px);
         max-width: 1200px;
}

#artikel_ansicht .a_sidebar {
        float: right;
         width: 260px;
         padding: 0px;
}
#artikel_ansicht .a_sidebar .box { font-size: 1.3em; }
#artikel_ansicht .a_sidebar h3 { font-size: 1.0em; }
#artikel_ansicht .a_sidebar .box .item { display: block; }

#artikel_ansicht .a_sidebar .preis {
        display: block;
         margin-top: 30px;
         padding: 10px 0px;
         background: #ff5f01;
         border-bottom: 3px rgba(255,255,255,0.2) solid;

         font-size: 1.1em;
         text-shadow: rgba(0,0,0,0.3) 1px 1px 0px;
         text-align: center;
         color: #FFFFFF;

         -webkit-box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.2);
        box-shadow: inset 0px 0px 25px 0px rgba(0,0,0,0.2);
}
#artikel_ansicht .a_sidebar .preis .mwst { color: #FFFFFF; font-size: 0.6em; }
#artikel_ansicht .a_sidebar .preis b { font-size: 1.4em; }

#artikel_ansicht .a_sidebar .preis div.angebot {
         display: block;
         background: #BF0000;
         padding: 5px;
         margin: 5px 0px;
         text-align: center;
         font-weight: bold;
         color: #FFFFFF;
}

#artikel_ansicht .buttons input { height: 50px; border-bottom: 3px rgba(255,255,255,0.2) solid; }


/* Partnerangebote */
#artikel_ansicht.partnerangebot { font-size: 1.2em; }
#artikel_ansicht.partnerangebot h1 { text-align: center; }
#artikel_ansicht.partnerangebot h2 { text-align: center; color: #FF5400; }
#artikel_ansicht.partnerangebot h3 { text-align: center; font-size: 1.1em; }
#artikel_ansicht.partnerangebot .a_info { float: none; width: calc(100% - 0px); text-align: center; }
#artikel_ansicht.partnerangebot .a_info .text { text-align: justify; }
#artikel_ansicht.partnerangebot .a_info img { display: inline; width: 100%; height: auto; max-width: 1000px; margin: 0px auto 20px auto; }
#artikel_ansicht.partnerangebot .a_info .button.pad_m_big { padding: 10px 30px !important; font-size: 0.7em; margin: 20px 0px; }

#artikel_ansicht.partnerangebot .buttons { text-align: center; }
#artikel_ansicht.partnerangebot .buttons .small { font-size: 1.3em !important; }
#artikel_ansicht.partnerangebot .buttons form input[type="submit"] { font-size: 0.9em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 10px 30px; margin: 0px auto; height: 60px; }

#artikel_ansicht.partnerangebot .a_sidebar { float: none; width: 100%; padding: 0px; font-size: 0.7em; }
#artikel_ansicht.partnerangebot .a_sidebar .box { float: left; width: calc(100% - 300px); margin-top: 50px; }
#artikel_ansicht.partnerangebot .a_sidebar .box i { display: block; color: #6F6F6F; margin-bottom: 10px; font-size: 0.9em; }
#artikel_ansicht.partnerangebot .a_sidebar .box h3 { margin-bottom: 0px; font-size: 1.2em; }
#artikel_ansicht.partnerangebot .a_sidebar .box .item { display: inline-block; margin: 5px; }
#artikel_ansicht.partnerangebot .a_sidebar .preis { float: right; width: 220px; margin-top: 50px; font-size: 1.2em; }


#artikel_ansicht.partnerangebot .partnerlisting { float: none; width: 100%; padding: 0px; font-size: 0.9em; margin: 0px 0px; }
#artikel_ansicht.partnerangebot .partnerlisting .box { float: left; width: calc(100% - 300px); margin-top: 50px; }
#artikel_ansicht.partnerangebot .partnerlisting .box i { display: block; color: #6F6F6F; margin-bottom: 10px; font-size: 0.9em; }
#artikel_ansicht.partnerangebot .partnerlisting .box h3 { margin-bottom: 0px; font-size: 1.2em; }
#artikel_ansicht.partnerangebot .partnerlisting .box h3 a { color: #FFFFFF; font-weight: bold; text-decoration: none; }
#artikel_ansicht.partnerangebot .partnerlisting .box .item { display: inline-block; margin: 5px; }
#artikel_ansicht.partnerangebot .partnerlisting .preis { float: right; background-color: #EFEFEF; width: 220px; margin-top: 50px; font-size: 1.2em; text-align: center; padding: 10px 0px; }

#artikel_ansicht.partnerangebot .partnerlisting form { float: right; width: 220px; margin-top: 20px; border: 0px #000000 solid; text-align: center; }
#artikel_ansicht.partnerangebot .partnerlisting form input[type="submit"] { display: inline-block; font-size: 0.9em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 10px 30px; margin: 0px auto; height: 50px; text-transform: uppercase; }


/* Artikelliste */
#artikel_liste {
        margin: 25px 0px;
         padding: 0px;
}

#artikel_liste .item {
        display: block;
         width: calc(100% - 30px);
        margin: 5px 0px;
         padding: 15px 15px 5px 15px;
        background: rgba(0,0,0,0.0);
         border: 2px rgba(0,0,0,0.4) solid;
         -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;

}
#artikel_liste .item:nth-child(odd) { background: rgba(0,0,0,0.0); }
#artikel_liste .item:hover { background: rgba(255,255,255,0.2); }

#artikel_liste .item .titel {
        display: block;
         float: left;
         width: calc(100% - 400px);
         margin-right: 20px;
         font-size: 0.9em;

}
#artikel_liste .item .titel b { font-size: 1.3em; }
#artikel_liste .item .titel a { color: #000000; text-decoration: none; }

#artikel_liste .item .preis {
        display: block;
         float: left;
         width: 80px;
         margin-right: 20px;
         font-weight: bold;
         font-size: 1.3em;
         padding-top: 15px;
         text.align: center;
}
#artikel_liste .item .preis i { font-size: 0.6em; font-weight: normal; }

#artikel_liste .item .option {
        display: block;
         float: right;
         width: 280px;
         text-align: center;
}

#artikel_liste .item .option input[type="submit"] {
        margin-top: 10px;
        height: 50px;
         border-bottom: 3px #ff8400 solid !important;
         -webkit-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.5);
        -moz-box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.5);
        box-shadow: 0px 15px 10px -15px rgba(0,0,0,0.5);
}

#artikel_liste .item .option input[type="submit"]:disabled {
        font-size: 0.9em;
        background: #6F6F6F;
        background: -moz-linear-gradient(top,  #6F6F6F 0%, #4F4F4F 100%);
        background: -webkit-linear-gradient(top,  #6F6F6F 0%,#4F4F4F 100%);
        background: linear-gradient(to bottom,  #6F6F6F 0%,#4F4F4F 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6F6F6F', endColorstr='#4F4F4F',GradientType=0 );
}

#artikel_liste .item .line { margin-bottom: 10px; }
#artikel_liste .item .line:last-child { display: none; margin: 0px; padding: 0px; }

#wiki {}
#wiki b { font-weight: 600; }
#wiki .letter {
        float: left;
         display: block;
         width: 50px;
         padding: 15px 0px;

         color: #FFFFFF;
         text-align: center;
         font-size: 1.2em;
         font-weight: bold;

         background-color: #ff5f01;
         -webkit-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1);
        -moz-box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1);
        box-shadow: 0px 0px 15px 5px rgba(0,0,0,0.1);
}

#wiki ol {
        float: right;
         width: calc(100% - 100px);
         margin: 0px 0px 40px 0px;
         padding: 0px;
         border: 0px #000000 solid;
}
#wiki a.intern { color:#ff5a00; text-decoration: none; border-bottom: 2px #ff5a00 dotted; }
#wiki img { float: right; margin: 0px 15px 15px 0px; }


/* Sonstiges */
#width {
         display: none;
         position: fixed;
         z-index: 100;
         left: 0px;
         bottom: 0px;
         color: #FFFFFF;
         padding: 5px;
         background: #BF0000;
}

#announcement_info {
         display: block;
         position: fixed;
         background: #FF5A00;
         bottom: 0px;
         left: 0px;
         z-index: 50000;
         min-height: 20px;
         width: calc(100% - 40px);
         margin: 0;
         padding: 20px 20px;
         color: #FFFFFF;
         text-align: center;
}
#announcement_info.red { background: #DF0000; }
#announcement_info.green { background: #00BF00; }

#announcement_info a {
         display: inline-block;
         color: #FFFFFF;
         font-size: 1.0em;
         text-align: center;
         font-weight: normal;
         text-decoration: none;
}

#announcement_info .rabatt, #announcement_info a .rabatt {
         display: inline-block;
         padding: 8px 20px;
         border: #FFFFFF 4px dashed;
         color: #FFFFFF;
         font-size: 1.1em;
         text-align: center;
         font-weight: bold;
}

#announcement_info a:hover { text-shadow: 0px 0px 5px rgba(255,255,255,1.0); }
#announcement_info .icon { cursor: pointer; float: right; }

/* Wiki */
#tags { margin: 10px 0px; }

#tags span, #tags a:link, #tags a:visited {
         display: inline-block;
         cursor: pointer;

         color: #685B50;
         text-align: center;
         font-size: 1.1em;
         font-weight: 500;

         padding: 5px 15px 5px 15px;
         margin: 2px 10px 10px 0px;

         -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;

         background: #FFFFFF;
         border: #ededed 2px solid;
         text-decoration:none;
}

#tags a:before, #tags span:before { content: "# "; color: #BFBFBF; }

#tags a:hover {
         text-shadow: rgba(0, 0, 0, 0.15) 1px 1px 0px;
         color: #FFFFFF;
         background: #ff5400;
         border: #ff5400 2px solid;
         text-decoration:none;
}

#tags a:hover:before { color: #FFFFFF; }

div[class^="info_box_"] {
        display: none;
        position: relative;
        background: #ff5a00;
         margin-top: 10px;
         padding: 5px;
         font-size: 0.8em;
         color: #FFFFFF;
         -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
}

div[class^="info_box_"]:after {
        bottom: 100%;
        right: 6px;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(0, 76, 94, 0);
        border-bottom-color: #ff5a00;
        border-width: 10px;
        margin-left: -10px;
}



#steps { width: 100%; display: table; margin-bottom: 10px; }
#steps .item {
        position: relative;
        float:left;

         width: calc(33.3333% - 45px - 30px);

         border: 1px #DFDFDF solid;
         background: #FFFFFF;
         padding: 0px 0px 0px 20px;
         margin-right: 0px;
}

#steps .item:after,
#steps .item:before {
         background: #FFFFFF;
         bottom: 0;
         clip-path: polygon(50% 50%, -50% -50%, 0 100%);
         clip-path: polygon(0 0, 0 100%, 30% 50%);
         content: "";
         left: 100%;
         position: absolute;
         top: 0;
         transition: background 0.2s linear;
         width: 40px;
         z-index: 1;
}

#steps .item:before {
         background: #DFDFDF;
         margin-left: 1px;
}

#steps .item:nth-child(1) {
         -webkit-border-top-left-radius: 5px;
         -webkit-border-bottom-left-radius: 5px;
         -moz-border-radius-topleft: 5px;
         -moz-border-radius-bottomleft: 5px;
         border-top-left-radius: 5px;
         border-bottom-left-radius: 5px;
         padding: 0px 0px 0px 0px;
         width: 150px;
}
#steps .item:nth-child(4) {
         -webkit-border-top-right-radius: 5px;
         -webkit-border-bottom-right-radius: 5px;
         -moz-border-radius-topright: 5px;
         -moz-border-radius-bottomright: 5px;
         border-top-right-radius: 5px;
         border-bottom-right-radius: 5px;
}

#steps .item:last-child:before, #steps .item:last-child:after {
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
         clip-path: none;
         width: 0px;
}

#steps .item .count {
         display: block;
         float: left;
         width: 30px;
         padding: 5px;
         margin: 5px 10px 0px 5px;

         color: #9F9F9F;
         font-size: 1.2em;
         font-weight: bold;
         text-align: center;
         vertical-align: middle;

         background: #EFEFEF;

         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;
}

#steps .item .info {
         display: block;
         float: left;
         width: 30px;

         width: calc(100% - 56px);

         color: #8F8F8F;
         font-size: 0.8em;
         padding: 10px 0px 10px 0px;
}
#steps .item .info_start {
         display: block;
         float: left;
         width: 30px;

         width: calc(100% - 20px);

         color: #8F8F8F;
         font-size: 0.8em;
         padding: 10px 0px 10px 20px;
}

#steps .item .info_start span, #steps .item .info span {
         display: block;
         font-size: 1.5em;
         font-weight: 600;
         color: #9F9F9F;
}
#steps .item .info_start span a, #steps .item .info span a {
        display: block;
         font-size: 1.0em;
         font-weight: 600;
         color: #9F9F9F;
         text-decoration: none;
}
#steps .item .info_start span a:hover, #steps .item .info span a:hover { color: #000000; }

#steps .item.active { background: #ff5a00; border: 1px #ff5a00 solid; }
#steps .item.active .info { color: #ffffff; }
#steps .item.active .info span { color: #ffffff; }
#steps .item.active .count { background: #ffffff; color: #ff5a00; }
#steps .item.active:after, #steps .item.active:before { background: #ff5a00; border-color: #ff5a00; }


#steps_info_text { margin: 20px 0px; text-align: center; }



.title {
        padding: 10px 0px;
         border-bottom: 3px #DFDFDF dotted;
}

.title h2 { float:left; margin: 0px 0px 0px 0px; }
.title .button { float:right; }

#payment .item {
        display: inline-block;
         width: calc(140px - 10px - 4px - 5px);
         min-height: 50px;

         padding: 5px;
         margin: 0px 5px 0px 0px;
         text-align: center;

         background: #FFFFFF;
         border: #FFFFFF solid 2px;
         -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

         -webkit-transition: all 0.8s ease;
            -moz-transition   : all 0.8s ease;

         -webkit-box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.35);
         -moz-box-shadow:    0px 0px 4px rgba(0, 0, 0, 0.35);
         box-shadow:         0px 0px 4px rgba(0, 0, 0, 0.35);
}
#payment .item img { width: 90%; height: inherit; margin: 5px auto; }
#payment .item:hover { border: #ff5a00 solid 2px; }

/* Scala */
#scala {
         display: block;
         width: calc(100% - 40px);
         margin: 20px 0px;
         padding: 10px 20px;
         text-align: center;
         background: rgba(0, 0, 0, 0.05);
         line-height: 1.1em;
         font-size: 0.8em;
         color: #6F6F6F;
}

#scala .fortschritt {
         display: block;
         width: calc(100% - 6px);
         height: 4px !important;
         background: rgba(0,0,0,0.2);
         margin: 0px 3px;
         padding: 0px;

         -webkit-border-radius: 5px;
         -moz-border-radius: 5px;
         border-radius: 5px;
}

#scala i {
         display: inline-block;
         width: calc(100% - 40px);
         text-align: center;
         font-size: 1.4em;
         font-weight: bold;
         line-height: 1.2em;
         color: #000000;
         margin-top: -10px;
}

#scala b { color: #e85a19; }

#scala .fortschritt span {
         display: inline-block;
         float: left;
         width: 1%;
         height: 14px;
         margin: -5px 0px 0px -2px;
         padding: 0px;

         -webkit-border-radius: 10px;
         -moz-border-radius: 10px;
         border-radius: 10px;

         background: var(--second-color);
         background: linear-gradient(to right, #f5ce62 0%, #e85a19 100%);
         background: -moz-linear-gradient(left, #f5ce62 0%, #e85a19 100%);
         background: -webkit-linear-gradient(left, #f5ce62 0%, #e85a19 100%);
}

#scala div.scalainfo { position: static; margin-top: -10px; margin-left: calc(100% - 5px); width: 20px; padding: 2px 2px 1px 3px; text-align: center; background-color: rgba(0,0,0,0.2); cursor: pointer; transition: all .2s ease-in-out; -webkit-border-top-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topright: 10px; -moz-border-radius-bottomleft: 10px; border-top-right-radius: 10px; border-bottom-left-radius: 10px; }
#scala div.scalainfo:hover { background-color: #ff5400; }
#scala div.scalainfo { left: calc(100% - 10px); top: -15px; }

/* Warenkob */
#warenkorb_overview {}
#warenkorb_overview td { padding: 0px 5px; }
#warenkorb_overview span.anzahl { display: inline-block; width: 20px; padding-top: 10px; text-align: center; }
#warenkorb_overview input[type="button"] { float: right; }

#warenkorb_info {
         display: block;
         position: fixed;
         z-index: 10000;
         right: 0px;
         top: calc(40% - 75px);

         width: 100px;
         min-height: 70px;

         padding: 15px 10px 15px 10px;

         font-size: 0.7em;
         text-align: center;
         text-shadow: rgba(255,255,255,0.3) 1px 1px 0px;

         cursor: pointer;

         background: #ffb615;
         border: 2px #ffb615 solid;
         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(255,150,20,1);
        -moz-box-shadow: inset 0px 0px 20px 0px rgba(255,150,20,1);
        box-shadow: inset 0px 0px 20px 0px rgba(255,150,20,1);

        -webkit-border-radius: 10px 0px 0px 10px;
        -moz-border-radius: 10px 0px 0px 10px;
        border-radius: 10px 0px 0px 10px;
}

#warenkorb_info:hover {
        background: #f5f5f5;
         border: 2px #f5f5f5 solid;

         -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.2);
        -moz-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.2);
        box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.2);
}

#warenkorb_info a { color: #000000; text-decoration: none; }

#warenkorb_info span {
         display: block;
         text-align: center;
         font-size: 1.2em;
         margin-bottom: 10px;
         padding: 0px;
}
#warenkorb_info span b {
         display: block;
         text-align: center;
         font-size: 1.2em;
}

div[id^="kundendaten_"] {
         display: block;
         border: 0px #EFEFEF solid;
}

div[id^="kundendaten_"] .l, div[id^="kundendaten_"] .r { width: 45%; }
div[id^="kundendaten_"] .l:first-child, div[id^="kundendaten_"] .l.top { padding-top: 45px; }
div[id^="kundendaten_"]  b { display: block; margin: 10px 0px; }
div[id^="kundendaten_"]  b span { display: inline; float:right; font-weight: normal !important; color: #9F9F9F; }
div[id^="kundendaten_"] label { display: block; margin-top: 5px; padding-left: 4px; }
div[id^="kundendaten_"] .icon { float:right; margin-top: 4px; cursor: pointer; }

div[id^="kundendaten_"] input, div[id^="briefing_"] input { width: 100%; margin: 2px 0px; border: 2px #1F1F1F solid; }
div[id^="kundendaten_"] select, div[id^="briefing_"] select { margin: 2px; border: 2px #1F1F1F solid; }
div[id^="kundendaten_"] textarea, div[id^="briefing_"] textarea { width: 100%; margin: 2px 0px; border: 2px #1F1F1F solid; }
div[id^="kundendaten_"] input[name="plz"] { width: calc(20% - 4px); }
div[id^="kundendaten_"] input[name="ort"] { float: right; width: calc(80% - 4px); }
div[id^="kundendaten_"] input[name="vorname"] { width: calc(50% - 4px); }
div[id^="kundendaten_"] input[name="nachname"] { float: right; width: calc(50% - 4px); }
div[id^="kundendaten_"] input[name="skype"] { width: calc(100% - 40px); }

div[id^="kundendaten_"] select[name="newsletter"], div[id^="kundendaten_"] select[name="statusmails"] { width: calc(100% - 40px); }

div[id^="kundendaten_"] input[name="alias"], div[id^="kundendaten_"] input[name="passwort"] { width: calc(100% - 40px); }
div[id^="kundendaten_"] .pass { float:right; width: 45%; }

div[id^="kundendaten_"] #show_passwort { cursor: pointer; width: 30px !important; height: 30px !important; padding: 0px !important; margin: 5px 0px 0px 0px; float:right; }

div[id^="kundendaten_"] div.text { display: block; width: 100%; height: 30px !important; text-align: left; font-size: 0.8em; padding: 5px 0px; }
div[id^="kundendaten_"] div.text input[type="checkbox"] {display: inline-block; width: 30px; padding: 2px; margin: 2px 2px 40px 2px; }
div[id^="kundendaten_"] a { color: #ff5400; }
div[id^="kundendaten_"] a:hover { color: #000000; }
div[id^="kundendaten_"] input[type="submit"], div[id^="briefing_"] input[type="submit"] { font-size: 1.2em; border: 0px; }

div[id^="error_massage_"], div[id^="error_assistent_"] { background: #DF0000; color: #FFFFFF; padding: 2px; text-align: center; }
div[id^="f_"], #password_check { background: #DF0000; color: #FFFFFF; padding: 2px; font-size: 0.7em; text-align: left; margin-top: -2px; }
#f_passwort, #password_check { width: calc(100% - 44px); margin-left: 0px; float:left; }

#password_check { background: #FFFFFF; text-align: center; }
div[id^="kundendaten_"] #password_check.kurz{ background:#DF0000 !important; color: #FFFFFF; }
div[id^="kundendaten_"] #password_check.schwach{ background: #ffa500 !important; color: #FFFFFF; }
div[id^="kundendaten_"] #password_check.gut{ background:#acce23 !important; color: #FFFFFF; }
div[id^="kundendaten_"] #password_check.stark{ background:#009000 !important; color: #FFFFFF; }

div[id^="kundendaten_"] input:disabled, div[id^="kundendaten_"] select:disabled { border: 2px #DFDFDF solid; }

#kundendaten_neu, div[id^="briefing_"] { display: none; }
#kundendaten_ov .l { padding-top: 0px !important; }

#kundendaten_rechnung .change { margin-top: 20px; }
#kundendaten_rechnung .change input[type="checkbox"]{ width: 30px; margin: 5px; padding: 5px; }
#kundendaten_rechnung .change .icon{ margin-top: -10px; }
#kundendaten_ov tr:nth-child(odd){ background: #EFEFEF; }

#auswahl {
         padding: 50px 0px;
         border-top: 3px #DFDFDF dotted;
         border-bottom: 3px #DFDFDF dotted;
}

#auswahl .l, #auswahl .r {
         width: calc(50% - 100px);
         min-height: 100px;
         text-align: left;
}

#auswahl .o {
         float:left;

         width: 80px;
         margin: 30px 60px 10px 60px;
         padding: 30px 0px;

         background: #EFEFEF;
         -webkit-border-radius: 50px;
         -moz-border-radius: 50px;
         border-radius: 50px;

         vertical-align: middle;
         text-align: center;
         color: #000000;
}
#auswahl h3 { width: calc(100% - 20px); text-align: center; }
#auswahl input[type="button"] { margin: 20px auto; width: 100%; height: 50px; border: 1px #AFAFAF solid; }


/* Briefing */
#briefing_assistent {  min-height: 400px; }
div[id^="assistent_step_"] { display: none; }
div[id^="assistent_step_"] h4 { font-weight: bold; }
div[id^="assistent_step_"] i { font-size: 0.9em; color: #7F7F7F; }
#briefing_assistent input[type="submit"] { width: 250px; float:right !important; display: inline-block; }

#step_auswahl { text-align: left; display: block; width: 100%; }
#step_auswahl div.button { display: none; margin: 10px 10px 0px 0px;  }

/* Gutscheincode */
#gutscheincode {
        width: 260px;
         display: inline-block;
         float:left;
         text-align: center;
         border: 2px rgba(0, 0, 0, 0.10) solid;
         padding: 10px 15px;
         margin: 0px 0px 0px 0px;
}
#gutscheincode form { margin: 5px 0px; }
#gutscheincode input { width: 100%; margin: 0px 0px 5px 0px; text-align: center; }
#gutscheincode #gutschein_info { text-align: center; }
#gutscheincode .gutschein-loading {
        position: relative;
         display: none;
         width: 100%;
         height: 110px;
         margin-top: -110px;
         background-color: rgba(255,255,255,0.7);
         text-align: center;
}

/* Ladebalken */
.loading {
          display: inline-block;
         position: absolute;
          width: 75px;
          height: 100%;
         left: calc(50% - 38px);
         text-align: center;
}
.loading div {
          position: absolute;
          top: calc(50% - 7px);
          width: 13px;
          height: 13px;
          border-radius: 50%;
          background: #ff5a00;
          animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
.loading div:nth-child(1) {
          left: 8px;
          animation: loading1 0.6s infinite;
}
.loading div:nth-child(2) {
          left: 8px;
          animation: loading2 0.6s infinite;
}
.loading div:nth-child(3) {
          left: 32px;
          animation: loading2 0.6s infinite;
}
.loading div:nth-child(4) {
          left: 56px;
          animation: loading3 0.6s infinite;
}
@keyframes loading1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframesloading3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes loading2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}

/* tooltip */
.tooltip {
          position: relative;
          text-decoration: none;
}
.tooltip:after {
          content: attr(data-tooltip);
          position: absolute;
          bottom: 130%;
          left: 20%;
          background: #000000;

         font-size: 11px;
         color: #FFFFFF;
          padding: 5px 15px;
         text-transform: none;
         text-align: center !important;

         min-width: 90px;
         max-width: 300px;
         height: auto;

          -webkit-border-radius: 10px;
          -moz-border-radius : 10px;
          border-radius : 10px;

          opacity: 0;
          -webkit-transition: all 0.4s ease;
          -moz-transition : all 0.4s ease;
          transition : all 0.4s ease;
}
.tooltip:hover:after { bottom: 100%; }
.tooltip:hover:before { bottom: 70%; }
.tooltip:hover:after, :hover:before { opacity: 1; }


/* Social Media */
#socialmedia {
        width: 200px;
         height: 48px;
         text-align: left;
         margin-top: 20px;
}

#socialmedia a {
        display: inline-block !important;
        width: 48px !important;
         height: 48px !important;
         background-image: url(../images/socialmedia.png);
         background-repeat: no-repeat;
         padding: 0px !important;
         margin: 2px !important;
         border: 0px #FFFFFF dotted !important;
}

#socialmedia a:hover { background-image: url(../images/socialmedia_hover.png); }
#socialmedia a.facebook { background-position: 0px 0px; }
#socialmedia a.twitter { background-position: -61px 0px; }
#socialmedia a.whatsapp { background-position: -122px 0px; }
#socialmedia a.instagram { background-position: -183px 0px; }
#socialmedia a.youtube { background-position: -243px 0px; }
#socialmedia a.pinterest { background-position: -302px 0px; }

#socialmedia a b {
        display: none !important;
         text-indent: 100% !important;
            white-space: nowrap !important;
            overflow: hidden !important;
}

/* Forms */
form.bg {
        background: #EFEFEF;
         padding: 20px;
         display: inline-block;
}

input[type="text"], input[type="number"], input[type="password"], select, textarea {
         background: #f6f6f6;

         font-family: 'Poppins';
         font-size: 1.1em;
         color: #000000;

         padding: 5px 10px;
         margin: 2px 0px;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;

         -webkit-box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.05);
        -moz-box-shadow:    inset 4px 4px 3px 0px rgba(0, 0, 0, 0.05);
        box-shadow:         inset 4px 4px 3px 0px rgba(0, 0, 0, 0.05);
}

form.bg input[type="text"], form.bg select, form.bg textarea {
        background: #FFFFFF;
         -webkit-box-shadow: inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
        -moz-box-shadow:    inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
        box-shadow:         inset 4px 4px 3px 0px rgba(0, 0, 0, 0.15);
}

select {
         padding-right: 25px;
         -webkit-appearance: none;
           -moz-appearance: none;
           appearance: none;
           background: #f6f6f6 url(../images/select_arrow2.png) center right no-repeat !important;
}
select::-ms-expand { display: none; }


input.error, select.error, textarea.error, .checkbox_error, .datenschutz.error {
         border: #DF0000 2px solid !important;
}
input.ok, select.ok, textarea.ok {
         border: #9CCD1C 2px solid !important;
}

input[type="submit"] {
        background: #ff8400; /* Old browsers */
        background: -moz-linear-gradient(top,  #ff8400 0%, #ff5a00 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #ff8400 0%,#ff5a00 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #ff8400 0%,#ff5a00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8400', endColorstr='#ff5a00',GradientType=0 ); /* IE6-9 */

         font-family: 'Poppins';
         color: #FFFFFF;
         font-size: 1.1em;
         font-weight: normal;
         padding: 6px 15px 6px 15px;

         cursor: pointer;

         border: #FFFFFF 0px solid;
         -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;

         -webkit-box-shadow: inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
        -moz-box-shadow:    inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
        box-shadow:         inset 0px 0px 6px 0px rgba(0, 0, 0, 0.0);
}

input[type="submit"]:hover {
        background: #ff5a00; /* Old browsers */
        background: -moz-linear-gradient(top,  #ff5a00 0%, #ff8400 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #ff5a00 0%,#ff8400 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #ff5a00 0%,#ff8400 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff5a00', endColorstr='#ff8400',GradientType=0 ); /* IE6-9 */
}

input[type="submit"].roundbig { font-size: 1.1em; padding: 10px 25px; }

input[type="submit"]:disabled {
        background: #cccccc; /* Old browsers */
        background: -moz-linear-gradient(top,  #cccccc 0%, #e8e8e8 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  #cccccc 0%,#e8e8e8 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  #cccccc 0%,#e8e8e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#e8e8e8',GradientType=0 ); /* IE6-9 */
}

input[type="checkbox"] {
          display:none !important;
}
input[type="checkbox"] + label {
          width: 60px !important;
          height: 30px;
          border-radius: 30px;
          border: 2px solid #ddd;
          background-color: #EEE;
          display: inline-block;
          content: "";
          float: left;
          margin: 0px 25px 20px 0px !important;
          transition: background-color 0.5s linear;
          margin-top: 0px;
         padding: 0px !important;
}
input[type="checkbox"] > label { width: 60px !important; padding: 0px !important; margin: 0px 25px 20px 0px !important; }

input[type="checkbox"] + label:hover {
          cursor: pointer;
}
input[type="checkbox"] + label::before {
          width: 30px;
          height: 30px;
          border-radius: 30px;
          background-color: #fff;
          display: block;
          content: "";
          float: left;
          margin-right: 15px;
          transition: margin 0.1s linear;
          box-shadow: 0px 0px 5px #aaa;
}
input[type="checkbox"]:checked+label{
          background-color: #2b8718;
}
input[type="checkbox"]:checked+label::before {
          margin: 0 0 0 30px;
}