/*
Dunkelblau: #195790;
Orange: #fd7a07;
Dunkelgrau: #2d2d2d;
*/

@font-face {
/*	 Roboto-Light */
	font-family: 'Roboto';
	src: url('fonts/Roboto-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
}

@font-face {
/*	 Roboto-Regular */
	font-family: 'Roboto';
	src: url('fonts/Roboto-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
/*	 Roboto-Bold */
	font-family: 'Roboto';
	src: url('fonts/Roboto-Bold.ttf') format('truetype');
	font-weight: 800;
	font-style: normal;
}
	
@font-face {
/*	 Roboto-Black */
	font-family: 'Roboto';
	src: url('fonts/Roboto-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;

}

* {
 box-sizing:border-box;
}
body {
 font-family: Roboto;
 font-size: 15px;
 line-height: 1.6em;
}

@media (max-width: 600px) {
h1, h2, h3, h4, p, .text {
	hyphens:auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
}
}

a:focus {
	box-shadow:none;
}

section {
 margin:0 0 3em 0;
 overflow-x:hidden;
}
/* sections mit Hintergrundfarbe mit padding? */
section.full_width {
	width:100%;
}
section.full_width .container {
	max-width:none;
	padding:0;
	margin:0;
}
.with_padding {
	padding:2em 0;
}
.no_margin {
	margin:0;
}

.container {
	max-width:960px;
	margin:0 auto;
}
.images {
	position:relative;
}
.images figure {
	margin:0;
}
.container iframe, section iframe {
	display:block;
}

/* ----------------------- 
    Table - Grid
-------------------------*/

/*
// Grid classes
*/

@media (min-width: 600px) {
  /* Add `.grid` for the table */
  .grid {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  /* Add `.col` for the table cells, or columns*/
  .col {
    display: table-cell;
  }

  /* Padded columns */
  .grid-padded {
    margin-left:  -1rem;
    margin-right: -1rem;
  }
  .grid-padded .grid {
    border-spacing: 1rem 0;
  }
}


@media (min-width: 600px) {
  .tabgrid {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .tabcol {
    display: table-cell;
  }

  .tabgrid__padded {
  	max-width:960px;
  	margin-left:auto;
  	margin-right:auto;
  }

  .tabgrid__padded  .tabgrid {
    border-spacing: 1rem 0;
  }

  .tabcol-1 { width: 8.333333%; }
  .tabcol-2 { width: 16.666667%; }
  .tabcol-3 { width: 25%; }
  .tabcol-4 { width: 33.333333%; }
  .tabcol-5 { width: 41.666667%; }
  .tabcol-6 { width: 50%; }
  .tabcol-7 { width: 58.333333%; }
  .tabcol-8 { width: 66.666667%; }
  .tabcol-9 { width: 75%; }
  .tabcol-10 { width: 83.333333%; }
  .tabcol-11 { width: 91.666667%; }
}

/*
   Vertically center grid content
   Requires content within the column to be inline or inline-block.
*/

.grid-align-middle .col {
  vertical-align: middle;
}
/* Reverse column sorting */

.grid-reverse {
  direction: rtl;
}

.grid-reverse .col {
  direction: ltr;
}


/* ------------------------------------------
  •• Header
--------------------------------------------- */
header {
 position: relative;
 height:140px;
 width:100%;
 box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50);
 z-index:1000;
 overflow-x:hidden;
}

.hbar {
 display: flex;
 flex-direction:row;
 flex-wrap:wrap;
 justify-content:flex-start;
 align-items:center;
}
.hbar__logo   {   }
.hbar__logo img { display:block;margin: 20px 30px auto 30px; }
.hbar__menu   {
	max-width:758px;
	flex-grow:1;
	text-align:right;

}


/* ------------------------------------------
  •• Navigation
--------------------------------------------- */
/*
.top-menu {
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:flex-start;
	align-items:center;
	height:30px;
	overflow:hidden;
}
.top-menu__deco {
	width:30px;
	height:30px;
	background-color:#fd7a07;
}
.top-menu__nav {
	flex-grow:1;
	text-align:right;
	padding-right:30px;
	background-color:#195790;
	line-height:1;
}
.top-menu__nav a {
	color:rgba(255,255,255,0.7);
	display:inline-block;
	text-decoration:none;
	height:30px;
	margin:0 0 0 10px;
	padding-top:8px;
	font-size:13px;
}
.top-menu__lang {
	padding-left:10px;
	background-color:#ecf3f9;
	width:10%;
	height:30px;
}
.main-menu {
}
.main-menu a {
	text-decoration:none;
	display:inline-block;
	line-height:1;
	color:#555;
	margin:0 0 0 10px;
	text-transform:uppercase;
	font-weight:bold;
}
.top-menu__nav a:hover, .top-menu__nav a.active,
.main-menu a:hover, .main-menu a.active {
	color:#fd7a07;
}
*/

.page-head {
	text-align:center;
	margin:1em 0;
}
.page-head h1 {
	font-size:38px;
}

.page-nav {
	max-width:960px;
	margin:30px auto;
	text-align:center;
}
.page-nav a {
	display:inline-block;
	line-height:1;
	text-decoration:none;
	margin:0 10px 5px 10px;
	color:#86939E;
	padding:10px 15px 10px 15px;
	border-radius:4px;
	background-color:white;
    box-shadow:0px 1px 4px rgba(0,0,0,0.4);
}
.page-nav a.active, .page-nav a:hover {
	color:#fd7a07;
}


.page__headline {
	text-align:center;
	font-size:38px;
	font-weight:600;
	color:#656565;
	margin:1em auto 0 auto;
	padding:0 0 0.3em 0;
	border-bottom:1px solid #e0e0e0;
	max-width:940px;
	line-height:1.2;
}

nav.submenu { 
	max-width:940px;
	margin:1em auto 0 auto;
	padding: 0 0 0.7em 0;
	border-bottom:1px solid #e0e0e0;
}
nav.submenu ul {
	list-style-type:none;
	margin:0;
	padding:0;
	text-align:center;
}
nav.submenu .menu-item {
	font-size:18px;
	margin:0 1em;
	padding:0;
	display:inline-block;
	line-height:1;
	color:#656565;
	font-weight:600;
}
nav.submenu .menu-item a {
	display:inline-block;
	margin:0;
	padding:0;
	line-height:1;
	text-decoration:none;
	color:inherit;
}
nav.submenu a:hover,
nav.submenu a.active {
	color:#dc5b1c;
}

/* ------------------------------------------
  •• Headline
--------------------------------------------- */

.headline {
   margin: 2em 0;
   text-align: center;
   font-weight:300;
   color: #43484D;
}

.headline h2 {
   font-size: 40px;
   line-height: 1.6em;
   margin: 0;
   padding:0;
}

.headline p {
   font-size: 18px;
   margin: 0;
   padding:0;
}

/* ------------------------------------------
  •• Zentraler Linkbutton
--------------------------------------------- */

.centerbox { text-align: center;}
.centerbox a.btn {
/*
  background: #196098;
  box-shadow: 0 1px 3px 0 rgba(0,0,0,0.24), 0 0 2px 0 rgba(0,0,0,0.12);
  border: 1px solid #196098;
  border-radius: 5px;
  font-size: 16px;
  line-height: 1em;
  padding: 10px 30px 10px 30px; 
  margin: 1.5em 1em;
  color: white;
  text-decoration: none;
*/
}
.centerbox a.btn:hover {
  background: #FF7911;
   order: 1px solid #FF7911;
}

/* ------------------------------------------
  •• Banner
--------------------------------------------- */
.banner { 
  background: #196098;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.24), 0 0 2px 0 rgba(0,0,0,0.12);
  font-size: 18px;
  color: #FFFFFF;
  height: 110px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.banner__teaser { 
   width: 960px; margin: 0 auto; 
   font-size:24px; 
   height: 50px;   
   display: flex;
   align-items: center;
   justify-content: left;
   color: white;
   text-decoration: none;
   font-weight:300;
}
.banner__teaser a  { 
   color: white;
   text-decoration: none;
}

.banner__teaser b {
   color: #FF7911;
   font-weight:600;
}
.ico_pfeil_rechts {
   background-position: right center;
   background-repeat: no-repeat;
   background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzlweCIgaGVpZ2h0PSI0NXB4IiB2aWV3Qm94PSIxMjUxIDIxMjEgMzkgNDUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8ZyBpZD0iRG9wcGVscGZlaWwiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyNTEuMDAwMDAwLCAyMTIxLjAwMDAwMCkiPgogICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iI0ZGRkZGRiIgZmlsbC1ydWxlPSJub256ZXJvIiBwb2ludHM9IjQuMDEwODEwODEgNDQuMDU4NDM1OSAwLjMyNDQ3NDU5NSA0MC4zODA4NDMyIDE4LjU3MzY2MzggMjIuMTg3ODA1NCAwLjMyNDQ3NDU5NSAzLjk5NDc2NzU3IDQuMDEwODEwODEgMC4zMTk3NzM5MjQgMjUuOTQ2MzM2MiAyMi4xODc4MDU0Ij48L3BvbHlnb24+CiAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjRkZGRkZGIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHBvaW50cz0iMTcuMDQ1OTQ1OSA0NC4wNTg0MzU5IDEzLjM1OTYwOTcgNDAuMzgwODQzMiAzMS42MDg3OTg5IDIyLjE4NzgwNTQgMTMuMzU5NjA5NyAzLjk5NDc2NzU3IDE3LjA0NTk0NTkgMC4zMTk3NzM5MjQgMzguOTgxNDcxNCAyMi4xODc4MDU0Ij48L3BvbHlnb24+CiAgICA8L2c+Cjwvc3ZnPg==");
   
}

/* ------------------------------------------
  •• Drei Teaser
--------------------------------------------- */


.content__box {  background: #F2F2F2; padding: 2em 0;}

.teaser { 
  width: 960px; 
  margin: 2em auto; 
}
.teaser__text { padding:15px 20px 40px 20px; }
.teaser__text h3, .teaser__text p { margin: 0; padding: 0;}
.teaser__text h3 {
  font-size: 17px;
  color: #000000;
  letter-spacing: 0;
  line-height: 21px;
  margin: 0.7em;
  text-align: center;
  font-weight: 600;
}
.teaser__text p {
  font-size: 14px;
  color: #545454;
  letter-spacing: 0;
  line-height: 21px;
   text-align: center;
}

.teaser__box { 
  box-sizing: border-box;
  text-align: left;
  display: inline-block;
  background-color: white;
  border-radius: 0 0 8px 8px;
  box-shadow:0px 0px 4px #8C8C8C;
  min-height: 320px;
  max-width: 305px;
  background-position: right -1px bottom -1px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzBweCIgaGVpZ2h0PSIzMHB4IiB2aWV3Qm94PSI4ODIgNjQ2IDMwIDMwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MS4yICgzNTM5NykgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxwYXRoIGQ9Ik04ODIuOTg4MjgxLDY3NS4wNjM1OTkgQzg4Mi45ODgyODEsNjc1LjA2MzU5OSA4ODMuMDAwMTIyLDY1Ny4zNjQxOTIgODgzLjAwMDEyMiw2NTQuNDg5MjU4IEM4ODIuOTY0MzU1LDY1MS4yMjExOTEgODg2LjA1MTYzNiw2NDcuMDc5ODM0IDg5MC44MzQ0NzMsNjQ2Ljk2Mjg5MSBMOTExLjA3MDMxMiw2NDYuOTYyODkxIEM5MTEuMDcwMzEyLDY0Ni45NjI4OTEgOTExLjAwMzY2Miw2NjcuMTk3MDIxIDkxMS4wNzAzMTIsNjY3LjI4MTczOCBDOTExLjA0MzU3OSw2NzMuMjA1NTY2IDkwNS4zNjQyNTgsNjc1LjA0Njc1MyA5MDMuNTc5MjI0LDY3NS4wNjM1OTkgQzg4OC4yNDc0MzcsNjc1LjA2OTgyNCA4ODIuOTg4MjgxLDY3NS4wNjM1OTkgODgyLjk4ODI4MSw2NzUuMDYzNTk5IFoiIGlkPSJiYWNrZ3JvdW5kIiBzdHJva2U9Im5vbmUiIGZpbGw9IiM0MzNGM0UiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PC9wYXRoPgogICAgPGcgaWQ9Im5hdmlnYXRpb24tcmlnaHQtMyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODkzLjAwMDAwMCwgNjU0LjAwMDAwMCkiPgogICAgICAgIDxnIGlkPSJwZmVpbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMDAwMDAwLCAwLjI4MDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIHBvaW50cz0iMS41IDEzLjIzNTQgMC40Mzk1IDEyLjE2IDUuNjg5NSA2Ljg0IDAuNDM5NSAxLjUyMDc2IDEuNSAwLjQ0NTM2IDcuODEwNSA2Ljg0Ij48L3BvbHlnb24+CiAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgcG9pbnRzPSI1LjI1IDEzLjIzNTQgNC4xODk1IDEyLjE2IDkuNDM5NSA2Ljg0IDQuMTg5NSAxLjUyMDc2IDUuMjUgMC40NDUzNiAxMS41NjA1IDYuODQiPjwvcG9seWdvbj4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==");

cursor: pointer;


  
}

.teaser__image {
	display:block;
	max-width:305px;
	height:auto;
}



/* ------------------------------------------
  •• 50/50 Zwei Teaser
--------------------------------------------- */
.teaser50 { 
  width: 960px; 
  margin: 2em auto; 
}
.teaser__50text { padding:15px 20px 40px 20px; }
.teaser__50imagelink { display:block; }
.teaser__50image{  display:block;width:100%; height:auto;}
.teaser__50text h3, .teaser__50text p { margin: 0; padding: 0;}
.teaser__50text h3 {
  font-size: 18px;
  color: #43484D;
  letter-spacing: 0;
  line-height: 21px;
  margin-bottom: 0.5em;
  text-align: center;
}
.teaser__50text p {
  font-size: 15px;
  color: #43484D;
  letter-spacing: 0;
  line-height: 21px;
   text-align: center;
}
.teaser50 .tabcol { vertical-align: top }
.teaser__50 { 
   box-sizing: border-box;
   text-align: left;
   display: inline-block;
   background-color: white;
   border-radius: 0 0 8px 8px;
   box-shadow:0px 0px 7px #8C8C8C;
   min-height: 330px;
   width: 100%;
}

.teaser50 .tabgrid .tabcol:first-child { padding-right: 1em; }
.teaser50 .tabgrid .tabcol:last-child { padding-left: 1em; }


/* ------------------------------------------
  •• Newsletter (siehe /modul_includes/)
--------------------------------------------- */

.newsletter {
   width:100%;
   background-color: #196098;
   padding: 5em 0;
   text-align: center;
}

.newsletter h2 {
   color: white;
   font-size: 3em;
   font-weight: 100;
   margin:0;
   padding: 0;
}

.newsletter p {
   opacity: 0.8;
   font-size: 18px;
   color: #FFFFFF;
   letter-spacing: 0;
   line-height: 1.5em;
}

.newsletter__wrapper {
   width: 960px;
   margin: 0 auto;
}

.button__submit {/* Input: */
   
    background: #FF7911;
    border: 0;
    color: white;
    /* cursor: default; */
    font: inherit;
    line-height: normal;
    overflow: visible;
    padding: 0;
    -webkit-appearance: button; /* for input */
    -webkit-user-select: none; /* for button */
       -moz-user-select: none;
        -ms-user-select: none;


   
   padding: 10px 20px;
   border-radius: 6px;
   border: 1px solid #FF7911;
}

.newsletter__input {
   width: 90%;
   padding: 10px 20px;
   border-radius: 6px;
   border: 1px solid rgba(255,255,255,0.5);
   background: transparent;
}

.newsletter__input:focus {
   background: rgba(255,255,255,0.15);
}

.newsletter__form { margin-top: 3em;}



/* ----------------------------------
  •• News
---------------------------------- */

section.news h1 { font-size: 40px; line-height: 1.6em; margin: 0; }

section.news small { font-size: 15px; font-weight: 100; display: inline-block; margin-right: 2em; }
section.news strong.subpressline {font-weight: 500; text-transform: uppercase;}


.news_index {}
.news_index li { list-style: none;}
.news_index li img {
	display: block;
	max-width: 280px;
	height: auto;
	float: right;
	margin: 2em 0 0 30px;
}

.news img {
	display:block;
	max-width:100%;
	height:auto;
	margin:0 0 20px 0;
}

a.newslink {
	width: 66%;
	font-size: 24px;
	text-decoration: none;
	margin: 0.5em 0;
	display: inline-block; 
	color: #FF7911;
}

ul.newslist li a { color: #FF7911; text-decoration: none; }

ul.newslist li small { font-size: 15px; font-weight: 100; display: inline-block; margin-right: 2em; }
ul.newslist li strong.subpressline {font-weight: 500; text-transform: uppercase;}

ul.newslist li { padding: 2em 0; }


/* ----------------------------------
  •• Poster / Homepage oder Startseite
---------------------------------- */

.poster {
   height: auto;
   background-color: blue;
   background-repeat: no-repeat;
   background-position: top center;
   background-size: cover;
   position: relative;
   display: flex;
}
.poster__textwrapper { 
   width: 960px; margin: 3em auto;
   display: flex;
}
.poster__text {
   width: 45%;
   margin: 3em;
   padding: 20px 40px;
   background: white;
   text-align: center;
   color: #5E6977;
}

.poster__text h3 { font-weight: 100; font-size: 38px; margin-top: 0.5em;}
.poster__text p { font-weight: normal; font-size: 16px; line-height: 1.6em;}
.poster__text a { color: #FF7911; text-decoration: none; display: block; margin-top: 3em; }

/*-----------------------------------------
  Inline-Image mit Headline   
-------------------------------------------*/

section.bigimg { width:100%; }
.bigimg__box { width: 960px; margin: 2em auto; }
.bigimg p { font-size: 18px; text-align: center;  color: #43484D; padding-bottom: 0; margin-bottom:0.5em;}
.bigimg__headline h3 {
   font-size: 40px;
   line-height: 1.6em;
   color: #43484D;
   margin: 0;
   padding:0;
   text-align: center;
   font-weight: 100;
}
.bigimg__image img { width: 100%; height:auto; }


/*-----------------------------------------
  Footer   
-------------------------------------------*/
footer {  
	background-color: #333333;
	box-shadow:0px 600px 0px 600px #333333;
}
.footer {
  width: 960px;
  margin: 0 auto;
  min-height: 200px;
  color: #929292;
  padding: 3em 0;
  font-size: 15px;
  line-height: 1.6em;
}
footer a { text-decoration: none; }
.footer__adress a { color: #FF7911;  } 
.footer strong { color: white; }
.footer__map--gray a,
.footer__map--white a { display: block; }
/*.footer__map--gray a { color: #929292; }*/
.footer__map--gray a,
.footer__map--white a { color: #FFF; }

/*--------------------------------
	SHOP: Index 
--------------------------------*/

.produktkategorie h3 {
   color: #43484D;
   font-weight: normal;
   padding-bottom: 0.80em;
   margin-bottom: 2em;
   border-bottom: 1px solid #979797;
}

.pro__row {
   display: flex;
   width: 100%;
}
.pro__box {
   width: 100%;
   height: 60vw;
   min-height: 100px;
   margin: 10px;
   background: white;
   border: 1px solid white;
   box-shadow: 1px 2px 4px 0 rgba(0,0,0,0.3);
   border-radius: 6px;
   text-align: center;
}
.pro__box:hover { border: 1px solid #fd7a07; }
.pro__box:first-child { margin-left: 0; }
.pro__box:last-child { margin-right: 0; }
.pro__box img {width: 90%;}
.pro__box a { color: #43484D; text-decoration: none;}
.pro__box span { display: block; margin:1.5em 0 0 0; font-size: 15px;}

.products_list {
}
.products_list .prod {
	width:20%;
}
.products_list .prod img {
	width:90%;
	height:auto;
}
.products_list .txt {
}
.products_list .txt a {
	color:inherit;
	text-decoration:none;
}
.products_list .txt h2 {
	font-size:22px;
}
.pro__overview .hoveritem {
	display:inline-block;
	width:50%;
}
.pro__overview .hoveritem img {
	width:90%;
	height:auto;
}
.variants .unit {
	white-space:nowrap;
}