/* === FUNDER BAND ===
   Funder logos beside the funding notice ("Fördervermerk"), with a DE/EN switch.
   Shared by the home page, the search-results page and every page built from
   templates/page.html, so the looks are defined once here and each page only
   decides where the band sits.

   Markup:  section.funder-band > .funder-band-inner >
                .funder-logos + .funder-text + .funder-links (About, Resources,
                Impressum, Datenschutz)
   Logos:   resources/images/logos/
   Switch:  resources/scripts/common/funderLang.js
   Wording: Akademienunion/Fördervermerk_Hinweise.docx — the Union is always named
            in full, never shortened to "Union". */
.funder-band {
    width: 100%;
    padding: 26px 20px 22px;
    background-color: #fff;
    /* Separator that fades out at both ends instead of a hard full-width rule.
       Drawn as a 1px background strip, not a border. The end stops repeat the
       line's own rgb at zero alpha, so it fades to nothing instead of through
       grey, which is what bare `transparent` would do. */
    background-image: linear-gradient(to right, rgba(236, 240, 241, 0) 0%, var(--antiflash-white) 18%, var(--antiflash-white) 82%, rgba(236, 240, 241, 0) 100%);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 1px;
}

/* Three columns: the logos, the funding notice, and the two legal links. The outer
   two take the width their content asks for and the notice takes what is left, so
   the notice reflows rather than the logo block or the links wrapping. */
.funder-band-inner {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: stretch;
    --funder-gap: 48px;
    column-gap: var(--funder-gap);
}

/* The three blocks stretch to the full height of the row rather than being centred
   as grid items, because that is what lets the dividers below run the whole height
   whatever the notice wraps to. Each block then centres its own content instead. */
.funder-logos,
.funder-text,
.funder-links {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* === THE DIVIDERS BETWEEN THE BLOCKS ===
   Drawn in the middle of the 48px gap by a pseudo-element, not as a border on the
   block, so the line sits between the two columns rather than hard against one of
   them. They fade out top and bottom the same way the band's own top separator fades
   at its ends - a hard-stopping rule would be the only unfaded line in the footer. */
.funder-text,
.funder-links {
    position: relative;
}
.funder-text::before,
.funder-links::before {
    content: "";
    position: absolute;
    left: calc(var(--funder-gap, 48px) / -2);   /* the middle of the gap, whatever it is */
    top: 0;
    bottom: 0;
    width: 1px;
    background-image: linear-gradient(to bottom, rgba(236, 240, 241, 0) 0%, var(--antiflash-white) 22%, var(--antiflash-white) 78%, rgba(236, 240, 241, 0) 100%);
}

/* The Academy's own mark leads and is the largest thing in the band: it has a row
   to itself, and the two funder marks follow underneath at about two thirds of its
   height.

   Asked for by the Academy's press office (2026-09-21): the Fördervermerk and the
   logos themselves were right, but their own mark should read more prominently than
   the funders'. It used to stand third in a single row, where its wide, low shape
   (3:1) made it the SHORTEST of the three whatever width it was given - 49px against
   the 60px of the other two. Height, not width, is what carries prominence in a row,
   so the fix is a row of its own rather than a bigger number on the same line.

   Widths stay proportional to each mark's own shape rather than forced equal, so
   none of them looks stretched beside the others. */
.funder-logos {
    align-items: center;          /* the pair centres under the wider wordmark above it */
    gap: 16px;
}
.funder-logos-funders {
    display: flex;
    align-items: center;
    gap: 16px;
}
.funder-logo {
    flex: 0 0 auto;
    display: block;
    line-height: 0;               /* no baseline gap under the image */
    opacity: 0.92;
    transition: opacity 0.2s ease;
}
.funder-logo:hover,
.funder-logo:focus-visible {
    opacity: 1;
}
.funder-logo img {
    display: block;
    width: 100%;
    height: auto;
}
/* Chosen by resulting HEIGHT, which is what the eye compares, not by width. The
   source files are 3.00:1 (SAW), 0.67:1 (the Saxon arms) and 2.09:1 (the Union), so
   these three widths render as 67px, 45px and 45px: the two funder marks match each
   other exactly, and the Academy's mark stands half again as tall as either. */
.funder-logo--saw     { width: 200px; }
.funder-logo--sachsen { width: 30px; }
.funder-logo--au      { width: 94px; }

.funder-text {
    text-align: left;
}

.funder-lang {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 8px -6px;         /* pull the first button's padding off the text edge */
}
.funder-lang-sep {
    color: #ccd2d8;
    font-size: 0.75rem;
}
.funder-lang-btn {
    padding: 2px 6px;
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: #9aa4ad;
    background: none;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    transition: color 0.2s ease;
}
.funder-lang-btn:hover,
.funder-lang-btn.is-active {
    color: var(--charcoal);
}

/* Both wordings say the same thing; only one is in the page at a time, the other
   carries `hidden`. */
.funder-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.65;
    color: #8a9199;
}
.funder-note[hidden] {
    display: none;                /* beats a `p { display: block }` defined elsewhere */
}

/* === THE SITE LINKS ===
   About, Resources, Impressum, Datenschutz - all four are real pages. German law
   wants the Impressum and the
   Datenschutzerklärung reachable from every page rather than buried a level or two
   down a menu (§ 5 DDG, "leicht erkennbar, unmittelbar erreichbar"), which the site
   menu behind the bars button does not satisfy on its own. This band is in every
   public page's footer, so the whole list lives here - and because it is the whole
   list, the home page no longer needs a strip of its own over the hero that could
   drift out of step with this one.

   Darker than the funding notice beside them on purpose: these are links that have
   to be found, not small print. */
.funder-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    font-size: 0.82rem;
    line-height: 1.3;
    white-space: nowrap;          /* "Datenschutz" sets the column's width; never break it */
}
.funder-links a {
    color: #6b7480;
    text-decoration: none;
    transition: color 0.2s ease;
}
.funder-links a:hover,
.funder-links a:focus-visible {
    color: var(--charcoal);
    text-decoration: underline;
}

@media (max-width: 900px) {
    /* Not enough room for two columns: logos above, notice below, both centred. */
    .funder-band-inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
        justify-items: center;
    }
    .funder-text {
        text-align: center;
    }
    .funder-lang {
        justify-content: center;
        margin-left: 0;
    }
    /* The blocks now sit above one another, so a vertical rule would divide nothing. */
    .funder-text::before,
    .funder-links::before {
        content: none;
    }
    .funder-links {
        align-items: center;
    }
    .funder-links {
        flex-direction: row;      /* one line instead of four, now there is width for it */
        flex-wrap: wrap;          /* ...and two lines rather than a sideways scroll */
        justify-content: center;
        gap: 8px 22px;
    }
}

@media (max-width: 480px) {
    /* The two-row arrangement is what makes phone width work without shrinking the
       wordmark past legibility, so nothing moves here - only the sizes come down,
       keeping the same 1.5:1 height between the Academy's mark and the funders'. */
    .funder-logo--saw     { width: 172px; }
    .funder-logo--sachsen { width: 26px; }
    .funder-logo--au      { width: 80px; }
}

/* === LICENCE BADGE (footer copyright line) ===
   The four Creative Commons glyphs ARE the link - there is no text to click, so
   the <a> carries the accessible name and the <svg>s are aria-hidden.

   The official icons are a white disc under a black ring-and-glyph path. We keep
   only the path and fill it with currentColor, so the badge takes the footer's own
   grey (#666) and follows it if that ever changes, instead of stamping four white
   discs onto the page. This file is the one stylesheet page.html, index.html and
   search-results.html all load, which is why the rule lives here. */
.licence-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.18em;
    margin-left: 0.2em;
    vertical-align: -0.42em;
    color: inherit;
    text-decoration: none;
    transition: var(--link-transition, color 0.2s);
}

/* 1.5em since 2026-10-06 (was 1.2em): the social marks beside them share the size, and
   the line reads as two even groups of round glyphs. */
.licence-icons svg,
.social-icons svg {
    width: 1.5em;
    height: 1.5em;
    display: block;
}

.licence-icons:hover,
.licence-icons:focus-visible {
    color: var(--link-hover-color, #333);
}

/* === SOCIAL MEDIA (footer copyright line) ===
   Facebook, Instagram and Bluesky after the licence badge, behind a thin rule. Same
   size and the same footer grey as the licence glyphs, the link colour on hover. The
   marks are Simple Icons 16.34.0 (CC0-1.0) written into the markup - no icon font, no
   request to another server, so the Datenschutz statement stays true. */
.footer-sep {
    display: inline-block;
    width: 1px;
    height: 1.25em;
    margin: 0 0.75em;
    vertical-align: -0.3em;
    background: #c9d0d6;
}
.social-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.55em;
    vertical-align: -0.42em;
}
.social-icons a {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: var(--link-transition, color 0.2s);
}
.social-icons a:hover,
.social-icons a:focus-visible {
    color: var(--link-hover-color, #333);
}

/* === THE FOOTER THE BAND SITS IN ===
   Moved here from page/core/layout.css on 2026-09-17: the wiki pages carry the same
   footer (templates/site-footer.html) without loading the entry-page layout, and a
   second copy of these two rules would have drifted. Every page that renders the
   footer already loads this file.

   The footer carries only the funder band and the rights line - the link columns moved
   into the site menu - so the band's own fading separator is the divider here, and the
   footer's hard border plus top padding would double it. */
footer.site-footer--compact {
    padding-top: 0;
    border-top: none;
}

.footer-bottom {
    text-align: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--antiflash-white);
    font-size: 0.8rem;
    color: #666;
}