/* --------------------------------------------------
   Buttons
   -------------------------------------------------- */

.btn {
    display: inline-block;
    padding: var(--size-2) var(--size-5);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-normal);
    line-height: var(--lh-normal);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
    text-transform: initial;
    border: 1px solid;
    border-radius: var(--radius-md);
    transition: background-color 0.3s ease, color 0.3s ease;
    min-width: 157px;
    justify-content: center;
    color: var(--clr-neutral-800);

    @media(width >=998px) {
        min-width: 260px;
    }

    &.btn--neutral {
        background-color: transparent;
        color: var(--clr-text-primary);
        border-color: var(--clr-primary-500);

        &:hover {
            background-color: var(--clr-primary-500);
            color: var(--clr-text-primary);
        }
    }

    &.btn--primary {
        border-color: var(--clr-primary-500);
        background-color: var(--clr-primary-500);
        /* color: var(--clr-white); */

        &:hover {
            background-color: var(--clr-primary-600);
        }
    }

    &.btn--accent {
        border-color: var(--clr-accent-500);
        background-color: var(--clr-accent-500);
        color: var(--clr-text-primary);

        &:hover {
            background-color: var(--clr-accent-600);
        }
    }

    &.btn--neutral-accent {
        background-color: transparent;
        color: var(--clr-text-primary);
        border-color: var(--clr-accent-500);
        text-decoration: underline;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;

        &::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.566' height='10.78' viewBox='0 0 6.566 10.78'%3E%3Cpath d='M0,4.756,4.331,0,8.661,4.756' transform='translate(5.816 1.059) rotate(90)' fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: center;
            flex-shrink: 0;
        }

        &:hover {
            background-color: var(--clr-accent-500);
        }
    }
}

@media (max-width: 981px) {
    .btn {
        font-size: var(--fs-sm);
        padding: var(--size-2) 25px;
        width: 100%;
    }

    /* Exclude buttons inside .cta-item — keep their tighter padding */
    .cta-item .btn {
        padding-inline: var(--size-3);
    }

    /* Buttons rendered through sig_render_buttons() (the global .sig-buttons
       wrapper) always go full-width on mobile — overrides the global
       min-width: 157px so they fill their container. */
    .sig-buttons .btn {
        min-width: 100%;
    }
}

/* Min-width exclusions: News (blog component) only.
   (.btn.patient-story-card__button removed — celebrity card buttons now use
   the default .btn min-width like everywhere else.) */
.section--blog .btn,
.recent-blogs-section .btn {
    min-width: 0;
}

/* Brust single + archive: drop the underline and ::before arrow on
   .btn--neutral-accent so it reads as a plain button instead of a link.
   Covers WP-auto body classes (.single-brust, .post-type-archive-brust)
   AND the custom-filter classes (.archive-treatment--brust,
   .single-treatment--brust, .taxonomy-treatment--brust). */
.single-brust .btn--neutral-accent,
.post-type-archive-brust .btn--neutral-accent,
.archive-treatment--brust .btn--neutral-accent,
.single-treatment--brust .btn--neutral-accent,
.taxonomy-treatment--brust .btn--neutral-accent {
    text-decoration: none;
}

.single-brust .btn--neutral-accent::before,
.post-type-archive-brust .btn--neutral-accent::before,
.archive-treatment--brust .btn--neutral-accent::before,
.single-treatment--brust .btn--neutral-accent::before,
.taxonomy-treatment--brust .btn--neutral-accent::before {
    content: none;
}

/* --------------------------------------------------
   Buttons END
   -------------------------------------------------- */

/* -------------------------------------------------- 
   LOGO
   -------------------------------------------------- */

.custom-logo,
.footer__logo {
    width: 85px;
    height: 85px;

    @media(width<=768px) {
        width: 50px;
        height: 50px;
    }
}



/* --------------------------------------------------
    LOGO END
   */


 /* Form -------------------------------------------------- */
 
 /* ---- Layout: rebuild the two-column grid ---- */
.lucerneclinic-massage-contact .row {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 1rem;
}
.lucerneclinic-massage-contact .col.half {
	flex: 1 1 calc(50% - 10px);
	min-width: 240px;
}
.lucerneclinic-massage-contact .col.full {
	flex: 1 1 100%;
}

/* ---- Kill extra spacing from CF7's auto <p>/<br> ---- */
.lucerneclinic-massage-contact p {
	margin: 0;
}
.lucerneclinic-massage-contact .wohnort br,
.lucerneclinic-massage-contact .lcmb-veka br {
	display: none;
}

/* ---- Inputs full width inside their column ---- */
.lucerneclinic-massage-contact .form-control {
	width: 100%;
	box-sizing: border-box;
}

/* ---- VEKA sample image ---- */
.lucerneclinic-massage-contact .lcmb-veka-img img {
	max-width: 100%;
	height: auto;
	margin-top: 8px;
}

/* ---- Custom file button spacing ---- */
.lucerneclinic-massage-contact .lcmb-file-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 4px;
}
.lucerneclinic-massage-contact .lcmb-file-name {
	margin-left: 10px;
	font-size: 14px;
	color: #555;
	word-break: break-all;
}


span.nachricht {
    width: 100%;
}

.lucerneclinic-massage-contact .col.full {
    position: relative;
}

.lcmb-submit-block .wpcf7-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---- Mobile: stack columns ---- */
@media (max-width: 600px) {
	.lucerneclinic-massage-contact .col.half {
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------
   HEADER
   */

.site-header {
    box-shadow: 0px 3px 6px #00000029;
}

@media(width <=768px) {
    .site-header {
        padding-block: 5px;
    }

    .site-header .custom-logo {
        width: 48px;
        height: 48px;
    }

    /* Hamburger button — drop padding on mobile so the icon hugs the right
       edge along with the new tighter header inline padding (23px). */
    .lc-mobile-toggle,
    .mobile-menu-btn {
        padding: 0;
    }
}

/* --------------------------------------------------
   Footer
   -------------------------------------------------- */

.footer {
    background-color: var(--clr-neutral-100);
    margin-top: 120px;

    @media (width <= 768px) {
        position: relative;
        z-index: 1000;
        padding-bottom: 15px;
        --flow-spacer: 43px;
    }

    @media (width >= 998px) {
        margin-top: 246px;
        padding-top: 80px;
    }

    & * {
        text-align: center;
        /* margin: 0 auto; */
    }

    .footer__brand img {
        width: 88px;
        height: 88px;
    }

    .footer__group {
        width: fit-content;

        .footer__heading {
            color: #333;
            font: normal normal 600 12px/18px var(--font-heading);
            margin-bottom: 5px;
        }
    }

    .footer__list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0;

        li {
            display: flex;
            align-items: center;
        }

        li:first-child {
            a {
                color: var(--clr-primary-500);
            }
        }

        .footer__list-sep {
            width: 1px;
            height: 15px;
            background: #555756;
            margin: 0 15px;
            flex-shrink: 0;
        }
    }

    .footer__col--right .footer__list {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }

    .footer__col--right .footer__list li:first-child a {
        color: var(--clr-neutral-600);
    }

    /* UNTERNEHMEN list stays horizontal (inline with | separators) even
       though it now lives in the right column — overrides the column-only
       stacking rule above. */
    .footer__col--right .footer__group--unternehmen .footer__list {
        flex-direction: row;
        gap: 0;
    }

    /* Restore the primary-color treatment on the FIRST link in the
       UNTERNEHMEN list. The generic .footer__col--right rule above
       overrides first-child to neutral, but UNTERNEHMEN should match the
       same primary-highlighted-first-item pattern used in the left column. */
    .footer__col--right .footer__group--unternehmen .footer__list li:first-child a {
        color: var(--clr-primary-500);
    }

    /* Vertical breathing room between TOP BEHANDLUNGEN and UNTERNEHMEN.
       The right column flows naturally (no space-between) so UNTERNEHMEN
       sits at the upper-middle area, roughly aligned with the ProvenExpert
       logo on the left and the contact info in the center. */
    .footer__col--right .footer__group--unternehmen {
        margin-top: var(--size-8);
    }

    /* ProvenExpert badge: cap at 71px so the image never grows past its
       intended size, regardless of the underlying file's natural dimensions. */
    .footer__provenexpert {
        max-width: 71px;
        height: auto;
        display: block;
    }

    ul {
        list-style: none;
        padding: 0;

        li {
            line-height: var(--lh-normal);

            a {
                text-decoration: none;
                font-family: var(--font-heading);
                font-size: var(--fs-sm);
                font-weight: var(--fw-normal);
                line-height: var(--lh-normal);
                letter-spacing: var(--ls-normal);
                color: var(--clr-neutral-600);
            }
        }
    }

    .footer__contact {
        margin: 0;

        li {
            a {
                font: normal normal 500 12px/24px var(--font-heading);
                color: var(--clr-primary-500);
            }
        }
    }

    .footer__stars {
        color: var(--clr-primary-500);

        .rating-stars {
            width: 100px;
        }
    }

    .footer__ctas {
        a {
            font-family: var(--font-heading);
            font-size: var(--fs-sm);
            line-height: var(--lh-none);
            min-width: 142px;
        }
    }

    .footer__col--center .footer__ctas {
        @media (width <= 768px) {
            display: none;
        }
    }

    .footer__rating-text {
        font-family: var(--font-heading);

        p {
            font-family: var(--font-heading);
        }

        p:first-child {
            margin-bottom: var(--size-1);
        }
    }

    .footer__bottom {
        align-items: flex-end;
    }

    .footer__legal-left.legende {
        font: normal normal 500 12px/18px var(--font-heading);
    }

    .footer__legal-nav {
        display: flex;
        align-items: center;
        justify-content: center;

        a {
            font: normal normal 500 12px/18px var(--font-heading);
            text-decoration: none;
        }

        .footer__legal-sep {
            width: 1px;
            height: 15px;
            background: #555756;
            margin: 0 15px;
            flex-shrink: 0;
        }
    }

    .footer__address {
        font-family: var(--font-heading);
        line-height: 24px;
    }

    .footer__divider {
        min-width: 120px;
        border: none;
        border-top: 1px solid var(--clr-neutral-300, #ccc);
        margin: var(--size-4) auto;
    }

    /* ---- Mobile footer layout ---- */
    @media (width <= 768px) {

        footer .section {
            padding-inline: 20px;
        }

        /* Grid → flex column so we can reorder */
        .footer__grid {
            display: flex;
            flex-direction: column;
            gap: 43px;
        }

        /* 1) Address + contact info side-by-side with vertical divider */
        .footer__col--center {
            order: 1;
            flex-direction: row !important;
            align-items: flex-start;
            justify-content: center;
            gap: 0;
            text-align: center;
        }

        .footer__col--center .footer__address {
            flex: 0 0 45%;
            text-align: right;
            font-size: 12px;
        }

        .footer__col--center .footer__divider {
            min-width: 0;
            width: 1px;
            height: auto;
            align-self: stretch;
            border-top: none;
            border-left: 1px solid var(--clr-neutral-300, #ccc);
            margin: 0 var(--size-5, 1.25rem);
        }

        .footer__col--center .footer__contact {
            flex: 1;
        }

        .footer__col--center .footer__contact li {
            text-align: left;
            font-size: 12px;
        }

        .footer__contact a {
            white-space: nowrap;
        }

        /* 2) Flatten left column so its children can be reordered independently */
        .footer__col--left {
            display: contents;
        }

        .footer__col--left .footer__rating {
            order: 2;
        }

        .footer__col--left .footer__group {
            order: 3;
            margin-inline: auto;
            margin-top: 0;
        }

        /* 3) Treatments in column, then portal button underneath */
        .footer__col--right {
            order: 4;
        }

        .footer__col--right .footer__list {
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }

        .footer__col--left .footer__ctas {
            order: 5;
            margin-top: 0;
        }

        /* 4) Bottom: signature above, copyright + legal in one row */
        .footer__bottom {
            margin-top: 43px;
            display: grid;
            grid-template-columns: auto auto;
            column-gap: var(--size-5, 1.25rem);
            row-gap: var(--size-4, 1rem);
        }

        .footer__bottom .footer__signature {
            order: -1;
            grid-column: 1 / -1;
            justify-self: center;
            width: 124px;
            height: auto;
        }

        .footer__bottom .footer__legal-left {
            order: 1;
            white-space: nowrap;
        }

        .footer__bottom .footer__legal-nav {
            order: 2;
        }
    }
}

/* --------------------------------------------------
   Footer END
   -------------------------------------------------- */

/* --------------------------------------------------
   Blog Archive — shared components
   -------------------------------------------------- */
.blog-archive__subtitle {
    font: normal normal 500 28px/34px var(--font-heading);
    margin-bottom: var(--size-6);
}

.blog-filter__label {
    font: normal normal 500 18px/32px var(--font-body);
    color: var(--clr-neutral-600);
    margin-bottom: var(--size-3);
}

.blog-filter__radio {
    margin-top: 0;
    margin-bottom: 0;
}

.blog-filter__radio-label {
    font: normal normal 500 16px/20px var(--font-heading);
    color: #555756B3;
    cursor: pointer;
    transition: color 0.2s ease;
}

.blog-filter__radio:checked + .blog-filter__radio-label {
    color: #555756;
    font-weight: 500;
}

@media (max-width: 768px) {
    .blog-archive__subtitle {
        font-size: 22px;
        line-height: 25px;
    }

    .blog-filter__label {
        font-size: 16px;
        line-height: 25px;
    }

    .blog-filter__radio-label {
        font: normal normal 500 12px/20px 'Montserrat', sans-serif;
    }

    .blog-filter__list {
        gap: 10px;
    }

    .blog-archive .blog-filter__item {
        width: 30%;
    }

    .ps-archive .blog-filter__item {
        width: 25%;
    }
}

@media (max-width: 320px) {
    .blog-archive .blog-filter__item {
        width: 40%;
    }

    .ps-archive .blog-filter__item {
        width: 30%;
    }
}

/* --------------------------------------------------
   Badges — shared global styles
   -------------------------------------------------- */
.blog-card__badge,
.ps-card__badge,
.mpa-card__badge,
.celebrity-grid__badge {
    font: normal normal 600 16px/20px 'Montserrat', sans-serif !important;
}

@media (max-width: 768px) {
    .blog-card__badge,
    .ps-card__badge,
    .mpa-card__badge,
    .celebrity-grid__badge {
        font: normal normal 600 12px/13px 'Montserrat', sans-serif !important;
    }
}

/* --------------------------------------------------
   Moove GDPR cookie banner — backdrop + theme polish
   --------------------------------------------------
   The plugin renders #moove_gdpr_cookie_info_bar at the bottom and removes it
   from the DOM on consent. We dim the page while it's present using a body
   ::before so no extra markup is needed. */

body:has(#moove_gdpr_cookie_info_bar)::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(85, 87, 86, 0.48); /* --clr-neutral-600 @ 48% */
    /* Low z-index so the plugin's own settings modal renders above us without
       fighting. The bar itself is at 99999, so it stays above this dim too. */
    z-index: 9999;
    pointer-events: auto;
}

/* Suppress the overlay if the plugin hides the banner via inline style instead
   of removing it. */
body:has(#moove_gdpr_cookie_info_bar[style*="display: none"])::before,
body:has(#moove_gdpr_cookie_info_bar[style*="display:none"])::before,
body:has(#moove_gdpr_cookie_info_bar[hidden])::before {
    content: none;
}

/* When the plugin's settings modal is open it ships its own backdrop — drop
   our overlay so the two dims don't stack. A small JS observer (in
   functions.php) toggles `js-gdpr-modal-open` on <body> whenever Moove's
   modal-state class appears on <html> / <body>. */
body.js-gdpr-modal-open::before {
    display: none !important;
}

/* Match the plugin's own lightbox backdrop to our brand dim so the modal
   open state looks identical to the bar-only state. */
.gdpr_lightbox {
    background: rgba(85, 87, 86, 0.48) !important;
}

/* Settings-modal action buttons — make every primary action ("Alle
   akzeptieren", "Alle ablehnen", "Änderungen speichern") render like the
   global `.btn.btn--primary`. !important everywhere because the plugin uses
   high-specificity defaults and inline transitions on hover. */
.gdpr_lightbox .change-settings-button,
.gdpr_lightbox .mgbutton.moove-gdpr-modal-allow-all,
.gdpr_lightbox .mgbutton.moove-gdpr-modal-reject-all,
.gdpr_lightbox .moove-gdpr-modal-allow-all,
.gdpr_lightbox .moove-gdpr-modal-reject-all,
.gdpr_lightbox .moove-gdpr-modal-allow-necessary,
.gdpr_lightbox .moove-gdpr-modal-save-settings,
.moove-gdpr-modal .change-settings-button,
.moove-gdpr-modal .mgbutton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--size-2) var(--size-5) !important;
    font: normal normal 600 16px/19px 'Montserrat', sans-serif !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: initial !important;
    text-shadow: none !important;
    border: 1px solid var(--clr-primary-500) !important;
    border-radius: var(--radius-md) !important;
    min-width: 157px !important;
    cursor: pointer !important;
    background-color: var(--clr-primary-500) !important;
    color: var(--clr-neutral-800) !important;
    box-shadow: none !important;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

.gdpr_lightbox .change-settings-button:hover,
.gdpr_lightbox .mgbutton.moove-gdpr-modal-allow-all:hover,
.gdpr_lightbox .mgbutton.moove-gdpr-modal-reject-all:hover,
.gdpr_lightbox .moove-gdpr-modal-allow-all:hover,
.gdpr_lightbox .moove-gdpr-modal-reject-all:hover,
.gdpr_lightbox .moove-gdpr-modal-allow-necessary:hover,
.gdpr_lightbox .moove-gdpr-modal-save-settings:hover,
.moove-gdpr-modal .change-settings-button:hover,
.moove-gdpr-modal .mgbutton:hover {
    background-color: var(--clr-primary-600) !important;
    border-color: var(--clr-primary-600) !important;
    color: var(--clr-neutral-800) !important;
}

/* Settings-modal close (×) button — primary circle, dark cross strokes. */
.gdpr-icon.moovegdpr-arrow-close {
    background-color: var(--clr-primary-500) !important;
    border-color: var(--clr-primary-500) !important;
}
.gdpr-icon.moovegdpr-arrow-close::before,
.gdpr-icon.moovegdpr-arrow-close::after {
    background-color: #1a1a1a !important;
}
.gdpr-icon.moovegdpr-arrow-close:hover {
    background-color: var(--clr-primary-600) !important;
    border-color: var(--clr-primary-600) !important;
}

/* Banner must sit above the overlay. */
#moove_gdpr_cookie_info_bar {
    z-index: 99999 !important;
}

/* Settings modal must sit above the info bar — otherwise the bar peeks out
   over the modal at the bottom of the screen (see screenshot). */
#moove_gdpr_cookie_modal {
    z-index: 100001 !important;
}

/* Hide the info bar entirely while the settings modal is open. Modal opens
   by toggling .moove-gdpr-modal-open on either the modal itself or <body>. */
body:has(#moove_gdpr_cookie_modal.moove-gdpr-modal-open) #moove_gdpr_cookie_info_bar,
body.moove-gdpr-modal-open #moove_gdpr_cookie_info_bar {
    display: none !important;
}

/* Light theme override — plugin ships a dark scheme, brand wants white.
   Chaining the .moove-gdpr-dark-scheme class everywhere keeps our specificity
   higher than the plugin's own dark-scheme rules so we don't need !important
   everywhere — but where the plugin uses !important itself, we match it. */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme {
    background: #fff !important;
    color: var(--clr-neutral-800) !important;
    box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
    border: 0;
}

/* Inner padding — give the bar 20px vertical breathing room. */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-info-bar-container,
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-info-bar-content {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
}

/* Notice copy — Open Sans 18/22, dark text. */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice,
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice > p,
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice p {
    font-family: 'Open Sans', sans-serif !important;
    font-size: 18px !important;
    line-height: 22px !important;
    color: var(--clr-neutral-800) !important;
    margin: 0 !important;
}

/* On mobile, drop notice copy to body text scale (1rem / tight) to match the
   rest of the site, which also shrinks at this breakpoint. */
@media (max-width: 981px) {
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice,
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice > p,
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice p {
        font-family: var(--font-body) !important;
        font-size: var(--fs-normal) !important;
        line-height: var(--lh-tight) !important;
    }
}

/* Link inside notice ("Einstellungen") should stay dark + underlined. */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice a {
    color: var(--clr-neutral-800) !important;
    text-decoration: underline !important;
}

/* Button row: reverse order so OK ends up on the right (HTML order is
   OK, Ablehnen — row-reverse flips visual order without touching markup). */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--size-3, 12px) !important;
}

/* Buttons — match global .btn (Montserrat 600 16/19, no decoration). */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder .mgbutton {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: var(--size-2) var(--size-5) !important;
    font: normal normal 600 16px/19px 'Montserrat', sans-serif !important;
    letter-spacing: 0 !important;
    color: var(--clr-neutral-800) !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: initial !important;
    text-shadow: none !important;
    border: 1px solid !important;
    border-radius: var(--radius-md) !important;
    min-width: 157px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
    box-shadow: none !important;
}

/* OK = primary filled (beige). */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder .moove-gdpr-infobar-allow-all {
    background-color: var(--clr-primary-500) !important;
    border-color: var(--clr-primary-500) !important;
    color: var(--clr-neutral-800) !important;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder .moove-gdpr-infobar-allow-all:hover {
    background-color: var(--clr-primary-600) !important;
    border-color: var(--clr-primary-600) !important;
    color: var(--clr-neutral-800) !important;
}

/* Ablehnen = white interior, primary border. */
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder .moove-gdpr-infobar-reject-btn {
    background-color: #fff !important;
    border: 1px solid var(--clr-primary-500) !important;
    color: var(--clr-neutral-800) !important;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder .moove-gdpr-infobar-reject-btn:hover {
    background-color: var(--clr-primary-500) !important;
    border-color: var(--clr-primary-500) !important;
    color: var(--clr-neutral-800) !important;
}

/* Mobile: the plugin centers the notice + buttons. Left-align both, and add a
   gap between the text and the button row so it doesn't sit flush. */
@media (max-width: 981px) {
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-info-bar-content,
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice,
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice > p,
    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-cookie-notice p {
        text-align: left !important;
    }

    #moove_gdpr_cookie_info_bar.moove-gdpr-dark-scheme .moove-gdpr-button-holder {
        flex-direction: row !important;
        justify-content: flex-start !important;
        margin-top: var(--size-4, 16px) !important;
    }
}