@charset "utf-8";

/* source-sans-pro-regular - latin-ext_latin */
@font-face{
font-family:'Source Sans Pro';
font-style:normal;
font-weight:400;
src:local(''),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-regular.woff2') format('woff2'),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-regular.woff') format('woff');
}

/* source-sans-pro-italic - latin-ext_latin */
@font-face{
font-family:'Source Sans Pro';
font-style:italic;
font-weight:400;
src:local(''),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-italic.woff2') format('woff2'),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-italic.woff') format('woff');
}

/* source-sans-pro-600 - latin-ext_latin */
@font-face{
font-family:'Source Sans Pro';
font-style:normal;
font-weight:600;
src:local(''),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-600.woff2') format('woff2'),
url('../../fonts/source-sans-pro/source-sans-pro-v14-latin-ext_latin-600.woff') format('woff');
}

/* roboto-mono-regular - latin-ext_latin */
@font-face{
font-family:'Roboto Mono';
font-style:normal;
font-weight:400;
src: local(''),
url('../../fonts/roboto-mono/roboto-mono-v12-latin-ext_latin-regular.woff2') format('woff2'),
url('../../fonts/roboto-mono/roboto-mono-v12-latin-ext_latin-regular.woff') format('woff');
}

/* roboto-mono-600 - latin-ext_latin */
@font-face{
font-family:'Roboto Mono';
font-style:normal;
font-weight:600;
src: local(''),
url('../../fonts/roboto-mono/roboto-mono-v12-latin-ext_latin-600.woff2') format('woff2'),
url('../../fonts/roboto-mono/roboto-mono-v12-latin-ext_latin-600.woff') format('woff');
}

*{
margin:0;
padding:0;
text-decoration:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:0;
}

a, label{
display:inline-block;
}

input, select{
font-family:'Source Sans Pro', sans-serif;
}

u{
text-decoration:underline;
}

body{
font-family:'Source Sans Pro', sans-serif;
}

/* /////// HEADER /////// */

header{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
font-weight:600;
background-color:#123D68;
color:#fff;
}

header h1{
margin-top:0.2em;
margin-right:0.75em;
font-size:1.5em;
}

header > div{
display:flex;
align-items:center;
margin:0 1em;
}

header img{
display:block;
}

header > div img{
width:2em;
}

header > a img{
width:184px;
padding:1em;
}

/* /////// WRAPPER /////// */

#Wrapper{
max-width:1910px;
margin:0 auto;
background-color:#fff;
color:#333;
background-attachment:local;
}

#STplus{
display:flex;
justify-content:space-between;
align-items:center;
min-width:352px;
max-width:352px;
min-height:2em;
padding:0 0.25em 0 0.5em;
color:#fff;
background-color:#123D68;
}

#STplus:hover{
background-color:#008694;
cursor:pointer;
}

#STplus div{
display:flex;
align-items:center;
}

#STplus > div:first-of-type{
font-weight:600;
}

#OpenClose{
margin-right:0.5em;
font-style:italic;
}

#STplusImg{
width:1.2em;
margin-right:0.25em;
}

#STplus > span{
margin-left:0.25em;
}

.rotate{
transform:rotate(45deg);
}

.rotateBack{
transform:rotate(0);
}

.transform{
transition:transform 1s;
}

/* /////// FORM /////// */

#Form{
margin-top:1em;
}

#Form, #Error{
padding:0 1em;
}

#Form0{
width:352px;
}

#Form0 > div{
display:flex;
justify-content:center;
align-items:center;
margin-bottom:0.125em;
padding:0.25em;
background-color:#fafafa;
border:1px solid #ccc;
}

#Form0 label{
padding:0 0.5em;
}

#Form0 > div:first-of-type label{
margin-right:0.459em;
}

@-webkit-keyframes fadeIn{ 
  0%{opacity:0;}
100%{opacity:1;}
}

@keyframes fadeIn{
  0%{opacity:0;}
100%{opacity:1;}
}

#section{
position:relative;
display:flex;
justify-content:space-between;
align-items:flex-end;
}

.Eingabe{
min-width:352px;
max-width:352px;
margin-right:0.5em;
background-color:#ecf2f9;
border:1px solid #ccc;
}

.Eingabe > div{
padding:0.25em;
border-bottom:1px solid #ccc;
}

.Eingabe > div:last-of-type, .Eingabe > div:nth-of-type(4){
border-bottom:0;
}

#Geburtsdatum, #Wartezeit > div, #Wartezeit > div div:first-of-type{
display:flex;
justify-content:space-between;
align-items:center;
}

#HilfeB{
width:20px;
margin-left:0.125em;
cursor:pointer;
}

form input[type=number]{
margin-left:0.25em;
font-size:1em;
text-align:center;
color:#333;
border:1px solid #ccc;
}

form input[type=number]::placeholder{
font-style:italic;
}

form select{
max-height:24px;
font-size:1em;
color:#333;
background-color:#fff;
border:1px solid #ccc;
}

#BeginnVRS{
display:inline-block;
width:0;
height:0;
border-top:0.8em solid #EEAA00;
border-left:0.4em solid transparent;
border-right:0.4em solid transparent;
margin-top:0.125em;
}

#WZ35Status, #WZ45Status{
width:120px;
}

#FehlendeZeit35 input, #FehlendeZeit45 input{
margin-right:0.25em;
}

.Number2{
width:3.8em;
}

.Number4{
width:4.8em;
}

.Phasen{
display:inline-block;
width:0.4em;
height:1em;
}


/* Toggle Checkbox */
.toggle label{
position:relative;
display:inline-block;
cursor:pointer;
}

#GdB{
display:flex;
align-items:center;
min-height:32px;
}

#GdB label{
width:19em;
}

.toggle input{
display:none;
}

.toggle .slider{
/* Grundfläche */
position:absolute;
width:3em;
height:1.5em;
background-color:#D41E18;
transition:all .3s ease-in-out;
border-radius:1em;
cursor:pointer;
}

#GdB .slider{
top:-2px;
right:-15px;
}

.toggle .slider:before{
/* verschiebbarer Button */
position:absolute;
content:"";
height:1.3em;
width:1.3em;
left:0.15em;
bottom:0.1em;
background-color:#fff;
border-radius:50%;
transition:all .3s ease-in-out;
}

.toggle input:checked + .slider{
background-color:#008694;
}

.toggle input:focus + .slider{
background-color:pink;
box-shadow:0 0 1px #008694;
}

.toggle input:checked + .slider:before{
-webkit-transform:translateX(1.4em);
-ms-transform:translateX(1.4em);
transform:translateX(1.4em);
}

.toggle .slider:after{
position:absolute;
/* font-weight:bold; */
height:1.2em;
left:-2.3em;
bottom:0.15em;
}

#GdB .slider:after{
/* Text vor dem FlipFlop-Schalter */
font-style:italic;
content:"nein";
}

.toggle input:checked + .slider:after{
position:absolute;
left:3.4em;
}


#GdB input:checked + .slider:after{
/* Text hinter dem FlipFlop-Schalter */
content:"ja";
font-style:italic;
}

/* /////////////// */

#SVG{
height:100px;
margin-top:1em;
margin-right:0.5em;
}

svg{
max-width:100%;
}

#Ausgabe h4{
display:flex;
justify-content:space-between;
padding:0.25em;
background-color:#123d68;
color:#fff;
border:1px solid #123d68;
}

#Ausgabe h4 span:not(:first-of-type){
border-left:1px solid #fff;
}

#Ausgabe > div{
min-width:352px;
max-width:352px;
}

.AZeile{
display:flex;
justify-content:space-between;
align-items:center;
padding:0.25em;
font-weight:600;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}

.AZeile:last-of-type{
margin-bottom:0;
}

.AZeile > div:nth-of-type(1){
display:flex;
align-items:center;
width:170px;
}

.AZeile > div:nth-of-type(2){
width:52px;
text-align:center;
border-left:1px solid #555;
}

.AZeile > div:nth-of-type(3){
width:70px;
text-align:center;
border-left:1px solid #555;
}

.AZeile > div:nth-of-type(4){
width:50px;
text-align:right;
border-left:1px solid #555;
}

.AZeile > div > div:first-of-type{
width:0;
height:0;
border-top:0.75em solid transparent;
border-bottom:0.75em solid transparent;
margin-right:0.5em;
}

#Legende{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
margin:2em 1em 0;
padding:0.625em 1em 0.375em;
background-color:#fafafa;
}

#Legende > div{
display:flex;
margin-bottom:0.25em;
}

#Legende > div:not(:last-of-type){
margin-right:2em;
}

#Legende > div span:first-of-type{
display:inline-block;
min-width:0.5em;
height:13px;
margin:4px 0.25em 0 0;
}

/* ////////////////////////// */

#Error{
margin-top:1em;
text-align:center;
color:#D41E18;
}

#Berechnen{
display:flex;
justify-content:space-around;
align-items:center;
padding:1em 0;
}

#BInput{
font-family:'Source Sans Pro', sans-serif;
min-width:180px;
max-width:180px;
height:40px;
font-size:1.2em;
font-weight:600;
text-align:center;
background-color:#123d68;
color:#fff;
border:1px solid #123d68;
border-radius:3px;
}

#BInput:hover{
background-color:#008694;
border-color:#008694;
cursor:pointer;
}

.BInput0{
background-color:#ccc !important;
border-color:#aaa !important;
}

.BInput0:hover{
color:#fff !important;
cursor:default !important;
}

#Seminarangebot{
width:261px;
margin:1em 0 2em 0.875em;
}

#Seminarangebot a{
display:flex;
justify-content:center;
align-items:center;
min-width:261px;
line-height:22px;
padding:0.25em 0.5em;
color:#123D68;
background-color:#fff;
border:1px solid #123D68;
border-radius:3px;
transition:background-color ease-in-out 0.25s, color ease-in-out 0.25s;
}

#Seminarangebot svg{
height:24px;
margin-right:0.5em;
fill:#123D68;
}

#Seminarangebot a:hover{
color:#fff;
background-color:#123D68;
}

#Seminarangebot a svg{
transition:fill ease-in-out 0.25s;
}

#Seminarangebot a:hover svg{
fill:#fff;
}

#Seminarangebot span{
padding:0.25em 0;
text-align:center;
}

#Fussnoten{
margin:1em 0 2em;
padding:0 16px;
font-size:0.85em;
}

/* hr{
margin:3em 0 1em;
border:1px solid #ccc;
} */

#HilfeW{
visibility:hidden;
z-index:999;
position:fixed;
top:0;
width:100%;
height:99.99%;
overflow:auto;
background-color:rgba(0,0,0,0.5);
}

#Hilfe{
max-width:840px;
margin:0 auto;
padding:20px;
font-size:1.25em;
background-color:#fff;
border:1px solid #ccc;
}

#Hilfe h3{
margin:2em 0 0.5em;
font-size:1em;
color:#004d99;
}

.monospace{
margin:1em 0;
padding:1em 1.9em;
background-color:#fafafa;
font-family:'Courier New', 'Roboto Mono', monospace;
}

#Tipp{
display:flex;
align-items:center;
margin:2em 0 1em;
padding:0.5em;
border:2px solid #337BB9;
}

#Tipp img{
min-width:2em;
max-width:2em;
margin:0 1em 0 0.5em;
}

#CloseW{
position:sticky;
top:20px;
float:right;
width:2em;
height:2em;
background-color:#fff;
border:4px solid #333;
}

#CloseB{
cursor:pointer;
}

/* /////// FOOTER /////// */

footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
padding:1em;
background-color:#123d68;
}

.Trenner{
color:#EEAA00;
}

footer img{
display:none;
height:80px;
}

.FLinks{
display:flex;
justify-content:center;
align-items:center;
}

footer > div:first-of-type{
padding:0.5em 0 0.5em 1.5em;
color:#ddd;
}

footer a{
padding:0.5em 1.5em;
color:#ddd;
text-decoration:underline;
}

footer a:hover{
color:#EEAA00;
}

/* /////// MEDIA QUERIES /////// */

@media (max-width:1910px){

#Wrapper{
max-width:1186px;
}

#section{
display:block;
}

#SVG{
margin-right:0;
}

#Ausgabe{
position:absolute;
bottom:116px;
right:0;
}

}

@media (max-width:1090px){

#Form0{
display:block;
max-width:352px;
}

#Form0 > div:not(:last-of-type){
margin-bottom:0;
border-bottom:0;
}

}

@media (max-width:760px){

#Form{
display:flex;
flex-direction:column;
flex-wrap:wrap;
align-items:center;
}

#section{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.Eingabe{
margin-right:0;
}

#Ausgabe{
position:static;
}

#SVG{
margin-top:0;
}

}

@media (max-width:654px){

#Legende{
display:block;
}

#Legende > div{
display:flex;
align-items:flex-start;
}

#Legende > div > div:first-of-type {
margin-top:0.15em;
}

footer{
display:block;
padding-top:1em;
padding-bottom:1em;
}

footer > div:first-of-type{
padding-left:0.5em;
}

.FLinks{
display:block;
}

footer a{
display:block;
padding:0.5em;
}

.Trenner{
display:none;
}

footer img{
margin:1em 0;
}

}

@media (max-width:612px){

header > a{
display:none;
}

header > div img{
width:1.25em;
}

header h1{
margin-top:0;
font-size:1.2em;
}

header > div{
margin:0.5em 1em;
}

#Wrapper{
margin-top:0;
}

#STplus{
border-top:none;
}

footer img{
display:block;
}

}

@media (max-width:460px){

header > div{
/* width:100%; */
justify-content:flex-end;
}

}
@media (max-width:390px){

/* header{
padding:0.5em 0.5em 0;
} */

#Form, #Error, #Fussnoten{
padding:0 0.25em;
}

#Legende{
margin:1em 0.25em 0;
padding:0.25em;
}

#Hilfe h2{
font-size:1.1em;
}

#CloseW{
width:1.5em;
height:1.5em;
}

.monospace{
padding:1em;
}

#Tipp{
flex-direction:column;
}

#Tipp img{
margin:0.5em 0;
}

}