/* Fusszeile: auf allen Seiten identisch.

   Dunkler Abschluss in der Markenfarbe, damit die Seite unten
   ruhig endet. Drei gleich breite Spalten: Marke, Kontakt,
   Kooperationen. Darunter, an denselben Spalten ausgerichtet,
   Copyright, Impressum und Datenschutz. */

/* Das Theme-Template stellt die Fusszeile in einen Container mit
   begrenzter Breite und eigenen Abstaenden. Die folgenden Regeln
   nehmen diese Abstaende weg, damit der farbige Abschluss ohne
   weisse Streifen direkt am Inhalt und am Fensterende sitzt.

   Die Abstaende kommen teils als Inline-Stil aus dem Site Editor.
   Dagegen hilft nur !important – deshalb steht es hier, eng
   begrenzt auf den Template-Teil der Fusszeile. */

footer.wp-block-template-part {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

footer.wp-block-template-part > .wp-block-group,
footer.wp-block-template-part .wp-block-group,
footer.wp-block-template-part .wp-block-shortcode,
footer.wp-block-template-part > p {
    margin-block: 0 !important;
    padding-block: 0 !important;
}

/* Kein Blockabstand zwischen letztem Inhalt und Fusszeile */
.wp-site-blocks > footer.wp-block-template-part {
    margin-block-start: 0 !important;
}

/* Und nichts mehr unterhalb der Fusszeile */
.wp-site-blocks {
    padding-bottom: 0 !important;
}

.jf-footer-ausbruch,
.wp-block-shortcode:has(.jf-footer),
.wp-block-group:has(> .wp-block-shortcode > .jf-footer) {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    max-width: none;
}

.jf-footer {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    overflow-x: hidden;
    box-sizing: border-box;

    /* Oben exakt der Ton der Kopfzeile, nach unten eine Spur
       tiefer. Dadurch schliesst die Fusszeile bruchlos an die
       Kopfzeilenfarbe an, und der Text weiter unten steht auf
       einem dunkleren Grund und bleibt gut lesbar. */
    background:
        radial-gradient(
            90% 120% at 8% 0%,
            rgb(255 255 255 / 12%) 0%,
            rgb(255 255 255 / 0) 62%
        ),
        linear-gradient(
            180deg,
            var(--jf-kopf) 0%,
            var(--jf-kopf-mitte) 9%,
            var(--jf-kopf-tief) 34%,
            #35505a 100%
        );

    /* Reines Weiss als Grundfarbe - der Verlauf ist tief genug. */
    color: var(--jf-weiss);

    font-family: var(--jf-schrift);
    font-size: 1.04rem;
    line-height: 1.48;
}

/* Feine Goldlinie als oberer Abschluss */
.jf-footer::before {
    content: "";

    display: block;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--jf-gold) 0%,
        rgb(219 197 143 / 25%) 45%,
        rgb(219 197 143 / 0) 100%
    );
}

.jf-footer p {
    margin: 0 0 6px;
}

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

.jf-footer a {
    color: var(--jf-text-hell);
    text-decoration: none;

    transition: color 0.2s var(--jf-ease);
}

.jf-footer a:hover {
    color: var(--jf-gelb);
}

.jf-footer a:focus-visible {
    outline: 2px solid var(--jf-gold);
    outline-offset: 3px;
    border-radius: 3px;
}


/* Oberer Bereich: Marke und Spalten */

/* Drei gleich breite Spalten: Marke, Kontakt, Kooperation.
   minmax(0, 1fr) statt 1fr, damit lange Woerter die Spalte nicht
   auseinanderdruecken.

   DIE STELLSCHRAUBE fuer die Hoehe der Fusszeile ist die
   padding-Zeile: erster Wert oben, dritter Wert unten. */
.jf-footer-oben {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px clamp(40px, 6vw, 88px);

    /* oben - seitlich - unten */
    padding: 24px var(--jf-rand) 16px;

    /* Spalten nicht auf gleiche Hoehe strecken: sonst bestimmt die
       laengste Spalte, wo die Flaeche endet. */
    align-items: start;
}

/* Leere Absaetze, die WordPress gelegentlich um Shortcode-Ausgaben
   herum einfuegt, wuerden hier je rund 28px Luft erzeugen. */
.jf-footer p:empty,
.jf-footer br {
    display: none;
}

.jf-footer-marke-name {
    margin: 0 0 6px;

    color: var(--jf-text-hell);

    font-family: var(--jf-schrift-marke);
    font-size: 1.46rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.jf-footer-claim {
    margin: 0 0 8px;

    color: var(--jf-gelb);

    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.jf-footer-text {
    max-width: 38ch;
}


/* Die Spalten */

.jf-footer-spalte h3 {
    margin: 0 0 8px;

    color: var(--jf-gelb);

    font-family: var(--jf-schrift);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.jf-footer-spalte ul {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.jf-footer-spalte li {
    margin: 0;
}

.jf-footer-adresse {
    font-style: normal;
}

.jf-footer-adresse p {
    margin-bottom: 2px;
}


/* Soziale Netzwerke: dezente Kreise in der Markenwelt, nicht in
   den Originalfarben der Dienste – die wuerden die ruhige
   Farbgebung sprengen. Sie stehen in der Kontaktspalte direkt
   unter der E-Mail-Adresse: dort gehoeren sie inhaltlich hin, und
   die Fusszeile wird dadurch um eine Zeilenhoehe flacher. */

.jf-footer-social {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 10px;
}

.jf-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background-color: rgb(255 255 255 / 8%);
    color: var(--jf-text-hell);

    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 50%;

    transition:
        background-color 0.25s var(--jf-ease),
        border-color 0.25s var(--jf-ease),
        color 0.25s var(--jf-ease),
        transform 0.25s var(--jf-ease);
}

.jf-footer-social a:hover {
    background-color: rgb(255 210 63 / 16%);
    border-color: var(--jf-gelb);
    color: var(--jf-gelb);
    transform: translateY(-2px);
}

.jf-footer-social svg {
    width: 21px;
    height: 21px;
    fill: currentColor;
}


/* Partner */

/* Partner stehen untereinander, wie die Zeilen der Adresse -
   nebeneinander wirkten sie in einer schmalen Spalte gedrängt. */
.jf-footer-partner {
    display: flex;
    flex-direction: column;
    gap: 6px;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* Unterer Abschluss */

/* Dasselbe Raster wie oben: Copyright unter der Marke, Impressum
   unter Kontakt, Datenschutz unter den Kooperationen. Die Liste
   wird dafuer selbst zum Raster und spannt ueber Spalte 2 und 3. */
.jf-footer-unten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 8px clamp(40px, 6vw, 88px);

    padding: 8px var(--jf-rand) 10px;

    border-top: 1px solid var(--jf-linie-dunkel);

    font-size: 0.94rem;
}

.jf-footer-rechtliches {
    display: grid;
    grid-column: 2 / span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px clamp(40px, 6vw, 88px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.jf-footer-rechtliches a {
    font-weight: 600;
}


/* Tablet */

@media (max-width: 900px) {
    .jf-footer-oben {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;

        padding-top: 28px;
    }

    .jf-footer-text {
        max-width: 52ch;
    }
}


/* Handy */

@media (max-width: 700px) {
    .jf-footer-oben {
        padding: 22px 20px 16px;
        gap: 22px;
    }

    .jf-footer-unten,
    .jf-footer-rechtliches {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .jf-footer-rechtliches {
        grid-column: 1;
    }

    .jf-footer-spalten {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 28px 24px;
    }

    .jf-footer-unten {
        padding: 10px 20px 14px;

        flex-direction: column;
        align-items: flex-start;
    }
}


/* Reduzierte Bewegung */

@media (prefers-reduced-motion: reduce) {
    .jf-footer a,
    .jf-footer-social a {
        transition: none;
    }
}