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


.not4mobile {
	display: none;
}
	
/* Cases
-------------------------------------------------------------------*/

.top_case {
	background-color: #fff;
}

.top_case nav {
	background-color: #fff;
}

.teaser_case {
	background-color: var(--barBackground);
}

.teaser_box {
	padding: 30px 20px 0 20px;
}

.main_content {
	padding: 0 20px 60px 20px;
}

.blog article {
	border-bottom: 1px solid var(--heightlightinaktivColor);
	padding: 0 0 30px 0;
}

.intro_box {
	margin: 30px 0 0 0;
}

.intro_box_img {
	text-align: center;	
}

.garantie_siegel .grid_33 {
	width: 33.33333%;
}

.garantie_siegel {
	margin: 30px 0 30px 0;
}

.garantie_siegel_box {
	padding: 0 3px 0 3px;
}

.btn_box {
	text-align: center;
	padding: 50px 0 5px 0;
}

.review_box {
	padding: 30px 0 30px 0;
}

.testimonial_box {
	background-color: var(--heightlightBackground);
	border-radius: 5px;
	padding: 40px 0 40px 0;
}

.referenzen_box img{
	width: 100%;
	height: auto;
	border-radius: 10px;
	border: 2px solid var(--barBackground);
}

aside {
	padding: 60px 20px 60px 20px;
	text-align: center;
}

.breadcrumbs { 
	float: left;
	width: 100%;
	padding: 30px 0 30px 0;
	text-align: center;
}

.feature_box {
	padding: 0 20px 0 20px;
	margin: 0 0 60px 0;
}

.newsletter_case {
	background-color: var(--heightlightBackground);
	padding: 30px 0 50px 0;
}

.newsletter_box {
	padding: 30px 20px 30px 20px;
}

.footer_case {
	background-color: var(--darkBackground);
	min-height: 120px;
	padding: 30px 0 30px 0;
}

footer .footer_left {
	padding: 30px 20px 30px 20px;
	text-align: center;
}

footer .footer_right {
	padding: 30px 20px 30px 20px;
	text-align: center;
}


/* Logo Style
-------------------------------------------------------------------*/


.logo_box {
	padding: 10px 0 8px 20px;
	text-align: center;
}


.logo_box a {
	text-decoration: none;
	}

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


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

#toggleNavMain {
	display:block;
	position: absolute;
	lef: 0;
	top: 0;
	padding: 10px;
	margin: 5px 2px 0 2px;
	cursor:pointer;
	}

#navMain {
	display: none;
	float: left;
	}

#navMain ul {
	text-align: center;
	padding: 0;
}

#navMain li {
	display: inline-block;
	width: 100%;
	text-align: center;
	list-style-type: none;
	font-size: 1.2rem;
	font-family: var(--headlineFont);
	font-weight: 500;
	letter-spacing: 3px;
}

#navMain li a {
	color: var(--standardTextColor);
	display: inline-block;
	width: 100%;
	padding: 12px 0 12px 0;
	border-bottom: 1px solid var(--lighterBackground);
	text-decoration: none;
	}

#navMain li a:focus {
	
	}


/* Typo Content 
-------------------------------------------------------------------*/
	
	p.content_zg {
		text-align: center;
		margin: 0 0 30px 0;
	}

	p.content_zg span {
		background-color: var(--heightlightColor);
		color: var(--darkTextColor);
		font-family: var(--articleFont);
		font-size: 1.1rem;
		font-weight: 500;
		display: inline-block;
		padding: 7px 15px 7px 15px;
		border-radius: 5px;
	}

	ul.benefits {
		margin: 10px 10px 60px 10px;
		padding: 0 0 0 30px;
		color: var(--darkTextColor);
		font-family: var(--articleFont);
		font-size: 1.3rem;
	}

	aside ul.benefits {
		color: var(--standardTextColor);
	}


	ul.benefits li{
		list-style-image: url(../images/icons/benefit.png);
		padding: 0 0 5px 0;
	}

	p.CARS_Shot {
		text-align: center;
		padding: 0;
		margin: -3px;
	}

	p.CARS_Shot img {
		width: 100%;
		height: auto;
	}

	h1 {
		font-size: 2.0rem;
		font-weight: 500;
		line-height: 1.2;
		color: var(--darkTextColor);
		text-align: left;
	}

	.teaser_box h1 {
		text-align: center;
	}

	main h2 {
		font-size: 1.8rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 60px 0 20px 0;
	}

	main h3 {
		font-size: 1.6rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 50px 0 20px 0;
	}

	main h4 {
		font-size: 1.4rem;
		font-weight: 500;
		line-height: 1.2;
		margin: 30px 0 20px 0;
	}

	main figure.item-image {
		padding: 0;
	}

	main figure.item-image img {
		width: 100%;
		height: auto;
		margin: 0 0 10px 0;
	}

	main img.img_center {
		width: 100%;
		height: auto;
		border: 2px solid var(--heightlightinaktivColor);
		padding: 3px;
	}
	
	.testimonial_box .text_box {
		padding: 0 20px 0 20px;
	}

	.testimonial_box h2 {
		margin: 0 0 30px 0;
	}

	.testimonial_box .bild_box {
 		padding: 50px 25% 0 25%;
	 }

	.intro_box_img img{
		width: 50%;
		height: auto;
	}

	.main_content ul {
		font-style: italic;
	}

	.main_content ol {
		font-style: italic;
	}

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

	article ul li {
		margin: 0 0 10px 30px;
	}

p.readmore {
	margin: 0 0 50px 0;
}

p.readmore a {
	display: block;
	background-color: var(--heightlightColor);
	padding: 10px 20px 10px 20px;
	border-bottom: 1px solid var(--heightlightinaktivColor);
}


.review_box_icon img {
	width: 100%;
	height: auto;
}

.review_box_icon{
	text-align: center;
	padding: 30px 25% 0 25%;
	margin: 0;
  }

.intro_box_text {
	text-align: center;
}

.review_box_text {
	text-align: center;
}

.garantie_siegel_box img {
	width: 100%;
	height: auto;
}

.feature_box h2 {
	margin: 50px 0 50px 0;
}

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

.feature_box_col img {
	width: 100%;
	height: auto;
	padding: 0 25% 0 25%;
	margin: 0 0 -30px 0;
}


p.arrow_ {
	padding: 0 20% 0 20%;
	text-align: center;
}

p.arrow_ img {
	max-width: 100%;
	height: auto;
}

.teaser_case p.arrow_ {
	padding: 0 20% 30px 20%;
	margin: -30px 0 0 0;
	}

p.btn_ {
  	margin: 30px 0 30px 0;
}

p.btn_ a{
	display: block;
	width: 100%;
	padding: 30px 10px 30px 10px;
	background-color: var(--heightlightColor);
	color: var(--darkTextColor);
	margin: 10px 0 0 0;
	font-weight: 500;
	border-radius: 5px;
	border-bottom: none;
	font-size: 1.2rem;
	box-shadow:  0 1px 5px 0 rgba(50, 50, 50, 0.75);
	}

	p.btn_ a span {
		font-size: 1.0rem;
		font-weight: 400;
	}

	p.btn_ a:hover {
		box-shadow: 3px 3px 8px var(--darkerTextColor);
		transition: all 0.5s;
	}

	._sogehts_ {
		padding: 0 10px 0 10px;
	}

	._sogehts_ h3 span {
		background-color: var(--barBackground);
		border-radius: 100%;
		padding: 5px 10px 5px 10px;
		font-weight: 700;
		color:var(--baseBackground);
	}

	.calsoft_box ul {
		float: left;
		text-align: center;
		margin: 30px 0 30px 0;
	}

	.calsoft_box ul li {
		display: inline-block;
		list-style-type: none;
		width: 100%;
		margin: 5px;
	}

	.calsoft_box ul li a img{
		width: 100%;
		height: auto;
		border: 1px solid var(--heightlightinaktivColor);
		border-radius: 5px;
		filter: grayscale(100%);
	}

	._faq_ dl {
		font-family: var(--articleFont);
		font-size: 1.3rem;
		color: var(--darkerTextColor);
		padding: 60px 0 30px 0;
	}

	._faq_ dt {
		cursor: pointer;
		color: var(--standardTextColor);
		padding: 0 0 12px 0;
		border-bottom: 1px solid var(--darkerTextColor);
		font-weight: 500;
	}

	._faq_ dt:hover,:focus {
		color: var(--barBackground);
		transition:all 0.5s;
	}

	._faq_ dt.active {
		color: var(--barBackground); 
	}

	._faq_ dt span {
		vertical-align: middle;
		cursor: default;
	}

	._faq_ dd{
 		height:0;
  		overflow:hidden;
  		transition: height .25s ease-out;
  		font-size: 1.1rem;
  		margin: 10px 0 15px 0;
  		line-height: 1.5;
		}

	._faq_ .expanded{
  		height:auto;
		}

	aside h2 {
		color: var(--barBackground);
		font-weight: 500;
		font-size: 1.8rem;
		text-align: center;
		margin: 10px 0 30px 0;
	}

	aside ul.benefits {
    margin: 10px 20px 30px 20px;
	}

	aside ul.benefits li {
		text-align: left;
		vertical-align: middle;
	}

	aside p.btn_ a {
    	text-decoration: none;
	}

	aside p img {
		width: 100%;
		height: auto;
	}

	aside ul.nav {
		margin: 0 0 30px 0;

	}

	aside ul.nav li {
		width: 100%;
		text-align: center;
		list-style-type: none;
		font-size: 1.2rem;
		font-family: var(--headlineFont);
		font-weight: 500;
		letter-spacing: 3px;
	}

	aside ul.nav li a {
		color: var(--standardTextColor);
		padding: 15px 10px 15px 10px;
		display: inline-block;
		text-decoration: none;
	}

	dl.article-info dd {
		display: inline-block;
		font-family: var(--articleFont);
		color: var(--standardTextColor);
		font-weight: 500;
		font-size: 0.9rem;
		font-style: italic;
	}

nav.mod-breadcrumbs__wrapper {
		font-family: var(--articleFont);
		color: var(--standardTextColor);
		font-weight: 500;
		font-size: 0.9rem;
		margin: 30px 0 30px 0;
	}

nav.mod-breadcrumbs__wrapper ol{
	margin: 0;
}

nav.mod-breadcrumbs__wrapper ol li {
	list-style-type: none;
	display: inline-block;
	margin: 0 8px 0 0;
}

	nav.mod-breadcrumbs__wrapper a{
		color: var(--standardTextColor);
		font-style: italic;
		text-decoration: none;
		border-bottom: 2px solid var(--heightlightinaktivColor);
	}

	.cat-children {
		display: none;
	}

	dl.dl-horizontal dt{
		display: none;
	}

	.thumbnail img {
		width: 100%;
		height: auto;
		filter: grayscale(100%);
		border-radius: 3px;
	}

	footer p {
		font-family: var(--articleFont);
		font-weight: normal;
		font-size: 0.8rem;
		color: var(--darkerTextColor);
		line-height: 1.7;
	}

	footer p.MF_Logo {
		font-family: var(--headlineFont);
		font-weight: 400;
		font-size: 1.0rem;
		letter-spacing: 3px;
		text-transform: uppercase;
		color: var(--darkTextColor);
		margin: 0 0 30px 0;
	}

	footer .footer_left ul.nav {
		text-align: center;
		margin: 30px 0 0 0;
	}

	footer .footer_left ul.nav li {
		list-style-type: none;
		font-size: 1.0rem;
		font-family: var(--headlineFont);
		font-weight: 500;
		letter-spacing: 3px;
	}

	footer .footer_left ul.nav li a {
		color: var(--darkerTextColor);
		padding: 10px 0 10px 0;
		display: inline-block;
		text-decoration: none;	
	}

.huf_brand img{
	width: 25%;
	height: auto;
}

/* Newsletterbox Styles
-------------------------------------------------------------------*/

	.newsletter_box h2 {
		font-size: 2.7rem;
		line-height: 1.2;
		margin: 0 0 60px 0;
	}

	.newsletter_box .nl_benefits_box li {
		list-style-type: none;
		font-size: 1.2rem;
		margin: 0 0 20px 0;
		font-family: var(--articleFont);
		font-style: italic;
		background-image: url(../images/icons/benefit.png);
		background-position: 0px 4px;
		background-repeat: no-repeat;
		padding: 0 0 0 38px;
	}

	.newsletter_box .nl_benefits_box li strong {
		font-style: normal;
	}

	.nl_form {
		background-color: var(--baseBackground);
		margin: 30px 0 10px 0;
		padding: 30px;
		text-align: center;
	}

	.nl_form h4{
		font-size: 1.1rem;
		font-weight: 500;
		line-height: 1.7;
		margin: 0 0 30px 0;
	}

	.nl_form p {
		font-family: var(--articleFont);
		font-weight: normal;
		font-size: 1.0rem;
		color: var(--standardTextColor);
		line-height: 1.5;
		font-style: italic;
	}

	.nl_form input {
		width: 100%;
		text-align: center;
		padding: 14px;
		font-family: var(--headlineFont);
		font-size: 1rem;
		font-style: normal;
		color: var(--heightlightinaktivColor);
		border: 1px solid var(--heightlightColor);
		margin: 1px 0 1px 0;
	}

	.nl_form input:focus {
		outline: none;
		margin: 0;
		border: 2px solid var(--heightlightColor);
	}

	.nl_form button {
		width: 100%;
		padding: 14px;
		font-size: 1rem;
		font-family: var(--headlineFont);
		color: var(--standardTextColor);
		background-color: var(--heightlightColor);
		border: 1px solid var(--heightlightColor);
		font-weight: 500;
		margin: 3px 0 30px 0;
		font-style: normal;
	}

	.nl_form button:hover {
		margin: 1px 0 32px 0;
		box-shadow: 3px 3px 8px var(--darkerTextColor);
		filter: brightness(1.1);
		transition:all 0.3s;
		}

/* Preistabelle Styles
-------------------------------------------------------------------*/

.price_box .price_box_plan {
	background-color: var(--barBackground);
	border-radius: 5px;
	margin: 15px 0 15px 0;
	padding: 10px;
	text-align: center;
	font-family: var(--articleFont);
	color: var(--standardTextColor);
	font-size: 1.1rem;
}

.price_box .plan_selected {
	background-color:var(--colorGold);
	}

.price_box h2 {
	margin: 15px 5px 15px 5px;
	color: var(--baseBackground);
	font-weight: 700;
}

.price_box dl{
	width: 100%;
	float: left;
	background-color: var(--heightlightBackground);
	border-radius: 5px;
}

.price_box dt {
	padding: 10px 5px 10px 5px;
}

	.price_box dt i{
		font-size: 1.3rem;
		font-weight: 400;
	}

	.price_box ._arrowdown_ {
		background-image: url(../images/hand_arrow_down.png);
		background-repeat: no-repeat;
		background-position: bottom -1px  right 20px;
		background-size: 32px;
		padding: 10px 5px 30px 5px;

	}


.price_box dd {
	min-height: 60px;
	padding: 0 5px 20px 5px;
	font-weight: 500;
	font-size: 1.1rem;
}

	.price_box ._price_ {
		font-size: 1.6rem;
		font-weight: 700;
	}

.price_box dd span{
	font-size: 0.8em;
	font-weight: 400;
}


.price_box .btn_ a{
	padding: 12px 10px 12px 10px;
	width: 95%;
	margin: 0;
	box-shadow: none;
	font-size: 1.3rem;
}

.price_box img {
	width: auto;
	height: 118px;
}


/* CEO-Box Styles
-------------------------------------------------------------------*/

div.ceo_box {
	border-left: 7px solid var(--barBackground);
	padding: 30px 0 30px 20px;
	margin: 30px 0 0 0;
	background-color: var(--heightlightBackground);
}

div.ceo_box div.ceo_box_face {
	text-align: left;
	padding: 30px 0 0 0;
}

div.ceo_box p{
	margin: 0;
	font-size: 1.8em;
	line-height: 1.7;
}

div.ceo_box div.ceo_box_face img {
	width: 50%;
	height: auto;
	border-radius: 100%;
}

/* Utility Styles
-------------------------------------------------------------------*/
.hidden{display:none!important;}