@charset "UTF-8";
/*!
Theme Name: R.H. Dev. Theme
Theme URI:
Description: Customized Theme for seamless, customized Theme Development.
Author: Ralf Hoffmeister
Author URI: http://ralfhoffmeister.de
Version: 3.4.2
*/

/* CSS Document */


/* ========================================================= */
/* = ================= ADJUSTMENTS ======================= = */
/* ========================================================= */

/*RESET
   http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126
   License: none (public domain)
**************************************************************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,button{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}
/*SELF CLEAR FLOATING ELEMENTS
**************************************************************/
.clear:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}* html .clear{height:1%}*:first-child+html .clear{min-height:1px}
/*BORDER-BOX LAYOUT
**************************************************************/
*, *:before, *:after {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
/*WP-CORE
**************************************************************/
.alignnone{margin:5px 20px 20px 0}.aligncenter,div.aligncenter{display:block;margin:5px auto}.alignright{float:right;margin:5px 0 20px 20px}.alignleft{float:left;margin:5px 20px 20px 0}.aligncenter{display:block;margin:5px auto}a img.alignright{float:right;margin:5px 0 20px 20px}a img.alignnone{margin:5px 20px 20px 0}a img.alignleft{float:left;margin:5px 20px 20px 0}a img.aligncenter{display:block;margin-left:auto;margin-right:auto}.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center}.wp-caption.alignnone{margin:5px 20px 20px 0}.wp-caption.alignleft{margin:5px 20px 20px 0}.wp-caption.alignright{margin:5px 0 20px 20px}.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}



/* ========================================================= */
/* = ==================== PLUGINS ======================== = */
/* ========================================================= */
/*Base Styles for third party plugins e.g. Slider, Lightbox*/




/* ========== */
/* = HELPER = */
/* ========== */

/*MISC
**************************************************************/

.circle {
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;
}

/*Call to Action Button*/
.cta {
  display: inline-block;
  outline: none;
  border: 1px solid #000;
  color: #fff;
  background-color: #000;
  text-align: center;
  text-decoration: none;
  padding: .25em .5em .35em;
  line-height: 1;
  -webkit-transition: all .15s ease-in-out;
     -moz-transition: all .15s ease-in-out;
      -ms-transition: all .15s ease-in-out;
       -o-transition: all .15s ease-in-out;
          transition: all .15s ease-in-out;
}

  .cta:hover {
    background-color: #fff;
    color: #000;
  }

  .cta:active,
  .cta.active {
    background-color: #000;
    color: #fff;
    -webkit-transition: none;
       -moz-transition: none;
        -ms-transition: none;
         -o-transition: none;
            transition: none;
  }

  .warning-msg {
    border-left: 5px solid #f00;
    padding-left: 10px;
  }

  .info-msg {
    border-left: 5px solid #aaa;
    padding-left: 10px;
  }

  .okay-msg {
    border-left: 5px solid #0f0;
    padding-left: 10px;
  }


/*TYPOGRAPHY & LAYOUT
**************************************************************/

/*size*/
.small { font-size: .75em; }
.medium { font-size: 1.5em; }
.large { font-size: 2em; }
.x-large { font-size: 2.5em; }
.fw-medium {font-weight: 600;}
/*alignment*/
.align-center { text-align: center; }
.align-justify { text-align: justify; }
.align-right { text-align: right; }
.align-left {text-align: left; }

/*styling*/
.drop-cap {
  font-size: 3em;
  line-height: 1;
  font-weight: 600;
  padding: 2px 8px 0 0;
  float: left; }
.run-in { font-weight: bold;}
.italic {font-style: italic;}
.bold {font-weight: 700;}
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }

/*other*/
.hide-text {border: 0;font: 0/0 a;text-shadow: none;color: transparent;}

.smooth {-webkit-font-smoothing: antialiased;}
.sub-smooth {-webkit-font-smoothing: subpixel-antialiased;}

.r-br {display: none;} /*responsive line break - no break on mobile*/

.cols2,
.cols3,
.cols4 {
  max-width: 780px;
  -webkit-column-count: 1;
  -moz-column-count: 1;
  -ms-column-count: 1;
  column-count: 1;}



@media screen and (min-width: 600px) {

  .r-br {display: block;} /*responsive line break*/

  .cols2 {
    -webkit-column-count: 2;
       -moz-column-count: 2;
        -ms-column-count: 2;
            column-count: 2;}

  .cols3 {
    -webkit-column-count: 3;
       -moz-column-count: 3;
        -ms-column-count: 3;
            column-count: 3;}

  .cols4 {
    -webkit-column-count: 4;
       -moz-column-count: 4;
        -ms-column-count: 4;
            column-count: 4;}

      .cols2 p,
      .cols3 p,
      .cols4 p {
          padding-top: 0;
          padding-bottom: 1em;
          display: inline-block;
        }

        .cols2 h1,
        .cols2 h2,
        .cols2 h3,
        .cols2 h4,
        .cols2 h5,
        .cols2 h6,
        .cols2 img,
        .cols3 h1,
        .cols3 h2,
        .cols3 h3,
        .cols3 h4,
        .cols3 h5,
        .cols3 h6,
        .cols3 img
        .cols4 h1,
        .cols4 h2,
        .cols4 h3,
        .cols4 h4,
        .cols4 h5,
        .cols4 h6,
        .cols4 img {
          -webkit-column-span: all;
                  column-span: all;
        }

}

/*DISPLAY OPTIONS
**************************************************************/

/*floats*/
.left {float: left;}
.right {float: right;}

/*display*/
.block {display: block;}
.inline {display: inline;}

/*position*/
.fixed {position: fixed;}
.absolute {position: absolute;}
.relative {position: relative;}
.static {position: static;}




/* ========================================================= */
/* = ===================== BASE STYLES =================== = */
/* ========================================================= */
/*Basic Styling for Headlines, Forms, links etc. */

 html {
  min-height: 100%;
  font-size: 100%;
  background-image: url(images/content/tinte-bg.jpg);
  background-color: #f8f7f5;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
     -moz-text-size-adjust: none;
      -ms-text-size-adjust: none;
          text-size-adjust: none;
}

body {
  position: relative;
  min-height: 100%;
  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-size: 14px;
  line-height: 1.4;

}

p {
  padding: 0.5em 0 0.5em 0;
  -epub-word-break: hyphenate;
    -ms-word-break: hyphenate;
  word-break: normal;
   word-wrap: normal;
  -webkit-hyphens: auto;
    -epub-hyphens: auto;
     -moz-hyphens: auto;
      -ms-hyphens: auto;
          hyphens: auto;
}

h1, h2, h3, h4, h5, h6 {
  padding: 1em 0 .25em 0;
}

h1 {
  font-size: 20px;
  line-height: 1.2;
}

h2 {
  font-size: 20px;
  line-height: 1.2;
}

h3 {
  font-size: 18px;
  line-height: 1.3;
}

h4 {
  font-size: 18px;
  line-height: 1.3;
}

h5 {
  font-size: 18px;
  line-height: 1.3;
}

h6 {
  font-size: 18px;
  line-height: 1.3;
}

@media screen and (min-width: 600px) {

h1 {
  font-size: 38px;
  line-height: 1;
}

.page-datenschutz h1 {
  font-size: 19px;
}

h2 {
  font-size: 34px;
  line-height: 1;
}

.page-datenschutz h2 {
  font-size: 17px;
}

h3 {
  font-size: 30px;
  line-height: 1.2;
}

h4 {
  font-size: 26px;
  line-height: 1.2;
}

h5 {
  font-size: 22px;
  line-height: 1.5;
}

h6 {
  font-size: 18px;
  line-height: 1.5;
}

}



a {
    border: 0;
    outline: 0;
    color: inherit;
}

button {
  cursor: pointer;
}
  button:hover {
    background-color: #aaa;
  }
  button:focus {
    background-color: #aaa;
  }
  button:active {
      background-color: #000;
      color: #fff;
  }

em {
  font-style: italic;
}

strong {
  font-weight: 700;
}

code {
  font-family: courier, monospace;
  background-color: #eee;
  padding: 0 5px;
}

address {
  font-style: italic;
}

pre {
  font-family: courier, monospace;
  white-space: pre-wrap;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
   list-style-position:inside;
}

nav li {
  list-style: none;
}

img {
  max-width: 100%;
  width: auto\9; /* ie8 */
  height: auto !important;
  -ms-interpolation-mode: bicubic;
  border: 0;
  -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);
}

video {
  max-width: 100%;
  height: auto !important;
}

blockquote {
  font-size: 20px;
}

  blockquote > p {
    font-size: 20px;
    line-height: 1.3;
  }

  .bq-ref {
    font-size: .8em;
    display: block;
    font-weight: 900;
    padding: 10px 20px 0 0;
    text-align: right;
  }

input,
select,
textarea,
button{
  font-family:inherit;
  font-size: inherit;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  cursor: pointer;
  width: 100%;
  border: 1px solid #000;
  background-color: #eee;
  padding: 5px 10px;
  margin-bottom: 20px;
}



    input:focus::-webkit-input-placeholder,
    input:focus:-moz-placeholder,
    input:focus::-moz-placeholder,
    input:focus:-ms-input-placeholder,
    textarea:focus::-webkit-input-placeholder,
    textarea:focus:-moz-placeholder,
    textarea:focus::-moz-placeholder,
    textarea:focus:-ms-input-placeholder {
      color:transparent;
    }


/*  ::-webkit-selection { background-color: #aaa; color: #fff; }
     ::-moz-selection { background-color: #aaa; color: #fff; }
          ::selection { background-color: #aaa; color: #fff; }

         h1::-webkit-selection { color: #222; }
            h1::-moz-selection { color: #222; }
                 h1::selection { color: #222; }

         h2::-webkit-selection { color: #222; }
            h2::-moz-selection { color: #222; }
                 h2::selection { color: #222; }

         h3::-webkit-selection { color: #222; }
            h3::-moz-selection { color: #222; }
                 h3::selection { color: #222; }

         h4::-webkit-selection { color: #222; }
            h4::-moz-selection { color: #222; }
                 h4::selection { color: #222; }

         h5::-webkit-selection { color: #222; }
            h5::-moz-selection { color: #222; }
                 h5::selection { color: #222; }

         h6::-webkit-selection { color: #222; }
            h6::-moz-selection { color: #222; }
                 h6::selection { color: #222; }

          a::-webkit-selection { color: #222; }
             a::-moz-selection { color: #222; }
                  a::selection { color: #222; }

 blockquote::-webkit-selection { color: #222; }
    blockquote::-moz-selection { color: #222; }
         blockquote::selection { color: #222; } */

/*FONT AND COLOR CLASSES
**************************************************************/

.sans { font-family: Verdana, sans-serif; }
.serif { font-family: Georgia, Times, serif; }
.mono { font-family: courier, monospace; }
.fancy {
  font-family: "Didot", "Times New Roman", Georgia, Times, serif;
  -moz-font-feature-settings: "liga=1";
   -ms-font-feature-settings: "liga" 1;
  -moz-font-feature-settings: "frac=1";
   -ms-font-feature-settings: "frac" 1;
}

.base-color {        color: #ccc;}
.base-bg {background-color: #ccc;}

.body-color {        color: #444;}
.body-bg {background-color: #444;}

.accent-color {        color: #f00;}
.accent-bg {background-color: #f00;}

.soft-color {        color: #fbb;}
.soft-bg {background-color: #fbb;}





/* ========================================================= */
/* = =================PAGE STRUCTURE====================== = */
/* ========================================================= */
/* Basic Page Structure (Container and Frame Sizes, standard-Padding etc...)

  section:  always full width, contains frames that belong together, can have full-width-bg;

  .frame:   defines content width, contains page modules, often centered (margin: 0 auto);

  .module:  contains elements that belong together, can have padding;
            modules can be: widgets, forms, author-info, search-field, intro, slideshow, etc.;

  .page-pad: adds left & right padding to element;
              reccomenden for full-width modules, outer padding, so the content doesn’t stick to the window;
  .half,
  .third,
  .quarter: special modules, that are mainly used for grids. if used inside modules, containing module should have no padding;

  _____________
  How it works:

  section___________________________________________________________
  |          .frame______________________________________           |
  |          |      .module________________________      |          |
  |          |      |                              |     |          |
  |          |      |  elments, forms...           |     |          |
  |          |      |  modules have padding,       |     |          |
  |          |      |  sections and frames not     |     |          |
  |          |      |______________________________|     |          |
  |          |___________________________________________|          |
  |          .frame.clear________________________________           |
  |          |      .half__________.half___________      |          |
  |          |      |              |               |     |          |
  |          |      |              |               |     |          |
  |          |      |              |               |     |          |
  |          |      |              |               |     |          |
  |          |      |______________|_______________|     |          |
  |          |___________________________________________|          |
  |_________________________________________________________________|
  section___________________________________________________________
  |          .frame.clear________________________________           |
  |          |      .quarter_.third________________      |          |
  |          |      |        |                     |     |          |
  |          |      |        |                     |     |          |
  |          |      |        |                     |     |          |
  |          |      |        |                     |     |          |
  |          |      |________|_____________________|     |          |
  |          |___________________________________________|          |
  |_________________________________________________________________|
*/



/*PAGE-SEGMENTS
**************************************************************/

.container { /*contains the whole Page */
  position: relative;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

  .content {
    position: relative;
  }

    .frame,
    [class*=frame-] { /*frame, contains Content-Modules, no padding!*/
      position: relative;
      width: 100%;
      max-width: 1200px;
      margin: 0 auto;
    }

      .module,
      [class*=module-] { /*module, lives inside .frame, contains  */
        padding: 0 10px;
      }


        .page-pad,
        .page-padding { /* adds l/r padding to element */
          padding: 10px;
        }



/*GRID
**************************************************************/

.half,
.third, .third.double,
.quarter, .quarter.triple  {
  width: 100%;
  position: relative;
  float: none;
}

@media screen and (min-width: 600px) {

  .half {
    width: 50.000000%;
    float: left;}

  .third {
    width: 33.333333%;
    float: left;}

    .third.double {
      width: 66.666666%;
      float: left;}

  .quarter {
    width: 25.000000%;
    float: left;}

    .quarter.triple {
      width: 75.000000%;
      float: left;}

}


/* ========================================================= */
/* = ==================== MODULES ======================== = */
/* ========================================================= */
/*
specific Layout-Modules and Components. keep it light, specifics and variations will be defined in content.css
(Class-Name System: .moduleName-componentName-state)
*/



/* ========== */
/* = HEADER = */
/* ========== */
/*Header stuff (Navigation, Logo etc.)*/

header {
  position: relative;
  z-index: 10;
  padding-top: 50px;
  padding-bottom: 40px;
}

@media screen and (min-width: 768px) {
  header {
    padding-top: 75px;
    padding-bottom: 70px;
  }
}

.logo {
  display: block;
  position: relative;
  margin: 0 auto;
  text-decoration: none;
  width: 100%;
  max-width: 400px;
  padding-left: 10px;
  padding-right: 10px;
  height: 138px;
  background-image: url(images/content/logo_freig.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
}

@media screen and (min-width: 768px) {
  .logo {
    max-width: 550px;
    height: 225px;
  }
}

@media screen and (min-width: 1400px) {
  .logo {
    max-width: 640px;
    height: 225px;
  }
}

/*Main-Nav*/
.js .main-nav {
  height: auto;
  max-height: 0px;
  overflow: hidden;
  -webkit-transition: all .25s ease-in-out;
     -moz-transition: all .25s ease-in-out;
      -ms-transition: all .25s ease-in-out;
       -o-transition: all .25s ease-in-out;
          transition: all .25s ease-in-out;
}

.js .nav_is_open .main-nav {
  max-height: 1000px;
}

  .main-nav ul {
    padding: 0;
  }

    .main-nav li {
      list-style: none;
    }

      .main-nav a {
        display: block;
        padding: 10px;
        color: #000;
        text-decoration: none;
      }

/*Toggle Nav Button (mobile)*/
.menu-button {
  display: none;
}

  .js .menu-button,
  .js .menu-button:hover {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    border: none;
    background: transparent url('images/ui/open-icon-black.svg') center center no-repeat;
    background-size: 24px;
  }

    .nav_is_open .menu-button,
    .nav_is_open .menu-button:hover {
      background: url('images/ui/close-icon-black.svg') center center no-repeat;
      background-size: 20px;
    }

@media screen and (min-width: 600px) {

  .js .menu-button {
    display: none;
  }

  .js .main-nav {
    height: auto;
    max-height: none;
  }


}




/* =========== */
/* = CONTENT = */
/* =========== */
/*Content Styling for Page Templates, e.g. variations from the module section*/

.sortiment-img {
    display: block;
    width: 990px;
    margin: 0 auto 20px;
    border: 2px solid #000;
}

@media screen and (min-width: 600px) {
  .sortiment-img {
    max-width: 70%;
  }
}



.preisliste-dl {
    font-size: 25px;
    font-weight: 900;
    text-transform: uppercase;
}

.narrow {
  max-width: 826px;
}


/* ========== */
/* = FOOTER = */
/* ========== */

footer {
  position: relative;
  padding-bottom: 50px;
}

footer strong {
  font-weight: 700;
}

.hide-mobile {
  display: none;
}

@media screen and (min-width: 1150px) {
  .hide-dt {
    display: none;
  }
  .hide-mobile {
    display: inline;
  }
}


/* ================== */
/* = RETINA & PRINT = */
/* ================== */
/*retina and print styles here*/

@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {



} /*END MEDIA RETINA*/

@media print {

  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }  /* Don't show links for images, or javascript/internal links */
  pre, blockquote { page-break-inside: avoid; }
  thead { display: table-header-group; } /* h5bp.com/t */
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  html, body, p { font-size: 10pt; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }

} /*END MEDIA PRINT*/