/* ==========================================================================
   Component Styles
   ========================================================================== */

/* Buttons */
.button,
button,
input[type="submit"],
input[type="button"] { 
    width: auto; 
    display: inline-block; 
    box-sizing: border-box; 
    font-weight: normal; 
    border: none; 
    cursor: pointer;  
    padding: 0.8vh calc(1.2vw + 7px);   
    border-radius: 3px; 
    background: #f08019; 
    color: #fff; 
    margin: 0 auto; 
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover { 
    background-color: #174f99; 
}

/* Button Focus State Fix */
input[type="submit"]:focus,
input[type="button"]:focus,
.button:focus,
button:focus {
    background: #f08019;
    color: #fff;
}
input[type="submit"]:focus:hover,
input[type="button"]:focus:hover,
.button:focus:hover,
button:focus:hover {
    background-color: #174f99;
}

/* Box */
.box { 
    padding: 10px; 
    background: rgba(23,79,153,0.1); 
    border-radius: 10px; 
}

/* Leistungsübersicht Liste */
ul.leistungen { 
    padding: 0; 
    margin: 0; 
    list-style: none; 
    display: flex; 
    flex-wrap: wrap; 
    align-content: space-between; 
}
ul.leistungen li { 
    position: relative; 
    padding: 0 0 0 40px; 
    margin: 5px 0;
    flex-basis: 50%; 
    display: inline-block; 
    box-sizing: border-box;  
}
ul.leistungen li:before { 
    content: "\f00c";  
    font-size: 20px;  
    font-family: FontAwesome; 
    color: #f08019; 
    position: absolute; 
    left: 0; 
    top: 0; 
}
@media all and (max-width: 500px) {
	ul.leistungen li { flex-basis: 100%; }
}

/* Formular-Styling */
form {
    margin-bottom: 20px;
}
input,
select,
textarea { 
    font-family: Tahoma, Arial, Helvetica, Sans-Serif; 
    text-align: left !important; 
    display: inline-block; 
    outline: none; 
    width: 100%; 
    border-radius: 0.2em;  
    box-sizing: border-box; 
    margin: 0 0 10px 0; 
    padding: 8px 10px; 
    border: 1px solid #ccc; 
    background: rgba(255,255,255,0.7); 
}
input[type="radio"],
input[type="checkbox"] { 
    width: auto; 
    margin-right: 10px; 
    display: inline-block; 
}
textarea { 
    font-size: 13px; 
    height: 80px; 
}
fieldset { 
    position: relative; 
    display: block; 
    padding: 0; 
    margin: 0; 
    border: none; 
    border-radius: 0; 
}
fieldset legend { 
    font-size: 14px; 
    font-weight: bold;  
}

/* Formular-Feedback */
.info, .message { 
    border: 1px solid #174f99; 
    line-height: 140%; 
    background: rgba(23,79,153,0.1); 
    padding: 10px; 
    margin: 10px 0; 
}
.info.error { 
    border-color: #ae0101; 
    background: #f7e3e3; 
}
input:user-invalid,
textarea:user-invalid {
    border-color: #ae0101 !important;
    background-color: #f7e3e3 !important;
}
input:not([type="submit"]):not([type="button"]):not(.button):focus,
select:focus,
textarea:focus { 
    background: #fff;  
}

/* Bilder */
picture, .img { 
    position: relative; 
    max-width: 100%; 
    width: auto; 
    text-align: center; 
    overflow: hidden; 
    box-sizing: border-box; 
    display: block; 
}
img { 
    max-width: 100%; 
    width: auto; 
    height: auto; 
}
.image-right { 
    float: right; 
    margin: 0 0 5px 15px; 
}
.image-left { 
    float: left; 
    margin: 0 15px 5px 0; 
}

/* ==========================================================================
   Spam Protection (Honeypot)
   ========================================================================== */
.honeypot-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
    visibility: hidden;
    height: 0;
    width: 0;
}