/* Dynamische Viewport-Hoehe: 100dvh wenn verfuegbar, sonst 100vh */
:root { --app-vh: 100vh; }
@supports (height: 100dvh) { :root { --app-vh: 100dvh; } }

html, body {
    margin: 0;
    padding: 0;
    height: var(--app-vh);
    overflow: hidden;     /* kein Scrollen */
    background: #000;
}

/* Vollbild-Container */
.app-fullscreen,
.carousel,
.carousel-inner,
.carousel-item {
    width: 100vw;
    height: var(--app-vh);
}

/* Inhalt im Slide zentrieren */
.slide-center {
    width: 100vw;
    height: var(--app-vh);
    display: grid;
    place-items: center;
    background: #000;
}

/* Bild: max 100% Breite UND max 100% Hoehe des Screens, proportional */
.slide-img {
    max-width: 100vw;
    max-height: var(--app-vh);
    width: auto;
    height: auto;
    display: block;
    /* Kein object-fit noetig, da wir ueber max-* begrenzen */
}

/* Start-Overlay: immer ueber allem, Button exakt Mitte */
.start-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;           /* ueber Carousel/Controls */
    display: grid;
    place-items: center;     /* Button perfekt zentriert */
    background: transparent; /* kein Dim */
}
.start-overlay.hidden { display: none; }

.start-overlay .btn { font-size: 1.25rem; }