/* Bühne für das 3D-Wappen. Das <img> bleibt als Fallback (kein WebGL, Ladefehler,
   reduzierte Bewegung) und wird erst ausgeblendet, wenn das Modell steht. */
.wappen3d {
    position: relative;
    width: 100%;
    /* Platz für die feste Fußzeile der Startseite lassen */
    height: min(80vh, calc(100vh - 150px));
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wappen3d-fallback {
    width: auto;
    max-width: 90%;
    height: auto;
    max-height: 70vh;
    filter: drop-shadow(0 15px 35px rgba(0, 0, 0, 0.4));
    transition: opacity 0.6s ease;
}

.wappen3d-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
    touch-action: pan-y;
}

.wappen3d-canvas.bereit {
    opacity: 1;
}

.wappen3d.wappen3d-aktiv .wappen3d-fallback {
    opacity: 0;
    pointer-events: none;
}