/* globale Variablen ******************************************************* */
:root
  {
   
   --error:             #880000;
   --warning:           #ff9900;
   --info:              #0065c4;
   --success:           #00aa00;

   --black:             #000;
   --darkgrey:          #4e514e;
   --grey:              #bbb;
   --lightgrey:         #e4e4e4;
   --verylightgrey:     #f3f3f3;

   --text:              #381e0d;
   --visited:           #381e0d;/* #00387b; */
   --ciColor:           #4a2c1c;
   --ciBack:            #f2efe9;
   --ciColorText:       #ffffffaa;
   --ciRed:             #9b1f35;
   --ciBlue:            #a4b9ca;


   --inherited:         #ff6600;
   --inheritedBack:     #fff8f3;
   --glory:             #ffC800;
   --lineprinter:       #f8f5f0;
   --printcol:          #663300;
   --greyOutline:       #dddddd;
   --outline:           #444;
   --outlineWhite:      #fff;
   --white:             #fff;
  }



/* Schriften *************************************************************** */
@font-face
  {
   font-family:                 'Roboto Condensed';
   font-style:                  italic;
   font-weight:                 700;
   font-display:                swap;
   src:                         url('/webfonts/RobotoCondensed700italic.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face
  {
   font-family:                 'Roboto Condensed';
   font-style:                  normal;
   font-weight:                 400;
   font-display:                swap;
   src:                         url('/webfonts/RobotoCondensed400normal.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face
  {
   font-family:                 'Roboto Condensed';
   font-style:                  normal;
   font-weight:                 700;
   font-display:                swap;
   src:                         url('/webfonts/RobotoCondensed700normal.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

@font-face
  {
   font-family:                 'Jost';
   font-style:                  italic;
   font-weight:                 400;
   font-display:                swap;
   src:                         url('/webfonts/Jost400italic.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
 
  
@font-face
  {
   font-family:                 'Jost';
   font-style:                  normal;
   font-weight:                 400;
   font-display:                swap;
   src:                         url('/webfonts/Jost400normal.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }


@font-face
  {
   font-family:                 'Jost';
   font-style:                  normal;
   font-weight:                 700;
   font-display:                swap;
   src:                         url('/webfonts/Jost700normal.woff2') format('woff2');
   unicode-range:               U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }


/* Tags ******************************************************************** */
html, body
  {
   font-family:                 'Jost', sans-serif;
   color:                       var(--text);
   background:                  var(--ciBack);
   font-size:                   16px;
   width:                       100%;
   overflow-x:                  hidden;
  }

strong
  {
   font-weight:                 700;
  }

@media (max-width: 640px)
  {
   html, body
     {
      font-size:                19px;
     }
  }

h1, h2, h3, h4, h5, h6
  {
   font-family:                 'Roboto Condensed', sans-serif;
   font-weight:                 700;
   display:                     block;
   text-align:                  center;
   break-inside:                avoid-column;
  }

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

h1 {font-size:                               max(5.8vw, 43px);}
h1.subheadline {font-weight: 400; font-size: max(3.1vw, 23px);}
 
h2 {font-size:                               max(4.4vw, 40px);}
h2.subheadline {font-weight: 400; font-size: max(2.4vw, 25px);}
 
h3 {font-size:                               max(3.4vw, 33px);}
h3.subheadline {font-weight: 400; font-size: max(2.0vw, 23px);}
 
h4 {font-size:                               max(2.6vw, 28px);}
h4.subheadline {font-weight: 400; font-size: max(1.6vw, 20px);}
 
h5 {font-size:                               max(2.0vw, 23px);}
h5.subheadline {font-weight: 400; font-size: max(1.4vw, 18px);}
 
h6 {font-size:                               max(1.4vw, 20px);}
h6.subheadline {font-weight: 400; font-size: max(1.0vw, 16px);}

@media (min-width: 1400px)
  {
   body
     {
      border-left:              calc(50vw - 700px) solid var(--ciColor);
      border-right:             calc(50vw - 700px) solid var(--ciColor);
     }

   h1 {font-size:                               81px;}
   h1.subheadline {font-weight: 400; font-size: 43px;}

   h2 {font-size:                               62px;}
   h2.subheadline {font-weight: 400; font-size: 34px;}

   h3 {font-size:                               48px;}
   h3.subheadline {font-weight: 400; font-size: 28px;}

   h4 {font-size:                               36px;}
   h4.subheadline {font-weight: 400; font-size: 22px;}

   h5 {font-size:                               28px;}
   h5.subheadline {font-weight: 400; font-size: 20px;}

   h6 {font-size:                               20px;}
   h6.subheadline {font-weight: 400; font-size: 17px;}
  }

a
  {
   font-family:                 'Roboto Condensed', sans-serif;
   font-weight:                 700;
   display:                     inline-block;
   color:                       var(--text);
   transform:                   scale(1);
   transition:                  all 0.25s;
  }

a:hover
  {
   color:                       var(--text);
   transform:                   scale(1.05);
  }

a.noAni:hover
  {
   transform:                   scale(1);
  }

.redHeadLink
  {
   text-decoration:             none;
   color:                       var(--ciRed);
  }

p
  {
   hyphens:                     auto;
  }

hr
  {
   background-color:            var(--ciColor);
   opacity:                     1;
   margin:                      30px 0;
  }

/* Bottstrap global override *********************************************** */
.card
  {
   border:                      9px solid var(--ciBlue);
   border-radius:               0;
   padding:                     15px;
   background:                  none;
  }

.miniCard
  {
   padding:                     2px 5px;
  }

@media (min-width: 690px)
  {
   .miniCard
     {
      break-before:             column;
     }
  }

.miniCard h5
  {
   text-align:                  left;
  }

.modal-content
  {
   border-radius:               0;
   background-color:            var(--ciBack);
  }

.form-control
  {
   border-radius:               0;
  }

.form-control:focus
  {
   box-shadow:                  none;
   border-color:                #00000022;
  }

.input-group-text
  {
   border-radius:               0;
   background-color:            var(--ciBlue);
   color:                       var(--ciColor);
   border:                      1px solid var(--ciBlue);
  }

.accordion-item
  {
   border:                      none !important;
   background:                  none !important;
   margin-bottom:               10px;
  }

.accordion-item strong
  {
   text-decoration:             underline;
   cursor:                      pointer;
  }

.accordion-body
  {
   padding:                     10px 0 15px 0;
  }

/* Tools ******************************************************************* */
.positionCorrection::before
  {
   display:                    block;
   content:                    "";
   height:                     60px;
   margin-top:                 -60px;
   visibility:                 hidden;
  }

.mini
  {
   font-size:                   12px;
  }

.imgSubtitle
  {
   width:                       100%;
   text-align:                  center;
  }

.noScroll
  {
   overflow:                    hidden !important;
  }

.img100
  {
   width:                       100%;
   max-width:                   100%;
  }

@media (min-width: 1339px)
  {
   .newColumn
     {
      break-before:             column;
     }
  }

/* Navigation & Head ******************************************************* */
#logo
  {
   width:                       14.46vw;
   min-width:                   120px;
   height:                      14.46vw;
   min-height:                  120px !important;
   transform:                   scale(1) rotate(0);
   filter:                      drop-shadow(0 0 0 #00000000);
   transition:                  all 0.25s;
  }

#logo:hover
  {
   transform:                   scale(1) !important;
  }
  
#mgl
  {
   width:                       20vw;
   height:                      8.69vw;
   margin-top:                  2.8vw;
  }

@media (min-width: 1400px)
  {
   #logo
     {
      width:                    202px;
      height:                   202px;
     }

   #mgl
     {
      width:                    280px;
      height:                   122px;
      margin-top:               39px;
     }
  }

#topNavBar
  {
   background-color:            var(--ciBlue);
   margin:                      0 24px 0 24px;
  }

.navbar
  {
   padding:                     0 8px 0 8px !important;
  }

.navbar-collapse ul
  {
   width:                       100%;
   /* justify-content:             center; */
  }

.nav-link, .nav-link:focus
  {
   font-family:                 'Roboto Condensed', sans-serif;
   font-weight:                 400;
   font-size:                   25px;
   padding:                     0 15px 0 15px !important;
   display:                     inline-block;
   color:                       var(--text);
   white-space:                 nowrap;
   transform:                   scale(1);
   transition:                  all 0.25s;
  }

.nav-link:hover
  {
   color:                       var(--ciRed);
  }

.active, .sActive
  {
   color:                       var(--ciRed) !important;
  }

.dropdown-menu
  {
   border-radius:               0;
   border:                      none;
   background-color:            var(--ciBlue);
   margin-top:                  0 !important;
   padding:                     0;
  }

.dropdown-item
  {
   color:                       var(--text);
   background-color:            #ffffff88;
   border-bottom:               solid 1px #ffffff;
   font-size:                   21px;
  }

.dropdown-item:hover, .dropdown-item:active
  {
   color:                       var(--ciRed);
   background-color:            #ffffff88;
   filter:                      drop-shadow(0.3vw 0.6vw 1vw #00000044);
  }

.searchClose
  {
   background-color:            var(--ciRed);
   border:                      1px solid var(--ciRed);
   color:                       var(--white);
   cursor:                      pointer;
  }

  @media all and (min-width: 992px) {
    .navbar .dropdown-menu-end{ right:0; left: auto;  }
    .navbar .nav-item .dropdown-menu{  display:block; opacity: 0;  visibility: hidden; transition:.3s; margin-top:0;  }
    .navbar .nav-item:hover .nav-link{ color: #fff;  }
    .navbar .dropdown-menu.fade-down{ top:80%; transform: rotateX(-75deg); transform-origin: 0% 0%; }
    .navbar .dropdown-menu.fade-up{ top:180%;  }
    .navbar .nav-item:hover .dropdown-menu{ transition: .3s; opacity:1; visibility:visible; top:100%; transform: rotateX(0deg); }
  }	


/* Hamburger */
.navbar-toggler-icon
  {
   white-space:                 nowrap;
  }

.menuLabel
  {
   display:                     inline-block;
   position:                    relative;
   top:                         -7px;
   left:                        -45px;
  }

.ham
  {
   cursor:                      pointer;
   -webkit-tap-highlight-color: transparent;
   transition:                  transform 400ms;
   -moz-user-select:            none;
   -webkit-user-select:         none;
   -ms-user-select:             none;
   user-select:                 none;
   position:                    relative;
   top:                         -9px;
   left:                        -45px;
  }

.hamRotate.active
  {
   transform:                   rotate(45deg);
  }

.line
  {
   fill:                        none;
   transition:                  stroke-dasharray 400ms, stroke-dashoffset 400ms;
   stroke:                      var(--ciColor);
   stroke-width:                5.5;
   stroke-linecap:              square;
  }

.hamA .top
  {
   stroke-dasharray:            40 121;
  }

.hamA .bottom
  {
   stroke-dasharray:            40 121;
  }

.hamA.active .top
  {
   stroke-dashoffset:           -68px;
  }

.hamA.active .bottom
  {
   stroke-dashoffset:           -68px;
  }


/* Layout ****************************************************************** */
.title, .mamTitle
  {
   width:                       100%;
   height:                      auto;
  }

.article, .mamArticle
  {
   width:                       100%;
   height:                      auto;
  }

.teaser, .mamTeaser
  {
   width:                       100%;
   height:                      auto;
   margin-top:                  10px;
  }

.smallGap
  {
   margin-bottom:               6px;
  }

@supports (break-inside: avoid-column)
  {
   .articleTitleBlock
     {
      overflow: visible; /* for chrome */
     }
  }

.linklike
  {
   font-family:                 'Roboto Condensed', sans-serif;
   font-weight:                 700;
  }

.infoCol
  {
   border-left:                 2px solid var(--ciColor);
   padding:                     0 20px 0 20px;
  }

.dyncol
  {
   columns:                     300px 3;
   column-gap:                  25px;
  }

.dyncol4
  {
   columns:                     300px 4;
   column-gap:                  25px;
   }

.boldLinkRight
  {
   display:                     block;
   width:                       100%;
   text-align:                  right;
   padding-right:               5px;
  }

a.textLink
  {
   font-weight:                 400;
  }

a.blockLink
  {
   font-weight:                 400;
   text-decoration:             none;
   background:                  #00000000;
  }

a.blockLink:hover
  {
   background:                  #ffffff88;
   transform:                   scale(1.0125);
  }

.markVisited:visited
  {
   color:                       var(--visited);
  }

.vintage
  {
   filter:                      sepia(0.35) saturate(1.25);
  }

.red
  {
   color:                       var(--white);
   background-color:            var(--ciRed);
   font-weight:                 400;
   display:                     inline-block;
   padding:                     0 7px 0 7px;
   box-shadow:                  7px 7px 0 var(--ciBack),
                                8px 8px 0 #000,
                                8px 6px 0 #000,
                                6px 8px 0 #000;
   margin-bottom:               24px;
  }

.center
  {
   width:                       100%;
   text-align:                  center;
  }

.forceJost
  {
   font-family:                 'Jost', sans-serif;
  }

.teaserWithPlaybutton
  {
   position:                    relative;
  }

.playbutton
  {
   color:                       var(--ciRed);
   position:                    absolute;
   font-size:                   calc(12px + 1vw);
   bottom:  	                  0px;
   left:                        0px;
   margin:                      0 0 2vw 2vw;
  }

.gepruefteQualitaet
  {
   width:                       70%;
   height:                      auto;
  }

.zufriedeneKunden
  {
   position:                    absolute;
   bottom:  	                  0px;
   left:                        0px;
   margin:                      0 0 -1.8vw 1vw;
   width:                       12vw;
   height:                      auto;
   min-width:                   85px;
   max-width:                   168px;
  }

.kundenbewertungen
  {
   position:                    absolute;
   bottom:  	                  0px;
   left:                        0px;
   margin:                      0 0 1vw 2vw;
   width:                       8vw;
   padding:                     0;
   height:                      calc(auto - 5vw);
   min-width:                   56px;
   max-width:                   112px;
  }

.kundenbewertungenInfo
  {
   width:                       50%;
   height:                      auto;
  }

.bluebox
  {
   background-color:            var(--ciBlue);
   padding:                     20px 10px;
  }

.ciRed
  {
   color:                       var(--ciRed);
  }

.fatMarker::marker
  {
   font-weight:                 600;
  }

.big
  {
   font-size:                   max(2.0vw, 20px);
   font-family:                 'Roboto Condensed', sans-serif;
   font-weight:                 700;
  }

@media (min-width: 1400px)
  {
   .big
     {
      font-size:                28px;
     }
  }

ul.plus
  {
   list-style:                  none;
  }

ul.plus li::before
  {
   content:                     "+";
   margin-right:                8px;
   font-weight:                 700;
  }

/* Masonry für Aktuelles *************************************************** */
.masonryContainer
  {
   columns:                     4 250px;
   column-gap:                  2vw;
  }

.masonryItem
  {
   margin:                      0 1vw 1vw 0;
   display:                     inline-block;
   width:                       100%;
  }

/* Footer ****************************************************************** */
#realfooter
  {
   page-break-inside:           avoid;
   text-align:                  center;
   font-size:                   16px;
  }

.doubleLine
  {
   width:                       100%;
   height:                      6.75px;
   margin:                      20px 0 20px 0;
   padding:                     0 10px 0 10px;
  }


/* Fancy Stuff ************************************************************* */

.fancyStuff
  {
   opacity:                     1;
   transition:                  opacity 1s ease-in-out, transform 1s ease-in-out;
   transform:                   translate(0px, 50px);
  }


.becomeFancy
  {
   opacity:                     1;
   transform:                   translate(0px, 0px);
  }