@charset "utf-8";

/* ==========================================================================
   Kasse / Buy — mobile first
   ========================================================================== */

.buy {
    display: grid;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    grid-template-columns: 100%;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:"headline"
                        "buyInput";
    gap: 1rem;
}

footer {
    margin-top: 4rem;
    height: auto;
    position: relative;
}

#buy-headline {
    grid-area: headline;
}

#buy-form {
    grid-area: buyInput;
    display: grid;
    grid-template-rows: repeat(3, auto);
    grid-template-areas:"Input"
                        "link"
                        "abholort";
    gap: 1.5rem;
}

#buy-input {
    grid-area: Input;
    display: grid;
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    gap: 0.5rem 0;
    grid-template-columns: 100%;
    grid-template-rows: auto;
    grid-template-areas:"textFname"
                        "fieldFname"
                        "textName"
                        "fieldName"
                        "textMail"
                        "fieldMail"
                        "textAbholort"
                        "fieldAbholort"
                        "textJg"
                        "fieldJg";
    justify-self: stretch;
}

#buy-input input,
#buy-input select,
#buy-input label {
    font-size: 1.25rem;
}

#buy-input label {
    margin-top: 0.5rem;
    font-weight: 500;
}

#text-fname    { grid-area: textFname;    text-align: left; }
#field-fname   { grid-area: fieldFname; }
#text-name     { grid-area: textName;     text-align: left; }
#field-name    { grid-area: fieldName; }
#text-mail     { grid-area: textMail;     text-align: left; }
#field-mail    { grid-area: fieldMail; }
#text-abholort { grid-area: textAbholort; text-align: left; }
#field-abholort{ grid-area: fieldAbholort; }
#text-jg       { grid-area: textJg;       text-align: left; }
#field-jg      { grid-area: fieldJg; }

.input-jg {
    display: none;
}

input, select {
    width: 100%;
    padding: 0.9rem 1rem;
    margin: 0.25rem 0;
    display: inline-block;
    border: 2px solid #ccc;
    border-radius: 1rem;
    box-sizing: border-box;
    background: #fff;
}

.buy-link {
    grid-area: link;
    display: grid;
    position: relative;
    gap: 0.75rem;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas:"basket"
                        "buy";
}

#back-to-basket {
    grid-area: basket;
}

#send-form-bg {
    grid-area: buy;
    cursor: pointer;
}

#send-form {
    grid-area: buy;
    cursor: pointer;
    background-color: #00000000;
    border: none;
    padding: 0;
}

.buy-link a,
.buy-link span,
.buy-link input {
    width: 100%;
    max-width: 22rem;
    min-height: 4rem;
    border-radius: 2rem;
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    text-decoration: none;
    border: none;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

.buy-link p {
    text-align: center;
    justify-self: center;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

#buy-abholung {
    grid-area: abholort;
}

/* ==========================================================================
   Tablet / Desktop
   ========================================================================== */

@media (min-width: 480px) {
    .buy-link {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:"basket buy";
    }

    .buy-link a,
    .buy-link span,
    .buy-link input {
        max-width: none;
    }
}

@media (min-width: 1024px) {
    .buy {
        max-width: 1400px;
        padding: 1.5rem 2rem;
    }

    #buy-input input,
    #buy-input select,
    #buy-input label {
        font-size: 1rem;
    }

    input, select {
        padding: 0.7rem 0.9rem;
    }
}

@media (min-width: 1400px) {
    .buy {
        max-width: 1700px;
    }
}

@media (min-width: 1800px) {
    .buy {
        max-width: 2000px;
    }
}