/*
 * Die Einteilung im Projektformular.
 *
 * Sie stand bisher zwischen den übrigen Feldern, ohne sich davon abzuheben –
 * und weil sie mehrere Zeilen mit eigenen Auswahlfeldern enthält, war beim
 * Lesen nicht zu erkennen, wo sie anfängt und wo sie aufhört. Das Feld
 * darunter sah aus, als gehöre es dazu.
 *
 * Deshalb ein eigener Block mit Rand und Überschrift. Struktur, keine
 * Gestaltung: Farben und Rundungen gehören in app.css, hier steht nur die
 * Abgrenzung.
 */

.einteilung {
    margin: .4rem 0;
    padding: .9rem 1rem 1rem;
    border: 1px solid rgba(128, 128, 128, .28);
    border-radius: 10px;
}

/* Die Überschrift trägt den Block – sie darf nicht wie eine Feldbeschriftung
   aussehen. */
.einteilung > .feld-titel {
    display: block;
    margin-bottom: .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid rgba(128, 128, 128, .2);
    font-weight: 600;
}

/* Zwischen den Einsätzen etwas Luft: eine Zeile ist eine Person mit Zeitraum
   und Aufgabe, keine Fortsetzung der vorherigen. */
.einteilung .einteilung-zeilen > * + * {
    margin-top: .45rem;
}

.einteilung > small {
    display: block;
    margin-top: .6rem;
}