html[lang="de-DE"] .footer-english,
html[lang="en-US"] .footer-german {
    display: none;
}

footer.footer {
    padding-block-start: 30px;
    padding-block-end: 30px;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-block-start: 0;
}


.logo-wrapper {
    background-image: url('../../images/footer-bg-line.svg');
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100% 12px;
}

.footer__header {
    font-size: 1.125rem;
    color: #d1d1d1;
    margin-bottom: 1.125rem;
}

html[lang="de-DE"] .footer__header {
    font-size: 1.063rem;
}

.tnp-subscription.footer__newsletter {
    max-width: inherit;
}

.footer__newsletter.tnp-subscription .tnp-field-email, 
.footer__newsletter.tnp-subscription .tnp-privacy-field,
.footer__newsletter.tnp-subscription .tnp-field-button {
    margin-bottom: 20px;
}

.footer__newsletter.tnp-subscription .tnp-field-email {
    border-bottom: 1px solid #B6A99080;
}

.footer__newsletter.tnp-subscription br {
    display: none;
}

.footer__newsletter .tnp-field-email {
    position: relative;
}

.footer__newsletter .tnp-field-email label {
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 1;
    transform: translateY(-50%);
    color: #B6A990;
    transition: top .25s ease-in, opacity .25s ease-in;
    opacity: .5;
}

.footer__newsletter .tnp-field-email input[type="email"] {
    position: relative;
    z-index: 0;
    background-color: transparent;
    border: none;
    width: calc(100% - 110px);
    padding-left: 0;
    padding-right: 0;
    color: #B6A990;
    font-size: 0.75rem;
}

/* :not(:placeholder-shown) alongside :focus — the previous :focus-only rule
   re-showed the "E-Mail" floating label the instant the field lost focus,
   overlapping whatever the visitor had just typed (label sits on top via
   z-index:1). Keeping it hidden while the field has a value fixes that. */
.footer__newsletter .tnp-field-email:has(input[type="email"]:is(:focus, :not(:placeholder-shown))) label {
    opacity: 0;
    top: -8px;
    transform: translateY(0);
}

.footer__newsletter .tnp-field-email input[type="submit"] {
    position: absolute;
    z-index: 0;
    background-color: transparent;
    border: none;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
    padding-left: 0;
    padding-right: 0;
    color: #CDB483;
    font-size: 0.875rem;
}

/* Consent checkbox: same 24px box + rotated-border checkmark used for the
   login/register consent checkboxes (login.css), not a new design — only the
   color token differs by file (--gold-400 isn't in scope here, so this uses
   the equivalent local one, --wp--preset--color--accent-1).
   Selector fixed from the theme's original ".tnp-privacy-field" — the plugin
   markup is actually ".tnp-field-privacy" (words in the other order), so this
   block never matched anything and the checkbox always rendered as a bare,
   unstyled native checkbox.
   Box is drawn on label::before rather than sized directly on the <input>:
   Tailwind's preflight reset (output.css, loaded after this file inside an
   @layer) forces native checkboxes to width:1em, and per the CSS
   cascade-layers spec a layered !important beats an unlayered !important on
   `width` specifically — neither plain nor !important width, nor
   aspect-ratio, could budge it. The input stays present (real click/focus
   target) but invisible; the visible box is a completely separate generated
   box on the label, immune to any input-specific reset. */
.footer__newsletter .tnp-field-privacy label {
    position: relative;
    display: block;
    padding-left: 32px;
    margin-bottom: 0;
    min-height: 24px;
    font-size: 0.75rem;
    line-height: 24px;
    cursor: pointer;
}

.footer__newsletter .tnp-field-privacy label a {
    font-size: inherit;
    line-height: inherit;
    color: var(--wp--preset--color--accent-1);
}

.footer__newsletter .tnp-field-privacy label input[type="checkbox"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.footer__newsletter .tnp-field-privacy label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 24px;
    height: 24px;
    border: 1px solid var(--wp--preset--color--accent-1);
    background: transparent;
    box-sizing: border-box;
}

.footer__newsletter .tnp-field-privacy label:has(input[type="checkbox"]:checked)::after {
    content: ' ';
    position: absolute;
    left: 7px;
    top: 3px;
    width: 8px;
    height: 14px;
    border: solid var(--wp--preset--color--accent-1);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Attempted submit without checking consent (toggled by newsletter-ajax.js) */
.footer__newsletter .tnp-field-privacy.tnp-privacy--error label,
.footer__newsletter .tnp-field-privacy.tnp-privacy--error label a {
    color: #e05252;
}

.footer__newsletter .tnp-field-privacy.tnp-privacy--error label::before {
    border-color: #e05252;
}

/* AJAX result message (success/error classes set by newsletter-ajax.js) */
.footer__newsletter .tnp-response {
    font-size: 0.75rem;
    line-height: 1.5;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: opacity .2s ease, max-height .2s ease, margin-top .2s ease;
}

.footer__newsletter .tnp-response.tnp-response--visible {
    max-height: 100px;
    opacity: 1;
    margin-top: 10px;
}

.footer__newsletter .tnp-response.tnp-ajax-success {
    color: var(--wp--preset--color--accent-1);
}

.footer__newsletter .tnp-response.tnp-ajax-error {
    color: #e05252;
}

.footer__newsletter .tnp-field-button input[type="submit"] {
    background-color: var(--wp--preset--color--accent-1);
    color: var(--wp--preset--color--accent-2);
    border: 0;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
}

.footer__info {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 30px;
    padding-top: 2px;
    padding-bottom: 2px;
    margin-bottom: 0;
}

.footer__address {
    background-image: url('../../images/map-pin.svg');
}

.footer__phone {
    background-image: url('../../images/phone.svg');

}
.footer__email {
    background-image: url('../../images/mail.svg');
}

.wp-block-social-links.footer-social-icons {
    margin-bottom: 1rem;
}

.wp-block-social-links.footer-social-icons .wp-social-link svg {
    width: 20px;
    height: 20px;
}

.contact-info-column {
    order: 4;
}

.contact-info-column p,
.contact-info-column a,
.contact-info-column p a,
.contact-info-column ul,
.contact-info-column ul li,
.contact-info-column ul li a,
.menu-column-one p,
.menu-column-one a,
.menu-column-one p a,
.menu-column-one ul,
.menu-column-one ul li,
.menu-column-one ul li a,
.menu-column-two p,
.menu-column-two a,
.menu-column-two p a,
.menu-column-two ul,
.menu-column-two ul li,
.menu-column-two ul li a {
    font-size: 0.875rem;
}

.contact-info-column ul li.wp-social-link-facebook a svg {
    display: none;
}

.contact-info-column ul li.wp-social-link-facebook a:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url('../../images/fb-icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.menu-column-one ul li a span ,
.menu-column-two ul li a span {
    transition: color .25s ease-in;
} 

.menu-column-one ul li a:hover span ,
.menu-column-two ul li a:hover span {
    color: #6a6a6a;
}

.menu-column-one {
    order: 2;
}

.menu-column-two {
    order: 3;
}

.contact-info-column p {
    margin-block-start: 0;
    margin-block-end: 14px;
}

.footer__copyrights,
.footer__navus span {
    font-size: 0.75rem;
    color: #6a6a6a;
}

.copyright-menu ul li a span {
    font-size: 0.75rem;
    color: #6A6A6A;
    transition: color .25s ease-out;
}

.copyright-menu ul li a:hover span {
    color: #fff;
}

.footer__copyright-section{
    align-items: flex-end;
}

@media ( min-width: 768px) {
    .footer .wp-block-columns {
        margin-block-start: 60px;
        flex-wrap: wrap !important;
    }
    .footer .wp-block-columns {
        row-gap: 1rem !important;
    }

    .newsletter-column,
    .contact-info-column,
    .menu-column-one,
    .menu-column-two {
        flex-basis: calc(50% - 18px) !important;
    }

    .contact-info-column {
        order: 3;
    }

    .menu-column-one {
        order: 2;
    }

    .menu-column-two {
        order: 4;
    }
    .copyright-menu {
        flex-direction: row !important;
    }
}

@media ( min-width: 1024px ) {
    .footer .wp-block-columns {
        row-gap: 0px !important;
    }
    footer.footer  {
        padding-block-start: 30px;
        padding-block-end: 30px;
    }

    .newsletter-column,
    .contact-info-column,
    .menu-column-one,
    .menu-column-two {
        flex-basis: calc(25% - 18px) !important;
    }
    .contact-info-column {
        order: 2;
    }

    .menu-column-one {
        order: 3;
    }
}

@media ( min-width: 1280px ) {
    footer.footer  {
        padding-block-start: 50px;
        padding-block-end: 50px;
    }
    .newsletter-column,
    .contact-info-column,
    .menu-column-one,
    .menu-column-two {
        flex-basis: calc(25% - 18px) !important;
    }
    .footer__logo.wp-block-site-logo img {
        width: 155px;
    }
    .footer-info-columns {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        column-gap: 24px !important;
        justify-content: space-between;
        margin-block-start: 70px;
    }
    .footer .wp-block-columns {
        margin-block-start: 60px;
        max-width: 1200px;
        padding: 0 35px;
    }

    .newsletter-column {
        flex-basis: calc(29% - 14px) !important;
    }

    .contact-info-column {
        flex-basis: calc(34% - 20px) !important;
        position: relative;
        padding-right: 28px;
    }

    .wp-block-social-links.footer-social-icons {
        flex-direction: column;
        position: absolute;
        right: 0;
        row-gap: 10px;
        margin-bottom: 0;
    }

    .menu-column-one {
        flex-basis: calc(19% - 19px) !important;
    }
    .menu-column-two {
        flex-basis: calc(13% - 25px) !important;
    }
    .footer-info-columns {
        max-width: 1000px;
        margin-left: auto;
        margin-right: auto;
        column-gap: 24px !important;
        justify-content: space-between;
        margin-block-start: 70px;
    }
}

@media ( min-width: 1440px ) {
    footer.footer  {
        padding-block-start: 70px;
        padding-block-end: 40px;
    }
    .logo-wrapper {
        background-size: 1200px 12px;
    }
    .footer__header {
        margin-bottom: 54px;
    }
}