/*
=============================================
		FONTS
=============================================
*/


@font-face {
    font-family: 'TheMix';
    src: url('../fonts/TheMix-B5Plain.eot');
    src: url('../fonts/TheMix-B5Plain.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TheMix-B5Plain.woff2') format('woff2'),
        url('../fonts/TheMix-B5Plain.woff') format('woff'),
        url('../fonts/TheMix-B5Plain.ttf') format('truetype'),
        url('../fonts/TheMix-B5Plain.svg#TheMix-B5Plain') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'TheMix';
    src: url('../fonts/TheMix-B7Bold.eot');
    src: url('../fonts/TheMix-B7Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TheMix-B7Bold.woff2') format('woff2'),
        url('../fonts/TheMix-B7Bold.woff') format('woff'),
        url('../fonts/TheMix-B7Bold.ttf') format('truetype'),
        url('../fonts/TheMix-B7Bold.svg#TheMix-B7Bold') format('svg');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'TheMix';
    src: url('../fonts/TheMix-B3Light.eot');
    src: url('../fonts/TheMix-B3Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TheMix-B3Light.woff2') format('woff2'),
        url('../fonts/TheMix-B3Light.woff') format('woff'),
        url('../fonts/TheMix-B3Light.ttf') format('truetype'),
        url('../fonts/TheMix-B3Light.svg#TheMix-B3Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'TheMix';
    src: url('../fonts/TheMix-B3Light.eot');
    src: url('../fonts/TheMix-B3Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/TheMix-B3Light.woff2') format('woff2'),
        url('../fonts/TheMix-B3Light.woff') format('woff'),
        url('../fonts/TheMix-B3Light.ttf') format('truetype'),
        url('../fonts/TheMix-B3Light.svg#TheMix-B3Light') format('svg');
    font-weight: 300;
    font-style: normal;
}

@font-face {
  font-family: 'Caveat Brush';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/caveat-brush-v6-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Caveat Brush'), local('CaveatBrush-Regular'),
       url('../fonts/caveat-brush-v6-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/caveat-brush-v6-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/caveat-brush-v6-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/caveat-brush-v6-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/caveat-brush-v6-latin-regular.svg#CaveatBrush') format('svg'); /* Legacy iOS */
}



/*
=============================================
	Root -
=============================================
*/

:root {
	--color-main: #09478C;
	--color-sub: #9D9D9C;
	--color-transparent-heavy: rgba(9,71,140,0.8);
	--color-transparent-light: rgba(9,71,140,0.5);
	--color-heavy: #3A6CA3;
	--color-light: #84A3C5;
	--color-lightgrey: #f1f1f1;
	--color-transparent-kacheln: rgba(9,71,140,0.7);
	--header-height-mobil: 144px;
	--branding-width-max: 140px;
	--color-text: #707070;
}


/*
=============================================
		BODY -
=============================================
*/

html { overflow-y:scroll; }
body{
font-family: 'TheMix', Lato, sans-serif;
background: #fff;
-webkit-font-smoothing: antialiased;
}

@media only screen and (max-width: 768px) {
	html,body {
    overflow-x: hidden;
}
}

body {
    max-width: 1440px;
    margin: auto;
	box-shadow: 0px -2px 2px 2px #ccc;
}

.boxed {
max-width: 1200px;
	margin:0 auto;
	width: 90%;
}

section {
padding-bottom: 80px;
margin-bottom: -10px;
}

.hidden {
display:none;
}

.overlay-white {
background-color: rgba(255,255,255,0.6);
	width: 100%;
	height:100%;
}
/*
=============================================
		DFG-Border
=============================================
*/

.dfg-border {
  background:-webkit-linear-gradient(180deg,var(--color-light) 33%,var(--color-main) 33%);
position: absolute;
	bottom: 0;
	left:0;
	width:100%;
height:7px;
}

.border-head {
height: 12px;
}

.header-image-container {
position: relative;
}

/*
=============================================
		Ende DFG Border
=============================================
*/

/*
=============================================
		Fonts
=============================================
*/
h1, h2, h3, h4 {
margin-top: 0px;
}


h1 {
color: var(--color-main);
	text-align: center;
	font-size: 40px;
}

h2 {
color: var(--color-main);
	text-align: center;
	font-size: 34px;
}

h3 {
font-size: 26px;
	color: var(--color-main);
	text-align: center;
}

h4 {
font-size: 18px;
	color: var(--color-main);
}

@media only screen and (max-width: 600px) {
	h1, h2 {
	font-size: 24px;
	}

	h3 {
font-size: 16px;
}
}

/*
=============================================
		Ende Fonts
=============================================
*/
/*
=============================================
		Bilder
=============================================
*/

.header-image {
	width: 100%;
	height: auto;
	margin: auto;
}

.box-gehalts-bs .header-image {
display:block;
	max-height: 100px;
	max-width: 80px
}

.box-mitte {
grid-column-start: 2;
}

/*
=============================================
		Ende Bilder
=============================================
*/
/*
=============================================
		Mobil
=============================================
*/
@media only screen and (max-width: 1023px) {
	.desktop {
	display: none;
	}
}
@media only screen and (min-width: 1024px) {
	.mobil {
	display: none;
	}
}


/*
=============================================
		Ende Mobil
=============================================
*/

/*
=============================================
		Vorteile & Gehaltsbausteine
=============================================
*/

h4.vorteile-subhead {
margin-bottom: 10px;
}

ul.vorteile-body {
  margin: 5px;
  padding: 5px;
}

ul.karriere-quali{
	text-indent: -15px!important;
}

ul.vorteile-body {
	list-style: none;
	margin-left: 8px !important;
	text-indent: -10px;
}

ul.vorteile-body li:before {
	content: "+ ";
}

ul.karriere-quali li:before {
	content: "✓ ";
}

ul.vorteile-body li {
padding-bottom: 5px;
	font-size: 14px;
}

.vorteile-text {
padding-bottom: 20px;
}

h3.gehalts-bs-titel {
font-size:18px;
	padding: 15px 3px;
}

.stufe-1 {
	margin-top: 160px;
}

.stufe-2 {
margin-top: 80px;
}

.stufe-3-container {

}

.container-vorteile {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
	grid-gap: 30px;
}

@media only screen and (max-width: 768px) {
.container-vorteile {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
	grid-gap: 30px;
}
}

.stufe-3 {
display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 20px;
}

.gehalts-bs {
display: grid;
grid-template-columns: repeat(3, 1fr);
	grid-gap: 30px;
}

p.gehalts-bs-body {
text-align: center;
}

.section-heading {
text-align:center;
	color: var(--color-main);
	padding-top: 30px;
}

@media only screen and (max-width: 600px) {
.container-vorteile {
grid-template-columns: repeat(1, 1fr);
}
}


.box-vorteile {
	padding: 10px;
	background: #FFF;
}


.box-karriere {
	padding: 10px;
	background: var(--color-lightgrey);
	margin-top: 10px;
}

.box-karriere:hover {
	box-shadow: 10px 5px 5px rgba(0,0,0,0.3);
	transform: scale(1.03);
	transition: 0.8s;
}

.box-karriere {
	transition: 0.8s;
}

h3.vorteile-titel {
text-align: center;
	color: var(--color-main);
	margin-bottom: 0px;
}

h4.vorteile-subtitel {
text-align: center;
	color: var(--color-sub);
	margin-bottom: 0px;
}


h3.vorteile-subtitel{
text-align: center;
	color: var(--color-main);
}

.vorteile-trenner {
padding: 20px 0px;
}

p.vorteile-body {
padding: 0px;
	margin: 5px 0px;
}

#section-gb {
	min-height: 800px;
	display: grid;
	justify-content: center;
	align-content: center;
	background: rgba(255,255,255,0.85);
}

.plus-section {
	min-height: 500px;
	display: grid;
	justify-content: center;
	align-content: center;
}

section {
background: #FFF;
}

/*
#section-gb:before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url("/media/FAU_Gehaltsrechner Background.jpg") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}*/

#section-gb {
  width: 100%;
  height: 100%;
  background: url("../media/FAU_Gehaltsrechner Background.png") no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-size: cover;
}

/*
=============================================
		Ende Vorteile & Gehalts
=============================================
*/
/*
=============================================
		Animation
=============================================
*/

.show-on-scroll {
	opacity: 0;
	transition:0s;
	transform: scale(0.8);
}

.is-visible {
	opacity: 1;
	transition: 1s;
	transition-delay:0.2s;
	transform: scale(1);
}

.box-vorteile:hover {
box-shadow: 10px 5px 5px rgba(0,0,0,0.3);
	transform: scale(1.03);
}

p.intro {
font-size: 20px;
	line-height: 32px;
	color: var(--color-text);
}

/*
=============================================
		EndeAnimation
=============================================
*/

/*
=============================================
		Header
=============================================
*/
.branding {
	position: fixed;
	top: 20px;
	z-index: 999;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0px 20px;
}

.branding-logo {
	max-width: var(--branding-width-max);
}
/*
=============================================
		Ende Header
=============================================
*/


/*
=============================================
		Icons
=============================================
*/

.icon-container {
width: 100px;
	height: 100px;
	display:grid;
	margin: auto;
	position: relative;
}

.icon2 {
position: absolute;
}
/*Kaffee Icon*/
.box-vorteile:hover .kaffee2 {
animation: kaffee ease-in 4s infinite;
}

.kaffee2 {
left: 10px;
top: 10px;
}

@keyframes kaffee {
  0% {}
50% {transform: scaley(1.4); opacity: 0;}
100% {opacity: 0;}
}
/* Rakete Icon*/
.box-vorteile:hover .rakete {
animation: rakete ease-in 4s infinite;
}


@keyframes rakete {
  0% {}
	50% {transform: translate(100px,-50px); opacity: 0;}
	100% {}
}

/* Haken Icon*/

.haken2 {
top: 10px;
	left:10px;
}

.box-vorteile:hover .haken2 {
animation: haken ease-out 2s infinite;

}

@keyframes haken {
  0% {}
	50% {opacity: 0; transform: scale(0.8);}
	100% {}
}

.box-vorteile:hover .km-geld  {
	animation: auto ease-in 4s infinite;
}

@keyframes auto {
  0% {}
	50% {transform: translate(100px,0); opacity: 0;}
	100% {}
}

/*
=============================================
		Ende Icons
=============================================
*/

/*
=============================================
		Plus
=============================================
*/
.plus-bs {
display: grid;
grid-template-columns: repeat(5, 1fr);
	grid-gap: 30px;
}

.icon-plus {
	width: auto;
	height: auto;
	margin: auto;
	max-height: 100px;
	max-width: 100px;
}

.box-plus:hover .icon-plus, .box-vorteile:hover .av, .box-vorteile:hover .icon-euro{
animation: icons ease-out 3s infinite;
}

@keyframes icons {
  0% {}
	50% {transform: scale(1.16);}
	100% {}
}

/*
=============================================
		Ende Plus
=============================================
*/

/*
=============================================
		Footer
=============================================
*/
center {
	display: block;
	text-align: -webkit-center;
}

footer hr{
	border: 1px solid var(--color-main);
}

footer p{
	font-size: 14px;
}

.footer {
	background-color: #ffffff;
	height: 40px;
}
/*
=============================================
		Footer Ende
=============================================
*/
/*
=============================================
		Rechner
=============================================
*/
.rechner_wrapper{
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}
h1{
	margin-bottom: 30px;
	text-align: center;
	color: #09478C;
}
h2{
	text-align: center;
	color: #09478C;
	margin-bottom: 20px;
}
input, select{
	display: block;
}
.grid-1{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:  1fr;
	grid-template-areas:
	"c1r1 c2r1 c3r1"
	"button01 button02 button03"
	;
	margin-bottom: 50px;
	}

.grid-2{
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:  1fr;
	row-gap: 20px;
	grid-template-areas:
	"c1r2 c2r2 c3r2"
	;
	margin-bottom: 50px;
	padding: 20px 0px;
	}
.beschreibung{
	grid-area: c1r1;
}

.eingabefelder_angebot{
	grid-area: c2r1;
}

.eingabefelder_vergleich{
	grid-area: c3r1;
}

.ergebnis_beschreibung{
	grid-area: c1r2;
	background-color: rgba(9,71,140,0.1);
	padding-left: 25px;
	padding-top: 15px;
	margin-bottom: 50px;
}

.ergebnis_angebot{
	grid-area: c2r2;
	background-color: rgba(9,71,140,0.1);
	padding-top: 20px;
	margin-bottom: 50px;
}

.ergebnis_vergleich{
	grid-area: c3r2;
	background-color: rgba(9,71,140,0.1);
	padding-top: 20px;
	margin-bottom: 50px;
}

.beschreibung p{
	color: #09478C;
	font-size: 20px;
	margin-bottom: -10px;
}

.ergebnis_beschreibung p{
	color: #09478C;
	font-size: 18px;
}

.beschreibung p.caption{
	color: #707070;
	font-size: 14px;
	margin-bottom: 21px;
}

.eingabefelder_angebot input, .eingabefelder_vergleich input{
	font-size: 24px;
	width: 50%;
	margin-bottom: 24px;
	color: #707070;
	border: 3px solid #09478C;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.eingabefelder_angebot select, .eingabefelder_vergleich select{
	font-size: 18px;
	width: 175px;
	margin-bottom: 28px;
	border: 3px solid #09478C;
	margin-left: auto;
	margin-right: auto;
	height: 32px;
}

.bold{
	font-weight: 600;
}

.ergebnis_angebot input, .ergebnis_vergleich input{
	border: 0;
	background-color: rgba(9,71,140,0.005);
	margin-bottom: 10px;
	font-size: 24px;
	width: 63.3%;
	text-align: right;
	color: #000000;
	padding-left: 110px;
}

.ergebnis_beschreibung p{
	margin-bottom: 15px;
}

.border_bottom, .ergebnis_angebot .border_bottom, .ergebnis_vergleich .border_bottom{

}

.ergebnis_beschreibung .margin_bottom{
	margin-bottom: 30px;
}

.ergebnis_angebot .margin_bottom, .ergebnis_vergleich .margin_bottom{
	margin-bottom: 16px;
}

.margin_bottom_02{
	margin-bottom: 7px!important;
}

.euro{
	color: #09478C;
	font-size: 24px;
	font-weight: 600;
	display: inline-block;
	float: right;
	margin: 0;
	width:45px;
}

.ergebnis_beschreibung .bg_dark, .ergebnis_vergleich .bg_dark, .ergebnis_angebot .bg_dark{
	background-color: #09478C;
	color: #ffffff;
}

.ergebnis_beschreibung .bg_dark{
}

.ergebnis_angebot .bg_dark_02, .ergebnis_vergleich .bg_dark_02{
	background-color: #09478C;
	color: #ffffff;
	margin-top: 0px;
	padding-top: 5px;
	padding-bottom: 1px;
	margin-right: 0px;
	padding-right: 18px;
}

.bg_light{
	background-color: rgba(9,71,140,0.2);
	margin-top: -15px;
	padding-top: 15px;
	margin-left: -25px;
	padding-left: 25px;
	padding-bottom: 89px;
}

.bg_light_02{
	background-color: rgba(9,71,140,0.2);
	margin-top: -10px;
	padding-top: 23px;
	padding-bottom: 94px;
}

#mAdd03, #mAdd, #mAdd02 {
height:60px;
	width: 200px;
	font-family: 'TheMix';
}

#mAdd{
	margin-left: auto;
	margin-right: auto;
	display: block;
	grid-area: button02;
	background-color: #ffffff;
	border: 3px solid #09478C;
	padding: 0px 35px;
	color: #09478C;
	font-size: 18px;
	transition: 0.4s;
}
#mAdd02{
	margin-left: auto;
	margin-right: auto;
	display: block;
	grid-area: button03;
	background-color: #ffffff;
	border: 3px solid #09478C;
	padding: 0px 35px;
	color: #09478C;
	font-size: 18px;
	transition: 0.4s;
}
#mAdd03{
	margin-left: auto;
	margin-right: auto;
	display: block;
	grid-area: c3r1;
	background-color: #ffffff;
	border: 3px solid #09478C;
	padding: 0px 35px;
	color: #09478C;
	font-size: 18px;
	transition: 0.4s;
	margin-top: 290px;
}
#mAdd:hover, #mAdd:active, #mAdd02:hover, #mAdd02:active, #mAdd03:hover, #mAdd03:active{
	cursor: pointer;
	color: #ffffff;
	border: 3px solid #09478C;
	background-color: #09478C;
}

.padding_top{
	padding-top: 21px;
}

#ergebnis_compare, #eingabe_compare, #mAdd02{
	display: none;
}

#nachtzuschlagProzent, #feiertagszuschlagProzent, #sonntagszuschlagProzent{
	float: left;
	width: 19%;
	margin-bottom: 0px;
	margin-top: 0px;
}

.float_left {
float:left;
}

.float_right{
	float: right;
	font-size: 24px;
	padding: 0px 0px 0px 3px;
	font-family: 'The Mix';
	margin-top: 4px;
	margin-right: -10px;
}

.input_special{
	margin-right: -5px!important;
}

#break_01, #break_02{
	display: none;
}

/* Nur Firefox *//*
@-moz-document url-prefix() {
    #mAdd03{
		margin-top: 50px;
		margin-bottom: 620px;
	}
	.eingabefelder_angebot input, .eingabefelder_vergleich input{
		font-size: 24px;
		width: 50%;
		margin-bottom: 29px;
		color: #707070;
		border: 3px solid #09478C;
		text-align: center;
		margin-left: auto;
		margin-right: auto;
	}
	#nachtzuschlagProzent, #feiertagszuschlagProzent, #sonntagszuschlagProzent{
		float: right;
		width: 17%;
		margin-bottom: 0px;
		margin-top: 0px;
	}
	.float_right{
		float: right;
		font-size: 24px;
		padding: 0px 0px 0px 3px;
		font-family: 'The Mix';
		margin-top: 4px;
		margin-right: -8px;
	}
	.ergebnis_angebot input, .ergebnis_vergleich input{
		border: 0;
		background-color: rgba(9,71,140,0.005);
		margin-bottom: 10px;
		font-size: 25.86px;
		width: 63.3%;
		text-align: right;
		color: #000000;
		padding-left: 81.11px;
	}
	.euro{
		color: #09478C;
		font-size: 24px;
		font-weight: 600;
		display: inline-block;
		float: right;
		margin: 0;
		padding: 4.5px 18px 0px 9px;
	}
	.padding_top{
		padding-top: 18.6px;
	}
	.ergebnis_angebot .bg_dark_02, .ergebnis_vergleich .bg_dark_02{
		background-color: #09478C;
		color: #ffffff;
		margin-top: 0px;
		padding-top: 4.5px;
		padding-bottom: 0px;
		margin-right: 0px;
		padding-right: 18px;
	}
	.ergebnis_beschreibung .bg_dark{
		padding-bottom: 4.3px;
		padding-top: 7px;
		margin-top: -7px;
		margin-left: -25px;
		padding-left: 25px;
	}
	.bg_light_02{
		background-color: rgba(9,71,140,0.2);
		margin-top: -10px;
		padding-top: 24px;
		padding-bottom: 125px;
	}
	.bg_light{
		background-color: rgba(9,71,140,0.2);
		margin-top: -15px;
		padding-top: 15px;
		margin-left: -25px;
		padding-left: 25px;
		padding-bottom: 121px;
	}
	.eingabefelder_angebot select, .eingabefelder_vergleich select{
		font-size: 18px;
		width: 175px;
		margin-bottom: 28px;
		border: 3px solid #09478C;
		margin-left: auto;
		margin-right: auto;
		height: 37px;
	}*/
}/* Ende - Nicht löschen */

.wrapper_big{
	max-width: 1010px!important;
}

.paddding_chrome{
	padding-top: 22px!important;
}

.paddding_chrome_02{
	padding-top: 25px!important;
}

.paddding_chrome_03{
	margin-right: -17px!important;
}


/*
=============================================
		Rechner Ende
=============================================
*/

/*
=============================================
		Modal
=============================================
*/

.row > .column {
	padding: 0 8px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

.column {
	float: left;
	width: 23.4%;
}

/* The Modal (background) */
.modal {
	display: none;
	position: fixed;
	z-index: 1;
	padding-top: 100px;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0, 0, 0, 0.75);
}

/* Modal Content */
.modal-content {
	position: relative;
	margin: auto;
	padding: 0;
	width: 90%;
	max-width: 1200px;
}

/* The Close Button */
.close {
	color: white;
	position: absolute;
	top: 55px;
	right: 40px;
	font-size: 60px;
	font-weight: bold;
}

.close:hover, .close:focus {
	color: #999;
	text-decoration: none;
	cursor: pointer;
}

.mySlides {
	display: none;
}

.cursor {
	cursor: pointer;
}

/* Next & previous buttons */
.prev, .next {
	cursor: pointer;
	position: absolute;
	top: 50%;
	width: auto;
	padding: 16px;
	margin-top: -50px;
	color: white;
	font-weight: bold;
	font-size: 20px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0;
	user-select: none;
	-webkit-user-select: none;
}

.next {
	right: 0;
	border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
	background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
	color: #f2f2f2;
	font-size: 12px;
	padding: 8px 12px;
	position: absolute;
	top: 0;
}

.caption-galerie {
font-size: 20px;
	color: #FFF;
	text-align:center;
}

img {
	margin-bottom: -4px;
}

.caption-container {
	text-align: center;
	background-color: black;
	padding: 2px 16px;
	color: white;
}

.demo {
	opacity: 0.6;
}

.active, .demo:hover {
	opacity: 1;
}

img.hover-shadow {
	transition: 0.3s;
}

.hover-shadow:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.modal_wrapper{
	max-width: 1200px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.mySlides img {
	height:500px!important;
	width: auto!important;
	margin: auto;
	display: block;

}

.caption-kacheln {
font-size: 20px;
	color: var(--color-main);
	text-align: center;
}

/*
=============================================
		Karrierebausteine
=============================================
*/

.karriere-bs {
	display: grid;
	justify-content: center;
	align-content: center;
	grid-template-columns: repeat(4, 1fr);
	padding: 30px 0px;
}
/*
.borrig {
border-right: 5px solid var(--color-main);
}*/

.icon-kb {
width: auto;
	height: 100px;
	display: block;
	margin: auto;
}

#section-kb {
min-height: 400px;
display: grid;
align-content: center;
}

.box-karriere-bs:hover {
	transform: scale(1.03);
}

.box-karriere-bs:hover .icon-kb {
animation:icons ease-out 3s infinite
}
/*
=============================================
		Ende Karrierebausteine
=============================================
*/
/*
select, input {
	-webkit-appearance: none!important;

}*/



/*Rechner neu*/

.beschreibung p{
	color: #09478C;
	font-size: 20px;
	margin:0!important;
}

.ergebnis_beschreibung p{
	color: #09478C;
	font-size: 18px;
}

.beschreibung p.caption{
	color: #707070;
	font-size: 14px;
	margin-bottom: 0px;
}

.eingabefelder_angebot input, .eingabefelder_vergleich input{
	font-size: 24px;
	width: 50%;
	margin:0!important;
	color: #707070;
	border: 3px solid #09478C;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.eingabefelder_angebot select, .eingabefelder_vergleich select{
	font-size: 18px;
	width: 175px;
	margin: 0!important;
	border: 3px solid #09478C;
	height: 48px;
}

#nachtzuschlagProzent, #feiertagszuschlagProzent, #sonntagszuschlagProzent{
	float: left;
	width: 40px!important;
	margin: 0px 5px!Important;
}

.ergebnis-contain {
height: 40px!important;
padding-top: 30px;
}

.ergebnis_beschreibung p, .ergebnis_angebot input, .ergebnis_vergleich input {
margin:0!important;
	padding-top:0!important;
	font-size: 24px;
}

.ergebnis_beschreibung , .ergebnis_angebot, .ergebnis_vergleich {
margin:0!important;
	padding-top:20px!important;
}

.ergebnis_beschreibung input , .ergebnis_angebot input, .ergebnis_vergleich input {
max-height:40px;
	max-width: 140px!important;
	color: var(--color-main);
}

.bg_dark p, .bg_dark input {
color: #FFF!important;
	-webkit-color: #FFF!important
}

.bg_dark {
	margin-bottom: 10px;
	padding-left: 25px;
	padding-top: 15px;
	margin-left: -25px;
	margin-top: 10px;
}

input, select {
-webkit-appearance: none!Important;
}

	.rechner-contain {
height: 80px;
}

select, option {
text-align:center!important;
}

@media only screen and (min-width: 1181px) {
.eingabefelder_angebot select, .eingabefelder_vergleich select {
width: 236px !important;
	display:block;
height: 40px;
margin: 0px auto !important;
	}
.eingabefelder_angebot input, .eingabefelder_vergleich input{
width: 228px !important;
	display:block;
height: 40px;
margin: 0px auto !important;
}

	.eingabefelder_angebot select, .eingabefelder_vergleich select {
	display:block;
	height: 48px !important;
	-webkit-height: 40px!important;
}
	.rechner-contain {
	height: 70px;
}
	.input_special.float_left {
	max-width: 180px;
	margin-left: 50px!important;
	}

		.fau {
font-size: 240px;
}

.headschrift {
	font-size: 90px;
	}
}

@media only screen and (max-width: 1180px) {
.eingabefelder_angebot select, .eingabefelder_vergleich select {
width: 188px!important;
	display: block;
	margin: 0px auto!important;
	}
	.eingabefelder_angebot input, .eingabefelder_vergleich input{
width: 160px!important;
	display:block;
		margin: 0px auto!important;
}
		.rechner-contain {
height: 70px;
}
		.input_special.float_left {
	max-width: 82px;
	margin-left: 73px!important;
}

	.ergebnis_beschreibung input , .ergebnis_angebot input, .ergebnis_vergleich input {
	max-height: 40px;
max-width: 140px!important;
color: #333333;
opacity: 1!important;
}
}

input , select {
	font-family: TheMix!important;
}

.headschrift {
font-family: Caveat Brush;
	color: white;
	position: absolute;
	top:100px;
	left:80px;
line-height: 0.8;
transform: rotate(-14deg) scalex(1.25);
}

@media only screen and (min-width: 1229px) {
		.fau {
font-size: 240px;
}

.headschrift {
	font-size: 90px;
	}
}

@media only screen and (max-width: 1228px) {
	.fau {
font-size: 180px;
}

.headschrift {
	font-size: 60px;
	}
}

.borbot {
border-bottom: 2px solid grey;
}

p.beschreibung-feld  {
	color: var(--color-main);
	padding-left: 3px;
	font-weight: bold;
}

	.eingabefelder_angebot select, .eingabefelder_vergleich select {
border-radius: 0!important;
		padding: 0px 10px!important;}


/* Karriere Bausteine*/