:root {
    --white: #fbfafa;
    --black: #161616;
    --red: #ba1527;
    --background: #f3f1f1;
}

#wm-camp-booking {
    display: grid;
    grid-template-columns: 15% 50% 30%;
    justify-content: space-between;

    .wm-validationError {
        border: var(--red) solid 2px !important;
    }

    #errorMessage {
        color: var(--red);
    }

    /*Allgemein*/
    h2 {
        font-size: 2.5em;
        font-variation-settings: "wdth" 85, "wght" 50;
        margin-bottom: 35px;
        word-break: normal;

        .heavy {
            font-variation-settings: "wdth" 85, "wght" 800;
        }
    }

    h4 {
        font-size: 1.2em;
        margin-bottom: 15px;
    }

    p {
        padding: 0;
    }

    .wm-hide {
        display: none;
    }

    .mobile-image {
        display: none;
    }

    .wm-form-section {
        &&:not(:first-child) {
            margin-top: 80px;
        }
    }

    #wm-form-buttons {
        margin-top: 35px;
    }
    /*Kursdaten*/
    .wm-summary-container {
        margin-bottom: 50px;
    }

    .long-checkbox-label {
        margin-bottom: 8px;
    }
   
    /*Radio Tag*/
    .wm-camp-chekcbox-group, 
    .wm-camp-radio-group{
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin: 5px 0 20px;
    }

    .wm-camp-radiobox-container {
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }

    .wm-camp-chekcbox-label,
    .wm-camp-radiobox-container label {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        background: var(--white);
        color: var(--black);
        padding: 2px 10px;
        text-align: center;
        text-transform: uppercase;
    }

    .wm-camp-chekcbox:checked + label,
    .wm-camp-radiobox-container>input:checked + .wm-camp-radiobox-label {
        background: var(--red)!important;
        color: var(--white)!important;
    }

    .wm-camp-checkbox-container>input,
    .wm-camp-radiobox-container>input {
        display: none;
    }

    /*Formular*/
    .contact-input-container {
        width: 100%;
        margin-bottom: 10px;
    }

    .contact-half {
        display: flex;
        gap: 15px;
    }

    .wm-form-input {
        width: 100%;
        padding: 8px;
        background: transparent;
        border: 2px solid var(--black);
    }

    .wm-form-input::placeholder,
    .wm-form-input-label {
        font-size: 12px;
        opacity: .5;
    }

    p.wm-form-heading {
        font-weight: bold;
    }

    #wm-add-child {
        margin-top: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .add-remove-container {
        width: 36px;
        height: 36px;
        border: solid 2px var(--black);
        font-size: 16px;
        font-weight: bold;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .additional-child {
        margin-top: 35px;
    }

    .additional-child-container{
        display: grid;
        grid-template-columns: auto 36px;
        gap: 15px;

        .add-remove-container {
            margin-top: 23.8px;
        }
    }

    /*Bechrechnung*/
    div#wm-camp-calc-container {
        background: var(--white);
        padding: 35px;

        .wm-calc-line {
            display: grid;
            grid-template-columns: 60% 5% 20%;
            justify-content: space-between;
    
            .wm-calc-price {
                text-align: right;
            }
    
            .wm-calc-euro {
                text-align: center;
            }
    
            &&:first-child {
                margin-top: 15px;
            }

            &&.wm-calc-total {
                font-weight: 800;
                margin-top: 15px;
            }
        }
    }
    
    @media only screen and (max-width: 1200px) {
        grid-template-columns: 55% 40%; 
        
        #wm-camp-image-container {
            display: none;
        }

        .mobile-image {
            display: block;
            margin-top: 20px;
        }
    }

    @media only screen and (max-width: 980px) {
        display: flex;
        flex-direction: column-reverse;

        div#wm-camp-calc {
            display: grid;
            grid-template-columns: repeat(2, 48%);
            justify-content: space-between;
            margin-bottom: 50px;
        }

        .mobile-image {
            margin-top: 0px;
        }

        picture.mobile-image>img {
            object-fit: cover;
            height: 100%;
        }
    }

    @media only screen and (max-width: 580px) {
        div#wm-camp-calc {
            display: flex;
            flex-direction: column-reverse;
            gap: 25px;
        }

        .mobile-image {
            display: none;
        }
    }

    @media only screen and (max-width: 400px) {
       .contact-half {
        display: block;
       }
    }

}