:root {

    --grid-spacing: 1rem;
    --grid-spacing-vertically: 1rem;
    --navi-width: 200px;
    --textcolor: gray;
    --body-wrapper-background-color: #fff;
    --hintergrund: #ffffff;

}

html {
    background-color: var(--hintergrund);

}


body {
    color: #333;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 16px;
    background: -moz-linear-gradient(270deg,#605e59 0,#fff 750px);
    background: -webkit-gradient(linear,270deg,color-stop(0,#605e59),color-stop(750px,#fff));
    background: -webkit-linear-gradient(270deg,#605e59 0,#fff 750px);
    background: -o-linear-gradient(270deg,#605e59 0,#fff 750px);
    background: -ms-linear-gradient(270deg,#605e59 0,#fff 750px);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#605e59',endColorstr='#ffffff',GradientType='1');
    background: linear-gradient(180deg,#605e59 0,#fff 500px);
}


h2 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 3vh;
    max-width: 78vw;
}


p {

    font-size: 100%;
    line-height: normal;
    margin: 20px 0 5px 0;
    text-align: left;
}

p.disabled a {
    color:#ccc;
}

.disabled {
    color:#ccc;
}

a button{
    text-decoration: none;
}
#wrapper {
    width:78vw;
    min-width:240px;
    max-width:800px;
    /*text-align: center;*/
    margin: 0 auto;
}

#wrapper ul {
    list-style: disc;
    margin-left: 20px;
}
#wrapper li {
    list-style-position: outside;
    list-style-type: disc;
    padding: 5px;
    line-height: normal;
}

#link_to_website {
    width: 50vw;
}

input[type='text'], select, textarea {
    padding: 3px;
    font-size: 100%;
    color: #333;
    background: #f1f1f1;
    border: 1px solid #ddd;
    display: block;
    /*text-align: center;*/
    /*    width: 50vw;*/
    width: 100%;
    max-width: 78vw;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 0px;


    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    -webkit-border-radius: 0px;

}

select {
    color: #333;
    background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
    background-position: 99% 50%;
    background-repeat: no-repeat;
    background-size: 16px;
}
option {
    color: #333;
}


input[name^="ansprechpartner"], input[name^="standpersonal"], select[name^="standpersonal"] {
    width: 32%;
    margin-right: 1%;
    text-align: left;
    float: left;
}


button {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    display: block;
    text-transform: uppercase;
    padding: 10px 0;
    border: 0;
    float: none;
    /*width: 50vw;*/
    width: 100%;
    max-width: 78vw;
    background: #efefef;
    color: #000;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

button:hover:not([disabled]) {
    color: #fff;
    background: #cecece;
}

.infoarea {
    color: #777;
    font-style: italic;
    border: 1px dotted #777;
    padding: 1vw;
    margin: 1vw 0;
    line-height: 1.5rem;
    text-align: left;
    max-width: calc(68vw - 2px);
}

label.error {
    display: block;
    width: 100%;
    max-width: calc(68vw - 2px);
    color: red;
    font-style: italic;
    border: 1px dotted #f00;
    padding: 1vw;
    margin: 1vw 0;

    line-height: normal;
}

.listname{
    width: 50%;
    float:left;
    font-weight: bold;
    text-align: left;
}


.listappearance{
    font-size: smaller;
    font-weight: normal;
}

.e-mail {
    width: 30%;
    float:left;
    text-align: right;
}

.post {
    width: 20%;
    float:left;
    text-align: right;
}

td {
    padding: 5px 0;
}

th {
    font-weight: bold;
    text-align: left;
}

@media (max-width: 640px)
{

    #wrapper {
        width: 70vw;
    }

    #link_to_website {
        display: none;
    }
}

@media (max-width: 460px)
{

    .optional_break {
        display: none;
    }

    .listname{
        width: 100%;
        margin-bottom: 1rem;
        margin-top: 1rem;

    }

    .e-mail {
        width: 50%;
        float:left;
        clear:both;
        text-align: left;
    }

    .post {
        width: 50%;
        float:left;
        text-align: left;
    }