/* Weser Theme – Site Footer (zentriert, gestapelt) */
.site-footer {
    background-color: var(--color-dark);
    color: rgba(255,255,255,0.75);
}

.footer-main {
    padding: var(--space-lg) 0;
    text-align: center;
}

/* ── Logo ── */
.footer-brand-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 36px;
}

.footer-brand img,
.footer-brand svg {
    height: 40px;
    width: auto;
    filter: brightness(0) invert(1);
}

.footer-brand-text {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.02em;
}

/* ── Navigation: 5 Spalten, je Spalte ein Paar (Reihe 1 über Reihe 2), linksbündig ──
   Desktop/Tablet: 5 gleich verteilte Spalten. Mobil: 2 Spalten nebeneinander. */
.footer-nav-cols {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 44px;
    max-width: 900px;
    margin: 0 auto 32px;
}

.footer-nav-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}

.footer-nav-link {
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    transition: color var(--transition);
}

.footer-nav-link:hover {
    color: var(--color-primary);
}

/* ── Kontaktzeile ── */
.footer-contact {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px 32px;
    margin-bottom: 28px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
}

/* Icon an der ERSTEN Zeile, nicht an der Mitte des Blocks – Kundenfeedback 01,
   Mobil 20: „Standort-Icon und Adresse auf derselben Höhe". Bricht die
   Adresse auf schmalen Telefonen (320px) zweizeilig um, stand das Icon mit
   `center` zwischen den Zeilen. Einzeilig ist das Ergebnis dasselbe wie
   vorher: Der Versatz unten rückt das 16px-Icon auf die Zeilenmitte. */
.footer-contact-item {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    color: rgba(255,255,255,0.75);
    transition: color var(--transition);
}

/* Figma: Kontakt-Icons weiß (nicht grün), einheitlich 16×16 und mittig zur Zeile */
.footer-contact-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    display: block;
    color: var(--color-white);
    margin-top: 2px;                           /* Rückfall für Browser ohne lh */
    margin-top: calc((1lh - 16px) / 2);        /* Mitte der ersten Zeile */
}

a.footer-contact-item:hover {
    color: var(--color-white);
}

/* ── Social ── */
.footer-social {
    display: flex;
    justify-content: center;
    gap: 14px;
}

/* Figma: blanke Icons 24×24, kein Kreis dahinter */
.footer-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 0;
    background-color: transparent;
    color: var(--color-white);
    transition: color var(--transition);
}

.footer-social-link svg {
    width: 24px;
    height: 24px;
    display: block;
}

.footer-social-link:hover {
    background-color: transparent;
    color: var(--color-primary);
}

@media (max-width: 767px) {
    /* Figma Mobil: alle Footer-Texte Poppins Regular 13px / 19.5px */
    .footer-nav-link,
    .footer-contact,
    .footer-contact-item {
        font-family: var(--font-body);
        font-weight: var(--fw-normal);
        font-size: 13px;
        line-height: 19.5px;
    }
    .footer-nav-cols {
        max-width: 320px;
        gap: 20px 24px;
        justify-content: flex-start;
    }
    .footer-nav-col {
        flex: 0 0 calc(50% - 12px);
    }
    /* Ungerade letzte Spalte auf Mobil nebeneinander legen (matcht Figma:
       Datenschutz | Impressum in derselben Reihe, an den 2 Spalten ausgerichtet). */
    .footer-nav-col:last-child {
        flex: 0 0 100%;
        flex-direction: row;
        gap: 0 24px;
    }
    .footer-nav-col:last-child .footer-nav-link {
        flex: 0 0 calc(50% - 12px);
    }
    .footer-contact {
        flex-direction: column;
        gap: 12px;
    }
}

/* ── Newsletter-Anmeldung (Brevo) ─────────────────────────────
   Ausgabe: inc/newsletter.php, eingehängt in footer.php. Sie steht im
   dunklen Fuß, deshalb weiße Schrift und ein Feld mit hellem Grund.
   Der Knopf ist der normale Primärknopf des Themes (grün auf Dunkelblau),
   damit der Fuß nicht eine zweite Knopfart bekommt.
   Ohne hinterlegte Brevo-Adresse gibt der Block nichts aus; Administratoren
   sehen dann den Hinweis (`--hinweis`). */
.footer-newsletter {
    max-width: 520px;
    margin: var(--space-md) auto 0;
    text-align: center;
}

.footer-newsletter-title {
    margin: 0 0 8px;
    font-family: var(--font-heading);
    font-weight: var(--fw-semibold);
    font-size: 22px;
    line-height: 26px;
    color: var(--color-white);
}

.footer-newsletter-text {
    margin: 0 0 16px;
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* Die Beschriftung gehört zum Feld, sichtbar ist sie nicht – der Platzhalter
   sagt dasselbe. Für Screenreader bleibt sie bestehen. */
.footer-newsletter-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.footer-newsletter-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.footer-newsletter-input {
    flex: 1 1 240px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    background-color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--fs-copy-s);
    line-height: 1.5;
    color: var(--color-dark);
}

.footer-newsletter-input::placeholder {
    color: #767676;                            /* 4,5:1 auf Weiß */
    opacity: 1;
}

.footer-newsletter-input:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.footer-newsletter-btn {
    flex: 0 0 auto;
}

.footer-newsletter-hinweis {
    margin: 12px 0 0;
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.75);
}

.footer-newsletter-hinweis a {
    color: var(--color-white);
    text-decoration: underline;
}

.footer-newsletter--hinweis p {
    margin: 0;
    padding: 12px 16px;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.75);
}