html, body{margin:0; height:100%; color:rgba(50,50,50,1); background-color:#231f66; font-family:Verdana, sans serif;}
html{font-size:17px; -webkit-text-size-adjust: 100%;}
@media only screen and (max-width:600px){
	html, body{font-size:13px;}
}
/*@media screen and (-webkit-min-device-pixel-ratio:0) {
	html, body{font-size:22px;}
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (max-width:600px){
	html, body{font-size:15px;}
}*/
a, a:link{color:#231f66; font-weight:500; text-decoration:none;}
a:visited{color:#302b8d;}
a:active, a:hover{color:#FF7A38;}
address{font-style:normal;}
footer{height:30px; padding:5px 30px; text-align:center; display:block;}
footer ul{list-style:none; margin:0px; padding-left:0px; display:inline-block; width:100%;}
footer ul li{display:inline-block; text-align:center; width:30%;}
footer ul li:first-child{text-align:left;}
footer ul li:last-child{text-align:right;}
footer a, footer a:link, footer a:visited, footer li{color:#fffaea;}
nav{display:block; background-color:#231f66; position:sticky; position:-webkit-sticky; top:0px; width:100%; box-sizing: border-box; text-align:center; z-index:500;}
nav ul{list-style:none; margin:0px; padding-left:0px; display:inline-block;}
nav ul li{display:inline-block; text-transform:uppercase;}
nav ul li a, nav ul li a:visited, nav ul li a:link{padding:8px 13px; display:block; text-align:center; text-decoration:none; color:white; font-size:1em; font-weight:normal;}
nav ul li a:hover, nav ul li a:active, nav ul li a.active{color:#ffffaa; font-weight:500;}
nav ul li a::after {display:block; content:attr(data-title); font-weight:600; height:1px; color:transparent; overflow:hidden; visibility:hidden; margin-bottom:-1px;}
#everything{margin:0; padding:0;}
.page{margin:0; background-color:#fffaea; padding:30px 10%; box-sizing:border-box; position:relative; border-bottom:1px solid rgba(160,160,160,1); width:100%; z-index:400;}
.pageimg{width:100%; position:relative; opacity:1; min-height:60%; background-attachment:fixed; background-position:center; background-repeat:no-repeat; background-size:cover;}
@media only screen and (max-width:799px){
	.page{padding:20px 5%;}
}
@media only screen and (max-width:1024px){
	.pageimg{background-attachment:scroll;}
	.pageimg:after{content:""; position:fixed; top:0; height:100vh; left:0; right:0; z-index:-1;
      background-position:center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;}
}
.clear{clear:both;}
.center{text-align:center; position:relative; height:100%; max-width:1920px;}
/* Texte Startseite */
#spetxt{position:relative; color:#231f66; font-weight:600; font-size:4em; margin-top:2%; text-align:center; z-index:400; text-shadow:2px 2px 1px #eeeeee; /*background-color:rgba(0,0,0,0.5);*/}
#titletxt{position:relative; color:white; font-size:2.5em; top:25%; text-align:center; z-index:400; background-color:rgba(0,0,0,0.5);}
#hltxt{padding-top:20px; padding-bottom:10px; color:white; font-size:0.4em; text-align:center; z-index:400; /*text-shadow:1px 1px 0px #ffffff;*/}
#hltxt > a{color:#231f66;}
.tempinfo{position:relative; color:white; font-size:2.5em; top:12%; text-align:center; z-index:400; background-color:rgba(0,0,0,0.5); padding:10px;}
.tempinfo>div{font-size:0.7em; margin-top:8px;}
.tempinfo.xmas{color:rgb(236, 236, 236); text-shadow:1px 1px 4px red, 0 0 1em red, 0 0 0.2em red; background-color:rgb(3, 81, 3); border-radius:4px; box-shadow:0px 0px 14px 4px rgb(181, 0, 0) inset;}
body{font-size:100%;}
/* Logo */
#spelogo2{padding:0px;}
#spelogo2>div, #spelogo>div{bottom:0px; position:absolute; background-color:rgba(0,0,0,0.5); color:white; font-size:0.9em; margin:0px; width:100%; text-align:center;}
#spelogo2>div>a, #spelogo>div>a{color:white;}
#spelogo2>div>span, #spelogo>div>span{font-size:0.9em; margin-top:2px;}
/* Grid */
.grid ul{padding-left:15px; list-style-type:square;}
.grid li{margin-bottom:6px;}
.one, .two, .three, .four{box-shadow:0px 0px 4px 2px rgba(80,80,80,0.5); border-radius:12px; padding-left:30px; padding-right:30px;}
.gct{text-align:center; vertical-align:middle;}
.gct>img{vertical-align:middle;}
/* Kleinkram */
/*.flexlist{display:flex; flex-direction: column; flex-wrap:wrap;}*/
.flexlist{-webkit-column-width:210px; -moz-column-width:210px; column-width:210px;}
#map{float:left; width:510px; height:380px;}
.tel{display:inline-block; width:3em;}
#anschrift{float:left; margin-right:30px;}
/* > 800px (Tablet in portrait oder Phone) */
@media only screen and (min-width:769px){
	.grid{display:grid; grid-auto-columns:minmax(340px, 50%); grid-gap:20px 30px; grid-auto-rows:fit-content(100%);}
	.one{grid-column:1; grid-row:1;}
	.two{grid-column:1; grid-row:2;}
	.three{grid-column:2; grid-row:1;}
	.four{grid-column:2; grid-row:2;}
	#spelogo{width:200px; height:115px; position:absolute; bottom:5px; right:50px; background:url('../img/spe-logo_blau.svg') no-repeat center top; background-size:contain;}
	#spelogo2{display:none; width:200px; height:115px; position:fixed; top:50px; right:50px; background:url('../img/spe-logo_blau.svg') no-repeat center top; background-size:contain; z-index:1000;}
}
/* Cookie Banner */
#cookie-law{position:fixed; bottom:0px; background-color:white; color:black; border-top:1px solid #231f66; border-bottom:1px solid #231f66; z-index:2000; text-align:center; font-size:1.3em;}
.close-cookie-banner{margin-left:5px; border:1px solid gray; padding:1px 4px;}
/* --------- HINTERGRUNDBILDER ---------- */
/* Desktop > 1280 (high-res Bild) */
@media only screen and (min-width:1281px){
	#home{background:#fffaea url('../img/granulat.jpg') no-repeat center center fixed; background-size:cover;}
	/* Branchen/Leistungen */
	#leistungimg.visible{background-image:url('../img/prod01_blur.jpg'); min-height:60%;}
	/* Produkte */
	#prodkunststoffimg.visible{background-image:url('../img/teil01.jpg'); min-height:60%;}
	#prodelastomerimg.visible{background-image:url('../img/teil04.jpg'); min-height:60%;}
	/* Jobs */
	#jobsimg{background-image:url('../img/prod01_blur.jpg'); min-height:60%;}
	/* Kontakt */
	#contactimg.visible{background-image:url('../img/teil02.jpg'); min-height:60%;}
	/* Impressum */
	#impressumimg.visible{background-image:url('../img/prod02_blur.jpg'); min-height:60%;}
	/* Datenschutz */
	#datenschutzimg.visible{background-image:url('../img/teil03.jpg'); min-height:60%;}
}
/* 1280 < x > 1024 (mid-res Bild) - Sollte immer Desktop sein */
@media only screen and (min-width:1025px) and (max-width:1280px){
	#home{background:#fffaea url('../img/granulat_m.jpg') no-repeat center center fixed; background-size:cover;}
	/* Branchen/Leistungen */
	#leistungimg.visible{background-image:url('../img/prod01_blur_m.jpg');}
	/* Produkte */
	#prodkunststoffimg.visible{background-image:url('../img/teil01_m.jpg');}
	#prodelastomerimg.visible{background-image:url('../img/teil04_m.jpg');}
	/* Jobs */
	#jobsimg{background-image:url('../img/prod01_blur_m.jpg');}
	/* Kontakt */
	#contactimg.visible{background-image:url('../img/teil02_m.jpg');}
	/* Impressum */
	#impressumimg.visible{background-image:url('../img/prod02_blur_m.jpg');}
	/* Datenschutz */
	#datenschutzimg.visible{background-image:url('../img/teil03_m.jpg');}
}
/* 1024 < x > 800 (mid-res Bild) - Auch Tablets */
@media only screen and (min-width:800px) and (max-width:1024px){
	#home{background:#fffaea url('../img/granulat_m.jpg') no-repeat center center fixed; background-size:cover;}
	/* Branchen/Leistungen */
	#leistungimg.visible:after{background-image:url('../img/prod01_blur_m.jpg');}
	/* Produkte */
	#prodkunststoffimg.visible:after{background-image:url('../img/teil01_m.jpg');}
	#prodelastomerimg.visible:after{background-image:url('../img/teil04_m.jpg');}
	/* Jobs */
	#jobsimg:after{background-image:url('../img/prod01_blur_m.jpg');}
	/* Kontakt */
	#contactimg.visible:after{background-image:url('../img/teil02_m.jpg');}
	/* Impressum */
	#impressumimg.visible:after{background-image:url('../img/prod02_blur_m.jpg');}
	/* Datenschutz */
	#datenschutzimg.visible:after{background-image:url('../img/teil03_m.jpg');}
}
/* < 800 (low-res Bild) - Auch Tablets */
@media only screen and (max-width:799px) and (orientation: landscape){
	#home{background:#fffaea url('../img/granulat_s.jpg') no-repeat center center fixed; background-size:cover;}
	/* Branchen/Leistungen */
	#leistungimg.visible:after{background-image:url('../img/prod01_blur_s.jpg');}
	/* Produkte */
	#prodkunststoffimg.visible:after{background-image:url('../img/teil01_s.jpg');}
	#prodelastomerimg.visible:after{background-image:url('../img/teil04_s.jpg');}
	/* Jobs */
	#jobsimg:after{background-image:url('../img/prod01_blur_s.jpg');}
	/* Kontakt */
	#contactimg.visible:after{background-image:url('../img/teil02_s.jpg');}
	/* Impressum */
	#impressumimg.visible:after{background-image:url('../img/prod02_blur_s.jpg');}
	/* Datenschutz */
	#datenschutzimg.visible:after{background-image:url('../img/teil03_s.jpg');}
}
/* Tablets & Phones in portrait */
@media only screen and (orientation: portrait) {
	#home{background:#fffaea url('../img/granulat_p2.jpg') no-repeat center center fixed; background-size:cover;}
	/* Branchen/Leistungen */
	#leistungimg.visible:after{background-image:url('../img/prod01_blur.jpg');}
	/* Produkte */
	#prodkunststoffimg.visible:after{background-image:url('../img/teil01_ps.jpg');}
	#prodelastomerimg.visible:after{background-image:url('../img/teil04_ps.jpg');}
	/* Jobs */
	#jobsimg:after{background-image:url('../img/prod01_blur_s.jpg');}
	/* Kontakt */
	#contactimg.visible:after{background-image:url('../img/teil02_ps.jpg');}
	/* Impressum */
	#impressumimg.visible:after{background-image:url('../img/prod02_blur_s.jpg');}
	/* Datenschutz */
	#datenschutzimg.visible:after{background-image:url('../img/teil03_ps.jpg');}
}
/* Karte kleiner bei unter 520px */
@media only screen and (max-width:520px){
	#map{width:100%;}
}
/* Menüschrift kleiner zwischen 1260 und 800 px */
@media only screen and (max-width:1260px) and (min-width:800px){
	nav ul li a, nav ul li a:visited, nav ul li a:link{font-size:0.9em}
}
@media only screen and (max-width:1050px){
	#spetxt{top:6%;}
	#spelogo2{top:75px;}
}
/* Kleiner 800, Menüschrift und Logos kleiner & allgemeine Schrift größer*/
@media only screen and (max-width:799px){
	body{font-size:130%;}
	nav ul li a, nav ul li a:visited, nav ul li a:link{font-size:0.8em}
	#spelogo{width:100px; height:83px; position:absolute; bottom:5px; right:50px; background:url('../img/spe-logo_blau.svg') no-repeat center top;}
	#spelogo2{width:100px; height:83px; right:50px; position:fixed; display:none; background:url('../img/spe-logo_blau.svg') no-repeat center top; z-index:1000;}
	#spelogo2>div{font-size:13px;}
}
/* Zwischen 500 und 800 Texte auf Startseite kleiner und verschieben (Großes Phone & Tablet)
@media only screen and (max-width:799px) and (min-height:500px){
	#spetxt{font-size:2.7em;}
	#titletxt{font-size:2.1em; top:17%;}
	#desctxt{font-size:1.1em; top:27%;}
}*/
/* kleiner 680 Texte auf Startseite kleiner und verschieben (großes Phone) */
@media only screen and (max-width:680px){
	#spetxt{font-size:2em; top:0;}
	#titletxt{font-size:1.8em; top:14%;}
	#spelogo{visibility:hidden;}
	#spelogo2{top:95px; right:10px;}
	.one, .two, .three, .four{padding:10px; margin-bottom:15px;}
	footer{font-size:0.7em; padding:5px;}
}
/* kleiner 500 Texte auf Startseite kleiner und verschieben, Überschriften kleiner (Phone) */
@media only screen and (max-height:499px){
	#spetxt{font-size:2.1em;}
	#titletxt{font-size:1.5em; top:3%;}
	h1{font-size:1.5em;}
	h2{font-size:1.2em;}
}
/* Jobs */
.job_angebot{border-top:1px solid gray; padding-top:15px; padding-bottom:15px;}
.job_details{display:none; padding:3px 20px; border-left:1px solid gray; margin-left:10px; margin-top:8px;}
.job_title{font-weight:bold; color:#231f66;}
.job_subtitle{font-size:0.9em;}
.job_details_lnk{text-transform:uppercase; font-size:0.8em; color:rgb(99, 99, 99); margin-top:7px; cursor: pointer;}
.job_ini{border-top:1px solid gray; padding-top:15px;}