* {
    box-sizing: border-box;
}

html {
    background-image: linear-gradient(to bottom,rgba(0,102,169) 0%, rgb(93,172,216) 100%);
    font-family: 'Roboto', 'Calibri', arial, verdana, helvetica, sans-serif;
    background-attachment: fixed;
    background-position: center;
    justify-content: center;
    background-size: cover;
    display: flex;
    padding: 3rem;
}

body {
    margin: 0;
}

.break {
    display: inline-block;
}

.container {
    box-shadow: 0 0 .75rem rgba(0,0,0,.75);
    background: rgba(255,255,255,.9);
    border-radius: 5px;
    max-width: 880px;
    display: block;
}

.container > * {
    line-height: 1.25rem;
    contain:content;
}

h1 {
    background: rgba(255,255,255,.8);
    border-radius: 5px 5px 0 0;
    padding-left: 14rem;
    padding-top: 4px;
    text-align: center;
    position: relative;
    font-size: 1.25rem;
    line-height: 88px;
    font-weight: 300;
    margin: 0;
}

aside {
    border-radius: 5px 5px 0 0;
    background: rgb(230,0,5);
    padding: .5rem 2rem;
    color: #fff;
}

aside.error {
    background: rgb(230,0,5);
}

aside.success {
    background: rgb(0,130,5);
}

aside a {
    color: #fff;
}

aside + header h1 {
    border-radius: 0;
}

h1:before {
    display: inline-block;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='566' height='164'><path fill='%2366645C' d='M150.1 83.6v8.7h13.8v6.5h-13.8v9.2h16.1l.7-3.4h5.5l.6 9.9h-34.9v-5.1l4.3-1V83.2l-4.3-1v-5.1h34.3l-.6 9.9h-5.5l-.7-3.4zM179.5 82.2v-5.1h17.1v5.1l-4.7 1v25.2l4.7 1v5.1h-17.1v-5.1l4.7-1V83.2zM232.2 82.2v-5.1h16.2v5.1l-4.3 1v31.3h-8.4l-16.4-22.3c-1-1.3-3.2-5-5-8.3.5 3.7.9 8 .9 9.6v14.8l4.3 1v5.1h-16.2v-5.1l4.3-1V83.2l-4.3-1v-5.1h14l15.2 20.8c1.1 1.4 3.2 5.1 4.8 8.3-.4-3.7-.7-8-.7-9.6V83.2l-4.4-1zM284.4 94.9a8.3 8.3 0 005.1-7.7c0-7.6-6.3-10.1-14.1-10.1h-21.1v5.1l4.3 1v25.2l-4.3 1v5.1h22.4c8.3 0 14.2-3.1 14.2-11 .1-4.5-2.8-7.4-6.5-8.6zM276 108h-9.5V83.6h9.2c4.3 0 6.1 1.6 6.1 4 0 3.1-2.1 4.7-6.4 4.7h-3.9v6.3h4.6c4.8 0 7.2 1.5 7.2 4.4-.1 3.7-2.3 5-7.3 5zM308.1 83.6v8.7h13.8v6.5h-13.8v9.2h16l.7-3.4h5.6l.5 9.9H296v-5.1l4.3-1V83.2l-4.3-1v-5.1h34.4l-.6 9.9h-5.6l-.7-3.4zM334.7 96.3c0-11.2 8.3-20.1 20.5-20.1 8.1 0 14.6 3.7 14.6 9.1 0 2.3-1.7 5-5.4 5-2.3 0-4.3-1.8-4.3-4 0-1 .5-1.9.9-2.5a11 11 0 00-5.4-1.2c-8.8 0-12.9 7-12.9 13.4 0 7.3 4.7 12.9 13.7 12.9 5.3 0 9.7-1.9 10.5-2.3l2.7 5.8c-.9.5-6.6 3-13.4 3-13.2 0-21.5-7.2-21.5-19.1M408.6 108.4l5.5 1v5.1H404l-12.1-16.7H388v10.6l4.3 1v5.1H376v-5.1l4.3-1V83.2l-4.3-1v-5.1h16.4v5.1l-4.3 1v8.5h3.5l7.8-9.8c3.5-4.4 6.3-5.8 8.8-5.8 3.3 0 6.1 2.2 6.1 5.4 0 2.5-1.8 5-4.8 5-1.6 0-3-.9-3.5-2.3-.5.2-1 .5-2.1 2l-6.1 8 10.8 14.2z'/><path fill='%23E60005' d='M106.2 99.4c0-1.3 0-2.5-.2-3.7-.1-.8-.3-1.7-.7-2.8l-.1-.2c-.1-.4-.5-.6-.9-.6-.4.1-.7.4-.7.8v.4a23.4 23.4 0 01-9 16.6c-7 5.4-17.8 6.8-26.7.7-8.9-6.1-9.7-15.3-9.7-15.3s-2-9.6 4.8-17.9c6.8-8.3 16.2-8.5 16.2-8.5.6 0 1.2-.3 1.6-.7l1.4-1.4c.2-.2.3-.5.2-.8a1 1 0 00-.5-.6 10 10 0 01-6.2-9.9 9.7 9.7 0 018.4-9l1.4-.1c1.5 0 2.9.3 4.2 1l.4.1c.3 0 .6-.2.8-.5.1-.3.1-.7-.2-.9a13.7 13.7 0 00-10.2-4.6l-1.9.1c-6.5.9-11.6 6.4-11.9 12.8-.2 4.1 1.4 7.9 4.4 10.7 0 0-22.9 5.1-22.9 28.9 0 16.8 14 30.2 30.5 30.2a27.4 27.4 0 0013.8-3.5c2.7-1.5 5.1-3.4 7.2-5.6a25.1 25.1 0 006.5-15.6v-.1z'/><path fill='%23A39F94' d='M118.9 98.7c-.2-.3-.4-.6-.8-.6s-.8.3-.8.8c-.8 16.6-11.6 25.9-11.6 25.9s-10.9 11.4-28.3 10.5a37.8 37.8 0 01-27-13.7l-.6-.3c-.5 0-1 .4-.8 1.1 0 0 3.2 15 21.3 21s33.1-4.2 33.1-4.2 11.5-6.4 15.9-20.1a28.7 28.7 0 00-.4-20.4z'/></svg>");
    background-size: 100%;
    position: absolute;
    height: 82px;
    width: 283px;
    content: "";
    left: 0;
    top: 0;
}

.desc {
    margin: 2rem;
    padding: .5rem 1rem;
    background: rgba(163,159,148, .4);
    border-radius: 3px;
}
.desc, .desc p {
    word-wrap: break-word;
}

summary, h2 {
    border-radius: 3px;
    background: rgb(230,0,5);
    color: #fff;
    padding: 1rem;
}

.desc h2 {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    margin: -.5rem -1rem 2rem;
    font-size: 1.25rem;
    line-height: 1.5rem;
    font-weight: normal;
    font-weight: 400;
}

summary {
    margin: 2rem;
}

[itemtype="https://schema.org/Person"] [itemprop]:not([itemprop="telephone"]) {
    display: block;
}

details[open] .desc {
    border-radius: 0 0 3px 3px;
}

details[open] summary {
    border-radius: 3px 3px 0 0;
    margin-bottom: -2rem;
}

.candidate {
    position: relative;
}

.candidate dl,
.candidate .dl {
    margin: .75rem 0;
    display: grid;
    gap: .5rem 1rem;
    grid-template-columns: auto auto;
}

.confirmation label,
.candidate label {
    background: rgba(255,255,255,.8);
    position: relative;
    margin: .75rem 0;
    display: flex;
}

.confirmation label {
    padding: 1rem 3rem 1rem 5.5rem;
}

.candidate label {
    padding: .5rem 5rem .5rem 3rem;
    justify-content: space-between;
}

.candidate input:disabled ~ label {
    padding-right: 3rem;
}

.confirmation input,
.confirmation label:before,
.confirmation label:after,
.candidate input,
.candidate label:before,
.candidate label:after {
    transform: translateY(-50%);
    position: absolute;
    right: 3rem;
    top: 50%;
}
.confirmation input,
.confirmation label:before,
.confirmation label:after {
    right: auto;
    left: 3rem;
}
.confirmation input,
.candidate input {
    transform: translateX(-50%) translateY(-50%);
    margin: 0;
    z-index: -1;
    opacity: 0;
}

.confirmation input {
    transform: translateX(50%) translateY(-50%);
}
.confirmation label:before,
.candidate label:before {
    border: 2px solid rgb(163,159,148);
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    content: "";
}

.confirmation label:before {
    height: 1.25rem;
    width: 1.25rem;
}
.candidate label:before {
    border-radius: 50%;
}
.confirmation input:focus + label,
.candidate input:focus + label {
    box-shadow: 0 0 0 2px rgb(230,0,5) inset;
}
input:disabled + label:before {
    opacity: 0;
}
.confirmation input:checked + label:before,
.candidate input:checked + label:before {
    border-color: rgb(230,0,5);
}
.confirmation input:checked + label:after,
.candidate input:checked + label:after {
    border-bottom: 2px solid rgb(230,0,5);
    border-left: 2px solid rgb(230,0,5);
    transform: rotate(-.135turn) translateY(calc(-50% - 4px)) translateX(0px);
    display: block;
    height: .45rem;
    width: .85rem;
    content: "";
}
.confirmation input:checked + label:after {
    transform: rotate(-.135turn) translateY(-2px) translateX(8px);
}

#controls {
    padding: 0 3rem 4rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    gap: .5rem;
}
#controls label {
    position: absolute;
    z-index: -1;
    opacity: 0;
}
#controls input,
#controls button {
    border-radius: 3px;
    padding: .75rem 1rem;
    margin: .5rem 0;
}
#controls input {
    font-family: 'Courier New', Courier, monospace;
    border: 2px solid rgb(163,159,148);
    text-transform: uppercase;
    font-size: 1.25rem;
}
#controls button {
    background: rgb(230,0,5);
    padding: .75rem 1.25rem;
    align-self: stretch;
    margin-left: 1.5rem;
    height: 3.125rem;
    color: white;
    border: none;
}

footer {
    background: rgba(0,102,169,1);
    border-radius: 0 0 5px 5px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    display: flex;
    height: 4rem;
}

footer a {
    color: white;
    padding: .5rem;
}

ul {
    padding-left: 1rem;
}

ul li {
    line-height: 3rem;
    contain: layout;
}

ul a {
    display: block;
    line-height: 1.25rem;
    padding: .875rem 0;
    margin: 1px 0;
}

.table {
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
}

.table td, .table th {
    border-collapse: collapse;
    border: 1px solid black;
    padding: 2px 5px;
}

@media screen and (max-width: 50rem) {
    html {
        padding: .5rem;
    }
    h1 {
        padding: 5rem 1rem 1rem;
        line-height: 2rem;
    }
    aside {
        padding: .125rem 1rem;
    }
    main > h2 {
        padding: 0.5rem 1rem;
    }
    #controls {
        padding: 1rem 3rem 2rem;
        justify-content: center;
    }
    #controls button {
        margin-left: 0;
    }
    .candidate label {
        padding: 0 3rem 0 1rem;
    }
    .candidate input:disabled ~ label {
        padding-right: 1rem;
    }
    .confirmation label {
        padding: 1rem 1rem 1rem 3rem;
    }
    .candidate input,
    .candidate label:before,
    .candidate label:after {
        right: 1rem;
    }
    .confirmation input,
    .confirmation label:before,
    .confirmation label:after {
        left: 1rem;
    }
    .desc,
    summary {
        margin: .5rem;
    }
    details[open] summary {
        margin-bottom: -.5rem;
    }
}

/*
@media screen and (min-width: 50rem) {
    html {
        background-image: url("https://www.einbeck.de/pics/galerie/orig_image_161676879361.jpeg"), linear-gradient(to bottom,rgba(0,102,169) 0%, rgb(93,172,216) 100%);
    }
}
*/