/* Startseite: Begrüßung, Hauptteil (News) und Seitenspalte (Flyer, WhatsApp-Gruppe, Social Media). */
.begruessung {
    background: var(--farbe-weiss);
    border-top: 4px solid var(--farbe-gruen);
    border-radius: var(--radius);
    padding: var(--abstand-l);
    margin-bottom: var(--abstand-xl);
}

.begruessung__titel {
    font-size: var(--schriftgroesse-titel);
}

@media (min-width: 48em) {
    .begruessung__titel {
        font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
    }
}

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

/* Sportheim-Öffnungszeiten der laufenden und der kommenden Woche (jeweils nur, wenn eingetragen) */
.sportheim-boxen {
    margin-bottom: var(--abstand-xl);
}

.sportheim-box + .sportheim-box {
    margin-top: var(--abstand-l);
}

.sportheim-box {
    background: var(--farbe-gruen-hell);
    border-left: 4px solid var(--farbe-gruen);
    border-radius: var(--radius);
    padding: var(--abstand-m) var(--abstand-l);
}

.sportheim-box h2 {
    font-size: var(--schriftgroesse-gross);
    margin-top: 0;
}

.sportheim-box__geschlossen {
    font-weight: 700;
}

.sportheim-box > :last-child {
    margin-bottom: 0;
}

.sportheim-box__tage {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sportheim-box__tage li + li {
    margin-top: var(--abstand-xs);
}

.sportheim-box__tag--vorbei {
    color: var(--farbe-text-leise);
}

.sportheim-box__hinweis {
    display: block;
    color: var(--farbe-text-leise);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
}

/* Heimspiele auf dem Sportplatz Altenbüren (fussball.de), nur wenn welche anstehen */
.heimspiele-box {
    background: var(--farbe-gruen-hell);
    border-left: 4px solid var(--farbe-gruen);
    border-radius: var(--radius);
    padding: var(--abstand-m) var(--abstand-l);
    margin-bottom: var(--abstand-xl);
}

.heimspiele-box h2 {
    font-size: var(--schriftgroesse-gross);
    margin-top: 0;
}

.heimspiele-box__spiele {
    list-style: none;
    padding: 0;
    margin: 0;
}

.heimspiele-box__spiel {
    display: grid;
    padding: var(--abstand-xs) 0;
}

.heimspiele-box__spiel + .heimspiele-box__spiel {
    border-top: 1px solid var(--farbe-linie);
}

.heimspiele-box__spiel--vorbei {
    color: var(--farbe-text-leise);
}

.heimspiele-box__zeit {
    font-weight: 700;
}

.heimspiele-box__wettbewerb,
.heimspiele-box__hinweis {
    color: var(--farbe-text-leise);
    font-size: calc(0.9 * var(--schriftgroesse-basis));
}

.heimspiele-box__hinweis {
    font-weight: 700;
}

/* Kästen der Seitenspalte; Flyer und QR-Code sind gleich breit */
.seitenspalte {
    --seitenspalte-bild: 14rem;
}

.seitenkasten {
    background: var(--farbe-weiss);
    border-radius: var(--radius);
    padding: var(--abstand-m) var(--abstand-l);
    margin: 0 0 var(--abstand-l);
}

.seitenkasten h2 {
    font-size: var(--schriftgroesse-gross);
}

.seitenkasten > p:last-child {
    margin-bottom: 0;
}

.whatsapp {
    text-align: center;
}

/* Ohne Innenabstand, damit der Code genau so breit ist wie die Flyer. Den hellen Rand, den Kameras zum Erkennen brauchen, liefert der weiße Kasten. */
.whatsapp__code {
    display: block;
    width: 100%;
    max-width: var(--seitenspalte-bild);
    margin: 0 auto var(--abstand-m);
}

.seitenkasten .social-links {
    flex-direction: column;
    gap: var(--abstand-s);
}

/* Auf Handy und Tablet nur 3 News, sonst stünde auf dem Tablet eine Karte allein in der Reihe */
.startseite .news-raster > :nth-child(n + 4) {
    display: none;
}

/* Handy und Tablet: eine Spalte in eigener Reihenfolge – Begrüßung, Sportheim, Flyer, News, WhatsApp, Social Media.
   Die Seitenspalte löst sich dafür auf (display: contents), ab Desktop steht sie wieder rechts. */
@media (max-width: 63.99em) {
    .startseite {
        display: flex;
        flex-direction: column;
    }

    .seitenspalte {
        display: contents;
    }

    .begruessung { order: 1; }
    .sportheim-boxen { order: 2; }
    .heimspiele-box { order: 3; }
    .flyer-bereich { order: 4; }
    .startseite .news-bereich { order: 5; margin: 0 0 var(--abstand-l); }
    .whatsapp { order: 6; }
    .social-kasten { order: 7; }
}

/* Handy: jeder Flyer füllt die Spaltenbreite, weitere per Wischen */
@media (max-width: 47.99em) {
    .startseite .flyer-reihe {
        grid-auto-columns: 100%;
    }
}

/* Ab Desktop: Seitenspalte rechts neben Begrüßung und News */
@media (min-width: 64em) {
    .startseite {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 20rem;
        grid-template-areas:
            "begruessung seite"
            "sportheim seite"
            "heimspiele seite"
            "news seite";
        /* Ohne Sportheim- oder Heimspiele-Box bleibt deren Zeile leer und 0 hoch */
        grid-template-rows: auto auto auto 1fr;
        column-gap: var(--abstand-xl);
        align-items: start;
    }

    .begruessung {
        grid-area: begruessung;
        margin-bottom: 0;
    }

    .sportheim-boxen {
        grid-area: sportheim;
        margin: var(--abstand-l) 0 0;
    }

    .heimspiele-box {
        grid-area: heimspiele;
        margin: var(--abstand-l) 0 0;
    }

    .startseite .news-bereich {
        grid-area: news;
    }

    /* Desktop: 2 × 2 News in der Hauptspalte */
    .startseite .news-raster {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .startseite .news-raster > :nth-child(4) {
        display: block;
    }

    .seitenspalte {
        grid-area: seite;
    }

    .seitenkasten {
        text-align: center;
    }

    /* Flyer untereinander, genau so breit wie der QR-Code */
    .seitenspalte .flyer-reihe {
        grid-template-columns: var(--seitenspalte-bild);
        justify-content: center;
        text-align: left;
    }

    .seitenkasten .social-links {
        align-items: center;
    }
}