/* Footer: Hauptbereich (Name, Textblöcke in Spalten), optionale Karten-
   spalte rechts mit Button darüber, Fußleiste mit Menü und Copyright.
   Spaltenzahl kommt als --site-footer-columns(-tablet/-mobile), die
   optionale Schriftfarbe als --site-footer-text-color aus dem Template.
   Desktop-Maße nach Vorlage (1920px breit). */
:where(.site-footer) {
    --site-footer-main-bg: var(--color-secondary);
    --site-footer-aside-bg: var(--color-white);
    --site-footer-bottom-bg: var(--color-primary);
    --site-footer-bottom-color: var(--color-lightgreen-footer);
    --site-footer-color: var(--color-primary);
    /* Textblöcke schwarz, nur die Namenszeile grün */
    --site-footer-content-color: var(--color-black);
    --site-footer-font-size: clamp(14px, 1.111vw, 21.33px);
    --site-footer-inset: calc((100% - var(--max-container-width)) / 2);
    --site-footer-main-width: 62.3%;
    --site-footer-column-width: 19.4vw;
    --site-footer-gap-x: 0px;
    --site-footer-gap-y: 32px;
    --site-footer-block-gap: 1.2em;
    --site-footer-headline-gap: 0.65em;
    --site-footer-cta-height: 9.9vw;
    --site-footer-logo-height: 54px;
    --site-footer-menu-gap: 3.3em;
    --site-footer-icon-size: 32px;
    --site-footer-icon-gap: 16px;
    --site-footer-icon-bg: var(--color-primary);
    --site-footer-icon-color: var(--color-white);
}

.site-footer {
    display: grid;
    grid-template-columns: var(--site-footer-main-width) 1fr;
    color: var(--site-footer-color);
    font-size: var(--site-footer-font-size);
}

.site-footer:not(.site-footer--with-aside) {
    grid-template-columns: 1fr;
}

/* Globale Regeln setzen p/a fest auf Schwarz */
.site-footer :is(p, li, td, th, a:not(.button)) {
    color: inherit;
}

.site-footer--colored {
    --site-footer-color: var(--site-footer-text-color);
    --site-footer-content-color: var(--site-footer-text-color);
}

.site-footer a:not(.button) {
    text-decoration: none;
}

.site-footer a:not(.button):hover,
.site-footer a:not(.button):focus-visible {
    text-decoration: underline;
}

/* Seiten mit CSS-Klasse "footer-compact" (z.B. Kontakt, zeigt Adresse und
   Karte selbst): nur die Fußleiste */
.footer-compact .site-footer :is(.site-footer__main, .site-footer__aside) {
    display: none;
}

/* Seiten mit CSS-Klasse "footer-tertiary" (z.B. Impressum, Datenschutz:
   Inhalt reicht hellgrün bis an den Footer): Hauptfläche hell statt grün */
.footer-tertiary .site-footer {
    --site-footer-main-bg: var(--color-tertiary);
}

/* --- Hauptbereich -------------------------------------------------------- */
.site-footer__main {
    padding: 2.9vw 3vw 3.8vw var(--site-footer-inset);
    background: var(--site-footer-main-bg);
}

.site-footer--with-aside .site-footer__main {
    /* Prozent würde sich auf die Spalte beziehen: Einzug über vw
       (entspricht --max-container-width = min(85.5%, 1642px)) */
    padding-left: max(7.25vw, calc((100vw - 1642px) / 2));
}

.site-footer__logo {
    display: block;
    height: var(--site-footer-logo-height);
    width: auto;
    margin-bottom: 1em;
}

.site-footer__logo-link {
    display: inline-block;
}

.site-footer__caption {
    margin: 0 0 2.4em;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.site-footer__brand-name {
    margin-right: 0.3em;
    font-weight: var(--font-weight-txt-bold);
}

.site-footer__columns {
    display: grid;
    color: var(--site-footer-content-color);
    grid-template-columns: repeat(var(--site-footer-columns, 2), var(--site-footer-column-width));
    gap: var(--site-footer-gap-y) var(--site-footer-gap-x);
}

.site-footer__column {
    display: flex;
    flex-direction: column;
    gap: var(--site-footer-block-gap);
    min-width: 0;
}

/* Überschrift steht direkt über dem Text; globale Außenabstände der
   Überschriften würden die Blöcke sonst auseinanderziehen. */
.site-footer__headline {
    margin: 0 0 var(--site-footer-headline-gap) !important;
    color: inherit;
    font-size: 1em;
    font-weight: var(--font-weight-txt-bold);
    line-height: 1.5;
    letter-spacing: 0.028em;
    text-transform: none;
}

.site-footer__text {
    line-height: 1.56;
}

.site-footer__text p {
    margin: 0;
}

.site-footer__text p + p {
    margin-top: 0.5em;
}

.site-footer__text ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Öffnungszeiten als Tabelle: Tag fett, Uhrzeit normal */
.site-footer__text table {
    margin: 0 0 var(--site-footer-headline-gap);
    border-collapse: collapse;
}

.site-footer__text :is(th, td) {
    padding: 0;
    border: 0;
    text-align: left;
    vertical-align: top;
    font-weight: var(--font-weight-txt);
}

.site-footer__text :is(th, td):first-child {
    padding-right: 1.4em;
    font-weight: var(--font-weight-txt-bold);
}

/* --- Kartenspalte -------------------------------------------------------- */
.site-footer__aside {
    display: flex;
    flex-direction: column;
    background: var(--site-footer-aside-bg);
}

.site-footer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: var(--site-footer-cta-height);
    padding: 1em;
}

.site-footer .site-footer__cta .site-footer__button {
    margin: 0;
}

.site-footer__map {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    overflow: hidden;
}

.site-footer__map-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
}

/* --- Fußleiste ----------------------------------------------------------- */
.site-footer__bottom {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1em 2em;
    padding: 2vw 3.5vw 2vw var(--site-footer-inset);
    background: var(--site-footer-bottom-bg);
    color: var(--site-footer-bottom-color);
    font-weight: var(--font-weight-txt-bold);
}

.site-footer__menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em var(--site-footer-menu-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__copyright {
    margin: 0;
    color: inherit;
    letter-spacing: 0.02em;
}

.site-footer__bottom .site-footer__button {
    margin: 0 0 0 auto;
}

/* Social-Icons: Kreis mit Icon; in der Spalte untereinander, unten nebeneinander. */
.site-footer__icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--site-footer-icon-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__icons--column {
    flex-direction: column;
}

.site-footer a.site-footer__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--site-footer-icon-size);
    height: var(--site-footer-icon-size);
    border-radius: 50%;
    background: var(--site-footer-icon-bg);
    color: var(--site-footer-icon-color);
    text-decoration: none;
    transition: transform 200ms ease;
}

.site-footer a.site-footer__icon:hover,
.site-footer a.site-footer__icon:focus-visible {
    transform: scale(1.1);
}

.site-footer__icon svg {
    width: 55%;
    height: 55%;
}

/* ==========================================================================
   Tablet 600-900px: Kartenspalte unter den Hauptbereich
   ========================================================================== */
@media (min-width: 600px) and (max-width: 900px) {
    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer__main,
    .site-footer--with-aside .site-footer__main {
        padding: 48px 7vw 40px;
    }

    .site-footer__columns {
        grid-template-columns: repeat(var(--site-footer-columns-tablet, 2), minmax(0, 1fr));
        gap: 32px 40px;
    }

    .site-footer__cta {
        min-height: 110px;
    }

    .site-footer__map {
        min-height: 36vw;
    }

    .site-footer__bottom {
        padding: 24px 7vw;
    }
}

/* ==========================================================================
   Mobil 0-599px: alles untereinander, zweite Spalte eigene Fläche
   ========================================================================== */
@media (max-width: 599px) {
    .site-footer {
        grid-template-columns: 1fr;
    }

    .site-footer__main,
    .site-footer--with-aside .site-footer__main {
        padding: 6vw 0 0;
    }

    .site-footer__brand {
        padding: 0 10vw;
    }

    /* Eine Zeile über die volle Inhaltsbreite wie in der Vorlage */
    .site-footer__caption {
        margin-bottom: 4.3em;
        font-size: 2.45vw;
    }

    .site-footer__columns {
        grid-template-columns: repeat(var(--site-footer-columns-mobile, 1), minmax(0, 1fr));
        gap: 0;
    }

    .site-footer__column {
        padding: 0 10vw 12vw;
    }

    .site-footer__column + .site-footer__column {
        padding-top: 7vw;
        background: var(--color-mint);
    }

    .site-footer__cta {
        min-height: 25vw;
    }

    .site-footer__map {
        min-height: 41vw;
    }

    .site-footer__bottom {
        flex-direction: column;
        justify-content: center;
        gap: 9vw;
        padding: 10vw 10vw 7vw;
        text-align: center;
    }

    .site-footer__menu-list {
        flex-direction: column;
        align-items: center;
    }

    .site-footer__copyright {
        font-size: 2.3vw;
    }

    .site-footer__bottom .site-footer__button {
        margin: 0;
    }
}