/* Formulare der Verwaltung. Regeln: /doku/paradigmen-oberflaeche, Abschnitt Formulare.
   Die Beschriftung steht ueber dem Feld und ist ueber "for" damit verbunden. Die Breite sagt,
   was hineingehoert; darum gibt es benannte Breiten und keine gemeinsame Mindestbreite.
   Die Namen der Breiten sind die Konstanten aus Cms\Rahmen\Formular. */

form {
    max-width: var(--formularbreite);
}

/* Ein Feld ist eine Saeule aus Beschriftung, Bedienelement, Hinweis und Fehler. */
.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-1);
    margin-block: var(--abstand-3);
}

.feld > label {
    font-weight: 600;
    margin: 0;
}

.feld > .hinweis,
.feld > .fehler {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: var(--schrift-klein);
}

.feld > .fehler {
    color: var(--warnung);
    font-weight: 600;
}

.pflicht {
    color: var(--gedaempft);
    font-weight: 400;
    font-size: var(--schrift-klein);
}

/* Breiten nach Inhalt. Schmaler als der Platz, nie breiter als er. */
.feld.breit > input,
.feld.breit > select,
.feld.breit > textarea {
    width: 100%;
}

.feld.mittel > input,
.feld.mittel > select,
.feld.mittel > textarea {
    width: min(100%, var(--breite-mittel));
}

.feld.schmal > input,
.feld.schmal > select,
.feld.schmal > textarea {
    width: min(100%, var(--breite-schmal));
}

.feld.winzig > input,
.feld.winzig > select,
.feld.winzig > textarea {
    width: min(100%, var(--breite-winzig));
}

/* Beschriftung, die das Feld umschliesst: bis die uebrigen Ansichten auf Formular umgestellt
   sind, gilt dieselbe Anordnung auch dort. */
label {
    display: block;
    margin-block: var(--abstand-3) var(--abstand-1);
}

label > input:not([type="checkbox"]):not([type="radio"]),
label > select,
label > textarea {
    display: block;
    margin-top: var(--abstand-1);
    width: 100%;
}

fieldset {
    border: 1px solid var(--linie);
    padding: var(--abstand-4);
    margin: var(--abstand-5) 0;
}

legend {
    font-weight: 700;
    padding-inline: var(--abstand-2);
}

/* Traegt die Beschriftung zugleich eine Ueberschrift, sitzt sie ohne eigenen Aussenabstand auf
   der Linie des Rahmens → /doku/paradigmen-oberflaeche. */
legend > h2,
legend > h3 {
    margin: 0;
}

input,
select,
textarea {
    font: inherit;
    color: inherit;
    background: var(--grund);
    border: 1px solid var(--rand);
    padding: var(--abstand-2);
    max-width: 100%;
}

/* Trefferflaeche mindestens 24 x 24 CSS-Pixel (WCAG 2.5.8). */
input[type="checkbox"],
input[type="radio"] {
    width: var(--ziel-klein);
    height: var(--ziel-klein);
    accent-color: var(--betont);
}

.schalter,
label.checkbox {
    display: flex;
    align-items: center;
    gap: var(--abstand-2);
    min-height: var(--ziel-klein);
    margin-block: var(--abstand-2);
}

.schalter > label {
    font-weight: 400;
    margin: 0;
}

/* Ein Formular, dessen Felder und Schaltflaeche in einer Zeile stehen, weil es nur eines gibt.
   Die Schaltflaeche steht auf Hoehe der Felder, nicht auf Hoehe der Beschriftung: der Versatz
   ist genau eine Beschriftungszeile. */
form.waagerecht {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--abstand-3);
}

form.waagerecht .feld {
    margin: 0;
}

form.waagerecht > button {
    margin-top: var(--beschriftungshoehe);
}

/* Die Leiste zum Einsetzen von Komponenten: zwei Gruppen nebeneinander, solange Platz ist. */
.komponenten fieldset {
    margin: var(--abstand-4) 0 0;
}

.komponenten .aktionen {
    margin: var(--abstand-3) 0 0;
}

/* Bildwahl: Vorschau neben dem Feld, damit die Wahl sichtbar wird, ohne das Feld nachzubauen. */
.bildwahl {
    display: flex;
    gap: var(--abstand-4);
    align-items: flex-start;
    flex-wrap: wrap;
}

.bildwahl .feld {
    flex: 1 1 var(--breite-mittel);
}

.bildwahl .vorschau {
    border: 1px solid var(--linie);
    padding: var(--abstand-2);
    background: var(--flaeche);
}

.bildwahl .vorschau img {
    display: block;
    max-width: var(--vorschaubreite);
    height: auto;
}

.bildwahl .vorschau p {
    margin: var(--abstand-2) 0 0;
    font-size: var(--schrift-klein);
    color: var(--gedaempft);
}