/* ------------------------------ */
/* ----------- Buttons ---------- */
/* ------------------------------ */

/* General */
.section > .section__button, .section .row > div > .section__button, .section > .section__buttons, .section .row > div > .section__buttons {
    margin-top: 0;
    padding-top: 0;
}
  
.section__button--center, .section__buttons--center {
    text-align: center;
}
  
.section > .section__title + .section__button .button, .section > .section__title + .section__buttons .button {
    margin-top: 0;
}

.section__buttons .button, .buttons .button {
    display: inline-block;
}
  
.section__buttons .button, .buttons .button {
    margin-right: var(--spacing-6);
}
  
.section__buttons .button:last-child, .buttons .button:last-child {
    margin-right: 0;
}


/* Button */
.button a, button {
    position: relative;
    display: inline-block;
    font-weight: bold;
}

a.skip-link:focus-visible, a.skip-link:focus {
    font-weight: bold;
}

button {
    cursor: pointer;
    padding: 0;
    line-height: var(--line-height-1);
    background-color: transparent;
    border: 0;
}


/* Normal */
.button--normal, button.quform-submit {
    margin-bottom: 4px;
}

.button--normal a, button.quform-submit, a.skip-link:focus-visible, a.skip-link:focus, .cookie_box__button button {
    text-align: center;
    line-height: 1;
    border-radius: var(--border-radius-1);
    -webkit-transition: background-color var(--transition-2), color var(--transition-2);
    -o-transition: background-color var(--transition-2), color var(--transition-2);
    transition: background-color var(--transition-2), color var(--transition-2);
}

.button--normal:not(.button--small) a, button.quform-submit {
    font-size: var(--font-size-5);
    -webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
            box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
}

.button--normal.button--small a, a.skip-link:focus-visible, a.skip-link:focus {
    font-size: var(--font-size-4);
    -webkit-box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10);
            box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10);
}

.button--normal:not(.button--blue) a, button.quform-submit {
    color: var(--brand-anthrazit);
    background-color: var(--brand-sonnengelb);
}

.button--normal.button--blue a {
    color: var(--brand-weiss);
    background-color: var(--brand-himmelblau);
}

.no-touchevents .button--normal a:hover, .no-touchevents button.quform-submit:hover, a.skip-link:focus-visible, a.skip-link:focus {
    color: var(--brand-sonnengelb);
    background-color: var(--brand-anthrazit);
}


/* Circle */
a.button-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    color: var(--brand-anthrazit);
    background-color: var(--brand-sonnengelb);
    text-align: center;
    border-radius: 50%;
    -webkit-transform: rotate(-11deg);
        -ms-transform: rotate(-11deg);
            transform: rotate(-11deg);
    -webkit-transition: background-color var(--transition-2);
    -o-transition: background-color var(--transition-2);
    transition: background-color var(--transition-2);
}

.no-touchevents a.button-circle:hover {
    background-color: var(--brand-anthrazit);
}

a.button-circle span {
    position: absolute;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    width: 100%;
    padding: 15px 20px;
    font-size: var(--font-size-5);
    font-weight: bold;
    line-height: var(--line-height-3);
    text-align: center;
    color: var(--brand-anthrazit);
    -webkit-transition: color var(--transition-2);
    -o-transition: color var(--transition-2);
    transition: color var(--transition-2);
}

.no-touchevents a.button-circle:hover span {
    color: var(--brand-sonnengelb);
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 576px) {

    .button--normal:not(.button--small), button.quform-submit {
        margin-top: var(--spacing-4-5);
    }

    .button--normal.button--small {
        margin-top: var(--spacing-4);
    }
    
    .section__map--banner .barometer__button a.button-circle span {
        font-size: var(--font-size-5-5);
    }

}


@media all and (min-width: 992px) {

    .button--normal:not(.button--small) a, button.quform-submit {
        padding: 10px 24px 15px;
    }

    .button--normal.button--small a, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 9px 20px 12px;
    }

    .cookie_box__button button {
        margin-top: 1px;
        padding: 9px 18px 12px;
    }

    a.button-circle {
        -webkit-box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.10);
                box-shadow: 6px 6px 0 0 rgba(0, 0, 0, 0.10);
    }

}


@media all and (max-width: 991.98px) and (min-width: 576px) {

    a.button-circle {
        -webkit-box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.10);
                box-shadow: 5px 5px 0 0 rgba(0, 0, 0, 0.10);
    }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

    .button--normal:not(.button--small) a, button.quform-submit {
        padding: 11px 24px 15px;
    }

    .button--normal.button--small a, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 9px 20px 12px;
    }

    .cookie_box__button button {
        padding: 9px 18px 12px;
    }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {

    .button--normal:not(.button--small) a, button.quform-submit {
        padding: 10px 22px 13px;
    }

    .button--normal.button--small a, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 9px 18px 11px;
    }

    .cookie_box__button button {
        padding: 9px 17px 11px;
    }

}


@media all and (max-width: 575.98px) {

    .button--normal:not(.button--small), button.quform-submit {
        margin-top: var(--spacing-5);
    }

    .button--normal.button--small {
        margin-top: var(--spacing-4-5);
    }

    .button--normal:not(.button--small) a, button.quform-submit {
        padding: 9px 20px 12px;
    }

    .button--normal.button--small a, a.skip-link:focus-visible, a.skip-link:focus {
        padding: 8px 16px 10px;
    }

    .cookie_box__button button {
        padding: 8px 15px 10px;
    }

    a.button-circle {
        -webkit-box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
                box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.10);
    }

}