@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-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');
}

*{
margin:0;
padding:0;
text-decoration:none;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
border:0;
font-family:'Source Sans Pro', sans-serif;
}

a, label{
display:inline-block;
}

body{
background-color:#ebf3f9;
}

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

header{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
padding:1.5em 2em;
font-weight:600;
background-color:#337ab7;
color:#fff;
}

header a{
display:flex;
justify-content:space-between;
align-items:center;
color:#fff;
}

header span{
font-size:2em;
letter-spacing:-1px;
}

header div{
display:flex;
/* justify-content:flex-end; */
align-items:center;
}
header div div{
font-size:1.5em;
}

header img{
height:2em;
margin-left:1.5em;
}

/* nav{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
margin-bottom:2em;
}

nav a{
display:flex;
justify-content:center;
align-items:center;
width:300px;
height:70px;
margin:0 auto 1em;
font-size:1.5em;
background-color:#337ab7;
color:#fff;
border:1px solid #275d8b;
}

nav a:hover{
background-color:#ebf3f9;
color:#333;
}

.aktiv{
background-color:#04b404;
color:#fff !important;
border:1px solid #04b404;
cursor:default;
}

.aktiv:hover{
background-color:#04b404;
} */


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

.Wrapper{
max-width:1200px;
margin:0 auto;
padding:3em 4em 2em;
font-size:1.25em;
background-color:#fff;
color:#333;
}

h1{
margin-left:-1px;
font-size:1.8em;
font-weight:400;
}

.Ueberschrift{
display:flex;
justify-content:space-between;
align-items:center;
}

.Ueberschrift img{
height:3em;
margin-left:2em;
}


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

form{
max-width:900px;
margin:3em auto 2em;
}

.Eingabe{
padding:2em;
background-color:#fafafa;
border:1px solid #ccc;
}

.Eingabe > div:not(:last-child){
margin-bottom:1em;
}

.Eingabe > div{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}

.Eingabe > div div{
display:flex;
align-items:center;
}

.Eingabe label{
padding:0.5em 0.5em 0.5em 0;
font-size:1.25em;
}

.Eingabe input[type=text]{
z-index:999;
width:6em;
height:2em;
padding:0.25em;
font-size:1.5em;
text-align:right;
border:1px solid #bbb;
}

.Eingabe span{
display:flex;
justify-content:center;
align-items:center;
width:1.5em;
height:2em;
font-size:1.5em;
background-color:#fff;
border-top:1px solid #bbb;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
}

form h3{
margin:2em 0 0.5em;
}

/* .AngabenNettoberechnung{
padding:2em;
background-color:#fafafa;
border:1px solid #ccc;
}

.AngabenNettoberechnung > div{
margin-bottom:0.25em;
}

.AngabenNettoberechnung > div{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
}

.AngabenNettoberechnung > div > div{
display:flex;
flex-wrap:nowrap;
justify-content:space-between;
align-items:center;
}

.AngabenNettoberechnung label{
display:flex;
align-items:center;
height:2em;
padding:0 1em 0 0;
cursor:pointer;
}

.AngabenNettoberechnung span{
display:flex;
justify-content:center;
align-items:center;
width:1.25em;
height:2em;
font-size:20px;
background-color:#fff;
border-top:1px solid #bbb;
border-right:1px solid #bbb;
border-bottom:1px solid #bbb;
}

.AngabenNettoberechnung select{
width:14em;
height:2em;
padding:0.25em;
font-size:1em;
text-align:right;
border:1px solid #bbb;
}

.AngabenNettoberechnung input[type=text]{
width:12.75em;
height:2em;
padding:0.25em;
font-size:1em;
text-align:right;
border:1px solid #bbb;
} */

.Berechnen{
display:flex;
flex-wrap:wrap;
justify-content:space-around;
align-items:center;
}

.Berechnen input{
-webkit-appearance:none;
min-width:280px;
max-width:300px;
height:70px;
margin:2em auto 0;
font-size:1.5em;
text-align:center;
background-color:#337ab7;
color:#fff;
border:1px solid #275d8b;
}

.Berechnen input:hover{
background-color:#ebf3f9;
color:#333;
cursor:pointer;
}

#Error{
padding:1em;
text-align:center;
color:#ae1414;
}

/* .DisplayNone{
display:none;
}

.DisplayFlex{
display:flex;
} */

/* #Info1{
display:none;
margin:1em auto;
padding:1em;
background-color:#333;
color:#fff;
} */

/* .labelW{
cursor:pointer;
} */

/* .labelW img{
height:1.25em;
margin-right:0.5em;
}

.InfoC p{
margin-bottom:0.25em;
} */

/* /////// AUSGABE /////// */

.Ausgabe{
display:flex;
flex-direction:column;
margin:3em 0 0;
font-size:1.1em;
}

.Ausgabe2{
margin:0 0 2em;
font-size:1.1em;
text-align:center;
}

.Ausgabe2 h3{
padding:0.5em;
background-color:#444;
color:#fff;
}

.Ausgabe2 > div{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

.Ausgabe2 span{
display:inline-block;
padding:1em;
}

.Ausgabe2 div > div{
display:flex;
flex-direction:column;
justify-content:space-between;
border:1px solid #ccc;
}

.Zeile1_1{
max-width:500px;
}

.Zeile1_1 div{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
}

.Zeile1_1 div div:not(:first-of-type){
margin-bottom:0.25em;
}

.Zeile1_1 div div:first-of-type{
margin-right:10px;
}

@media (max-width:540px){
.Zeile1_1 div{
display:block;
}

}

.Zeile2_1 div, .Zeile2_2 div, .Zeile3 div{
width:30%;
min-width:300px;
margin:0 0.5em 1em;
}

.Zeile2_1, .Zeile2_2, .Zeile3{
margin-top:1em;
}

.Zeile2_1{
display:flex;
flex-wrap:wrap;
justify-content:center;
}

/* .blue{
background-color:#ebf3f9;
} */

.red{
background-color:#fff5e6;
}

/* .blue,  */.red, .Fehler{
width:100%;
font-size:1.25em;
}

.Fehler{
background-color:#fafafa;
color:red;
}

.fett{
font-weight:600;
}

.borderb{
border-bottom:1px solid #aaa
}

.Steuerklasse{
margin:0 2em 2em;
font-size:0.8em;
text-align:left;
}

.NeueBerechnung{
display:inline-block;
min-width:300px;
margin:0.75em auto 2em;
padding:0.5em 1em;
font-size:1.5em;
text-align:center;
background-color:#337ab7;
color:#fff;
border:1px solid #275d8b;
}

.NeueBerechnung:hover{
background-color:#ebf3f9;
color:#333;
}

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

footer{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
padding:0 1em;
font-size:1.25em;
background-color:#222;
color:#eee;
}

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

footer div:first-child{
padding:1.5em 0 1.5em 1.5em;
}

footer a{
padding:1.5em;
color:#eee;
}

footer a:hover{
text-decoration:underline;
color:#fff;
}

@media (max-width:1040px){
.Eingabe label{
display:block;
font-size:1.1em;
text-align:center;
}

.Eingabe div{
display:block;
}
.Eingabe > div div {
justify-content:center;
}

}

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

.AngabenNettoberechnung > div > div{
justify-content:flex-start;

}

}

@media (max-width:650px){

header{
display:block;
padding:0.5em 1em;
}

header span{
min-width:152px;
margin-right:1em;
font-size:1.5em;
}

header img{
height:1.25em;
margin-left:0.75em;
}

header div:last-of-type{
justify-content:flex-end;
font-size:1.1em;
}

.Wrapper{
padding:2em 1em 2em;
}

h1{
font-size:1.25em;
}

.Ueberschrift img{
height:2em;
}

.Ausgabe{
margin:2em 0 1em;
}

.ZeileForm{
display:block;
}

.Eingabe{
padding:0.5em 0.5em 1em 0.5em;
}

.AngabenNettoberechnung{
padding:0.5em;
}

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

.FLinks{
display:block;
}

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

.Trenner{
display:none;
}

.Steuerklasse{
margin:0 0 2em;
}

}

/* Ergebnisausgabe Abgaben */

.wrapP{
max-width:900px;
margin:2em auto;
padding:0 1em 1em;
background-color:#337ab7;
border:1px solid #ccc;
}

.wrapP h4{
color:#fff;
}

.wrapP > div{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
margin-bottom:0.5em;
padding:0.5em;
background-color:#fff;
border:1px solid #ccc;
}