@import url(normalize.min.css);
@import url(animate.css);
@import url(navigation.css);
@import url(navigation-custom.css);
@import url(swipebox.min.css);

/****************************************  GENERAL  ****************************************/

html, body, #wrapper {height:100%}
html, body, ul {border:0; margin:0; padding:0}
html {scroll-behavior:smooth}
body {background:#fff; color:#666; font:400 17px 'Poppins', Arial, sans-serif; font-display:swap; line-height:24px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
img, iframe {border:none}
	iframe {margin:20px 0}
strong, b {font-weight:600}
p {margin:15px 0}
	blockquote p {margin:18px 0 5px}

div.zweitel {float:left; margin-right:60px; width:570px}
	div.zweitel:nth-of-type(2) {margin-right:0}
div.drittel {float:left; margin-right:45px; width:370px}
	div.drittel:nth-of-type(3) {margin-right:0}
div.viertel {float:left; width:300px}	


/*** Links ***/
a, div {outline:none}

#content a:link, #content a:visited {color:#43a2de; text-decoration:none}
#content a:active, #content a:hover {color:#246ab0}

#offers a:link, #offers a:visited {color:#246ab0}

footer a:link, footer a:visited {color:#fff; text-decoration:none}
footer a:active, footer a:hover {text-decoration:underline}

a[href ^="mailto:"]:before {content:"\f0e0"; color:#bbb; font-family:'Font Awesome 5 Free'; font-weight:900; padding-right:6px}
a[href ^="tel:"]:before {content:"\f879"; color:#bbb; font-family:'Font Awesome 5 Free'; font-weight:900; padding-right:6px}
a.extern:before {content:"\f0ac"; color:#bbb; font-family:'Font Awesome 5 Free'; font-weight:900; padding-right:6px}
	footer a[href ^="mailto:"]:before, footer a[href ^="tel:"]:before {color:#fff}

a[href $='.pdf']:before, a[href $='.PDF']:before, a[href $='.pdf.html']:before {color:#cc3333; content:"\f1c1"; font-family:'Font Awesome 5 Free'; font-weight:900; padding:0 6px 0 0}
a[href $='.doc']:before, a[href $='.DOC']:before, a[href $='.docx']:before, a[href $='.DOCX']:before,
a[href $='.doc.html']:before, a[href $='.docx.html']:before {color:#2a5699; content:"\f1c2"; font-family:'Font Awesome 5 Free'; font-weight:900; padding:0 6px 0 0}
a[href $='.xls']:before, a[href $='.XLS']:before, a[href $='.xlsx']:before, a[href $='.XLSX']:before,
a[href $='.xls.html']:before, a[href $='.xls.html']:before {color:#1e6c41; content:"\f1c3"; font-family:'Font Awesome 5 Free'; font-weight:900; padding:0 6px 0 0}

a.vor:before {content:"\f30b"; font-family:'Font Awesome 5 Free'; font-weight:900; padding-right:5px}
a.zurueck:before {content:"\f30a"; font-family:'Font Awesome 5 Free'; font-weight:900; padding-right:5px}
	#breadcrumbs a.vor:before {content:inherit}
	#breadcrumbs a.vor:after {content:"\f30b"; font-family:'Font Awesome 5 Free'; font-weight:900; padding-left:5px}
	
a.tel {color:#fff; font-weight:normal; text-decoration:none}
	a.tel:hover i {color:#fff}
	
/*** Headings ***/
h1 {color:#54a9db; font-size:30px; font-weight:600; padding:0; margin:0 0 30px 0; line-height:38px}
	.familienhilfe h1 {color:#de7a91}
	.spf h1 {color:#c5c655}
	.ueber h1 {color:#938dbc}

h2 {color:#aed283; font-size:22px; font-weight:600; padding:0; margin:50px 0 10px; line-height:24px}
	h2.rosa {color:#de7a91}
	h2.gruen {color:#b2b31e}
		h2.gruen:nth-of-type(2) {margin-top:20px}
	.spf h2 {color:#938dbc}	
	.familienhilfe h2 {color:#f49c71}
	.ueber h2 {color:#54a9db}

h3 {color:#666; font-size:19px; font-weight:600; padding:0; margin:25px 0 10px}	


/****************************************  STRUCTURE  ****************************************/
#wrapper {margin:0 auto; width:100%; margin-bottom:-100px} 
	body > #wrapper {height:auto; min-height:100%}
	
div.container {margin:0 auto; overflow:hidden; width:1200px}
	header div.container {position:relative; overflow:visible}

header {background:#fff; position:fixed; height:130px; margin:0; width:100%; z-index:999; -webkit-transition:height .3s; -moz-transition:height .3s; -ms-transition:height .3s; -o-transition:height .3s; transition:height .3s}
header.smaller {-webkit-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.1); -moz-box-shadow:0px 2px 2px 0px rgba(0,0,0,0.1); box-shadow:0px 2px 3px 0px rgba(0,0,0,0.1)}
	
nav#navigation {float:left; height:80px; margin:0 0 0 30px; width:900px; -webkit-transition:height 0.3s; -moz-transition:height 0.3s; -ms-transition:height 0.3s; -o-transition:height 0.3s; transition:height 0.3s}

div#logo {float:right; margin:0 30px 0 0; height:80px; width:131px; -webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}
	div#logo a {background:url(../images/logo_home.svg) no-repeat; background-size:131px 80px; display:inline-block; height:80px; margin-top:20px; text-indent:-9999px; width:131px; z-index:100;
	-webkit-transition:all .3s; -moz-transition:all .3s; -ms-transition:all .3s; -o-transition:all .3s; transition:all .3s}
	.familienhilfe div#logo a {background:url(../images/logo_familienhilfe.svg) no-repeat}	
	.spf div#logo a {background:url(../images/logo_spf.svg) no-repeat}	
	.ueber div#logo a {background:url(../images/logo_ueber.svg) no-repeat}	
			
div#slider {height:335px; position:relative; padding-top:100px; overflow:visible; width:100%; z-index:-1}
	div#slider div {height:335px; margin:0 20px}
	
.home div#slider, .home div#slider div {height:450px}	
	
#content {margin:60px auto 40px; padding-bottom:100px; position:relative; width:100%}
	#welcome, .welcome {text-align:center}
	#offers {padding:40px 0; overflow:hidden}	
	#text {margin-bottom:40px; overflow:hidden; position:relative}

footer {background:#a3dbf4; color:#fff; height:100px; margin-top:-100px; position:relative; min-width:1200px}
	#footerwrapper {font-size:14px; margin:0 auto; padding-top:15px; overflow:hidden; width:1200px}
		#footerwrapper div.drittel:nth-of-type(1) {width:300px}
			#footerwrapper div.drittel img {height:60px; width:auto; margin-right:50px}
		#footerwrapper div.drittel:nth-of-type(2) {width:300px}
		#footerwrapper div.drittel:nth-of-type(3) {float:right; text-align:right; margin-right:30px; width:300px}

.familienhilfe footer {background:#ffc483}
.spf footer {background:#938dbc}

/****************************************  CONTENT & FORMS  ****************************************/
#text ul {margin:10px 0 20px 22px; list-style:none}
	
#text ul li {padding:6px 0; position:relative}
	#text ul li:before {content:"\f111"; font-family:'Font Awesome 5 Free'; font-weight:900; color:#54a9db; position:absolute; font-size:8px; margin-left:-20px}
	.spf #text ul li:before {color:#938dbc}
	.familienhilfe #text ul li:before {color:#f49c71}

.bildlinks {float:left; margin:0 20px 20px 0}
.bildrechts {float:right; margin:0 0 20px 20px}
.bildzentriert {display:block; margin-left:auto; margin-right:auto}

.clear {clear:both; display:block; overflow:hidden}
div.separator {border-top:1px solid #e0e0e0; clear:both; height:30px; margin-top:30px}

div.left {float:left; width:50%}
div.right {float:right; width:50%}

blockquote {margin:0 0 20px; padding-bottom:20px; position:relative}
	/*blockquote:before {content:""; position:absolute; bottom:0; left:0; right:0; margin:auto; height:1px; width:30%; border-bottom:1px solid #ddd}*/
	blockquote:after {content:""; background:url(../images/icon_spf.png) center center no-repeat; background-size:20px 20px; display:block; height:20px; opacity:0.6}
	.familienhilfe blockquote:after {content:""; background:url(../images/icon_familienhilfe.png) center center no-repeat; background-size:20px 20px; display:block; height:20px}

.small {font-size:15px; line-height:15px; font-style:italic}

div.columns {columns:2; -webkit-columns:2; -moz-columns:2}

#breadcrumbs {border-top:1px solid #e0e0e0; height:30px; margin-top:50px; display:none; visibility:hidden; font-size:15px}
	#content #breadcrumbs a.zurueck {display:block; float:left; padding-top:10px}
	#content #breadcrumbs a.vor {display:block; float:right; padding-top:10px}

/*** Offers ***/
#offers ul.offers {list-style:none}
#offers ul.offers li {float:left; text-align:right; position:relative; top:0; margin:0 80px 0 0; height:160px; width:520px; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s}
	#offers ul.offers li:nth-child(2) {text-align:left; margin:0 0 0 80px}
#offers ul.offers li a {color:#666; text-decoration:none}	
#offers ul.offers li img {height:auto; width:75px}

/*** Buttons ***/
.topbutton {position:fixed; bottom:35px; right:20px; background:#54a9db; border-radius:40px; width:40px; height:40px; display:block; text-decoration:none; display:none; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
.topbutton i {color:#fff; margin:0; position:relative; left:11px; top:8px; font-size:20px; -webkit-transition:all 0.3s linear; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease}
.topbutton:hover {opacity:0.8}
.topbutton:hover i {top:3px}

.familienhilfe .topbutton {background:#de7a91}

/*** Tables ***/ 
table {table-layout:fixed; border-spacing:0; margin-bottom:40px; width:100%}
	.accordion table {margin-top:20px}
table, th, td {border-bottom:1px solid #e0e0e0; border-collapse:collapse; vertical-align:top}
	th {font-weight:normal; text-align:left; padding:15px 0; width:200px}
	.kosten th {width:50%}	
td {padding:15px 0}
