/*
 * startseite.css
 * Startseite: heller blauer Verlauf für die Sections (wie beim
 * Punktspielbetrieb, Social Media bleibt bunt) und "Aktuelles" nur mit Videos.
 */

/* ===== Fließende Übergänge =====
   Jede Section endet in der Farbe, mit der die nächste beginnt:
   Hero | Willkommen (hell → hellblau) → Punktspielbetrieb (hellblau → hell)
   → Aktuelles (hell → hellblau) | Social Media (bunt, bewusst mit klarer
   Kante) | Partner (hell → hellblau) | Footer (klare Kante, auch Hero oben) */

.welcome-section {
    background: linear-gradient(180deg, var(--surface) 0%, var(--ice-blue) 100%);
}

.aktuell-section {
    background: linear-gradient(180deg, var(--surface) 0%, var(--ice-blue) 100%);
}

/* Kurzer Einstieg, Details auf der Vereinsseite */
.welcome-mehr {
    display: inline-block;
    margin-top: 0.5rem;
    font-weight: 700;
    color: var(--heading);
    text-decoration: none;
}

.welcome-mehr:hover {
    text-decoration: underline;
}

/* Partner: hell → hellblau */
.sponsoren-section {
    background: linear-gradient(180deg, var(--surface) 0%, var(--ice-blue) 100%);
}

/* ===== Aktuelles: nur die letzten drei Videos, mittig ===== */
.aktuell-section {
    padding: 4rem 2rem;
}

.aktuell-section .aktuell-youtube-row,
.aktuell-section .yt-skeleton {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0;
}

/* Hinweis/Fehlermeldung statt Videos über die volle Breite */
.aktuell-youtube-row > :only-child:not(.video-card) {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .aktuell-section .aktuell-youtube-row,
    .aktuell-section .yt-skeleton {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Drittes Video bei zwei Spalten mittig darunter */
    .aktuell-youtube-row > .video-card:nth-child(3):last-child {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 1rem);
    }
}

@media (max-width: 768px) {
    .aktuell-section {
        padding: 3rem 1.25rem;
    }

    .aktuell-section .aktuell-youtube-row,
    .aktuell-section .yt-skeleton {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .aktuell-youtube-row > .video-card:nth-child(3):last-child {
        width: auto;
        justify-self: stretch;
    }
}

/* Hinweis, solange YouTube in den Cookie-Einstellungen nicht erlaubt ist */
.youtube-consent-hint {
    text-align: center;
    color: var(--text-gray);
}

.youtube-consent-hint button {
    font: inherit;
    font-weight: 600;
    color: var(--heading);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    cursor: pointer;
}