/************************************ Start: Buttons ************************************/
.full_article_link { position: absolute; z-index: 11; inset: 0; }


/* Falls gebraucht => .cms_hasBtnYN_box:hover */


.button-link > a { cursor: pointer; position: relative; display: inline-flex; width: auto !important; font-weight: 600; font-size: 18px; line-height: 27px; color: var(--primary); background: transparent; border: none; border-radius: 0; padding: 0 26px 0 0; transition: var(--transition); text-decoration: none; }
.button-link > a:hover { display: inline-flex; color: var(--black); background: transparent; border: none; border-radius: 0; text-decoration: none; }
.button-link > a:before,
.button-link > a:after { content: ""; position: absolute; z-index: 1; top: calc(50% - 8px); right: 0; width: 16px; height: 16px; transition: var(--transition); will-change: transform; }
.button-link > a:before { background: center left / contain no-repeat url("/pages/img/button/icon_red.svg"); }
.button-link > a:after { background: center left / contain no-repeat url("/pages/img/button/icon_black.svg"); opacity: 0; visibility: hidden; }
.button-link > a:hover:before,
.button-link > a:hover:after { transform: rotate(45deg); }
.button-link > a:hover:before { opacity: 0; visibility: hidden; }
.button-link > a:hover:after { opacity: 1; visibility: visible; }


.button-back > a { cursor: pointer; position: relative; display: inline-flex; width: auto !important; font-weight: 600; font-size: 18px; line-height: 27px; color: var(--primary); background: transparent; border: none; border-radius: 0; padding: 0 0 0 26px; transition: var(--transition); text-decoration: none; }
.button-back > a:hover { display: inline-flex; color: var(--black); background: transparent; border: none; border-radius: 0; text-decoration: none; }
.button-back > a:before,
.button-back > a:after { content: ""; position: absolute; z-index: 1; top: calc(50% - 8px); left: 0; transform: rotate(-90deg); width: 16px; height: 16px; transition: var(--transition); will-change: transform; }
.button-back > a:before { background: center left / contain no-repeat url("/pages/img/button/icon_red.svg"); }
.button-back > a:after { background: center left / contain no-repeat url("/pages/img/button/icon_black.svg"); opacity: 0; visibility: hidden; }
.button-back > a:hover:before,
.button-back > a:hover:after { transform: rotate(-135deg); }
.button-back > a:hover:before { opacity: 0; visibility: hidden; }
.button-back > a:hover:after { opacity: 1; visibility: visible; }


a.art_link.b1 { cursor: pointer; display: flex; align-items: center; gap: 10px; width: auto; font-weight: 600; font-size: 18px; line-height: 27px; color: var(--primary); background: transparent; border: none; border-radius: 0; padding: 0; transition: var(--transition); text-decoration: none; }
a.art_link.b1:hover { display: flex; color: var(--black); background: transparent; border: none; border-radius: 0; text-decoration: none; }
a.art_link.b1:before,
a.art_link.b1:after { content: ""; width: 16px; height: 16px; transition: var(--transition); will-change: transform; }
a.art_link.b1:before { background: center left / contain no-repeat url("/pages/img/button/icon_red.svg"); order: 4; margin: 0 0 0 -26px; }
a.art_link.b1:after { background: center left / contain no-repeat url("/pages/img/button/icon_black.svg"); opacity: 0; visibility: hidden; }
a.art_link.b1:hover:before,
a.art_link.b1:hover:after { transform: rotate(45deg); }
a.art_link.b1:hover:before { opacity: 0; visibility: hidden; }
a.art_link.b1:hover:after { opacity: 1; visibility: visible; }
a.art_link.b1 > i { font-size: 18px; line-height: 27px; color: var(--primary); transition: var(--transition); }
a.art_link.b1:hover > i { color: var(--black); }
.align_1 { justify-content: flex-start; }
.align_2 { justify-content: center; }
.align_3 { justify-content: flex-end; }
.align_4 > a.art_link.b1 { justify-content: center; width: 100% !important; text-align: center; }


.button-negative > a { cursor: pointer; position: relative; display: inline-flex; width: auto !important; font-weight: 600; font-size: 18px; line-height: 27px; color: var(--white); background: transparent; border: none; border-radius: 0; padding: 0 26px 0 0; transition: var(--transition); text-decoration: none; }
.button-negative > a:hover { display: inline-flex; color: var(--black); background: transparent; border: none; border-radius: 0; text-decoration: none; }
.button-negative > a:before,
.button-negative > a:after { content: ""; position: absolute; z-index: 1; top: calc(50% - 8px); right: 0; width: 16px; height: 16px; transition: var(--transition); will-change: transform; }
.button-negative > a:before { background: center left / contain no-repeat url("/pages/img/button/icon_white.svg"); }
.button-negative > a:after { background: center left / contain no-repeat url("/pages/img/button/icon_black.svg"); opacity: 0; visibility: hidden; }
.button-negative > a:hover:before,
.button-negative > a:hover:after { transform: rotate(45deg); }
.button-negative > a:hover:before { opacity: 0; visibility: hidden; }
.button-negative > a:hover:after { opacity: 1; visibility: visible; }


.button-bg > a { cursor: pointer; display: inline-flex; padding: 11px 20px; text-decoration: none; transition: var(--transition); }
.cms_hasBtnYN_box:hover .button-bg > a,
.button-bg > a:hover { display: inline-flex; text-decoration: none; }
.button-bg > a > div { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 18px; line-height: 28px; transform: translateX(-20px); transition: var(--transition); will-change: transform; }
.cms_hasBtnYN_box:hover .button-bg > a > div,
.button-bg > a:hover > div { transform: translateX(0); }
.button-bg > a svg { display: flex; width: 16px; height: 16px; transition: var(--transition); will-change: transform; }
.cms_hasBtnYN_box:hover .button-bg > a svg,
.button-bg > a:hover svg { transform: rotate(45deg); }
.button-bg > a svg > path { transition: var(--transition); }

.cms_hasBtnYN_box:hover .button-bg.v1 > a,
.button-bg.v1 > a:hover { background: var(--primary); }
.button-bg.v1 > a > div { color: var(--white); }
.cms_hasBtnYN_box:hover .button-bg.v1 > a > div,
.button-bg.v1 > a:hover > div { color: var(--white); }
.button-bg.v1 > a svg > path { fill: var(--white); }
.cms_hasBtnYN_box:hover .button-bg.v1 > a svg > path,
.button-bg.v1 > a:hover svg > path { fill: var(--white); }

.cms_hasBtnYN_box:hover .button-bg.v2 > a,
.button-bg.v2 > a:hover { background: var(--white); }
.button-bg.v2 > a > div { color: var(--white); }
.cms_hasBtnYN_box:hover .button-bg.v2 > a > div,
.button-bg.v2 > a:hover > div { color: var(--primary); }
.button-bg.v2 > a svg > path { fill: var(--white); }
.cms_hasBtnYN_box:hover .button-bg.v2 > a svg > path,
.button-bg.v2 > a:hover svg > path { fill: var(--primary); }

.cms_hasBtnYN_box:hover .button-bg.v3 > a,
.button-bg.v3 > a:hover { background: var(--primary); }
.button-bg.v3 > a > div { color: var(--primary); }
.cms_hasBtnYN_box:hover .button-bg.v3 > a > div,
.button-bg.v3 > a:hover > div { color: var(--white); }
.button-bg.v3 > a svg > path { fill: var(--primary); }
.cms_hasBtnYN_box:hover .button-bg.v3 > a svg > path,
.button-bg.v3 > a:hover svg > path { fill: var(--white); }


.button-custom > a { cursor: pointer; position: relative; display: inline-flex; align-items: center; gap: 10px; width: auto !important; font-weight: 600; font-size: 18px; line-height: 28px; color: var(--white); background: var(--primary); border: none; border-radius: 0; padding: 6px 20px; transition: var(--transition); text-decoration: none; }
header #hNavigation > ul > li.current > .button-custom > a,
header #hNavigation > ul > li:hover > .button-custom > a,
.button-custom > a:hover { display: inline-flex; color: var(--white); background: var(--primary-dark); border: none; border-radius: 0; text-decoration: none; }
header #hNavigation > ul > li > .button-custom > a:before { content: ""; flex-shrink: 0; width: 26px; height: 22px; background: center left / contain no-repeat url("/pages/img/navi/notfall-icon.svg"); }


main button { cursor: pointer; position: relative; display: inline-flex; width: auto !important; font-weight: 600; font-size: 18px; line-height: 28px; color: var(--white); background: var(--primary); border: none; border-radius: 0; padding: 6px 20px; transition: var(--transition); text-decoration: none; }
main button:hover { display: inline-flex; color: var(--white); background: var(--primary-dark); border: none; border-radius: 0; text-decoration: none; }


@media screen and (max-width: 959px) {
    .button-link > a { font-size: 16px; line-height: 24px; padding: 0 21px 0 0; }
    .button-link > a:before,
    .button-link > a:after { top: calc(50% - 6.5px); width: 13px; height: 13px; }

    .button-back > a { font-size: 16px; line-height: 24px; padding: 0 0 0 21px; }
    .button-back > a:before,
    .button-back > a:after { top: calc(50% - 6.5px); width: 13px; height: 13px; }

    a.art_link.b1 { gap: 8px; font-size: 16px; line-height: 24px; }
    a.art_link.b1:before,
    a.art_link.b1:after { width: 13px; height: 13px; }
    a.art_link.b1:before { margin: 0 0 0 -21px; }
    a.art_link.b1 > i { font-size: 16px; line-height: 24px; }

    .button-negative > a { font-size: 16px; line-height: 24px; padding: 0 21px 0 0; }
    .button-negative > a:before,
    .button-negative > a:after { top: calc(50% - 6.5px); width: 13px; height: 13px; }

    .button-bg > a { padding: 5px 15px; }
    .button-bg > a > div { gap: 8px; font-size: 16px; line-height: 24px; transform: translateX(-15px); }
    .button-bg > a svg { width: 13px; height: 13px; }

    .button-custom > a { font-size: 16px; line-height: 24px; padding: 5px 15px; }
    header #hNavigation > ul > li > .button-custom > a:before { width: 24px; height: 20px; }

    main button { font-size: 16px; line-height: 24px; padding: 5px 15px; }
}

/* Start: Nur für Module */
/*.button-back { cursor: pointer; display: inline-flex; align-items: center; gap: 17px; width: auto !important; font-weight: 600; font-size: 15px; line-height: 23px; color: var(--black); background: transparent; border: none; border-radius: 0; padding: 0; transition: var(--transition); text-decoration: none; }
.button-back:hover { display: inline-flex; color: var(--primary); background: transparent; border: none; border-radius: 0; text-decoration: none; }
.button-back > svg { display: flex; width: 7px; height: 11px; }
.button-back > svg > path { stroke: var(--black); transition: var(--transition); }
.button-back:hover > svg > path { stroke: var(--primary); }*/
/* End: Nur für Module */
/************************************ Ende: Buttons ************************************/