/* ============================================================
   05-FORMS.CSS
   Formulare, Inputs, Labels, Textareas, Selects (Core)
   ============================================================ */


/* 1. LABELS */
label {
    display: block;
    font-family: var(--cd-font-body);
    font-size: var(--cd-fs-small);
    font-weight: var(--cd-fw-semibold);
    color: var(--cd-color-text);
    margin-bottom: var(--cd-space-2xs);
}


/* 2. INPUTS, TEXTAREAS, SELECTS — Basis-Style */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select,
.cd-input {

    display: block;
    width: 100%;
    padding: 0.75em 1em;

    font-family: var(--cd-font-body);
    font-weight: var(--cd-fw-medium);
    font-size: var(--cd-fs-body);
    line-height: var(--cd-lh-normal);
    color: var(--cd-color-text);

    background-color: var(--cd-color-bg);
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-md);

    transition:
        border-color var(--cd-transition-base),
        box-shadow var(--cd-transition-base);

    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
    outline: none;
}


/* 3. PLACEHOLDER */
input::placeholder,
textarea::placeholder {
    color: var(--cd-color-text-muted);
    opacity: 1;
}


/* 4. FOCUS-STATE — Teal-Ring */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus,
.cd-input:focus {
    border-color: var(--cd-color-primary);
    box-shadow: 0 0 0 3px var(--cd-color-primary-tint);
}


/* 5. TEXTAREA */
textarea {
    min-height: 8em;
    resize: vertical;
}


/* 6. SELECT — eigener Pfeil (Anthrazit) */
select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%232E3A38' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1em center;
    padding-right: 2.5em;
    cursor: pointer;
}


/* 7. CHECKBOXEN & RADIO-BUTTONS */
input[type="checkbox"],
input[type="radio"] {
    width: 1.15em;
    height: 1.15em;
    accent-color: var(--cd-color-primary);
    cursor: pointer;
    margin-right: var(--cd-space-2xs);
    vertical-align: middle;
}


/* 8. FIELDSET & LEGEND */
fieldset {
    border: 1px solid var(--cd-color-border);
    border-radius: var(--cd-radius-md);
    padding: var(--cd-space-md);
    margin: 0 0 var(--cd-space-md) 0;
}

legend {
    font-weight: var(--cd-fw-semibold);
    padding: 0 var(--cd-space-xs);
    color: var(--cd-color-text);
}


/* 9. FORM-ABSTÄNDE & LAYOUT-KLASSEN */
form > * + * {
    margin-top: var(--cd-space-md);
}

.cd-form-group {
    display: flex;
    flex-direction: column;
    gap: var(--cd-space-2xs);
}

.cd-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cd-space-md);
}

@media (max-width: 640px) {
    .cd-form-row {
        grid-template-columns: 1fr;
    }
}


/* 10. VALIDIERUNGS-ZUSTÄNDE */
input:user-invalid,
textarea:user-invalid,
select:user-invalid {
    border-color: #DC3545;
}

input:user-invalid:focus,
textarea:user-invalid:focus,
select:user-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15);
}

.cd-input--error {
    border-color: #DC3545;
}

.cd-form-message--error {
    color: #DC3545;
    font-size: var(--cd-fs-small);
    margin-top: var(--cd-space-2xs);
}

.cd-form-message--success {
    color: #2E7D52;
    font-size: var(--cd-fs-small);
    margin-top: var(--cd-space-2xs);
}