/* Vereinfachte, barrierefreie Variante des MD3 "outlined text field": Label steht fest
   ueber dem Feld (statt animiert in der Randlinie), das erhaelt volle Screenreader- und
   Tastatur-Kompatibilitaet ohne zusaetzliches JS. */
.md-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.md-field label {
    font-size: var(--md-sys-typescale-body-medium-size);
    line-height: var(--md-sys-typescale-body-medium-line-height);
    color: var(--md-sys-color-on-surface-variant);
}

.md-field input,
.md-field select,
.md-field textarea {
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-extra-small);
    padding: 12px 16px;
    font-size: var(--md-sys-typescale-body-large-size);
    line-height: var(--md-sys-typescale-body-large-line-height);
}

.md-field input:hover,
.md-field select:hover,
.md-field textarea:hover {
    border-color: var(--md-sys-color-on-surface);
}

.md-field input:focus-visible,
.md-field select:focus-visible,
.md-field textarea:focus-visible {
    outline: none;
    border-color: var(--md-sys-color-primary);
    box-shadow: 0 0 0 1px var(--md-sys-color-primary);
}

.md-field--error input,
.md-field--error select,
.md-field--error textarea {
    border-color: var(--md-sys-color-error);
}

.md-field__supporting-text {
    font-size: var(--md-sys-typescale-label-medium-size);
    line-height: var(--md-sys-typescale-label-medium-line-height);
    color: var(--md-sys-color-on-surface-variant);
}

.md-field--error .md-field__supporting-text {
    color: var(--md-sys-color-error);
}

.md-field textarea {
    resize: vertical;
    min-height: 80px;
}