@charset "utf-8";

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

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

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

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

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

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

#Form{
margin-top:2em;
padding:0 1em;
}

.Eingabe{
min-width:352px;
max-width:352px;
margin-right:0.5em;
}

#HilfeB{
width:1.25em;
margin-left:0.25em;
cursor:pointer;
}

#WZ35Status, #WZ45Status{
width:7.6em;
}

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

#FehlendeZeit35 span, #FehlendeZeit45 span{
min-width:12px;
margin-right:0.125em;
}

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

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

.Number2{
width:3.675em;
}

.Number4{
width:4.8em;
}

#BInput{
-webkit-appearance:none;
appearance:none;
display:block;
width:100%;
line-height:2.5em;
font-weight:600;
text-align:center;
background-color:#ff9900;
color:#fff;
cursor:pointer;
transition:background-color 0.25s ease, color 0.25s ease;
}

#BInput:hover{
background-color:#555;
color:#ff9900;
}

.BInput0{
background-color:#aaa !important;
color:#fff !important;
cursor:default !important;
}

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

#SVG{
margin-top:1.5em;
margin-right:0.5em;
padding:0 0.5em;
}

#AZeileH{
display:flex;
justify-content:space-between;
padding:0 0.25em;
background-color:#555;
color:#fff;
border:1px solid #555;
}

#AZeileH span{
font-weight:600;
}

#AZeileH > span:not(:first-of-type){
text-align:center;
border-left:1px solid #fff;
}

#AZeileH > span{
line-height:1.75em;
}

#AZeileH > span:nth-of-type(1){
width:174px;
padding-right:0.25em;
text-align:center;
}

#AZeileH > span:nth-of-type(2){
width:52px;
}

#AZeileH > span:nth-of-type(3){
width:70px;
}

#AZeileH > span:nth-of-type(4){
width:46px;
padding-left:0.25em;
}

#Ausgabe > div{
min-width:352px;
max-width:352px;
line-height:2em;
}

.AZeile{
display:flex;
justify-content:space-between;
padding:0 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:174px;
}

.AZeile > div:nth-of-type(2){
width:52px;
padding:0 0.25em;
border-left:1px solid #ccc;
}

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

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

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

#Ausgabe h4{
padding:0 0.25em;
line-height:1.75em;
background-color:#555;
color:#fff;
border:1px solid #555;
}

#Rentenhoehen{
display:flex;
justify-content:space-between;
font-weight:600;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}

#Rentenhoehen > div{
display:flex;
justify-content:center;
align-items:center;
width:100%;
}

#Rentenhoehen > div > div:first-of-type{
width:0;
height:0;
border-top:0.75em solid transparent;
border-bottom:0.75em solid transparent;
margin-right:0.25em;
}

#Legende{
display:flex;
flex-wrap:wrap;
justify-content:center;
min-width:352px;
margin:2em 1em;
padding:0.5em 1em 0 1em;
background-color:#f2f2f2;
}

#Legende > div{
display:flex;
align-items:center;
margin-right:2em;
margin-bottom:0.5em;
}

#Legende > div > div:first-of-type{
min-width:0.5em;
height:1em;
margin:0 0.25em 0 0;
}

/* VRS zp */

#FormVRS_zp{
width:352px;
padding:0;
}

#FormVRS_zp > div{
display:flex;
justify-content:center;
align-items:center;
padding:0 0.25em;
min-height:2em;
background-color:#f2f2f2;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}

#FormVRS_zp > div:not(:first-of-type){
padding:0 0.375em;
}

#FormVRS_zp > div:not(:last-of-type){
border-bottom:1px solid #ccc;
}

#FormVRS_zp > div > div{
display:flex;
justify-content:space-between;
align-items:center;
}

#FormVRS_zp > div:not(:first-of-type) label{
padding:0 0.25em 0 0.375em;
}

@media (max-width:1090px){
#FormVRS_zp{
max-width:352px;
}

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

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

#BeginnVRS label{
padding:0 0.25em;
}

#BeginnVRS > div:first-of-type > span{
display:inline-block;
width:0;
height:0;
border-top:0.8em solid #ff9900;
border-left:0.4em solid transparent;
border-right:0.4em solid transparent;
margin-top:0.125em;
}

#BeginnVRS input:first-of-type{
cursor:default;
}

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

#KastenW{
margin-bottom:0.25em;
padding:0.25em 0.5em;
line-height:normal;
border:2px solid #cc0000;
}

#KastenW > span{
display:inline-block;
width:0;
height:0;
/* vertical-align:middle; */
border-top:0.4em solid transparent;
border-bottom:0.4em solid transparent;
border-left:0.4em solid #555;
}




.Number6{
width:6em;
}

#EingRH > div{
min-height:2em;
padding:0.25em;
}

#EingRH > div{
display:flex;
justify-content:space-between;
align-items:center;
background-color:#f2f2f2;
border-right:1px solid #ccc;
border-bottom:1px solid #ccc;
border-left:1px solid #ccc;
}

/* #EingRH > div:nth-of-type(4){
padding-bottom:0;
border-bottom:0;
}

#EingRH > div:nth-of-type(5){
padding-top:0;
} */

#EingRH > div:nth-of-type(5) > div:first-of-type{
display:flex;
}





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

#Error{
padding:0.25em;
text-align:center;
font-weight:600;
background-color:#CC0000;
color:#fff;
}

.monospace{
margin:1em 0;
padding:1em;
background-color:#f2f2f2;
font-size:0.9em;
font-family:'Roboto Mono', monospace;/* Courier New */
}

.Kasten{
border:1px solid #f2f2f2;
}

.Kasten > div{
display:flex;
align-items:flex-start;
padding:1em;
border:1px solid #ffd699;
}

.Kasten svg{
min-width:2em;
width:2em;
margin-top:0.125em;
margin-right:1em;
fill:#ff9900;
}

/* Startseite/Infoseiten */

.Text{
max-width:800px;
margin:0 auto;
padding:0 1em 1em;
font-size:1.25em;
}

.Text h2{
margin:1.5em 0 0.5em 0;
font-size:1.6em;
color:#555;
}

.Text h3{
margin-top:1.25em;
margin-bottom:0.25em;
font-size:1.25em;
color:#264d73;
}

.Text h4{
margin-bottom:0.125em;
font-size:1.1em;
}

.Text > div{
margin-bottom:1.5em;
}

.Text a{
color:#336699;
}

.Text a:visited{
color:#264d73;
}

.Text a:hover{
color:#e68a00;
}

.Text a strong{
transition:color 0.25s ease;
}

.oListZ > div, .uListB > div{
display:flex;
align-items:flex-start;
}

.oListZ > div > div:first-of-type{
min-width:1em;
width:1em;
}

.uListB > div:not(:last-of-type){
margin-bottom:0.125em;
}

.uListB svg{
min-width:0.25em;
width:0.25em;
margin:0.5em 0.5em 0 0;
fill:#264d73;
}

.RLink{
display:flex;
justify-content:center;
align-items:center;
margin:1em 0 2em;
padding:0.75em 1em;
font-weight:600;
background-color:#555;
border-radius:0.4375em;
transition:background-color 0.25s ease;
}

.RLink svg{
display:inline-block;
height:1.25em;
vertical-align:middle;
margin-right:0.75em;
fill:#fff;
transition:fill 0.25s ease;
}

.RLink span{
display:inline-block;
vertical-align:middle;
color:#fff;
transition:color 0.25s ease;
}

.RLink:hover{
background-color:#333;
}

.RLink:hover span{
color:#ff9900;
}

.RLink:hover svg{
fill:#ff9900;
}

@media(max-width:364px){
.RLink{
display:flex;
justify-content:center;
align-items:center;
}

.RLink svg{
min-width:1.25em;
}
}

/* ////////////// Infoseiten ////////////// */

.TextR{
font-size:1.25em;
}

.TextR a{
color:#336699;
}

.TextR a:visited{
color:#264d73;
}

.TextR a:hover{
color:#ff9900;
}

#TabLinks{
display:flex;
flex-wrap:wrap;
}

.TabLink{
display:flex;
justify-content:flex-start;
align-items:flex-start;
margin-right:0.5em;
margin-bottom:0.5em;
padding:0.375em 0.5em;
border:1px solid #264d73;
transition:border-color 0.25s ease;
}

.TabLink svg{
min-width:1em;
width:1em;
margin-top:0.25em;
margin-right:0.5em;
fill:#264d73;
transition:fill 0.25s ease;
}

.TabLink span{
color:#264d73;
transition:color 0.25s ease;
}

.TabLink:hover{
border-color:#e68a00;
}

.TabLink:hover span{
color:#e68a00;
}

.TabLink:hover svg{
fill:#e68a00;
}

.Stand{
margin-top:3em;
padding-top:0.25em;
text-align:right;
font-size:0.8em;
border-top:1px solid #ccc;
}

/* Rentenhöhe */
.Rechnung{
line-height:1.5em;
font-size:0.9em;
font-family:'Roboto Mono', monospace;
border:1px solid #f2f2f2;
}

.Rechnung > div{
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:0.75em 1em;
text-align:center;
background-color:#f2f2f2;
border:1px solid #ffd699;
}

#Formel{
padding:0.825em 1em;
}

#Formel > div{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

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

@media(max-width:1910px){
#section{
display:block;
max-width:1186px;
margin:0 auto;
}

#SVG{
margin-right:0;
padding:0;
}

#Ausgabe{
position:absolute;
right: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{
justify-content:flex-start;
padding:0.5em 0.5em 0 0.5em;
}

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

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

@media(max-width:390px){
#Form, #Error{
padding:0 0.25em;
}

header h1{
margin-right:0.5em;
}


.Text h2{
font-size:1.4em;
}

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

.monospace{
padding:1em;
}

#Tipp{
flex-direction:column;
}

#Tipp img{
margin:0.5em 0;
}
}

@media(max-width:380px){
#Legende{
margin:2em 0;
}
}

@media(max-width:599px){
.Kasten > div{
display:block;
}

.Kasten svg{
float:left;
margin-right:0.75em;
}
}


