* { --label-width: 255px; }

.form {
    background-color: rgb(232, 240, 247);
    color: black;
    width: 500px;
    padding: 10px;
    margin: 0 auto;
}

.form div:first-child {
    text-align: center;
    font-weight: bold;
}

.form label {
    width: 500px;
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
}

.form fieldset {
    display: inline-block;
    width: 250px;
    vertical-align: middle;
}

/* Attributbasierte Auszeichnung */
.form [type='text'], 
.form [type='email'], 
.form [type='password'], 
.form select, 
.form textarea {
    width: var(--label-width);
    vertical-align: middle;
}

.form [type='submit'], 
.form [type='reset'], 
.form [type='button'] {
    width: calc(var(--label-width) / 2 - 2px);
    height: 25px;
}

.form [type='submit'], 
.form [type='button'] {
    background-color: coral;
    border: solid 1px darkgray;
    border-radius: 5px;
}

.form [type='submit']:hover, 
.form [type='button']:hover {
    background-color: azure;
}

.form [type='submit']:active, 
.form [type='button']:active {
    background-color: grey;
}

.form div {
    margin-top: 5px;
    margin-bottom: 5px;
}

.form textarea {
    resize: vertical;
    min-height: 50px;
    max-height: 150px;
}