.eswsb-board { max-width: 640px; margin: 1.5rem 0; font-family: inherit; }
.eswsb-board__header { margin-bottom: 1rem; }
.eswsb-board__title { margin: 0 0 .25rem; }
.eswsb-board__stand { margin: 0; color: #666; font-size: .9em; }
.eswsb-phases { list-style: none; margin: 0; padding: 0; }
.eswsb-phase {
    display: grid;
    grid-template-columns: 24px 1fr auto;
    grid-template-areas: "light name status" "light note note" "light date date";
    gap: .15rem .75rem;
    align-items: center;
    padding: .75rem 0;
    border-bottom: 1px solid #eee;
}
.eswsb-light {
    grid-area: light;
    width: 18px; height: 18px; border-radius: 50%;
    display: inline-block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
.eswsb-light--rot { background: #e02b2b; }
.eswsb-light--gelb { background: #f5b50a; }
.eswsb-light--gruen { background: #2faa3f; }
.eswsb-phase__name { grid-area: name; font-weight: 600; }
.eswsb-phase__status { grid-area: status; font-size: .85em; color: #444; }
.eswsb-phase__note { grid-area: note; color: #555; font-size: .9em; }
.eswsb-phase__date { grid-area: date; color: #777; font-size: .85em; }
.eswsb-form { max-width: 360px; margin: 1.5rem 0; }
.eswsb-form input[type="text"] { width: 100%; padding: .5rem; margin-bottom: .5rem; }
.eswsb-error { color: #b30000; margin-bottom: .5rem; }
.eswsb-picker { list-style: none; padding: 0; }
.eswsb-picker li { margin: .25rem 0; }