/* ===== WRAPPER TIL MENUKORT ===== */
/* Indeholder både baggrundsbillede og menuboks */
.beholder {
    position: relative;         /* Gør det muligt at placere børn absolut */
    padding: 20px;              /* Luft så baggrundsbilledet kan ses i kanten */
    border-radius: 5px;         /* Let afrundede hjørner */
    overflow: hidden;           /* Klipper indhold der går udenfor hjørnerne */
    height: 810px;              /* Fast højde på wrapperen */
    width: 500px;               /* Fast bredde på wrapperen */
}

/* ===== GENEREL FONT ===== */
/* Standard skrifttype for hele siden */
body{
    font-family: "Open Sans";
}

/* ===== BAGGRUNDSBILLEDE ===== */
/* Ligger bag teksten og fylder hele wrapperen */
.baggrundsbillede {
    position: absolute;
    inset: 0;                   /* Top, højre, bund og venstre = 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;          /* Billedet beskæres pænt */
    z-index: 0;                 /* Ligger nederst i lagene */
}

/* ===== MENUBOKS ===== */
/* Den lyse boks oven på baggrundsbilledet */
.menu-box {
    position: relative;
    background: #D2C1B7;        /* Lys baggrund */
    border-radius: 12px;        /* Bløde hjørner */
    padding: 28px;              /* Luft inde i boksen */
    height: 755px;
    width: 440px;
    z-index: 1;                 /* Sørger for at boksen ligger over billedet */
}

/* ===== BAGGRUND TIL HELE MENUKORTET ===== */
/* Grå område bag hele menukortet */
.baggrund {
    display: flex;
    justify-content: center;    /* Centrerer indhold vandret */
    align-items: center;        /* Centrerer indhold lodret */
    background: #C6C7C6;        /* Grå baggrund */
    backdrop-filter: blur(3px); /* Slører baggrunden bag elementet */
    z-index: 999;
    padding: 100px;             /* Luft omkring menukortet */
    border-radius: 20px;
    width: 70%;
    margin-left: 40px;
}

/* ===== TITLER ===== */
/* Lille titel (fx "Jule") */
.lille-title {
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 40px;
    line-height: 0.9;           /* Mindsker afstand mellem linjer */
    color: #5c0f0f;
    display: block;
    text-align: center;
    margin-right: 100px;
}

/* Stor titel (fx "Menukort") */
.stor-title {
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 35px;
    color: #5c0f0f;
    text-align: center;
    margin-top: -10px;          /* Trækker teksten lidt op */
    margin-left: 150px;
}

/* ===== SEKTIONSTITLER ===== */
/* Overskrifter for Snacks og Drikkevarer */
.sektion-title {
    text-align: center;
    font-style: italic;
    color: #3d4a3d;
    font-size: 22px;
    margin: 30px 0 10px;
}

/* ===== MENU-PUNKTER ===== */
/* Wrapper for hvert menupunkt (navn + pris) */
.menu-punkt{
    display: flex;              /* Navn og pris på samme linje */
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 2px solid rgba(0,0,0,0.25); /* Streg under hvert punkt */
    font-size: 20px;
}

/* Navn på menu-element */
.menu-punkt .navn {
    color: #6a1f1f;
    text-decoration: underline;
    text-underline-offset: 6px; /* Afstand mellem tekst og understregning */
}

/* Pris på menu-element */
.menu-punkt .pris {
    color: #444;
    font-style: italic;
}