/* ============================================================
   262-php-01-form — Formular

   Ein Formular für die ganze Website. Ruhig gehalten: Beschriftung
   über dem Feld, kein Rahmen um die Gruppen, Abstand statt Linien.
   ============================================================ */

.x262-form {
    display: grid;
    gap: 2rem;
    max-width: 38rem;
}

/* ---- Gruppe ---------------------------------------------- */
.x262-form__group {
    display: grid;
    gap: 1rem;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;   /* fieldset bricht sonst Grid-Kinder auf */
}

.x262-form__legend {
    padding: 0 0 .25rem;
    font-family: var(--font-body, Roboto, sans-serif);
    font-size: var(--fs-h4, 1.0625rem);
    font-weight: var(--w-heading, 500);
    color: var(--text, #14171a);
}

/* ---- Feld ------------------------------------------------ */
.x262-field { display: grid; gap: .375rem; min-width: 0; }

.x262-field__label {
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1.4 var(--font-body, Roboto, sans-serif);
    color: var(--text, #14171a);
}
.x262-field__req { color: var(--alert, #c8102e); margin-left: 2px; }

.x262-field__hint {
    margin: 0;
    font-size: var(--fs-meta, 1rem);
    line-height: 1.45;
    color: var(--text-muted, #6d7278);
}

/* ---- Eingaben -------------------------------------------- */
.x262-input {
    width: 100%;
    padding: 9px 11px;
    font: var(--w-body, 400) var(--fs-small, 1rem)/1.5 var(--font-body, Roboto, sans-serif);
    color: var(--text, #14171a);
    background: #fff;
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius, 3px);
}
.x262-input:hover { border-color: var(--faint, #a4a8ac); }
.x262-input:focus {
    outline: 0;
    border-color: var(--brand, #1E8A3B);
    box-shadow: 0 0 0 3px var(--brand-tint, #F3F8ED);
}

.x262-textarea { min-height: 7rem; resize: vertical; }

.x262-select {
    padding-right: 34px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23787774' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    background-size: 11px;
}

/* ---- Zwei Felder nebeneinander --------------------------- */
.x262-form__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

/* ---- Auswahl --------------------------------------------- */
.x262-choices { display: grid; gap: .625rem; }
.x262-choices--inline {
    grid-auto-flow: column;
    justify-content: start;
    gap: 1.5rem;
}

.x262-choice {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    font-size: var(--fs-small, 1rem);
    line-height: 1.45;
    cursor: pointer;
}
.x262-choice input {
    width: 17px;
    height: 17px;
    margin: 2px 0 0;
    accent-color: var(--brand, #1E8A3B);
    flex: none;
}
.x262-choice__text { min-width: 0; }
.x262-choice__text strong { display: block; font-weight: var(--w-heading, 500); }
.x262-choice__text span {
    display: block;
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
}

/* Umrandete Auswahl — Mitgliedsbeiträge, Jackengrössen. */
.x262-choice--boxed {
    padding: .875rem 1rem;
    background: var(--surface-2, #f4f2ee);
    border: 1px solid var(--border, #dfdbd4);
    border-radius: var(--radius, 3px);
    transition: border-color .14s ease, background-color .14s ease;
}
.x262-choice--boxed:hover { border-color: var(--faint, #a4a8ac); background: #fff; }

/* ---- Absenden -------------------------------------------- */
.x262-form__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-soft, #eceae5);
}

.x262-form__submit {
    padding: 11px 20px;
    font: var(--w-heading, 500) var(--fs-small, 1rem)/1 var(--font-body, Roboto, sans-serif);
    color: #fff;
    background: var(--brand, #1E8A3B);
    border: 1px solid var(--brand, #1E8A3B);
    border-radius: var(--radius, 3px);
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}
.x262-form__submit:hover {
    background: var(--brand-strong, #15703A);
    border-color: var(--brand-strong, #15703A);
}

.x262-form__note {
    margin: 0;
    font-size: var(--fs-meta, 1rem);
    color: var(--text-muted, #6d7278);
    max-width: var(--measure-lead);
}

/* ---- Honigtopf ------------------------------------------- */
.x262-form__honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 640px) {
    .x262-form__row { grid-template-columns: minmax(0, 1fr); }
    .x262-choices--inline { grid-auto-flow: row; }
}