/* globale Variablen ****************************************** */

:root
  {
   --text:              #333;
   --error:             #880000;
   --warning:           #ff9900;
   --info:              #0065c4;
   --success:           #00aa00;
   --black:             #000;
   --grey:              #888;
   --darkgrey:          #444;
   --lightgrey:         #ddd;
   --link:              #333;
   --linkhover:         #000;
   --background:        #fff;
   --ciRed:             #e2001a;
   --ciRedText:         #ab0014;
   --ciGreen:           #295135;
   --ciGreenDark:       #172e1e;
   --lineprinter:       #f8f5f0;
   --printcol:          #663300;
   --greyOutline:       #dddddd;
  }

@media (min-width: 0) {
  .card-deck .card {
    flex: 0.3 0.3 250px;
  }
}
@media (min-width: 576px) {
  .card-deck .card {
    flex: 0.3 0.3 250px;
  }
}
@media (min-width: 768px) {
  .card-deck .card {
    flex: 0.3 0.3 250px;
  }
}
@media (min-width: 992px) {
  .card-deck .card {
    flex: 0.3 0.3 250px;
  }
}
@media (min-width: 1200px) {
  .card-deck .card {
    flex: 0.3 0.3 250px;
  }
}

html, body
  {
   font-family:             'Open Sans', sans-serif;
   font-weight:             200;
   color:                   var(--text);
   background:              var(--background);
   font-size:               14px;
  }

.container-fluid
  {
   background:              var(--background);
  }

/* Slides ***************************************************** */
.slide
  {
   width: asdasd;
  }

.carousel-item
  {
   vertical-align:  center;
  }

/* Navigation ************************************************* */

#header
  {
   background:  var(--ciGreen);
  }

#titlelogo
  {
   background:  var(--ciGreen);
  }

#titlelogo img
  {
   width:       360px;
   max-width:   65%;
   margin:      15px 0 25px 25px;
  }

.navbar
  {
   font-weight: 400;
   background:  var(--ciGreen);
   padding:     0 0 0 15px;
   font-size:   13px;
   text-transform: uppercase;
  }

#adminNavBar
  {
   background:     var(--lightgrey);
  }

#adminNavBar li:hover
  {
   background:     var(--grey);
  }

.navbar li:hover
  {
   background:    var(--ciGreenDark);
  }

.active
  {
   background:    var(--ciGreenDark);
  }

#adminNavBar .active
  {
   background:     #eee;
  }

.navbar-toggler
  {
   position:      relative;
   top:           -70px;
   left:          -15px;
   margin-bottom: -60px;
   margin-top:    8px;
  }

.navbar-toggler, .navbar-toggler:focus, .navbar-toggler, .navbar-toggler:active.focus, .navbar-toggler:active:focus, .navbar-toggler:focus
  {
   outline-color: var(--link);
  }

.navbar-nav:
  {
   margin:              0;
  }

.noBorders
  {
   border:              none;
   border-radius:       0;
  }

#cookieTip
  {
   position:            fixed;
   background:          var(--lightgrey);
   width:               75%;
   height:              auto;
   bottom:              20%;
   opacity:             0.95;
   margin:              0 12.5% 0 12.5%;
   padding:             10px;
   border-radius:       8px;
   border-width:        1px;
   -moz-box-shadow:     5px 5px 15px rgba(0, 0, 0, 0.5);
   -webkit-box-shadow:  5px 5px 15px rgba(0, 0, 0, 0.5);
   box-shadow:          5px 5px 15px rgba(0, 0, 0, 0.5);
   z-index:             20000;
  }

#version
  {
   position:            fixed;
   top:                 1px;
   left:                3px;
   font-size:           8px;
   z-index:             10000;
   color:               var(--ciGreenDark);
   display:             none;
  }

.btn-light
  {
   background:          #eee;
  }

.header
  {
   width:               100%;
   margin:              auto;
  }

#searchResultsWindow
  {
   position:            absolute;
   top:                 150px;
   margin:              0 5% 0 5%;
   width:               90%;
   height:              80%;
   border:              1px solid var(--lightgrey);
   box-shadow:          5px 5px 15px rgba(0, 0, 0, 0.5);
   background:          var(--white);
   padding:             15px;
   overflow:            auto;
  }

/* RESPONSIVE KRAM ******************************************** */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px)
  {
   .lgDown  {display:    none;}
   .mdDown  {display:    none;}    .mdUp  {display:    initial;}
   .smDown  {display:    none;}    .smUp  {display:    initial;}
   .xsDown  {display:    none;}
   .dynText {}
  }

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767px)
  {
   .lgDown  {display:    none;}
   .mdDown  {display:    none;}    .mdUp  {display:    initial;} 
   .smDown  {display:    none;}    .smUp  {display:    initial;}
   .xsDown  {display:    initial;}
   .dynText {}
  }
  
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px)
  {
   .lgDown  {display:    none;}
   .mdDown  {display:    none;}    .mdUp  {display:    initial;} 
   .smDown  {display:    initial;} .smUp  {display:    none;}
   .xsDown  {display:    initial;}
   .dynText {}
  }
  
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px)
  {
   .lgDown  {display:    none;}
   .mdDown  {display:    initial;} .mdUp  {display:    none;} 
   .smDown  {display:    initial;} .smUp  {display:    none;}
   .xsDown  {display:    initial;}
   .dynText {column-count: 3;}
  }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)
  {
   .lgDown  {display:    initial;}
   .mdDown  {display:    initial;} .mdUp  {display:    none;} 
   .smDown  {display:    initial;} .smUp  {display:    none;}
   .xsDown  {display:    initial;}
   .dynText {column-count: 3;}
  }

/* ************************************************************ */

/* Styling allgemein ****************************************** */
h1
  {
   font-size:             40px;
   font-weight:           300;
   text-align:            center;
   text-transform:        uppercase;
  }

h1:after
  {
   display: block;
   content: "";
   height: 1px;
   width: 50px;
   background-color: #ccc;
   margin: 20px auto 30px;
  }

h2
  {
   font-size:             30px;
   font-weight:           300;
   text-align:            center;
   text-transform:        uppercase;
  }

h2:after
  {
   display: block;
   content: "";
   height: 1px;
   width: 40px;
   background-color: #ccc;
   margin: 20px auto 30px;
  }

h3
  {
   font-size:             24px;
   font-weight:           300;
   text-transform:        uppercase;
  }

h4
  {
   font-size:             18px;
   font-weight:           300;
   text-transform:        uppercase;
  }

h5
  {
   font-size:             16px;
   font-weight:           300;
  }

h6
  {
   font-size:             14px;
   font-weight:           300;
  }

.mini
  {
   font-size:             10px;
  }

/* Filter ***************************************************** */

.Hfilter
  {
   width:                 100%;
   background:            var(--lightgrey);
   padding:               5px;
   border-bottom:         1px solid var(--grey);
  }

.Hmini
  {
   font-size:             12px;
   font-weight:           400;
   line-height:           12px;
   margin-top:            -7px;
   border-bottom:         1px solid #ccc;
  }

.filterButton
  {
   width:                 100%;
   background:            var(--grey);
   color:                 var(--white);
   padding:               5px;
   border-bottom:         1px solid var(--grey);
   cursor:                pointer;
  }

.filterBlock
  {
   background:            #f8f8f8;
   margin:                -7px 0 10px 0;
   padding:               5px;
  }

.filterBlock a, .filterDelete
  {
   font-weight:           400;
   text-decoration:       none;
  }

.filterBlock a:hover, .filterDelete:hover
  {
   text-decoration:       underline;
  }

.disabled
  {
   color:                 var(--grey);
  }

/* Artikel�bersicht ******************************************* */

.br0
  {
   border-radius:         0;
  }

.articleTitleH5
  {
   font-weight:           400;
   font-size:             12px;
   text-align:            center;
  }
  
.articleTitleH6
  {
   font-weight:           300;
   font-size:             10px;
   text-align:            center;
   width:                 100%;
  }

.brandLogoMini
  {
   height:                14px;
   margin:                5px;
  }

.artCard
  {
   cursor:               pointer;
   animation-name:       shrink;
   animation-duration:   0.25s;
   animation-fill-mode:  forwards;
  }

@keyframes grow
  {
   from
     {
      transform:         scale(1, 1);
      
     }
   to
     {
       transform:        scale(1.05, 1.05);
       filter:           drop-shadow(4px 4px 10px #ddd);
      }
  }
  
@keyframes shrink
  {
   from
     {
      transform:         scale(1.05, 1.05);
      filter:            drop-shadow(4px 4px 10px #ddd);
     }
   to
     {
       transform:        scale(1, 1);
      }
  }

.artCard:hover
  {
   animation-name:       grow;
   animation-duration:   0.25s;
   animation-fill-mode:  forwards;
  }


/* Artikelansicht ********************************************* */

#bigPic
  {
   border:              1px solid var(--lightgrey);
   filter:              drop-shadow(4px 4px 10px #ddd);
   margin:              -10px 5px 10px 5px;
  }

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

.artThumb
  {
   display:             inline-block;
   margin:              5px;
   width:               128px;
   height:              85px;
   border:              1px solid var(--lightgrey);
   cursor:              pointer;
   
   animation-name:       shrink;
   animation-duration:   0.25s;
   animation-fill-mode:  forwards;
  }

.artThumb:hover
  {
   animation-name:       grow;
   animation-duration:   0.25s;
   animation-fill-mode:  forwards;
  }

.collapseLink
  {
   
  }

/* Links & Buttons ******************************************** */

a
  {
   color:                 var(--link);
   text-decoration:       underline;
  }

a:hover
  {
   color:                 var(--linkhover);
  }

/* Brand Logos ************************************************* */

.brandLogo
  {
   height:                24px;
   margin:                10px 10px 0px 10px;
   filter:                grayscale(1);
   cursor:                pointer;
  }

.brandLogo:hover
  {
   filter:                grayscale(0);
   filter:                drop-shadow(0 0 10px #ffff88);
  }

/* Eyecatcher ************************************************** */

#eyecatcher
  {
   position:              fixed;
   background:            var(--white);
   bottom:                -480px;
   left:                  50px;
   width:                 320px;
   height:                480px;
   color:                 var(--black);
   font-weight:           400;
   opacity:               0;
   border:                0.5px solid var(--grey);
   cursor:                pointer;
   box-shadow:            10px 10px 30px rgba(0, 0, 0, 0.5);
  }

#eyecatcher .eyecatcherClose
  {
   position:              absolute;
   display:               block;
   top:                   -22px;
   right:                 0px;
   color:                 var(--ciGreenDark);
   text-decoration:       underline;
   display:               block;
   background:            var(--ciGreenDark);
   border:                solid 4px var(--ciGreenDark);
   border-radius:         5px 5px 0 0;
   color:                 var(--white);
   font-size:             10px;
  }

#eyecatcher h3
  {
   display:               block;
   color:                 var(--white);
   background:            var(--ciGreenDark);
   padding:               14px;
   margin:                0;
  }

#eyecatcher .eyecatcherBody
  {
   display:               block;
   padding:               14px;
  }

/* Footer ****************************************************** */

#realfooter
  {
   background:        var(--ciGreen);
   color:             var(--white);
   page-break-inside: avoid;
  }

#realfooter a
  {
   color:             var(--lightgrey);
  }

#realfooter a:hover
  {
   color:             var(--white);
  }

/* Impressum *************************************************** */

.imprint
  {
   max-width:         100%;
   word-wrap:         break-word;
  }

/* Adminkram *************************************************** */

.adminIcon
  {
   width:             64px;
   height:            64px;
   border:            0.5px solid var(--lightgrey);
   text-align:        center;
   display:           table-cell;
   vertical-align:    middle;
   background:        var(--white);
  }

.adminIcon img
  {
   max-width:         64px;
   max-height:        64px;
   margin:            auto;
  }

.logoButton
  {
   height:            12px;
  }

.micro
  {
   font-size:         10px;
  }

.bigButton
  {
   font-size:         24px;
  }

.code
  {
   border:              1px solid var(--greyOutline);
   border-radius:       5px;
   background:          repeating-linear-gradient(0deg, var(--lineprinter) 0px, var(--lineprinter) 12px, var(--white) 12px, var(--white) 24px, var(--lineprinter) 24px);
   font-family:         'Courier New';
   font-size:           10px;
   color:               var(--printcol);
   white-space:         pre-wrap;
   line-height:         12px;
   padding:             12px;
   overflow:            hidden;
   max-width:           initial;
   -webkit-box-shadow:  inset 2px 2px 5px 0px rgba(0,0,0,0.1);
   -moz-box-shadow:     inset 2px 2px 5px 0px rgba(0,0,0,0.1);
   box-shadow:          inset 2px 2px 5px 0px rgba(0,0,0,0.1);
   margin:              0;
  }

.divCheckbox
  {
   padding-top:         3px;
  }

  /* Shariff ***************************************************************** */
  
.shariff span
  {
   outline: 8px solid var(--ciGreen);
  }