:root {
    --firstColWidth: 8;
    --inputWidth: 16;
}

#membership_form {
    width: 100%;
    /* background-color: bisque; */
}

#groupBasisData,
#groupSepaMandate {
    display: grid;
    column-gap: 1rem;
}

#groupSepaMandate {
    grid-template-columns: var(--firstColWidth) 1fr;
}

#groupBankAccountInfo,
#groupSepaMandate {
    margin-bottom: 2rem;   
}

#groupBankAccountInfo {
    display: grid;
    column-gap: 1rem;
}

@media (min-width: 922px) {
    #groupSepaMandate,
    #groupBasisData {
        grid-template-columns: calc(var(--firstColWidth) * 1rem) calc(var(--inputWidth) * 1rem)  calc(var(--firstColWidth) * 1rem) calc(var(--inputWidth) * 1rem);
        row-gap: 0.8rem;    
    }
    #membership_form {
        width: calc(calc(2 * var(--firstColWidth) + 2 * var(--inputWidth) + 3) * 1rem);
    } 
    #salutation {
        grid-column: span 3;
        width: calc(var(--inputWidth) * 1rem);
    }
    #lblAllowNewsletter {
        grid-column: span 2; 
        text-align: left;
        padding-left: 1rem;
    }
    #groupBankAccountInfo {
        grid-template-columns: auto 1fr;
    }
    label,
    .bank-account-info-label {
        text-align: right;
    }
    .frame-submit {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: center;
        margin-top: 1.5rem;
        margin-bottom: 2rem;              
    }    
}

@media (max-width: 921px) {
    #groupSepaMandate,
    #groupBasisData, 
    #groupBankAccountInfo {
        /* grid-template-columns: calc(var(--firstColWidth) * 1rem) calc(var(--inputWidth) * 1rem); */
        grid-template-columns: 1fr;
        row-gap: 0.1rem;    
    }
    #membership_form {
        padding: 1rem;
        width: 100%
    } 
    .input {
        margin-bottom: 0.5rem;
        line-height: 1.4rem;
    }
    #salutation {
        padding-top: 0.2rem;
        padding-bottom: 0.2rem;
    }
    label,
    .bank-account-info-label {
        text-align: left;
    }
    #btnMembership {
        font-size: x-large;
        white-space: normal;
    }
    .frame-submit {
        display: block;
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }
    .privacy-policy {
        margin-top: 1rem;
    }

}

#groupPaymentMethod {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 2rem;
    margin-bottom: 2rem;
}

.sub-caption {
    margin-bottom: 0.8rem;
}

.hidden {
    visibility: hidden;
    position: absolute;
    left: -9999px; /* Versteckt das Element, aber behält den Platz im Grid */    
}
.note-text {
    font-style: italic;
    line-height: 1.2rem;
}

.distance {
    margin-top: 1.4rem;
}

#labelMembershipFee {
    margin-right: 1rem;
}

#membershipFee {
    margin-right: 1rem;
    width: 6rem;
}

input[type=radio] {
    margin-right: 0.4rem;
}

.strong {
    font-weight: bold;
}

.no-break {
    white-space: nowrap;
}

/*#btnMembership {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}*/

.bank-account-info-value {
    font-weight: bold;
}