/**
 * Blueprint Footer — System Styles (v2 Stage 1)
 *
 * Farben ausschließlich über --footer-* CSS-Variablen.
 * Diese werden von blueprint_output_design_css() als
 * footer[data-theme="light|dark"] Blöcke ausgegeben.
 *
 * Grid XY regelt Spalten — dieses File regelt Abstände, Typo, Farben.
 *
 * Stage 1 Änderungen:
 *   - .site-footer__container als eigenständiger Container-Wrapper.
 *   - Modul-Heading / Intro / Body Scope (.footer-module__heading etc.).
 *   - Services-Nav-Modul-Styles (.footer-nav--services).
 *   - Custom Container Width via CSS-Variable --footer-container-max-width.
 *
 * @package Blueprint
 */


/* ════════════════════════════════════════════════════════════════
   1 — FOOTER ROOT
   ════════════════════════════════════════════════════════════════ */

.site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    border-top: 1px solid var(--footer-border);
    font-size: 0.9rem;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.site-footer > .site-footer__container {
    color: inherit;
}

.site-footer--minimal {
    border-top: 1px solid var(--footer-border);
}


/* ════════════════════════════════════════════════════════════════
   1b — FOOTER CONTAINER (v2 Stage 1 — vom Header entkoppelt)
   ════════════════════════════════════════════════════════════════
   .site-footer__container erbt die Basis-Container-Stile durch die
   zusätzlich gesetzte Klasse (container / container-wide / container-narrow
   / container-fluid / container-custom). Die eigene Footer-Klasse scoped
   das Custom-Width-Setting auf den Footer, unabhängig vom Header.
*/

.site-footer .site-footer__container.container-custom {
    max-width: var(--footer-container-max-width, 1600px);
    margin-inline: auto;
    width: 100%;
}


/* ════════════════════════════════════════════════════════════════
   2 — FOOTER MAIN
   ════════════════════════════════════════════════════════════════ */

.footer-main {
    padding-top: 3rem;
    padding-bottom: 1rem;
}


/* ════════════════════════════════════════════════════════════════
   3 — MAIN MODULES ROW
   ════════════════════════════════════════════════════════════════ */

.footer-main__row {
    row-gap: 2rem;
}

.footer-main__row + .footer-custom-slot {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--footer-border);
}


/* ════════════════════════════════════════════════════════════════
   4 — FOOTER MODULE (gemeinsame Basis)
   ════════════════════════════════════════════════════════════════ */

.footer-module {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Modul-Header-Zone (Heading + Intro) — gerendert wenn gefüllt. */
.footer-module__header {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.footer-module__heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--footer-heading);
    margin: 0;
    line-height: 1.4;
}

.footer-module__intro {
    font-size: 0.85rem;
    color: var(--footer-muted);
    margin: 0;
    line-height: 1.5;
}

.footer-module__body {
    min-width: 0;
}

/* Legacy-Fallback-Selektor: bestehende Custom-Styles,
   die auf .footer-module h3/h4 zielen, weiter bedienen. */
.footer-module h3,
.footer-module h4 {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--footer-heading);
    margin: 0 0 0.5rem;
}


/* ════════════════════════════════════════════════════════════════
   5 — BRANDING MODUL
   ════════════════════════════════════════════════════════════════ */

.footer-branding {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-branding img,
.footer-branding .custom-logo {
    max-height: 48px;
    width: auto;
    display: block;
}

.footer-branding__name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--footer-heading);
    text-decoration: none;
    line-height: 1.3;
}

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

.footer-branding__tagline {
    font-size: 0.85rem;
    color: var(--footer-muted);
    margin: 0;
    line-height: 1.5;
}


/* ════════════════════════════════════════════════════════════════
   6 — CONTACT MODUL
   ════════════════════════════════════════════════════════════════ */

.footer-contact {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-contact__item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    color: var(--footer-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.footer-contact__item i {
    color: var(--footer-text);
    font-size: 0.875rem;
    min-width: 14px;
    margin-top: 0.2em;
    opacity: 0.6;
    flex-shrink: 0;
}

.footer-contact__item a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-contact__item a:hover {
    color: var(--footer-link-hover);
}

.footer-contact__item a:focus-visible {
    outline: 2px solid var(--footer-link-hover);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer-contact__address {
    align-items: flex-start;
}


/* ════════════════════════════════════════════════════════════════
   7 — NAVIGATION MODUL
   ════════════════════════════════════════════════════════════════ */

.footer-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.footer-nav__list .menu-item a {
    color: var(--footer-link);
    text-decoration: none;
    font-size: 0.875rem;
    line-height: 1.5;
    display: inline-block;
    transition: color 0.2s ease;
}

.footer-nav__list .menu-item a:hover {
    color: var(--footer-link-hover);
}

.footer-nav__list .menu-item a:focus-visible {
    outline: 2px solid var(--footer-link-hover);
    outline-offset: 2px;
    border-radius: 2px;
}

.footer-nav__list .sub-menu {
    display: none;
}

/* Services-Nav — optische Variante der primären Footer-Navigation.
   Verwendet dieselbe Basis, etwas ruhigere Typografie. */
.footer-nav--services .footer-nav__list {
    gap: 0.4rem;
}

.footer-nav--services .footer-nav__list .menu-item a {
    font-size: 0.875rem;
}


/* ════════════════════════════════════════════════════════════════
   8 — SOCIAL MODUL
   ════════════════════════════════════════════════════════════════ */

.footer-social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.footer-social__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--footer-text);
    opacity: 0.7;
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.footer-social__icon:hover {
    color: var(--footer-link-hover);
    opacity: 1;
}

.footer-social__icon:focus-visible {
    outline: 2px solid var(--footer-link-hover);
    outline-offset: 3px;
    border-radius: 3px;
    opacity: 1;
}


/* ════════════════════════════════════════════════════════════════
   9 — CUSTOM SLOT ROW
   ════════════════════════════════════════════════════════════════ */

.footer-custom-slot {
    row-gap: 1.5rem;
}

.footer-custom-slot__header {
    margin-bottom: 0.75rem;
}

.footer-custom-slot__header .footer-module__heading {
    color: var(--footer-heading);
}

.footer-main > .footer-custom-slot:first-child,
.footer-main > .footer-custom-slot__header:first-child {
    padding-top: 0;
    border-top: none;
}

.footer-custom-slot__item {
    min-width: 0;
    font-size: 0.875rem;
    color: var(--footer-muted);
    line-height: 1.6;
}

.footer-custom-slot__item a {
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-custom-slot__item a:hover {
    color: var(--footer-link-hover);
}

.footer-custom-slot__item p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.footer-custom-slot__item p:last-child {
    margin-bottom: 0;
}


/* ════════════════════════════════════════════════════════════════
   10 — BOTTOM BAR (full-width — eigener innerer Container)
   ════════════════════════════════════════════════════════════════
   Die Bottom-Bar ist Geschwister von .site-footer__container (nicht Kind),
   damit ihr --footer-bottom-bg bis zum Viewport-Rand reicht. Der eigene
   innere .site-footer__container bringt den Content auf die gleiche
   Breite wie der Footer-Main.
*/

.footer-bottom-bar {
    background-color: var(--footer-bottom-bg);
    border-top: 1px solid var(--footer-border);
    padding: 0.875rem 0;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-bottom-bar > .site-footer__container.container-custom {
    max-width: var(--footer-container-max-width, 1600px);
    margin-inline: auto;
    width: 100%;
}

.site-footer--minimal .footer-bottom-bar {
    border-top: none;
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

.footer-bottom-bar__inner {
    align-items: center;
    row-gap: 0.5rem;
}

.footer-bottom-bar__copyright {
    font-size: 0.8rem;
    color: var(--footer-muted);
    line-height: 1.5;
}

.footer-bottom-bar__copyright span {
    display: block;
}

.footer-bottom-bar__legal,
.footer-bottom-bar__right {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.25rem;
    justify-content: flex-start;
}

.footer-legal-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.footer-legal-links li {
    margin: 0;
}

.footer-legal-links a {
    font-size: 0.8rem;
    color: var(--footer-muted);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: var(--footer-link-hover);
}

.footer-legal-links a:focus-visible {
    outline: 2px solid var(--footer-link-hover);
    outline-offset: 2px;
    border-radius: 2px;
}


/* ════════════════════════════════════════════════════════════════
   11 — RESPONSIVE
   ════════════════════════════════════════════════════════════════ */

@media (min-width: 640px) {
    .footer-bottom-bar__legal,
    .footer-bottom-bar__right {
        justify-content: flex-end;
    }
}

@media (max-width: 639px) {
    .footer-main {
        padding-top: 2rem;
    }

    .footer-main__row {
        row-gap: 1.5rem;
    }

    .footer-main__row + .footer-custom-slot {
        margin-top: 1.5rem;
        padding-top: 1.5rem;
    }

    .footer-bottom-bar {
        padding: 1rem 0;
    }

    .footer-bottom-bar__inner {
        row-gap: 0.625rem;
    }

    .footer-bottom-bar__copyright,
    .footer-bottom-bar__legal,
    .footer-bottom-bar__right {
        text-align: left;
        justify-content: flex-start;
    }

    .footer-branding img,
    .footer-branding .custom-logo {
        max-height: 36px;
    }
}


/* ════════════════════════════════════════════════════════════════
   12 — REDUCED MOTION
   ════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    .site-footer,
    .footer-bottom-bar,
    .footer-contact__item a,
    .footer-nav__list .menu-item a,
    .footer-social__icon,
    .footer-legal-links a,
    .footer-custom-slot__item a,
    .footer-branding__name,
    .footer-cta,
    .footer-cta__button {
        transition: none;
    }
}


/* ════════════════════════════════════════════════════════════════
   13 — STAGE 2: HOURS + ADDRESS MODULE
   ════════════════════════════════════════════════════════════════ */

.footer-hours__text {
    font-size: 0.875rem;
    color: var(--footer-muted);
    line-height: 1.6;
}

.footer-address {
    font-style: normal;
    font-size: 0.875rem;
    color: var(--footer-muted);
    line-height: 1.5;
}

.footer-address__link {
    color: var(--footer-link);
    text-decoration: none;
    transition: color 0.2s ease;
}

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


/* ════════════════════════════════════════════════════════════════
   14 — STAGE 2: CTA-ZONE
   ════════════════════════════════════════════════════════════════ */

.footer-cta {
    margin: 0 0 2rem;
    padding: 2rem 1.5rem;
    border-radius: var(--radius-lg, 12px);
    background-color: var(--footer-bottom-bg);
    border: 1px solid var(--footer-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.footer-cta--below_main {
    margin: 2rem 0 2rem;
}

.footer-cta--split_right {
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
}

.footer-cta__inner {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: flex-start;
    width: 100%;
}

.footer-cta__heading {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--footer-heading);
}

.footer-cta__text {
    margin: 0;
    font-size: 0.95rem;
    color: var(--footer-muted);
    line-height: 1.5;
}

.footer-cta__button {
    margin-top: 0.25rem;
}

/* Style-Varianten — nutzen das bestehende .btn-System, hier nur Offsets. */
.footer-cta--style-outline .footer-cta__button {
    background: transparent;
}

/* Bei CTA above_main / below_main horizontal nebeneinander,
   wenn Platz vorhanden ist. */
@media (min-width: 768px) {
    .footer-cta--above_main .footer-cta__inner,
    .footer-cta--below_main .footer-cta__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1.5rem;
    }

    .footer-cta--above_main .footer-cta__button,
    .footer-cta--below_main .footer-cta__button {
        margin-top: 0;
        flex-shrink: 0;
    }
}


/* ════════════════════════════════════════════════════════════════
   15 — STAGE 2: VARIANTEN-LAYOUTS
   ════════════════════════════════════════════════════════════════
   Jede Variante hat feste Systemregeln — keine freien Layout-Felder.
   Die Spaltenbreiten kommen zentral aus do_footer_get_layout_column_class().
   Dieses CSS feintuned Abstände, Typografie und Visuals pro Variante.
*/

/* ── editorial ─────────────────────────────────────────────────── */
.site-footer--editorial .footer-main {
    padding-top: 4rem;
    padding-bottom: 1.5rem;
}
.site-footer--editorial .footer-main__row {
    row-gap: 2.5rem;
}
.site-footer--editorial .footer-module--branding .footer-branding__name {
    font-size: 1.5rem;
}
.site-footer--editorial .footer-module--branding .footer-branding__tagline,
.site-footer--editorial .footer-module--branding .footer-module__intro {
    max-width: 42ch;
    font-size: 0.95rem;
}

/* ── large_brand ───────────────────────────────────────────────── */
.site-footer--large_brand .footer-main {
    padding-top: 4rem;
    padding-bottom: 1.5rem;
}
.site-footer--large_brand .footer-module--branding .footer-branding__name {
    font-size: 1.75rem;
    letter-spacing: -0.01em;
}
.site-footer--large_brand .footer-module--branding img,
.site-footer--large_brand .footer-module--branding .custom-logo {
    max-height: 72px;
}
.site-footer--large_brand .footer-module--branding .footer-module__intro {
    max-width: 48ch;
}
.site-footer--large_brand .footer-module__heading {
    font-size: 0.7rem;
}

/* ── split_cta ─────────────────────────────────────────────────── */
.site-footer--split_cta .footer-main {
    padding-top: 3rem;
    padding-bottom: 1.5rem;
}
.site-footer--split_cta .footer-main__split {
    row-gap: 2rem;
    align-items: stretch;
}
.site-footer--split_cta .footer-main__split-modules .footer-main__row {
    row-gap: 1.75rem;
}

/* ── service_footer ────────────────────────────────────────────── */
.site-footer--service_footer .footer-main {
    padding-top: 3.5rem;
    padding-bottom: 1.25rem;
}
.site-footer--service_footer .footer-main__row {
    row-gap: 2rem;
}
.site-footer--service_footer .footer-module--services .footer-nav__list {
    gap: 0.5rem;
}


/* ════════════════════════════════════════════════════════════════
   16 — STAGE 2: BOTTOM BAR — SOCIAL MINI
   ════════════════════════════════════════════════════════════════ */

.footer-bottom-bar__social-mini {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.footer-social__icon--mini {
    font-size: 15px;
    opacity: 0.65;
}

.footer-social__icon--mini:hover {
    opacity: 1;
}


/* ════════════════════════════════════════════════════════════════
   17 — STAGE 2: CUSTOM-SLOT above_bottom_bar
   ════════════════════════════════════════════════════════════════ */

.footer-custom-slot--above-bottom {
    padding: 1.5rem 0;
    border-top: 1px solid var(--footer-border);
}


/* ════════════════════════════════════════════════════════════════
   18 — STAGE 2: RESPONSIVE FINETUNING
   ════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    .footer-cta {
        padding: 1.5rem 1.25rem;
    }

    .site-footer--editorial .footer-module--branding .footer-branding__name,
    .site-footer--large_brand .footer-module--branding .footer-branding__name {
        font-size: 1.25rem;
    }

    .site-footer--large_brand .footer-module--branding img,
    .site-footer--large_brand .footer-module--branding .custom-logo {
        max-height: 48px;
    }
}