/* ============================================================
   SPONSOREN

   Eigene Datei, damit seite.css unverändert aus base.html
   übernommen bleibt.

   Die Logo-Leiste auf der Startseite: gleich große, helle
   Kacheln, in denen das Logo vollständig und unbeschnitten
   steht. Ohne Logo steht der Name als Schrift darin.
   Farben, Rundungen und Schatten kommen aus den Variablen von
   seite.css und wechseln damit auch mit der Jahreszeit.
   ============================================================ */

.sponsoren-leiste {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /* Höchstens 240 px breit und mittig: Wenige Sponsoren stehen dann
       beieinander, statt über die ganze Breite gezogen zu werden.
       min() hält die Kacheln auf schmalen Geräten in der Spur. */
    grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 240px));
    justify-content: center;
    gap: 16px;
}

.sponsor {
    margin: 0;
}

.sponsor-flaeche {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 18px 22px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    box-shadow: var(--sh-1);
    color: var(--ink);
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

a.sponsor-flaeche:hover,
a.sponsor-flaeche:focus-visible {
    transform: translateY(-3px);
    box-shadow: var(--sh-2);
    border-color: var(--gold);
}

a.sponsor-flaeche:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
}

/* Das Logo steht vollständig da – breite und hohe Logos gleichermaßen. */
.sponsor-flaeche img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 80px;
    object-fit: contain;
}

/* Ohne Logo: der Name als ruhige Schrift. */
.sponsor-name {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.3;
    text-align: center;
    overflow-wrap: anywhere;
}

.sponsoren-mehr {
    margin: 32px 0 0;
    text-align: center;
}

@media (max-width: 520px) {
    .sponsoren-leiste {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .sponsor-flaeche {
        height: 96px;
        padding: 14px;
    }

    .sponsor-flaeche img {
        max-height: 60px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sponsor-flaeche {
        transition: none;
    }

    a.sponsor-flaeche:hover,
    a.sponsor-flaeche:focus-visible {
        transform: none;
    }
}