/* Import mmenu.css */ @import url('mmenu.css'); 
/* Import fonts.css (inkl. icons.css) */ @import url('fonts.css'); 
/* Import creatix24.css (inkl. demo.css) */ @import url('creatix24.css'); 



/* Undo .nested FIRST-CHILD und Anzeige col-4 auf schmalen Endgeraeten*/
@media screen and (max-width: 768px) { .nested .col-4:FIRST-CHILD {padding-left:10px;} .nested .col-4  {padding-bottom:40px;}}


/* Nav */
a {color: #112738; text-decoration: none}
a:hover, a:focus {color: #887639}
a:visited {color: #112738;}

#kontakt h3>a, a.golden, #vorstellung p>a  {color: #877538}
#kontakt h3>a:hover {color: #112738}


.content-box>a {text-decoration: underline;}

/* OLD BUTTON 
button.gold, button.sales, button.leading, button.positionierung  {color: #112738; background: #b39d4f; margin-top: 1em;}
button.sales {background: #bdc6d2; background: #bfdadd;}
button.leading {background: #bebcc9;}
button.positionierung {background: #e3d19e;}
button>a, button>a:hover {text-decoration: none}
button>a:hover {color: #112738;}
button.gold:hover {background: #c7af58; }

NEW GOLD a.button.gold {background: #c9b159; } */
button {background-color: red !important;}

.button.gold, .button.sales, .button.leading, .button.positionierung  {font-size: 1.1em; color: #112738; margin-top: 1em; display: inline-block; border: 1px solid silver}
a.button, button>a:hover {text-decoration: none}
a.button:hover {color: #112738;}
a.button.gold {background: #d5dfdf;  }
a.button.gold:hover, .button.sales:hover, .button.leading:hover, .button.positionierung:hover {background: #fff; }
a.button.sales {background: #bdc6d2; background: #bfdadd;}
a.button.leading {background: #bebcc9;}
a.button.positionierung {background: #e3d19e;}
#slogan a.button.gold, #weitere-angebote a.button.gold  {background: #b39d4f;  }
#slogan a.button.gold:hover, #weitere-angebote a.button.gold:hover {color: #000; background: #c7af58;}

html, body {font-family: "Lato", sans-serif; color: #112738;  line-height: 1.6em; font-size: inherit; background: #fff; }

/* General and Typography */ 
h1, h2, h3, h4, h5, h6 {font-family: "Montserrat", sans-serif;font-weight: 500; padding: 0; color:#112738;}
h1 {font-size: 28px; font-size: 1.75rem; line-height: 1.25; margin-top: 2em; margin-bottom: 1em;}
h2 {font-size: 23px; font-size: 1.4375rem; line-height: 1.2173913043; margin-top: 2.4347826087em; margin-bottom: 1.2173913043em;}
h3 {font-size: 19px; font-size: 1.1875rem; line-height: 1.1052631579; margin-top: 2.9473684211em; margin-bottom: 1.4736842105em;}
h4, h5, h6 {font-size: 16px; font-size: 1rem; line-height: 1.3125; margin-top: 3.5em; margin-bottom: 1.75em;}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child, h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child {	margin-top: 0;}
blockquote {font-family: "Lato", sans-serif}

#header h1 {margin-top: 0; padding: 10px 0;}
@media screen and (min-width: 768px) { #header   {display: none}}
h4 {letter-spacing: 0.140625em; text-transform: uppercase;}
h6 {font-style: italic;}
h1+h2, h2+h3 {	margin-top: -10px;}
h3.one-line, .one-line { hyphens: none;  white-space: nowrap;  overflow: hidden;}
p, ul {font-size: 1.1em;}
ul {padding-bottom: 1em;}


div.sprungmarke {width: 100px; background: transparent; height: 2px;margin-top: -40px;
  margin-bottom: 40px;}
	@media screen and (min-width:769px) { div.sprungmarke {margin-top: -60px;  margin-bottom: 60px;}}

#content img {border-radius: 50px;}
	@media screen and (max-width:769px) { #content img {max-width: 95%}}
#arbeitsfelder img, #angebote img, #fragebogen img, #angebot img {filter: saturate(37%)  drop-shadow(7px 11px 13px #888);}
#arbeitsfelder img, #angebote img, #angebot img  {filter: saturate(67%) drop-shadow(7px 11px 13px #888);}



/* Filippa Intro Outro*/
#intro, #outro {display: flex; flex-direction: row; justify-content: flex-start; align-items: center;}
#intro {padding: 35px 10px 25px 10px; }
#intro img, #outro img {height: 80px;width: auto;  margin-right: 0px; } /* Logo temporaer ausgeblendet*/
#intro h2, #outro h2 {font-size: 1em; letter-spacing: .07em; font-weight: normal; margin-top: -1.5em;  }
#intro h1, #outro h1 {padding-left: 30px;  padding-top: 10px;  padding-bottom: 3px; }
#intro h2, #outro h2 {padding-left: 30px; margin-bottom: 0 }

/* Filippa Slogan */
#slogan {padding: 0; background: #d5dfdf;}
#slogan>.content-box {padding-left: 30px;}
#slogan div img {vertical-align: text-bottom; margin-bottom: -2px;}
#slogan h1 {font-size: 2.2rem; line-height: 1.2; }
#slogan h1, #slogan p {text-wrap: balance;}
#slogan p, #fragebogen p {padding-bottom: 1em;}

/* Filippa Arbeitsfelder */
#arbeitsfelder {padding-top: 70px; padding-bottom: 30px}
@media screen and (min-width:769px) {
div#arbeitsfelder div.col-4:nth-child(1)  {padding-right: 30px}
div#arbeitsfelder div.col-4:nth-child(3) {padding-left: 30px} 
div#arbeitsfelder div.col-4:nth-child(2) {padding: 10px 15px;} } /* Padding mittleres Element */
#arbeitsfelder h2 {margin-top: 1.4em; text-align: center;  text-wrap: balance; }
#arbeitsfelder h3, #fragebogen h2, #kontakt h2, #angebot h1 {text-align: center;  text-wrap: balance; font-size: 2em; margin-top: 1em; }
#kontakt h2.smaller {font-size: 1.7em; }
#kontakt h3 {text-wrap: balance; font-size: 1.25em; line-height: 1.2em;}
#arbeitsfelder p {text-align: center; text-wrap: balance;}
#kontakt dt {font-family: "Lato", sans-serif;   font-size: 1em; padding-top: 10px;}

/* Filippa Angebot */
@media screen and (min-width:769px) {
div#angebote div.col-4:nth-child(1)  {padding-right: 30px}
div#angebote div.col-4:nth-child(3) {padding-left: 30px} 
div#angebote div.col-4:nth-child(2) {padding: 10px 15px;} } /* Padding mittleres Element */
#angebote h3, #angebotsdetsdetails h3, #faqs h3 {min-height: 55px; margin-top: 1.4em;font-size: 1.5em; text-align: center; }
#fragebogen h3, #angebot h2  {text-wrap: balance; font-size: 1.5em;}

/* Einzelseite Angebotsdetails */
#angebot h1 {font-size: 28px; font-size: 2.5rem; margin-bottom: .5em;}
#angebot .flex-row {justify-content: space-between; }

#angebotsdetsdetails h3, #faqs h3  {margin-bottom: 20px;   }
#angebotsdetsdetails  {padding: 30px 10px 40px 10px }
#angebotsdetsdetails .flex-column {padding: 0 15px; }
#angebotsdetsdetails p {font-weight: bolder; text-align: center; hyphens: none;}
#angebotsdetsdetails ul, #faqs ul {width: 100%; list-style-type: square;}
#faqs p {text-align: center;}
#faqs p.text-left {text-align: left;}
#faqs .col-4  {height: auto !important; }
#faqs .flex-column {padding: 0 20px;  }

#angebotsdetsdetails, #faqs {display: flex; }
	@media screen and (max-width:900px) { 
			#angebotsteaser {align-items: flex-start;}  
			#angebotsteaser img {margin-top: 40px;}  
}
	@media screen and (max-width:769px) { 
			#angebotsteaser, #angebotsdetsdetails, #faqs {display: block}
			#angebotsteaser img {width: 95%; margin: 40px 20px 0 10px;}
			#angebot h2 {text-align: center;}
			#angebotsdetsdetails .col-3, #faqs .col-3 {margin-bottom: 20px; width: 70% !important; margin-left: 15%;}}
	@media screen and (max-width:480px) { 
			#angebotsdetsdetails .col-3, #faqs .col-3 {width: 100% !important; margin-left: 0%;}}

#angebotsdetsdetails .col-3, #faqs .col-3 {border: 2px solid #d5dfdf; margin-right: 20px; border-radius: 25px;}
#angebotsdetsdetails .col-3  {background: #d5dfdf; }
#faqs .col-4 { margin-right: 60px; }
#faqs .col-4:last-of-type  { margin-right: 20px;}
#faqs h3  {padding-bottom: 20px; }
#faqs ul li {hyphens: none;  white-space: nowrap;  } 
#faqs+#kontakt {padding-top: 50px;}

/* Kontaktformular  */
input, textarea, select, p#question {font-family: "Lato", sans-serif; color: #000;  border: 1px dotted #112738; width: 80% }
select {padding: 2px; }
input[type="checkbox"]{ width: 20px; clear: both;}
input#submit, input#abschicken {color: #112738; font-size: 1.1em; background: #d5dfdf; border-color: #112738; cursor: pointer; }

p#question {font-size: 1em; padding: 5px; padding-left: 30px; border: 0; }

#fragenkatalog {border: 5px solid #bebcc9; border-radius: 50px;  margin: 30px 0 20px 0; padding: 0 0 20px 30px; }
#fragenkatalog.sales {border-color: #bfdadd;} input#abschicken.sales {background-color: #bfdadd;}
#fragenkatalog.leading {border-color: #bebcc9;} input#abschicken.leading {background-color: #bebcc9;}
#fragenkatalog.positionierung {border-color: #e3d19e;} input#abschicken.positionierung {background-color: #e3d19e;}
#fragenkatalog h2 { margin-top: 1.2173913043em; margin-bottom: 0;}
#fragenkatalog dt { margin-top: 20px;}
#fragenkatalog input, #fragenkatalog textarea, #fragenkatalog select { max-width: 400px; }
#fragenkatalog input[type="radio"] { max-width: 30px; margin-bottom: 0px;}

#weitere-angebote {padding-top: 30px; padding-bottom: 30px; }

/* Footer  */
footer {background: #d5dfdf; padding: 50px 10px;}

/* Display  */
#vorstellung, #angebote, #fragebogen {padding-bottom: 100px;}
#slogan>.content-box, footer>.content-box, #kontakt {padding-left: 25px;}
#slogan>.content-box{padding-left: 35px;}
#fragebogen, #angebot {padding-left: 15px;}
#fragebogen h3, #angebot h2 {margin-top: 1em;;}

/* Display 800px und 400px styles */
@media screen and (max-width: 830px) {
		#slogan h1 {font-size: 1.7rem; padding-top: 1em; }
		#slogan img {border-radius: 50px; } }

@media screen and (max-width: 469px) {
		#slogan img   {display: none;}
		#vorstellung, #fragebogen>div  {flex-direction: column; } 
		#kontakt h2 {font-size: 1.8em}
		#kontakt h3 {hyphens: auto;}
		#arbeitsfelder h3 {margin-bottom: 0; }
		#angebote button, #angebote h3, #angebotsdetsdetails h3, #faqs h3  {margin-bottom: 1em; }
		#vorstellung, #angebote  {padding-bottom: 50px;}
		#fragebogen, #intro {padding-bottom: 30px;} }