/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

.foo {

  color: #f6f6f6;
  color: #003367;
  color: #0063B1;
}

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Roboto'), local('Roboto-Regular'),
  url('../fonts/roboto-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-v20-latin-regular.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-v20-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-v20-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Roboto Medium'), local('Roboto-Medium'),
  url('../fonts/roboto-v20-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-v20-latin-500.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-v20-latin-500.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-v20-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-v20-latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v20-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Roboto Bold'), local('Roboto-Bold'),
  url('../fonts/roboto-v20-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('../fonts/roboto-v20-latin-700.woff2') format('woff2'), /* Super Modern Browsers */ url('../fonts/roboto-v20-latin-700.woff') format('woff'), /* Modern Browsers */ url('../fonts/roboto-v20-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */ url('../fonts/roboto-v20-latin-700.svg#Roboto') format('svg'); /* Legacy iOS */
}

body {
  background: #cbd8e0;
  font-family: Roboto, sans-serif;
  min-height: 100vh;
}

.page {
  background: #fff;
  margin: 0 -15px;
}

.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  -ms-grid-rows: minmax(-webkit-min-content, -webkit-max-content) 0 minmax(-webkit-min-content, -webkit-max-content) 0 minmax(-webkit-min-content, -webkit-max-content) 0 minmax(-webkit-min-content, -webkit-max-content);
  -ms-grid-rows: minmax(min-content, max-content) 0 minmax(min-content, max-content) 0 minmax(min-content, max-content) 0 minmax(min-content, max-content);
  grid-template-rows: minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content);
  grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content);
  grid-column-gap: 0;
  grid-row-gap: 0;
  grid-template-areas: "logo" "menu" "teaser" "content" "kontakt" "footer" "sidebar"
}

.logo {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  background: #fff;
  grid-area: logo;
  padding: 45px;
  text-align: center;
  z-index: 1;
}

.logo > img {
  max-width: 250px;
  width: 100%;
}

.menu {
  -ms-grid-row: 3;
  -ms-grid-column: 1;
  background: #0063B1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  grid-area: menu;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  z-index: 1;
}

.navbar {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

.navbar-dark .navbar-toggler {
  border: 0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
}

.navbar-inner {
  background: rgba(255, 255, 255, .125);
  margin: .5rem 0 -.5rem;
}

.nav > li {
  display: block;
  padding: 5px;
  text-align: center;
  width: 100%;
}

.nav > li > a {
  color: #fff;
  font-size: large;
  font-weight: bold;
  padding: 15px;
  text-transform: uppercase;
}

.nav > li.active > a {
  text-decoration: underline;
}

.kontakt {
  -ms-grid-row: 9;
  -ms-grid-column: 1;
  background: #0063B1;
  grid-area: kontakt;
  padding: 45px;
  z-index: 1;
}

.kontakt > p {
  color: #fff;
}

.kontakt a {
  color: #fff;
  font-weight: bold;
}

.teaser {
  -ms-grid-row: 5;
  -ms-grid-column: 1;
  background: url('../img/home-header.jpg') 50% 50%;
  background-size: cover;
  grid-area: teaser;
  min-height: 25vh;
}

.teaser-home {
  background: url('../img/home-header.jpg') 50% 50%;
}

.teaser-lieferanten {
  background: url('../img/lieferanten-header.jpg') 50% 50%;
}

.teaser-sortiment {
  background: url('../img/sortiment-header.jpg') 50% 50%;
}

.teaser-impressum {
  background: url('../img/impressum-header.jpg') 50% 50%;
}

.teaser-datenschutz {
  background: url('../img/datenschutz-header.jpg') 50% 50%;
}


.sidebar {
  -ms-grid-row: 13;
  -ms-grid-column: 1;
  display: none;
  grid-area: sidebar;
}

.sidebar-top {
  background: url('../img/sidebar-top-bg.jpg') 50%;
  background-size: cover;
  border-bottom: 5px solid #fff;
  border-top: 5px solid #fff;
}

.sidebar-bottom {
  background: url('../img/sidebar-bottom-bg.jpg') 50%;
  background-size: cover;
  border-bottom: 5px solid #fff;
}

.content {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  grid-area: content;
  padding: 45px;
}

.content h1 {
  color: #0063B1;
  font-size: 3rem;
  line-height: 1em;
  margin-bottom: .5em;
}

.content h1 > small {
  color: #00223B;
  font-size: 1rem;
}

.content h2 {
  color: #003367;
  font-size: 1.5rem;
}

.content h1 > .text-uppercase {
  font-weight: bold;
}

.content-full {
  -ms-grid-row: 7;
  -ms-grid-column: 1;
  grid-area: content;
  padding: 45px;
}

.footer {
  -ms-grid-row: 11;
  -ms-grid-column: 1;
  background: #00162d;
  color: #fff;
  padding: 30px;
  grid-area: footer;
  text-align: center;
}

.footer-col-left {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.footer-col-left--p {
  color: #9aa0a7;
  font-size: smaller;
  line-height: 2em;
  margin-bottom: 0;
}

.footer-col-left--a {
  color: #fff;
}

.footer-col-left--a:hover {
  color: #9aa0a7;
}

.footer-col-right {
  text-align: center;
}

.footer-col-right--img {
  opacity: .3;
  width: 150px;
}

/* Homepage */
.home-more-link {
  color: #003367;
  display: block;
  margin: 15px 0;
}

/* Lieferanten */
.lieferanten-col {
  margin-bottom: 30px;
}

.lieferanten-col--img {
  width: 100%
}

.lieferanten-col--name {
  color: #003367;
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 0;
  text-transform: uppercase;
}

.lieferanten-col--link {
  color: #0063B1;
  display: block;
  padding: 5px 0;
}

.lieferanten-col--link:hover  {
  color: #003367;
  text-decoration: none;
}

/* Sortiment */
.sidebar-sortiment {
  display: block !important;
}

.sortiment-img {
  border-top: 5px solid #fff;
  width: 100%;
}

.sortiment-h2 {
  margin-bottom: 15px;
}

@media (min-width: 768px) {

  .navbar-expand-md .navbar-collapse {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }

  .navbar-inner {
    background: transparent;
    margin: 0;
  }

  .nav > li {
    display: inline;
    padding: 0;
    text-align: center;
    width: auto;
  }
}

@media (min-width: 992px) {
  body {
    padding: 15px;
  }

  .page {
    background: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, .125);
  }

  .grid {
    -ms-grid-columns: 33.333% 1fr;
    grid-template-columns: 33.333% 1fr;
    -ms-grid-rows: minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content);
    -ms-grid-rows: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content);
    grid-template-rows: minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content) minmax(-webkit-min-content, -webkit-max-content);
    grid-template-rows: minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content) minmax(min-content, max-content);
    grid-template-areas: "logo menu menu" "kontakt teaser teaser" "sidebar content content" "footer footer footer"
  }

  .menu {
    background: rgba(0, 0, 0, .25);
  }

  .navbar-expand-md .navbar-collapse {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    padding-right: 15px;
  }

  .nav > li > a {
    font-size: medium;
  }

  .teaser {
    -ms-grid-column: 1;
    -ms-grid-column-span: 3;
    grid-column: 1 / 4;
    -ms-grid-row: 1;
    -ms-grid-row-span: 2;
    grid-row: 1 / 3;
    z-index: 0;
  }

  .sidebar {
    display: -ms-grid;
    display: grid;
  }

  .content-full {
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-column: 1 / 3;
    -ms-grid-row: 3;
    -ms-grid-row-span: 1;
    grid-row: 3 / 4;
    padding: 45px;
  }

  .footer-col-right {
    text-align: right;
  }

  .logo {

    -ms-grid-row: 1;

    -ms-grid-column: 1
  }

  .menu {

    -ms-grid-row: 1;

    -ms-grid-column: 2;

    -ms-grid-column-span: 2
  }

  .kontakt {

    -ms-grid-row: 2;

    -ms-grid-column: 1
  }

  .teaser {

    -ms-grid-row: 1;

    -ms-grid-column: 2;

    -ms-grid-column-span: 2
  }

  .sidebar {

    -ms-grid-row: 3;

    -ms-grid-column: 1
  }

  .content {

    -ms-grid-row: 3;

    -ms-grid-column: 2;

    -ms-grid-column-span: 2
  }

  .content-full {

    -ms-grid-row: 3;

    -ms-grid-column: 2;

    -ms-grid-column-span: 2
  }

  .footer {

    -ms-grid-row: 4;

    -ms-grid-column: 1;

    -ms-grid-column-span: 3
  }
}