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


/* Definitionen Header-Bereich
-------------------------------------------------------------------*/

header {
	background-color: var(--MainBgColor);
}

	.logo_box {
		padding: 10px 5px 5px 5px;
		text-align: center;
	}

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


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

#toggleNavMain {
	display:block;
	position: absolute;
	left: 3px;
	top: 23px;
	padding-top: 5px;
	padding-right: 5px;
	padding-left: 5px;
	cursor:pointer;
	}

#navMain {
	display:none;
	margin-top: 1px;
	float: left;
	}

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

			#navMain li {
				width: 100%;
				text-align: left;	
				margin: 0 0 2px 0;
				}

				#navMain li a {
					background: var(--BoxBgColor);
					font-family: var(--BaseFont);
					font-weight: 500;
					font-size: 1.3rem;
					color: var(--TextColor);
					padding: 12px 5px 12px 30px;
					display: block;
					text-decoration: none;
					}

				#navMain li a:focus {
					background: ;
					}

/* Definitionen Main-Bereich
-------------------------------------------------------------------*/

main {
	padding: 0 0 15px 0;
	}


/* Teaser Style
------------------------------*/

.teaser_case {
	text-align: center;
	padding: 75px 0 75px 0;
	margin: 0 0 5px 0;
	background-color: var(--AcentColor);
}

	.teaser_case h1 {
		font-style: var(--BaseFont);
		font-size: 2.5rem;
		font-weight: 700;
		color: var(--BoxBgColor);
		font-style: italic;
		margin: 0;
		padding: 15px;
		}

	.teaser_case p.header_aufreisser {
		color: var(--BoxBgColor);
		padding: 0 15px 15px 15px;
		font-style: var(--BaseFont);
		font-size: 2.1rem;
		font-weight: 500;
		font-style: italic;
		}


/* Breadcrump Styles
------------------------------*/

	.breadcrumbs_box {
		float: left;
		width: 100%;
		padding: 15px 15px 10px 15px;
		}

		.breadcrumbs_box ol {
			padding: 0;
			margin: 0;
		}

		.breadcrumbs_box li {
			list-style-type: none;
			float: left	;
			font-family: var(--BaseFont);
			font-weight: 300;
			font-size: 1.1rem;
			color: var(--TextColor);
			}

			.breadcrumb-item+.breadcrumb-item:before {
 			   content: "/ ";
				}

		.breadcrumbs_box li a{
			text-decoration: none;
			color: var(--AcentColor);
			}


		.breadcrumbs_box li a:hover{
			text-decoration: underline;
			}

		.mod-breadcrumbs__here  {
			padding: 0 5px 0 0;
			}

/* Main Content Styles
------------------------------*/

.com-content-category-blog .img-header{
	float: left;
	width: 100%;
	height: auto;
	padding: 0 0 20px 0;
	}

.com-content-category-blog .fields-container {
	display: none;
	}

.com-content-article .img-header{
	float: left;
	width: 100%;
	height: auto;
	padding: 0 0 20px 0;
	}


.com-content-article, .com-tags-tag, .item-content, .alert {
	float: left;
  width: 100%;
	background-color: var(--BoxBgColor);
	border: 1px solid var(--BaseBorderColor);
	border-top: 3px solid var(--HighlightColor);
	margin: 0 0 15px 0;
	padding: 15px 15px 15px 15px;
	}

	.article-info {
		float: left;
		width: 100%;
		color: var(--TextColor);
		font-family: var(--BaseFont);
		font-weight: 300;
		font-size: 1.0rem;
		font-style: italic;
		border-bottom: 1px solid var(--TextColor);
		margin: 0 0 20px 0;
		padding: 0 0 8px 0;
		}

		.article-info dd{
			float: left;
			padding: 0 15px 0 0;
			}

	
	.main_content h1 {
		color: var(--TextColor);
		font-size: 2.0rem;
		padding: 5px 0 8px 0;
		}

	.main_content h2 {
		color: var(--AcentColor);
		font-size: 1.8rem;
		padding: 30px 0 8px 0;
		}

	.main_content h3 {
		color: var(--TextColor);
		font-size: 1.5rem;
		padding: 20px 0 5px 0;
		}

	.main_content h4 {
		color: var(--TextColor);
		font-size: 1.4rem;
		padding: 8px 0 5px 0;
		}

	.main_content h5 {
		color: var(--TextColor);
		font-size: 1.3rem;
		font-style: italic;
		padding: 6px 0 5px 0;
		}

	.main_content p {
		line-height: 1.6;
		font-size: 1.1rem;
		font-weight: 400;
		font-family: var(--BaseFont);
		color: var(--TextColor);
		padding: 0 0 7px 0;
		}

	.main_content p.notice_box {
		padding: 20px;
		background-color: var(--MainBgColor);
		border: 1px solid var(--BaseBorderColor);
		border-radius: var(--ElementRadius);
		border-left: 7px solid var(--2ndHighlightColor);
		}

		.main_content a{
			color: var(--AcentColor);
			text-decoration: none;
			}

		.main_content a:hover{
			text-decoration: underline;
			}

	.main_content ul, .main_content ol {
		float: left;
		width: 100%;
		font-size: 1.1rem;
		font-weight: 400;
		font-family: var(--BaseFont);
		line-height: 1.6;
		color: var(--TextColor);
		margin: 15px 0 15px 0;
		padding: 0 50px 0 50px;
		}

		.main_content ul li {
			list-style-type: square;
			margin: 0 0 5px 0;
			}

		.main_content ol li {
			margin: 0 0 5px 0;
			}


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

ul.c2a_btns {
	margin: 0;
	padding: 0;
	text-align: center;
    width: 100%;
	}

	ul.c2a_btns li {
		list-style-type: none;
		font-size: 1.0rem;
		font-style: normal;
		font-weight: 700;
		width: 100%;
		}

		ul.c2a_btns li a {
			display: inline-block;
			border-radius: var(--ElementRadius);
			color: var(--TextColor);
			border: 1px solid var(--BaseBorderColor);
			padding: 5px 15px 5px 15px;
            min-width: 60%;
            margin: 15px 0 15px 0;
			}

			ul.c2a_btns li a span{
				font-size: 0.9rem;
				font-weight: 500;
				}

			ul.c2a_btns li a:hover{
				text-decoration: none;
				color: var(--BaseBorderColor);
				}

			ul.c2a_btns li.btn_idealo a {
				background-color: #0f497e;
				background-image: url(../images/icons/icon_idealo_36.png);
				background-repeat: no-repeat;
				background-position: 5px center;
				padding: 5px 8px 5px 48px;
				color: #fff;
				border-bottom: 4px solid #ff6600;
				}


/* Inhaltsverzeichnis Box
------------------------------*/

div.doc_index {
	padding: 5px 15px 13px 15px;
	background-color: var(--MainBgColor);
	border: 1px solid var(--BaseBorderColor);
	border-top: 3px solid var(--HighlightColor);
	margin: 20px 0 30px 0;
	border-radius: var(--ElementRadius);
}

	div.doc_index h2 {
		float: left;
		width: 100%;
		text-align: center;
		padding: 10px 15px 13px 15px;
		color: var(--TextColor);
		font-size: 1.1rem;
		text-transform: uppercase;
		border-bottom: 1px solid var(--BaseBorderColor);
		margin: 0 0 15px 0;
		}

	div.doc_index ul {
		margin: 3px 0 3px 15px;
		list-style-type: none;
		font-size: 1.2rem;
		font-family: var(--BaseFont);
		font-weight: 400;
		font-style: normal;	
		padding: 0;
		line-height: 1.3;
		}

		div.doc_index li {
			margin: 0 0 3px 0;
			list-style-type: none;
			}

		div.doc_index a {
			color: var(--AcentColor);
			text-decoration: none;
			}

		div.doc_index a:hover {
			text-decoration: underline;
			}


/* Bild Box
------------------------------*/

figure.image {
	padding: 15px 15px 15px 15px;
	margin: 0 0 15px 0;
	background-color: var(--MainBgColor);
	border: 1px solid var(--BaseBorderColor);
	border-radius: var(--ElementRadius);
	}

	figure.image img {
		width: 100%;
		height: auto;
		border: 1px solid var(--BaseBorderColor);
		margin: 0 0 13px 0;
		}

	figure.image figcaption {
		float: left;
		width: 100%;
		font-family: var(--BaseFont);
		font-weight: 500;
		font-size: 1.0rem;
		text-align: center;
		}


/* Definition Content Menues
------------------------------*/

.content_link_list ul {
	margin: 0 0 20px 0;
	padding: 20px;
	text-align: center;
	border: 1px solid var(--BaseBorderColor);
	border-radius: var(--ElementRadius);
	background-color: var(--MainBgColor);
	padding: 20px;
}

	.content_link_list ul li {
		list-style-type: none;
		border: 1px solid var(--BaseBorderColor);
		border-radius: var(--ElementRadius);
		background-color: var(--BoxBgColor);
	}

		.content_link_list ul li a{
			display: inline-block;
			padding: 10px;
			width: 100%;
		}

/* Definitionen After-Content-Bereich
-------------------------------------------------------------------*/

div.after_content {
	margin: 0 0 15px 0;
}

	div.after_content div.mod-custom {
		float: left;
		width: 100%;
		background-color: var(--BoxBgColor);
		border: 1px solid var(--BaseBorderColor);
		border-top: 3px solid var(--HighlightColor);
		margin: 0 0 15px 0;
		padding: 0 0 15px 0;
		}

		div.after_content .moduletable h2 {
			float: left;
			width: 100%;
			margin: 15px 0 15px 0;
			padding: 0 15px 0 15px;
			border-bottom: 1px solid var(--BaseBorderColor);
			font-size: 1.1rem;
			text-transform: uppercase;
			color: var(--TextColor);
			}

		div.after_content .moduletable p {
			float: left;
			width: 100%;
			padding: 15px;
			font-family: var(--BaseFont);
			font-weight: 300;
			font-size: 1.1rem;
			line-height: 1.6;	
			}

		div.after_content .moduletable h3 {
			padding: 15px;
		}


/* Autorenbox
------------------------------*/
	
		div.after_content .autor_box img {
			width: 100%;
			height: auto;
			margin: 20px 0 0 0;
			padding: 15px 120px 15px 120px;
			text-align: center;
			vertical-align: middle;
			filter: grayscale(100%);
			border-radius: 100%;
		}


/* Definitionen Sidebar-Bereich
-------------------------------------------------------------------*/

aside .moduletable {
	float: left;
	width: 100%;
	background-color: var(--BoxBgColor);
	border: 1px solid var(--BaseBorderColor);
	border-top: 3px solid var(--HighlightColor);
	margin: 0 0 15px 0;
	}

	aside .moduletable h2 {
		float: left;
		width: 100%;
		margin: 0 0 15px 0;
		padding: 15px 15px 13px 15px;
		background-color: var(--MainBgColor);
		border-bottom: 1px solid var(--BaseBorderColor);
		font-size: 1.1rem;
		text-transform: uppercase;
		}

	aside .moduletable p {
		float: left;
		width: 100%;
		padding: 0 15px 7px 15px;
		font-family: var(--BaseFont);
		font-weight: 300;
		font-size: 1.1rem;
		line-height: 1.3;	
		}

	aside .moduletable ul {
		float: left;
		width: 100%;
		list-style-type: none;
		padding: 0 15px 7px 15px;
		font-family: var(--BaseFont);
		font-weight: 400;
		font-size: 1.1rem;
		line-height: 1.5;	
		}

		aside .moduletable ul li {
			margin: 0 0 5px 0;
			padding: 0 0 5px 0;
			border-bottom: 1px solid var(--BaseBorderColor);
			}

		aside .moduletable ul li:last-child {
			border-bottom: none;
			}

			aside .moduletable ul li a {
				color: var(--AcentColor);
				text-decoration: none;
				}

			aside .moduletable ul li a:hover {
				color: var(--AcentColor);
				text-decoration: underline;
				}

		
		aside .partner_box ul {
			text-align: center;
			}

		aside .partner_box ul li {
			margin: 0;
			padding: 0;
			border-bottom: none;
			}

		aside .partner_box img{
			width: 80%;
			height: auto;
		}



/* Tag-Modul: most popular
------------------------------*/

		aside .moduletable .mod-tagspopular ul li {
			float: left;
			width: auto;
			border-bottom: none;
			margin: 0 5px 5px 0;
			}

			aside .moduletable .mod-tagspopular ul li a {
				background-color: var(--AcentColor);
				color: var(--BoxBgColor);
				padding: 5px 10px 5px 10px;
				border-radius: var(--ElementRadius);
				}


		aside .banneritem img {
			width: 100%;
			height: auto;
		}

		aside .bannerfooter {
			float: left;
			width: 100%;
			text-align: right;
			padding: 0 15px 5px 0;
			font-size: 0.8rem;
			color: var(--TextColor);
		}

/* Definitionen Footer-Bereich
-------------------------------------------------------------------*/

.footer_case {
	background-color: var(--TextColor);
	min-height: 150px;
	color: var(--MainBgColor);
	padding: 30px 15px 30px 15px;
	}

	.footer_box{
		margin: 0 0 30px 0;
		text-align: center;
		}

		.footer_box ul.nav{
			margin: 0 0 30px 0;
			}

			.footer_box ul.nav li, .footer_box ul.mod-articleslatest li {
				list-style-type: none;
				text-align: center;
				font-family: var(--BaseFont);
				font-weight: 400;
				font-size: 1.0rem;
				margin: 0 0 2px 0;
				}

				.footer_box ul.nav li a, .footer_box ul.mod-articleslatest li a {
					display: inline-block;
					background-color: var(--AcentColor);
					width: 100%;
					color: var(--MainBgColor);
					padding: 8px 15px 7px 15px;
					text-decoration: none;
					}

		.footer_box h2 {
			color: var(--MainBgColor);
			margin: 0 0 15px 0;
			}

		.footer_box p {
			font-family: var(--BaseFont);
			font-weight: 400;
			font-size: 1.0rem;
			margin: 0 0 12px 0;
			}


/* Definitionen Hinweise
-------------------------------------------------------------------*/

div.dsgvo_alert {
	padding: 15px 15px 8px 15px;
	font-family: var(--BaseFont);
	font-weight: 400;
	font-style: italic;
	border: 1px solid var(--BaseBorderColor);
	color: var(--BaseBorderColor);
	margin: -15px 0 30px 0;
	border-left: 7px solid var(--AcentColor);
	background-color: var(--MainBgColor);
}

	div.dsgvo_alert p {
		font-size: 0.9rem;
	}

p.readmore {
	float: left;
	width: 100%;
	text-align: center;
	padding: 0;
}

p.readmore a, table.hersteller a.btn_ {
	background-color: var(--HighlightColor);
	color: var(--TextColor);
	display: inline-block;
	width: 100%;
	padding: 7px 10px 7px 10px;
	font-size: 1.3rem;
	font-style: normal;
	font-weight: 500;
	border-radius: var(--ElementRadius);
	text-align: center;
}

table.hersteller a.btn_ {
	font-size: 1.0rem;
}

.GoTopNav {
		text-align: right;
		margin: 20px 20px 0 20px;
}

		.GoTopNav li{
			list-style-type: none;
		}

			.GoTopNav li a{
				display: inline-block;
				padding: 10px;
	      font-size: 0.9rem;
				font-style: normal;
				font-weight: 400;
				border-radius: var(--ElementRadius);
				background-color: var(--AcentColor);
	color: var(--BoxBgColor);
							}