#content {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
}

#zh-footer {
    flex-shrink: 0;
}

/* Full-bleed-Seiten (Gemeinschaftsraum, Zaubereiministerium) – NUR mobile Ansicht:
   Inhalt reicht ohne Abstand bis an Header, Footer und Seitenrand. */
@media (max-width: 767px) {
    body.fullbleed-page main {
        max-width: none;
        /* gleicht den 30px-Abstand aus, den der React-Header (margin-bottom) erzeugt */
        margin-top: -30px;
    }

    body.fullbleed-page main > .container {
        max-width: none;
        width: 100%;
        padding: 0;
        margin: 0 !important; /* überschreibt .mb-5 (margin-bottom: 3rem !important) */
        display: block;
    }

    /* Footer bündig: Inhalt reicht bis an den Footer (kein Pergament-Spalt darüber). */
    body.fullbleed-page main ~ #zh-footer {
        margin-top: 0;
    }

    /* Ministeriumsseiten sind oft kurz (z.B. Telefonzelle): Inhalt auf
       Bildschirmhöhe strecken, damit der bündige Footer unten sitzt und nicht
       in den ersten Screen hineinragt. */
    body.fullbleed-fill main {
        min-height: calc(100vh - 60px);
    }
}