/*
 * Created on 05.03.2020
 *
 *
 * Copyright by Marco Franke
 * 
 * View: Mobil
 */

body {
	font-size:0.8em;
	font-family: 'Roboto', sans-serif;
	background-color:  #fff;
	}
	
*{
	padding: 0;
	margin: 0;
}


/* Case Styles
-------------------------------------------------------------------*/

header {
	min-height: 280px;
	background-image: url(../images/header_smart-home-thermostat.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border-bottom: 1px solid #244a6b;
	text-align: center;
	padding-top: 10px;
}

main {
	padding-top: 30px;
	padding-bottom: 30px;
	padding-left: 3%;
	padding-right: 3%;
}

div.search {
	float: left;
	width: 100%;
	box-sizing: border-box;
}

div.footer_case {
	background-color: #595959;
	padding-top: 30px;
	padding-left: 3%;
	padding-right: 3%;	
}

aside {
	padding-bottom: 30px;
}


/* Logo Styles
-------------------------------------------------------------------*/

div.logo_box {
 	padding-top: 4%;
 	padding-left: 2%;
 	padding-right: 5%;
 	padding-bottom: 3%;
 	text-align: right;
}

div.logo_box img {
	max-width: 85%;
	height: auto;
}


/* Mobil-Navi Styles
-------------------------------------------------------------------*/

#toggleNavMain {
	display:block;
	position: absolute;
	left: 0;
	top: 0;
	padding-top: 5.5%;
	padding-right: 2%;
	padding-left: 2%;
	cursor:pointer;
	}

#navMain {
	display:none;
	margin-top: 1px;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#navMain ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#navMain li {
	width: 100%;
	text-align: left;
	text-transform: uppercase;	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	margin-bottom: 2px;
}

#navMain li a {
	background: #595959;
	font-family: 'Barlow Condensed', sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	color: #fff;
	padding: 4.5% 4% 4% 4%;
	display: block;
	text-decoration: none;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#navMain li a:focus {
	background: #212121;
	}


/* Element Styles
-------------------------------------------------------------------*/

/* Breadcrumps
--------------------------*/
 
 div.breadcrumbs {
 	float: left;
 	width: 100%;
 	box-sizing: border-box;
 	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color: #595959;
	text-align: center;
 }

 div.breadcrumbs a{
 	color: #244a6b;
	text-decoration: none;
 }


/* Artikeldetails
--------------------------*/

dl.article-info {
	float: left;
	width: 100%;
	background-color: #eeeeee;
	box-sizing: border-box;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-bottom: 30px;
	margin-top: 5px;
	border-radius: 3px;
	box-sizing: border-box;
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 1.3em;
	color: #313131;
}

dt.article-info-term {
	display: none;
}


/* Beitragsbilder
--------------------------*/

.img-intro-none img {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.img-intro-right img {
	float: right;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.img-fulltext-none img {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.img-fulltext-right img {
	float: right;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.img-intro-left img {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.img-fulltext-left img {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

img.pull-right {
	float: right;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

img.pull-left {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}

img.pull-center {
	float: left;
	width: 100%;
	height: auto;
	box-sizing: border-box;
	margin-bottom: 20px;
}


/* FAQ Liste
--------------------------*/

section.faq_box dl {
	font-family: 'Roboto', sans-serif;
	font-size: 1.6em;
}

section.faq_box dl dt{
	font-weight: 500;
	margin-bottom: 8px;
	color: #212121;
	box-sizing: border-box;
}

section.faq_box dl dd{
	font-weight: 300;
	margin-bottom: 30px;
	color: #595959;
	box-sizing: border-box;
}


/* Buttons
--------------------------*/

p.readmore {
	text-align: center;
	padding-top: 20px;
}

p.readmore a {
	background-color: #A5892F;
	color: #fff;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
}


/* Besteller Box
--------------------------*/

article section.besteller_liste div.bestseller_item {
	border: 1px solid #d9d9d9;
	margin-bottom: 30px;
}

article section.besteller_liste div.bestseller_image img{
	border: none;
	width: 80%;
	height: auto;
	margin-left: 10%;
	margin-right: 10%;
	box-sizing: border-box;
}

article section.besteller_liste div.bestseller_description {
	padding-left: 10px;
	padding-right: 10px;
}

article section.besteller_liste p.label {
	background-color: #A5542F;
	color: #fff;
	padding-left: 10px;
	text-transform: uppercase;
	font-size: 1.4em;
}

article section.besteller_liste div.besteller_btn ul {
	margin-left: 10px;
	margin-right: 10px;
}

article section.besteller_liste div.besteller_btn ul li {
	list-style-type: none;
	margin-bottom: 5px;
	text-align: center;
	font-weight: 500;
}

article section.besteller_liste div.besteller_btn ul li.btn a{
	display: block;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	background-color: #244a6b;
}

article section.besteller_liste div.besteller_btn ul li.details a {
	background-image: url(../images/icons/icon_sht_36.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}

article section.besteller_liste div.besteller_btn ul li.amazon a {
	background-color: #A5892F;
	background-image: url(../images/icons/icon_amazon_36.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}

article section.besteller_liste div.besteller_btn ul li.preisvergleich a {
	background-color: #0c2f4e;
	background-image: url(../images/icons/icon_idealo_36.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-bottom: 13px;
	padding-top: 13px;
	border-bottom: 4px solid #ff6600;
}


/* Kategorie Filter
--------------------------*/

div.cat-children {
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding-top: 30px;
}

div.cat-children ul {
    margin-left: 30px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 1.4em;
    color: #595959;
    line-height: 1.3;
    margin-bottom: 20px;
}

div.cat-children ul li {
	list-style-type: none;
	background-image: url(../images/icons/icon_folder_18_grey.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
}

div.cat-children ul li a {
	color: #006de9;
	text-decoration: none;
}

/* Such-Resultate
--------------------------*/

div.search label {
	display: block;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.6em;
	color: #595959;
	margin-bottom: 5px;
}

div.search .inputbox {
	width: 96%;
	border: 1px solid #d9d9d9;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;	
	padding: 8px;
	margin-bottom: 20px;
}

div.search button.btn {
	background-color: #A5892F;
	color: #fff;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	margin-bottom: 30px;
	border: 1px solid #A5892F;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;	
}

div.searchintro p {
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	font-size: 1.6em;
	color: #595959;
	margin-bottom: 10px;	
}


dl.search-results {
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	color: #595959;
	margin-bottom: 10px;	
}

dl.search-results a{
	color: #006de9;
	text-decoration: none;
	font-weight: 500;
} 

dd.result-text {
	margin-bottom: 30px;
}


/* Tag Treffer
--------------------------*/

div.tag-category ul {
	padding: 0 0 0 40px;
}

div.tag-category ul li {
	list-style-type: square;
	color: #244a6b;
	margin: 0 0 12px 0;
	padding: 0 20px 0 0;
}

div.tag-category ul li h3 {
	font-size: 1.6em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	margin: 0;
}

div.tag-category ul li h3 a{
	text-decoration: none;
	color: #244a6b;
}

/* Vergleichs Tabelle
--------------------------*/

article table.table_vergleich {
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.5em;
	color: #595959;
	margin-bottom: 30px;
}

article table.table_vergleich td {
	background-color: #f5f5f5;	
}

article table.table_vergleich tr {
	border-bottom: 3px solid #fff;
}

article table.table_vergleich th {
	background-color: #244a6b;
	color: #fff;
	padding-top: 5px;
	padding-bottom: 5px;
	box-sizing: border-box;
}

article table.table_vergleich td {
	text-align: center;
	padding-top: 10px;
	padding-bottom: 13px;
	padding-left: 7px;
	padding-right: 7px;
	box-sizing: border-box;
}

article table.table_vergleich td.col_feature {
	text-align: left;
	font-weight: 500;
	color: #244a6b;
}

/* Vorteile und Nachteile
--------------------------*/

article ul.Content_Vorteile {
	color: #0A543A;
	border: 1px solid #0A543A;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	margin-left: 0;
	background-color: #e1ffea;
	box-sizing: border-box;
	border-radius: 3px;
}

article ul.Content_Vorteile li {
	margin-left: 40px;
}

article ul.Content_Nachteile {
	color: #7D330F;
	border: 1px solid #7D330F;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	margin-left: 0;
	background-color: #ffe7db;
	box-sizing: border-box;
	border-radius: 3px;
}

article ul.Content_Nachteile li {
	margin-left: 40px;
}


/* Font Styles
-------------------------------------------------------------------*/

header h1 {
	font-size: 3.2em;
	text-align: center;
	font-weight: 500;
	color: #fff;
	background-color: rgba(36, 74, 107, 0.5);
	backdrop-filter: blur(4px);
	width: auto;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 30px;
	padding-bottom: 30px;
	margin-bottom: 40px; 
	box-sizing: border-box;
	text-shadow:  1px  1px 1px #244a6b,
                  1px -1px 1px #244a6b,
                 -1px  1px 1px #244a6b,
                 -1px -1px 1px #244a6b;
}

main h2 {
	font-size: 3.0em;
	text-align: center;
}

main h3 {
	font-size: 2.6em;
	text-align: center;
}

main h4 {
	font-size: 2.4em;
	text-align: center;
}

main h5 {
	font-size: 2.2em;
	text-align: center;
}

hr {
	margin-bottom: 20px;
}

/* Sidebar Elements
-------------------------------------------------------------------*/

/* Headlines
--------------------------*/

aside h3 {
	color: #595959;
}


/* grafiken
--------------------------*/

aside .pull-center {
	width: 80%;
	height: auto;
	margin-left: 10%;
	margin-right: 10%;
	margin-top: 10px;
	margin-bottom: 50px;
}


/* Sidebar Kategorien
--------------------------*/

aside ul.categories-module {
	margin-bottom: 10px;
}

aside ul.categories-module li {
	list-style-type: none;
	background-image: url(../images/icons/icon_folder_18_grey.png);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 30px;
	border-bottom: 1px solid #f2f2f2;
	padding-top: 10px;
	padding-bottom: 10px;
}

aside ul.categories-module li h4{
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

aside ul.categories-module li h4 a{
	text-decoration: none;
	color: #006de9;
}

aside ul.categories-module li h4 a:hover{
	text-decoration: underline;
}

/* Sidebar Navigationen
--------------------------*/

aside div.moduletable_sidebarnav ul li {
	list-style-type: none;
	padding: 12px 0 10px 0;
	border-bottom: 1px solid #f2f2f2;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

aside div.moduletable_sidebarnav ul li a{
	text-decoration: none;
	color: #006de9;
	}

aside div.moduletable_sidebarnav ul li a:hover{
	text-decoration: underline;
	}

/* About Me
--------------------------*/

aside p.about_me img {
	float: left;
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* Produktbox
--------------------------*/

aside div.product_box {
	margin-bottom: 30px;
}

aside div.product_box p {
	text-align: center;
	margin-top: 10px;
}

aside div.product_box p img {
	width: 75%;
	height: auto;
	margin-bottom: 10px;
}

aside div.product_box ul {
	font-size: 1.4em;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	text-align: center;
}

aside div.product_box ul li {
	list-style-type: none;
	margin-bottom: 5px;
}

aside div.product_box ul li.btn a{
	display: block;
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 20px;
	padding-right: 20px;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	background-color: #244a6b;
	}

aside div.product_box ul li.amazon a {
	background-color: #A5892F;
	background-image: url(../images/icons/icon_amazon_36.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}

aside div.product_box ul li.preisvergleich a {
	background-color: #0c2f4e;
	background-image: url(../images/icons/icon_idealo_36.png);
	background-repeat: no-repeat;
	background-position: 10px center;
	padding-bottom: 13px;
	padding-top: 13px;
	border-bottom: 4px solid #ff6600;
}

/* Short Facts Table
--------------------------*/

aside div.moduletable_shortfacts dl{
	width: 100%;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	font-size: 1.4em;
	color: #595959;
	margin-bottom: 30px;
}

aside div.moduletable_shortfacts a{
	color: #006de9;
	text-decoration: none;
}

aside div.moduletable_shortfacts dl dd {
	background-color: #f5f5f5;
	text-align: center;
	padding-top: 10px;
	padding-bottom: 9px;
	padding-left: 7px;
	padding-right: 7px;
	border-bottom: 3px solid #fff;
}

aside div.moduletable_shortfacts dl dt {
	background-color: #244a6b;
	text-align: center;
	font-weight: 500;
	color: #fff;
	padding-top: 4px;
	padding-bottom: 7px;
	border-bottom: 3px solid #fff;
}


/* Tags
--------------------------*/

aside div.tagspopular li {
	list-style-type: none;
	display: inline;
	font-size: 1.1em;
}

aside div.tagspopular li a{
	display: inline-block;
	background-color: #f5f5f5;
	margin: 0 2px 5px 0;
	padding: 3px 8px 3px 8px;
	text-decoration: none;
	color: #006de9;	
	border-radius: 3px;
}

aside div.tagspopular li a:hover{
	background-color: #244a6b;
	color: #fff;
	}

/* Footer Elements
-------------------------------------------------------------------*/

/* Headlines
--------------------------*/

footer h3 {
	color: #fff;
	font-size: 2.0em;
	text-align: center;
}


/* Footer Kategorien
--------------------------*/

footer ul.categories-module {
	margin-bottom: 30px;
}

footer ul.categories-module li {
	list-style-type: none;
	margin-bottom: 2px;
	text-align: center;
}

footer ul.categories-module li h4{
	margin: 0;
	padding: 0;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

footer ul.categories-module li h4 a{
	text-decoration: none;
	color: #fff;
	background-color: #244a6b;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
}


/* Footer Beiträge Liste
--------------------------*/

footer ul.latestnews {
	margin-bottom: 30px;
}

footer ul.latestnews li {
	list-style-type: none;
	margin-bottom: 2px;
	text-align: center;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

footer ul.latestnews li a{
	text-decoration: none;
	color: #fff;
	background-color: #244a6b;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
}


/* Footer Info Menu
--------------------------*/

footer div.moduletableinfomenu ul.menu {
	margin-bottom: 30px;
}

footer div.moduletableinfomenu ul.menu li {
	list-style-type: none;
	margin-bottom: 2px;
	text-align: center;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
}

footer div.moduletableinfomenu ul.menu li a{
	text-decoration: none;
	color: #fff;
	background-color: #244a6b;
	padding-top: 8px;
	padding-bottom: 8px;
	display: block;
}


/* Footer Suche
--------------------------*/

footer div.search {
	padding: 0;
	text-align: left;
}

footer div.search label {
	display: none;
}

footer div.search input.inputbox{
	width: 100%;
	border: 1px solid #d9d9d9;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;	
	padding: 8px;
	box-sizing: border-box;
	}


/* Footer texte
--------------------------*/

footer div.footer_box p {
	text-align: center;
	font-size: 1.3em;
	font-family: 'Roboto', sans-serif;
	font-weight: 300;
	color: #fff;
	margin-bottom: 20px;
}

/* Footer Lovebar
--------------------------*/

footer div.custom_lovebar {
	width: 100%;
	text-align: center;
	box-sizing: border-box;
	font-size: 1.4em;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	color: #fff;	
	margin-bottom: 30px;
}

/* Footer Salesbar
--------------------------*/

div.product_bar {
	position: fixed;
	z-index: 900;
	left: 0;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	height: 53px;
	box-shadow: 0px 1px 5px 0px rgba(50, 50, 50, 0.75);
	box-sizing: border-box;
	padding-top: 5px;
}

div.product_bar div.product_bar_bildbox {
	display: none;
}

div.product_bar div.product_bar_btnbox {
	float: left;
	width: 100%;
	box-sizing: border-box;
	padding-left: 3%;
	padding-right: 3%;
}

div.product_bar div.product_bar_btnbox ul {
	font-size: 1.2em;
	font-family: 'Roboto', sans-serif;
	font-weight: 500;
	text-align: center;
}

div.product_bar div.product_bar_btnbox ul li {
	display: inline-block;
	list-style-type: none;
	width: 50%;
	box-sizing: border-box;
	padding-left: 3px;
	padding-right: 3px;
}

 div.product_bar div.product_bar_btnbox ul li.btn a{
	display: block;
	padding-top: 12px;
	padding-bottom: 12px;
	padding-left: 0;
	padding-right: 0;
	border-radius: 3px;
	color: #fff;
	text-decoration: none;
	background-color: #244a6b;
	}

div.product_bar div.product_bar_btnbox ul li.amazon a {
	background-color: #A5892F;
}

div.product_bar div.product_bar_btnbox ul li.preisvergleich a {
	background-color: #0c2f4e;
	}

@media (max-width: 768px) {
  .scrollable-table {
    overflow: scroll;
    width: calc(100vw - 10px); }
}