/* her starter menu */ /* Kommentar: Start på menuens CSS */
.dropdown { /* Dropdown-menuens container */
    position: absolute; /* Placerer elementet absolut */
    top: 20px; /* 20px fra toppen af dets nærmeste positionerede forælder */
    right: 20px; /* 20px fra højre side af containeren */
    z-index: 1000; /* Sørger for at elementet ligger øverst */
}
.dropdown-toggle { /* Knap til at åbne dropdown-menuen */
    background: none; /* Ingen baggrundsfarve */
    border: none; /* Ingen kant */
    cursor: pointer; /* Viser en hånd når man holder musen over */
    display: flex; /* Flex layout bruges */
    flex-direction: column; /* Elementer stables i en kolonne */
    gap: 4px; /* 4px afstand mellem hver flex-child */
    padding: 4px; /* 4px indvendig margen */
    border-radius: 30px; /* Runde hjørner med radius 30px */
    color: #FF8360; /* Orange tekstfarve */
}
.dropdown-menu { /* Selve dropdown-listen */
    display: none; /* Skjult som standard */
    position: absolute; /* Placeret absolut i forhold til sin nærmeste positionerede forælder */
    right: 0; /* Justeret til højre inden i containeren */
    margin-top: 12px; /* 12px afstand fra toppen */
    background: #FFF8F0; /* Lys baggrundsfarve */
    color: #FF8360; /* Orange tekstfarve */
    border: 1px solid #eee; /* Lys grå kant */
    border-radius: 30px; /* Runde hjørner */
    box-shadow: 0 4px 16px rgba(0,0,0,0.08); /* Skyggeeffekt */
    min-width: 120px; /* Minimumsbredde på 120px */
}
.dropdown-menu a { /* Links i dropdown-menuen */
    display: block; /* Linket fylder hele linjen */
    padding: 12px 16px; /* Indvendig margen på top/bund 12px, sider 16px */
    color: #FF8360; /* Orange tekst */
    text-decoration: none; /* Ingen understregning */
    border-bottom: 1px solid #f1f1f1; /* Lys bundkant mellem links */
}
.dropdown-menu a:last-child { /* Sidste link i dropdown-menu */
    border-bottom: none; /* Fjerner bundkanten på sidste link */
}
.dropdown.open .dropdown-menu { /* Når dropdown har klassen open */
    display: block; /* Viser dropdown-menuen */
}
/* her slutter menu */ /* Kommentar: Slut på menuens CSS */

.menu-knap{ /* Udseende for menu-knap */
    position: fixed; /* Fast placering på skærmen */
    width: 20px; /* Bredde på 20px */
    height: 20px; /* Højde på 20px */
    border: none; /* Ingen kant */
    justify-content: right; /* Indholdet rettes til højre */
    display: flex; /* Flex layout */
    right: 10px; /* 10px fra højre */
    color: #FFF8F0; /* Lys tekstfarve */
}

.knaptilføj { /* Knap til at tilføje noget */
    z-index: 1000; /* Sørger for at knappen ligger øverst */
    position: fixed; /* Fast placering */
    left: 50%; /* Centreret horisontalt */
    bottom: 40px; /* 40px fra bunden */
    transform: translateX(-50%); /* Justerer så knappen er præcist centreret */
    width: 70px; /* Bredde på 70px */
    height: 70px; /* Højde på 70px */
    background: #FF8360; /* Orange baggrund */
    color: #FFF8F0; /* Lys tekstfarve */
    font-size: 70px; /* Stor skrifttype */
    border: none; /* Ingen kant */
    border-radius: 50%; /* Rund knap */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Skyggeeffekt */
    display: flex; /* Flex layout */
    justify-content: center; /* Indholdet i midten horisontalt */
    align-items: center; /* Indholdet i midten vertikalt */
    padding: 20px; /* Indvendig margen på 20px */
    img { /* Billede inde i knappen */
        max-width: 100%; /* Billedet fylder maks 100% af knappen */
    }
}

.nanna-1 { /* Grøn topsektion */
    background-color: #b3e3d3; /* Lysegrøn baggrund */
    border-bottom-left-radius: 20px; /* Runde nederste venstre hjørne */
    border-bottom-right-radius: 20px; /* Runde nederste højre hjørne */
    border: 7px solid white; /* Hvid kant */
    padding: 1rem 1rem 70px; /* Polstring: top 1rem, sider 1rem, bund 70px */
}

.main-container { /* Container til hovedindhold */
    background: #FFF8F0; /* Lys baggrund */
    border: 7px solid white; /* Hvid kant */
    border-radius: 30px; /* Runde hjørner */
    margin: 0 auto; /* Centreret med automatisk margen */
    max-width: 100%; /* Maks bredde 100% */
    min-height: 100%; /* Minimumhøjde 100% */
    box-sizing: border-box; /* Inkluderer kant og polstring i højde/bredde */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Let skygge */
    padding-top: 25px; /* 25px polstring i toppen */
}

.main-container2 { /* Alternativ container */
    background-color: #FFF8F0; /* Lys baggrund */
    color: #FF8360; /* Orange tekst */
    border-bottom-left-radius: 20px; /* Runde hjørner */
    border-bottom-right-radius: 20px; /* Runde hjørner */
    border: 7px solid white; /* Hvid kant */
    padding: 1rem 1rem 70px; /* Polstring top/sider/bund */
}

.main-container3{ /* Grøn container */
    background-color: #b3e3d3; /* Lysegrøn baggrund */
    border-radius: 20px; /* Runde hjørner */
    border: 7px solid white; /* Hvid kant */
    padding: 1rem 1rem 30px; /* Polstring: top/sider/bund */
    line-height: 2; /* Linjeafstand */
}

.avatar{ /* Avatar-container */
    position: absolute; /* Absolut placeret */
    bottom: -32px; /* 32px under sin normale position */
    display: flex; /* Flex layout */
    justify-content: center; /* Centrerer indholdet horisontalt */
    align-items: center; /* Centrerer indholdet vertikalt */
    left: 0; /* Starter helt til venstre */
    right: 0; /* Slutter helt til højre */
    .avatar-img{ /* Avatar-billede */
        width: 120px; /* Bredde 120px */
        height: 120px; /* Højde 120px */
        aspect-ratio: 1/1; /* Kvadratisk billede */
    }
    .avatar-img2{ /* Alternativ avatar-billede */
        width: 120px; /* Bredde 120px */
        height: 120px; /* Højde 120px */
        aspect-ratio: 1/1; /* Kvadratisk billede */
        border-radius: 50%; /* Rundt billede */
        border: 7px solid white; /* Hvid kant */
    }
}

.nanna-2 { /* Opgave-container */
    border-radius: 999px; /* Ekstra runde hjørner */
    margin: 10px auto; /* 10px margen og centreret */
    width: 90%; /* Fylder 90% af containeren */
    max-width: 400px; /* Maks bredde 400px */
    height: 10%; /* Højde 10% af containeren */
}

.nanna-tekst { /* Tekst i venstre side */
    font-weight: 500; /* Halvfed skrift */
}

.nanna-toggle-switch { /* Toggle container */
    position: relative; /* Relativt placeret */
    display: inline-block; /* Vises som inline-blok */
    width: 60px; /* Bredde 60px */
    height: 32px; /* Højde 32px */
}

.nanna-toggle-switch input { /* Skjuler checkboxen */
    opacity: 0; /* Gør input usynligt */
    width: 0; /* Bredde 0 */
    height: 0; /* Højde 0 */
}

.nanna-toggle-slider { /* Baggrund på slideren */
    position: absolute; /* Absolut placeret */
    cursor: pointer; /* Cursor bliver til hånd */
    top: 0; /* Starter i toppen */
    left: 0; /* Starter til venstre */
    right: 0; /* Slutter til højre */
    bottom: 0; /* Slutter i bunden */
    background-color: #ccc; /* Grå baggrund */
    border-radius: 999px; /* Meget runde hjørner */
    transition: 0.4s; /* Glidende overgang */
}

.nanna-toggle-slider::before { /* Den runde knap på slideren */
    position: absolute; /* Absolut placeret */
    content: ""; /* Ingen tekstindhold */
    height: 26px; /* Højde 26px */
    width: 26px; /* Bredde 26px */
    left: 3px; /* 3px fra venstre */
    bottom: 3px; /* 3px fra bunden */
    background-color: white; /* Hvid farve */
    border-radius: 50%; /* Rund knap */
    transition: 0.4s; /* Glidende overgang */
}

.nanna-inaktiv { /* Inaktiv container-farve */
    background-color: #919191; /* Mørk grå baggrund */
}

.nanna-aktiv { /* Aktiv container-farve */
    background-color: #dbc7f3; /* Lilla baggrund */
}

.nanna-toggle-switch input:checked + .nanna-toggle-slider { /* Når checkboxen er checked */
    background-color: #a8d8cb; /* Mintgrøn baggrund */
}
.nanna-toggle-switch input:checked + .nanna-toggle-slider::before { /* Når checked, flyt knappen */
    transform: translateX(28px); /* Flytter den runde knap 28px til højre */
}

.nanna-5 { /* Udseende for containeren */
    width: 90%; /* Fylder 90% af containeren */
    max-width: 400px; /* Maks bredde 400px */
    margin: 20px auto; /* 20px margen og centreret */
    border-radius: 999px; /* Runde hjørner */
    transition: background-color 0.3s ease; /* Glidende farveskift */
}

.nanna-inaktiv { /* Inaktiv (grå) baggrund */
    background-color: #808080; /* Grå baggrund */
}

.nanna-aktiv { /* Aktiv (lilla) baggrund */
    background-color: #dbc7f3; /* Lilla baggrund */
}

.nanna-tekst { /* Teksten */
    color: white; /* Hvid tekstfarve */
    font-weight: 500; /* Halvfed skrift */
}

.nanna-tekst2{ /* Sekundær tekst */
    color: #555555FF; /* Mørkegrå tekst */
    padding-bottom: 15px; /* 15px polstring i bunden */
}

.nanna-toggle-switch { /* Toggle-knap container */
    position: relative; /* Relativ placering */
    display: inline-block; /* Inline-blok */
    width: 60px; /* Bredde 60px */
    height: 32px; /* Højde 32px */
}

.nanna-toggle-switch input { /* Skjuler input */
    opacity: 0; /* Usynligt */
    width: 0; /* Bredde 0 */
    height: 0; /* Højde 0 */
}

.nanna-slider { /* Selve slideren */
    position: absolute; /* Absolut placeret */
    cursor: pointer; /* Hånd-cursor */
    top: 0; /* Starter i toppen */
    left: 0; /* Starter til venstre */
    right: 0; /* Slutter til højre */
    bottom: 0; /* Slutter i bunden */
    background-color: #d1d1d1; /* Lys grå baggrund */
    border-radius: 999px; /* Runde hjørner */
    transition: 0.4s; /* Glidende overgang */
}

.nanna-slider::before { /* Den sorte runde knap */
    position: absolute; /* Absolut placeret */
    content: ""; /* Ingen tekstindhold */
    height: 26px; /* Højde 26px */
    width: 26px; /* Bredde 26px */
    left: 3px; /* 3px fra venstre */
    bottom: 3px; /* 3px fra bunden */
    background-color: black; /* Sort farve */
    border-radius: 50%; /* Rund knap */
    transition: 0.4s; /* Glidende overgang */
}

.nanna-toggle-switch input:checked + .nanna-slider { /* Når input er checked */
    background-color: #a8d8cb; /* Mintgrøn baggrund */
}

.nanna-toggle-switch input:checked + .nanna-slider::before { /* Flytter knappen ved checked */
    transform: translateX(28px); /* Flytter knappen 28px */
    background-color: white; /* Gør knappen hvid */
}

.nannaknap{ /* Udseende på tilføj-knap */
    background: #FF8360; /* Orange baggrund */
    color: #FFF8F0; /* Lys tekst */
    font-size: 20px; /* Skriftstørrelse 20px */
    border: none; /* Ingen kant */
    border-radius: 20%; /* Runde hjørner */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Skygge */
    display: flex; /* Flex layout */
    justify-content: center; /* Centreret horisontalt */
    align-items: center; /* Centreret vertikalt */
    padding: 0; /* Ingen polstring */
}
.tilføj-wrapper{ /* Wrapper til tilføj-knap */
    padding: 10px; /* 10px polstring */
    color: #FFF8F0; /* Lys tekst */
    font-size: 20px; /* Skriftstørrelse */
    border: none; /* Ingen kant */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15); /* Skygge */
    display: flex; /* Flex layout */
    justify-content: center; /* Centreret horisontalt */
    align-items: center; /* Centreret vertikalt */
}

.modal { /* Baggrund for modal */
    display: none; /* Skjult som standard */
    position: fixed; /* Fast på skærmen */
    z-index: 9999; /* Ligger øverst */
    left: 0; /* Starter helt til venstre */
    top: 0; /* Starter helt i toppen */
    width: 100%; /* Fylder hele vinduet */
    height: 100%; /* Fylder hele vinduet */
    background-color: rgba(0,0,0,0.4); /* Sort gennemsigtig baggrund */
}

.modal-content { /* Indholdet i modal-vinduet */
    background: #fff; /* Hvid baggrund */
    margin: 10% auto; /* 10% fra toppen og centreret horisontalt */
    padding: 20px; /* 20px polstring */
    border-radius: 10px; /* Runde hjørner */
    width: 80%; /* Fylder 80% af skærmen */
    max-width: 400px; /* Maks 400px bredde */
    position: relative; /* Relativt placeret */
    display: flex; /* Flex layout */
    flex-direction: column; /* Kolonne-layout */
    gap: 16px; /* 16px mellem elementer */
    font-weight: bold; /* Fed tekst */
}

.close { /* Luk-knap (X) */
    color: #aaa; /* Grå farve */
    position: absolute; /* Absolut placeret */
    right: 15px; /* 15px fra højre */
    top: 10px; /* 10px fra toppen */
    font-size: 28px; /* Stor skrift */
    font-weight: bold; /* Fed skrift */
    cursor: pointer; /* Hånd-cursor */
}

.modal-input { /* Inputfelt i modal */
    width: 100%; /* Fylder hele bredden */
    padding: 8px; /* 8px polstring */
    margin-top: 8px; /* 8px margen i toppen */
    margin-bottom: 12px; /* 12px margen i bunden */
    border-radius: 5px; /* Runde hjørner */
    border: 1px solid #ccc; /* Lys grå kant */
}

.modal-btns { /* Knapper i modal */
    display: flex; /* Flex layout */
    gap: 8px; /* 8px mellem knapper */
    justify-content: flex-end; /* Knapperne til højre */
}
.modal-btns button { /* Alle knapper i modal */
    padding: 8px 14px; /* Polstring top/bund 8px, sider 14px */
    border-radius: 5px; /* Runde hjørner */
    border: none; /* Ingen kant */
    cursor: pointer; /* Hånd-cursor */
    background: #ff8360; /* Orange baggrund */
    color: #fff8f0; /* Lys tekst */
    font-weight: bold; /* Fed skrift */
}
.modal-btns button#closeBtn { /* Luk-knap */
    background: #aaa; /* Grå baggrund */
}

@media only screen and (orientation: landscape) { /* Særlige regler for landskab */
    .topnav .dropdown-menu { /* Dropdown-menuen i landskab */
        display: flex; /* Eller flex */
        background: transparent; /* Gennemsigtig baggrund */
        border: none; /* Ingen kant */
        box-shadow: none; /* Ingen skygge */
    }
    .topnav .dropdown-toggle { /* Dropdown-knappen i landskab */
        display: none; /* Skjules */
        background: transparent; /* Gennemsigtig baggrund */
        border: none; /* Ingen kant */
        box-shadow: none; /* Ingen skygge */
    }
}

.nanna-5:has(input:checked) {
    background-color: #dbc7f3; /* Lilla */
    transform: scale(1.03);
    transition: background-color 0.3s, transform 0.3s;
}
.nanna-5 {
    background-color: #808080; /* Grå */
    transition: background-color 0.3s, transform 0.3s;
}