/* Baggrund omkring din grafik */
body {
    margin: 0;
    min-height: 100vh;
    max-height: 1000px;        /* ← låser max højde */
    height: 100vh;             /* ← fylder skærmen */
    overflow: hidden;          /* ← skjul overskydende */
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFF;
    font-family: "Calibri", "Segoe UI", Arial, sans-serif;
    font-weight: bold;
}

/* Din 1920×1080 grafik – responsiv ramme */
.frame {
    position: relative;
    width: 100vw;
    max-width: 1920px;
    aspect-ratio: 16 / 9;
    max-height: 1000px;        /* ← låser max højde */
    background: url('../asset/grafik/Overlay.png') no-repeat center center;
    background-size: 100% 100%;
}


/* Sliders hul (responsiv position og størrelse) */
.slider {
    position: absolute;
    left: 3.724%;
    top: 8.333%;
    width: 92.604%;
    height: 83.333%;
    overflow: hidden;
    background: transparent;
    border-radius: 10px;
}

/* Hver slide */
.slide {
    position: absolute;
    inset: 0;
    display: none;                 /* skjules som standard */
    align-items: center;
    justify-content: center;
    background: #FFF;              /* baggrund for små billeder */
}

/* Kun aktiv slide skal vises */
.slide.active {
    display: flex;
}

/* Billeder: bevar proportioner, ingen stræk */
.slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

/* PDF fylder slideren (kræver <object class="pdf-slide"> )*/
.pdf-slide {
    width: 100%;
    height: 100%;
    border: none;
    background: #FFF;
    pointer-events: none; /* ingen klik */
}

/* Velkomst-tekst */
.welcome-text {
    position: absolute;
    top: calc(8.333% - 60px);      /* 50px over slider */
    left: 50%;
    transform: translateX(-50%);
    color: #1f497d;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    z-index: 10;
    font-size: clamp(16px, 2.5vw, 42px);
}

/* Info-tekst under slider (på 2 linjer) */
.info-text {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(91.666% + 50px);     /* 50px under slider */
    width: 90%;
    text-align: center;
    color: #1f497d;
    font-weight: bold;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.4);
    font-size: clamp(10px, 1.5vw, 26px);
    z-index: 10;
}

/* DOTS – kan kommenteres ud i HTML */
.slider-dots {
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.slider-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #888;
    cursor: pointer;
}

.slider-dots span.active {
    background: #1f497d;
}