@import url("https://hello.myfonts.net/count/3987b3");
@font-face {font-family: 'SketchetikFillBold';src: url('../fonts/3987B3_0_0.eot');src: url('../fonts/3987B3_0_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3987B3_0_0.woff2') format('woff2'),url('../fonts/3987B3_0_0.woff') format('woff'),url('../fonts/3987B3_0_0.ttf') format('truetype');} 
@font-face {font-family: 'SketchetikFillLight';src: url('../fonts/3987B3_1_0.eot');src: url('../fonts/3987B3_1_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3987B3_1_0.woff2') format('woff2'),url('../fonts/3987B3_1_0.woff') format('woff'),url('../fonts/3987B3_1_0.ttf') format('truetype');}
@font-face {font-family: 'SketchetikFillRegular';src: url('../fonts/3987B3_2_0.eot');src: url('../fonts/3987B3_2_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3987B3_2_0.woff2') format('woff2'),url('../fonts/3987B3_2_0.woff') format('woff'),url('../fonts/3987B3_2_0.ttf') format('truetype');}
@font-face {font-family: 'SketchetikFillBlack';src: url('../fonts/3987B3_3_0.eot');src: url('../fonts/3987B3_3_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3987B3_3_0.woff2') format('woff2'),url('../fonts/3987B3_3_0.woff') format('woff'),url('../fonts/3987B3_3_0.ttf') format('truetype');} 
@font-face {font-family: 'SketchetikLight';src: url('../fonts/3987B3_4_0.eot');src: url('../fonts/3987B3_4_0.eot?#iefix') format('embedded-opentype'),url('../fonts/3987B3_4_0.woff2') format('woff2'),url('../fonts/3987B3_4_0.woff') format('woff'),url('../fonts/3987B3_4_0.ttf') format('truetype');}
 
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
* { outline:none; box-sizing: border-box;  }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block; }
ol, ul { list-style: none; }
blockquote, q {
	quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none; }
table {
	border-collapse: collapse;
	border-spacing: 0; }


body            { margin:0; font-family:SketchetikFillLight, Arial, sans-serif; font-size:15px; 
				  				line-height:1.2; color:#0073aa; overflow-y:scroll;
				  				-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; 
				  			  background-color:#fefefe;}

.orange { color:#ed8c01; }
.blau { color:#0073aa; }
.SketchetikFillBold { font-family: SketchetikFillBold; }
.SketchetikFillLight { font-family: SketchetikFillLight; }
.SketchetikFillRegular { font-family: SketchetikFillRegular; }
.SketchetikFillBlack { font-family: SketchetikFillBlack; }
.SketchetikLight { font-family: SketchetikLight; }


header          				  { position:fixed; z-index:1000; width:100%; min-height:3rem;
														background-color:rgba(255,255,255, 1); }
header.open     				  { height:auto; /*padding-bottom:2rem;*/ background-color:rgba(255,255,255, 1); }
header div      				  { overflow:hidden; position:relative; max-width:1024px; margin:0 auto; }
main            				  { padding-top:6.5rem; }
body, .container, section { background-color:#fff;  }
.col-1, .col-2, .col-3, 
.col-1-und-2              { margin:0 1rem; }
.col-3                    { order:1; padding-top:1rem; }

.mb0 											{ margin-bottom:0 !important; }
#map 											{ padding-top:1rem; }

.home main      				       { padding-top:0; }
.home section img.sprechblase  { position:absolute; background-repeat:no-repeat; background-size:cover; }
.home .col-1    				       { padding-top:100px; }
.home .col-3                   { margin-top:36px; padding-top:0; }
.home .col-3 p 								 { text-align:center; margin-bottom:0; }
.home .col-3 img               { margin-bottom:0; margin-top:32px; }
.home .col-3 img:first-of-type { margin-top:0; }

.suechsch img                  { background-image:url(/site/templates/img/suechsch.svg); }
.liegen img                    { background-image:url(/site/templates/img/liegen.svg); }
.lehrstell img                 { background-image:url(/site/templates/img/lehrstell.svg); }
.begleiten img                 { background-image:url(/site/templates/img/begleiten.svg); }
.suechsch:hover img, #suechsch-arbeit .suechsch img  { background-image:url(/site/templates/img/suechsch_blau.svg); }
.liegen:hover img, #bleibt-arbeit-liegen .liegen img { background-image:url(/site/templates/img/liegen_blau.svg); }
.lehrstell:hover img, #lehrstell .lehrstell img      { background-image:url(/site/templates/img/lehrstell_blau.svg); }
.begleiten:hover img, #begleiten .begleiten img      { background-image:url(/site/templates/img/begleiten_blau.svg); }

.home-section-1 { background-image: url(/site/templates/img/bg_home_200.svg); }

.home-section-2 { background-image: url(/site/templates/img/bg_suechsch_200.svg); }
.home-section-2 .suechsch img  { top:112px; left:218px; width:332px; height:194px; }
.home-section-2 .liegen img    { top:110px; left:554px; width:185px; height:111px; }
.home-section-2 .lehrstell img { top:228px; left:508px; width:175px; height:126px; }
.home-section-2 .begleiten img { top:198px; left:658px; width:202px; height:119px; }

.home-section-3 { background-image: url(/site/templates/img/bg_lehrstell_200.svg); }
.home-section-3 .suechsch img  { top:140px; left:230px; width:189px; height:110px; }
.home-section-3 .liegen img    { top:86px; left:390px; width:185px; height:111px; }
.home-section-3 .lehrstell img { top:176px; left:340px; width:274px; height:197px; }
.home-section-3 .begleiten img { top:130px; left:548px; width:202px; height:119px; }

.home-section-4 { background-image: url(/site/templates/img/bg_liegen_200.svg); }
.home-section-4 .suechsch img  { top:148px; left:242px; width:189px; height:110px; }
.home-section-4 .liegen img    { top:86px; left:400px; width:317px; height:190px; }
.home-section-4 .lehrstell img { top:232px; left:312px; width:175px; height:126px; }
.home-section-4 .begleiten img { top:246px; left:550px; width:202px; height:119px; }

.home-section-5 { background-image: url(/site/templates/img/bg_begleiten_200.svg); }
.home-section-5 .suechsch img  { top:108px; left:202px; width:189px; height:110px; }
.home-section-5 .liegen img    { top:86px; left:370px; width:185px; height:111px; }
.home-section-5 .lehrstell img { top:186px; left:278px; width:175px; height:126px; }
.home-section-5 .begleiten img { top:176px; left:430px; width:313px; height:184px; }


h1, .h1		  { font-weight:400; font-family:SketchetikFillBlack, Arial, sans-serif; font-size:1.3125rem; color:#007db1;
							margin-bottom:1.25rem; padding-top:1rem; }
.home h1 { font-size:1.5rem; font-family: SketchetikFillBold, Arial, sans-serif; }
.home h1 span, .home h1 span.gross, .home h1 strong  { font-size:3.2rem; font-family:SketchetikFillBold, Arial, sans-serif; }
h1 a.h1_link   { float:right; font-family:SketchetikFillLight, Arial, sans-serif; font-size:15px; padding-top:5px; }
h2		      { font-weight:400; font-size: 1.3125rem; font-family:SketchetikFillBlack, Arial, sans-serif; color:#ed8c01;
							margin-bottom:1rem; }
h2.fett-abstand, h2.fett, strong { font-weight:400; font-family:SketchetikFillBlack, Arial, sans-serif; color:#ed8c01; }
.blau strong {  color:#007db1; }
h2.fett-abstand, h2.fett     { margin-bottom:.25rem; color:#007db1; font-size:.9375rem; }
h2.fett span, h2.fett-abstand span { display:block; font-family: SketchetikFillLight, Arial, sans-serif;}
h2.fett-abstand.orange, h2.fett.orange, .home h1 { color:#ed8c01; }

#logo       { margin:1.5rem 1rem 0; }
#logo img   { width:210px; }
#logo a     { border:0; }

p, li, h2.fett-abstand, .col-1 ul, .col-2 ul           { margin-bottom:1rem; }
p { line-height:1.3; }
article { margin-bottom:2rem; }
.col-1 li, .col-2 li { margin-bottom:0; }
.col-1 ul, .col-2 ul, ul#downloadbereich { list-style:disc; padding-left:17px; }
ul#downloadbereich li { color:#000; line-height: 1.4; margin-bottom:.4rem; font-family: SketchetikFillRegular; max-width:500px; }
ul#downloadbereich li a { border-bottom:1px solid #fff; }
ul#downloadbereich li a:hover { border-bottom:1px solid #0073aa; }
p.artikel { margin-bottom:.2rem; }
div.artikel-details { display:none; }
p.lead, h2.zwischentitel, p.zwischentitel, h2.zwischentitel-abstand, .home .col-1 ul       { font-family: SketchetikFillLight, Arial, sans-serif; font-size:1.3125rem; }
h2.zwischentitel { margin-bottom:0; }
a, a:hover, a:active, 
a:visited    	{ text-decoration:none; border-bottom:1px solid #0073aa; color:#0073aa; }
a:hover { border-bottom:1px solid #fff; }
strong a, strong a:active, 
strong a:visited    	{ border-bottom:1px solid #ed8c01; color:#ed8c01; } 
strong a:hover { border-bottom:1px solid #fff; color:#ed8c01; }

.home .col-1 .h1   { padding-top:0; }
.home .col-1 ul { list-style:none; padding-left:0; margin-bottom:1.5rem; }
.home .col-1 li { margin-bottom:.3rem; }

figcaption { display:none; }
.col-2 ul.personen_liste { list-style:none; padding-left:0; }
.col-2 ul.personen_liste li { margin-bottom:14px; }
.col-2 ul.personen_liste li span { color:#ed8c01; }
ul.personen_liste .details { margin-top:0; display:none;}
ul.personen_liste .details img { padding-top:6px; }
ul#vorstand.personen_liste .details img { padding-top:0; }
a.auf_zu { border:0; display:inline-block; margin-top:6px; width:10px; height:12.5px; background:#fff url(/site/templates/img/auf_zu.svg) no-repeat -10px 0;  }
a.auf_zu:hover { background-position:0 0; }
a.auf_zu.open { background-position:-10px -12.5px; }
a.auf_zu.open:hover { background-position:0 -12.5px; }
#vorstand a.auf_zu { margin-top:2px; }

/* ---- MAINNAV ---- */
.home nav#mainnav      { display:none; background-color:rgba(255,255,255,.95); }
nav#mainnav            { display:none;  background-color:#f9f9f9; 
								      	 margin:0 1rem; padding:18px 0 18px; }
nav#mainnav.open       { display:block; }
nav#mainnav ul         { list-style-type:none; margin-top:0; }
nav#mainnav li         { list-style:none; display:block; margin:0; padding:0; font-family: SketchetikFillRegular; 
								         font-size:1.3125rem; line-height: 1.5; }
nav#mainnav a          { border:0; }
nav#mainnav li::before { content:"> "; }
nav#mainnav li a:hover { border-bottom:1px solid #0073aa; }
nav#mainnav li.current a { color:#ed8c01; }
nav#mainnav li.current a:hover { border-bottom:1px solid #ed8c01; }

#navbut 		{ border:0; position:absolute; right:1.1rem; top:1rem; }
#navbut::before { width:1.9rem; height:auto; vertical-align:top; 
                  display:inline-block; content:url(/site/templates/img/hamburger_i.svg); }
#navbut:hover::before { content:url(/site/templates/img/hamburger_a.svg); }
#navbut.open::before { content:url(/site/templates/img/hamburger_x_i.svg); }
#navbut.open:hover::before { content:url(/site/templates/img/hamburger_x_a.svg); }

footer   { margin:2rem 1rem; }
footer a { margin-left:1rem; }
footer a.current { font-weight:700; border-bottom:1px solid #fff; }

label {display:block; margin-top:1.5rem; margin-bottom:.2rem}
#newsletter label { margin-top:.75rem; }
#newsletter label:first-of-type { margin-top:0; }
label:fist-of-type { margin-top:0; }
#arbeitsart label { margin-top:5px; color:#ed8c01; }
#datum, #vor_nachname, #ort, #telefon, #email, #pass, #username, #arbeitsort, #strasse_nummer, #plz_ort  { width:100%; }
#bemerkungen, #postadresse { width:100%; height:120px; }
#postadresse { height:74px; }
#zeit_von, #zeit_bis { width:90px; margin:0 4px; }
input, textarea { border:1px solid #007db1; font-size:.9rem; color:#333; padding:2px 3px; font-family:SketchetikFillLight, Arial, sans-serif; }
input[type="checkbox"], input[type="radio"]  {
  display:none;
}
input[type="checkbox"] + label::before,
input[type="radio"] + label::before {
  width: 12px;
  height: 12px;
  border-radius:4px;
  border: 1px solid #007db1;
  background-color: #fff;
  display: block;
  content: "";
  float: left;
  margin-right: 7px;
}
input[type="checkbox"]:checked+label::before,
input[type="radio"]:checked+label::before {
  box-shadow: inset 0 0 0 2px #fff;
  background-color: #007db1;
}
#submit { padding:7px 20px 4px; margin:18px 0; border-radius:8px; color:#007db1; cursor:pointer; }
#submit:hover { color:#ed8c01; border:1px solid #ed8c01; }
label[for="subject"] { display: none; visibility: hidden; }

.error { color: red; }

#arbeitgeber img { max-width:200px; display:block; }
#arbeitnehmer img { max-width:100px; display:block; margin-bottom:12px; }
#arbeitnehmer p { margin-bottom:1.75rem; }
.c3dummy							 { float:right; width:1px; height:200px; display:none; }
.home section          { width:100vw; max-width:100vw; }

@media (max-width:479px) {
	.home .home-section-1  { min-height:600px; }
	.suechsch img          { top:220px; left:12px; width:222px; height:130px;  z-index:4; }
	.liegen img            { top:104px; right:16px; width:230px; height:138px; }
	.lehrstell img         { top:320px; left:80px; width:180px; height:130px; z-index:5; }
	.begleiten img         { top:444px; right:26px; width:241px; height:141px; }
	.home .col-1    			 { padding-top:70px; }
	.home .col-3 p         { margin-left:14%; margin-right:14%; }
}
@media (max-width:640px) {
	#arbeitgeber img { margin-left:0 !important; }
	.home .col-3           { text-align:center; } 	
}
@media (min-width:480px) and (max-width:640px) {
	.home .home-section-1  { min-height:520px;}
	.suechsch img          { top:140px; left:12px; width:247px; height:144px; }
	.liegen img            { top:184px; right:42px; width:256px; height:153px; }
	.lehrstell img         { top:300px; left:40px; width:200px; height:145px; z-index:5; }
	.begleiten img         { top:364px; right:16px; width:268px; height:157px; }
	.home .col-3 p         { margin-left:14%; margin-right:14%; }
}
@media (min-width:641px) {
	#logo                  { width:350px; margin:25px 0 0 249px;  }
	.container, section    { margin:0 auto; }
	section#map            { flex-flow: row nowrap; }
	#map .col-3            { display:none; }
	.col-1, .col-2         { margin-left:25px; flex:0 1 400px; }
	.col-1-und-2           { margin-left:49px; width:100%; }  
	.col-1, .col-1-und-2   { order:2; }
	.col-2                 { margin-right:49px; margin-left:249px; order:3;}
	.col-1-und-2           { margin-right:49px; }
	.col-3                 { flex:0 0 175px; margin:6% 0 auto 49px; order:1; }
	nav#mainnav            { display:none; background-color:#f9f9f9; 
									         margin-left:214px; margin-right:25px; padding:18px 0 18px 18px; }

	#navbut 		           { right:49px; }
	.col-2.ohne-h1         { padding-top:2.8rem; }
	footer                 { margin:0; }
	footer div             { margin:2rem 49px; position:relative; }
	footer .cpyr           { position:absolute; display:block; left:0; }
	footer a:first-of-type { margin-left:200px; }
}
@media (min-width:641px) and (max-width:664px) {
	.col-1, .col-2         { flex:0 1 350px; }
	.col-1-und-2           { flex:0 1 774px; }
}
@media (min-width:641px) and (max-width:767px) {
	.home .home-section-1  { min-height:560px; }
	.suechsch img          { top:140px; left:calc(50% - 304px); width:274px; height:160px; }
	.liegen img            { top:124px; right:42px; width:284px; height:170px; }
	.lehrstell img         { top:275px; left:calc(50% - 204px); width:222px; height:161px; }
	.begleiten img         { top:364px; right:26px; width:298px; height:175px; }
}
@media (min-width:768px) and (max-width:899px) {
  .home header           { background-color:rgba(255,255,255, 0); }
	.home nav#mainnav      { margin-left:auto; margin-right:25px; clear:right; float:right;
	                         width:408px; }
	.col-1, .col-2, 
	.col-1-und-2           { flex:1 1 400px; margin-right:49px; }
	#map .col-3            { display:block; }
	.col-1-und-2           { margin-left:25px; }
	#arbeitgeber p         { width:75%; }
	.home .home-section-1  { min-height:680px; background-image: url(/site/templates/img/bg_home.svg); background-position:top left; 
		                       background-repeat:no-repeat; background-size:cover; }
	.home #logo            { float:right; margin:36px 49px 0 0;  }
	.home section > div    { width:100% }
	.suechsch img          { top:140px; left:calc(50% - 304px); width:305px; height:178px; }
	.liegen img            { top:124px; right:42px; width:316px; height:190px; }
	.lehrstell img         { top:290px; left:calc(50% - 174px);; width:247px; height:179px; }
	.begleiten img         { top:424px; right:26px; width:331px; height:194px; }
}
@media (min-width:641px) and (max-width:899px) {
	.home section > div    { overflow:hidden; }
	section                { position: relative; overflow:hidden;}
	.col-3                 { position:absolute; width:175px; top:10%; margin-top:0; }
	.home .col-1           { padding-bottom:50px; }
	.home .col-3           { padding-bottom:20px; }
	.col-1                 { margin-left:249px; }
	.col-1-und-2           { margin-left:0; margin-right:0; padding:0 49px; }
	.c3dummy							 { display:block; }
}
@media (max-width:899px) {
	.home-section-1, .home-section-2, .home-section-3,
	.home-section-4, .home-section-5  { background-image:none; }
	.suechsch img, .liegen img, .lehrstell img,
  .begleiten img 				{ display:none; }
  #home .suechsch img, #home .liegen img, #home .lehrstell img,
  #home .begleiten img  { display:block; }
}
@media (min-width:900px) {
	.home header, header.open { background-color:rgba(255,255,255, 0); }
	.container, section    { display:flex; flex: 1 1 auto; flex-direction: column; }
	.container, section    { margin:0 auto; flex-flow: row wrap; }
	main                   { padding-top:7.5rem; min-height:600px; }
	h1                     { padding-top:0; }
	.home h1               { display:none; }
	#logo                  { float:right; margin:36px 49px 0 0;  }
	.container, section    { max-width:1024px; flex-flow: row nowrap; justify-content: flex-end; }
	.home section          { height:100vh; width:100vw; max-width:100vw; min-height:768px; background-position:top center; 
		                       background-repeat:no-repeat; background-size:auto 100%; justify-content:center; }
	.home section > div    { display:flex; width:100%; position:relative; max-width:1024px; margin:0 auto; min-height:768px; }
	.home-section-1        { min-height:768px; }
	.suechsch img          { top:90px; left:170px; width:377px; height:220px; }
	.liegen img            { top:124px; left:504px; width:370px; height:222px; }
	.lehrstell img         { top:284px; left:238px; width:304px; height:219px; }
	.begleiten img         { top:424px; left:528px; width:368px; height:216px; }
	.col-1                 { margin-right:0; }
	.col-1, .col-2         { margin-left:25px; flex:0 1 350px; }
	.col-1-und-2           { margin-left:25px; flex:0 1 774px; }
	.home .col-1           { flex:0 1 540px; margin-left:55px; padding-top:395px; }
	.home .col-3           { flex:0 0 150px; margin-top:116px; }
	.home .col-3.mt48      { margin-top:48px; }
	.home .col-3.mt233     { margin-top:233px; }
	nav#mainnav            { display:none; float:right; 
									         margin-right:25px; clear:right; padding:18px 0 18px 18px; }
	footer div             { overflow:hidden; position:relative; max-width:1024px; margin:2rem auto; }
	footer .cpyr           { position:absolute; display:block; left:49px; }
	footer a:first-of-type { margin-left:249px; }
	#map .col-3            { display:block; }
	.c3dummy							 { display: none; }
}
@media (min-width:1024px) {
.suechsch img            { left:140px;  }
.liegen img              { left:574px;  }
.lehrstell img           { left:340px;  }
.begleiten img           { left:656px;  }
}

@media (min-width:1600px) {
	.home-section-1 { background-image: url(/site/templates/img/bg_home_400.svg); }
  .home-section-2 { background-image: url(/site/templates/img/bg_suechsch_400.svg); }
	.home-section-3 { background-image: url(/site/templates/img/bg_lehrstell_400.svg); }
	.home-section-4 { background-image: url(/site/templates/img/bg_liegen_400.svg); }
	.home-section-5 { background-image: url(/site/templates/img/bg_begleiten_400.svg); }
}

@media (min-width:900px) and (max-width:920px) { #logo { width:32%; } nav#mainnav { width:38.666%; } }
@media (min-width:921px) and (max-width:940px) { #logo { width:32.475%; } nav#mainnav { width:39%; } }
@media (min-width:941px) and (max-width:970px) { #logo { width:33%; } nav#mainnav { width:39.39%; } }
@media (min-width:971px) and (max-width:990px) { #logo { width:33.4%; } nav#mainnav { width:39.11%; } }
@media (min-width:991px) and (max-width:1023px) { #logo { width:34%; } nav#mainnav { width:39.88%; } }
@media (min-width:1024px) { #logo { width:350px; } nav#mainnav { width:409px; } }
