/* Nulstilling og basis styling */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/*----variabler----*/

:root {
    --farve-baggrund: #fffcfc;
    --farve-tekst: #000000;
    --farve-gul: #ffee83;
    --farve-hvid: #ffffff;
    --farve-rød: rgb(168, 62, 97);
    --farve-pink: #ffd8d8;
    --farve-sart-pink: #feeded;
    --farve-highlight: #7e110f;

    --typo-overskrift: 'Playfair Display', serif;
    --typo-tekst: 'Plus Jakarta Sans', sans-serif;
}



body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--farve-baggrund);
    color: var(--farve-tekst);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

h1 {
    font-family: 'Playfair Display', serif; 
    font-weight: 100;
        line-height: 1.2;
        letter-spacing: -0.5px;
}

h2 {
    font-size: 36px;
    
}

p {
    font-size: 18px;
    line-height: 1.6;
}


/* --------Navigationsbar ----------*/
    .navigationsbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 4em;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #f9e9e9; 
    backdrop-filter: blur(20px);
    transition: background-color 0.4s ease, box-shadow 0.4s ease;
}

.navigationsbar.scrolled {
    background-color: var(--farve-rød);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); 
}

/* Logo */
.logo a {
    
    font-family: var(--typo-overskrift);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: var(--farve-tekst);
}

/* Burger Knap */
.burger-knap {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001;
    color: var(--farve-tekst);
}

.burger-ikon {
    width: 32px;
    height: 32px;
    display: block;
    transition: transform 0.3s ease;
}

.burger-knap.open .burger-ikon {
    transform: rotate(90deg);
}

/* Links Container */
.menu-links {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.menu-links a {
    color: var(--farve-tekst);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    
}

.menu-links a:hover {
    opacity: 1;
}

/* Dropdown Knap & Pil */
.dropdown {
    position: relative;
}

.dropdown-knap {
    font-size: 1rem;
    border: none;
    outline: none;
    background: transparent;
    color: var(--farve-tekst);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    font-family: inherit;
    font-weight: 400;
}

.pil-ikon {
    width: 12px;
    height: auto;
    transition: transform 0.3s ease;
}

/* Kontakt Knap */
.knap-kontakt {
    background-color: #ffffff;
    color: var(--farve-tekst) !important;
    padding: 0.6rem 2rem;
    border-radius: 50px;
    font-weight: 500;
    opacity: 1 !important;
    transition: transform 0.2s ease, background-color 0.3s ease;
}

.knap-kontakt:hover {
    transform: scale(1.05);
    background-color: #f3f3f3;
}
/* --- DESKTOP (Over 992px): Hover-dropdown der ikke lukker for hurtigt --- */
@media (min-width: 993px) {
    .dropdown {
        position: relative;
        padding-bottom: 10px; /* Gør hover-området lidt større nedad */
        margin-bottom: -10px;
    }

    .dropdown-indhold {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background-color: #ffffff;
        min-width: 200px;
        box-shadow: 0px 8px 16px rgba(0,0,0,0.12);
        border-radius: 12px;
        padding: 0.5rem 0;
        margin-top: 0; /* Fjernet margin så der ikke er et hul */
        z-index: 1002;
    }

    /* Usynlig "bro" (pseudo-element) der forhindrer at menuen lukker */
    .dropdown-indhold::before {
        content: "";
        position: absolute;
        top: -10px; /* Dækker hullet op til knappen */
        left: 0;
        width: 100%;
        height: 10px;
        background: transparent;
    }

    .dropdown-indhold a {
        color: var(--farve-tekst);
        padding: 10px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
        font-size: 0.95rem;
    }

    .dropdown-indhold a:hover {
        background-color: #f3f3f3;
    }

    /* Vis menu ved hover på selve dropdown-containeren */
    .dropdown:hover .dropdown-indhold {
        display: block;
    }

    .dropdown:hover .pil-ikon {
        transform: rotate(180deg);
    }
}

/* --- MOBIL & TABLET (Under 992px): Side-panel & Burger --- */
@media (max-width: 992px) {
    .navigationsbar {
        padding: 1rem 5%;
    }

    .burger-knap {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 1005; /* Skal ligge HØJERE end .menu-links for at kunne klikkes */
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 5px;
    }

    .burger-ikon {
        width: 32px;
        height: 32px;
        display: block;
        transition: transform 0.3s ease;
        pointer-events: none; /* Sikrer at klik altid rammer selve knappen */
    }

    .burger-knap.open .burger-ikon {
        transform: rotate(90deg);
    }

    /* Det røde side-panel der glider ind fra højre */
    .menu-links {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 75%;
        max-width: 320px;
        height: 100vh;
        background-color: var(--farve-rød);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 6rem;
        gap: 2rem;
        transition: right 0.4s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
        overflow-y: auto;
        z-index: 1000; 
        
    }

    .menu-links.active {
        right: 0;
    }

    .dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        
    }

    .dropdown-knap {
        font-size: 1rem;
        justify-content: center;
        
    }

    /* Accordion inde i side-panelet */
    .dropdown-indhold {
        display: block;
        position: static;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.4s ease, opacity 0.3s ease;
        opacity: 0;
        width: 100%;
        text-align: center;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .dropdown.aaben .dropdown-indhold {
        max-height: 250px;
        opacity: 1;
        margin-top: 1rem;
    }

    .dropdown.aaben .pil-ikon {
        transform: rotate(180deg);
    }

    .dropdown-indhold a {
        padding: 0.6rem 0;
        font-size: 1rem;
        display: block;
    }
}

/* ----------Hero Layout -----------*/
    .hero-sektion {
        position: relative;
        z-index: 5;
        padding: 6rem 4rem;
        display: flex;
        align-items: center;
        background-color: var(--farve-pink);
        background-image: url('../img/baggrundOmMig.svg');
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        height: fit-content;
    }

    .hero-beholder {
        display: flex;
        width: 100%;
        max-width: 90%;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
    }

    /* ---Tekst sektion---- */
    .hero-indhold {
        flex: 1;
        max-width: 100%;

        transform: translateY(30px);
    transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
    }

    .hero-indhold h1 {
        font-family: 'Playfair Display', serif; 
        color: var(--farve-tekst); 
        font-size: 3.5rem;
        font-weight: 100;
        line-height: 1.2;
        margin-bottom: 2rem;
        letter-spacing: -0.5px;
    }

    .fremhævet {
        color: #7e110f;
        font-weight: 500;
    }

    .hero-indhold p {
        font-size: 24px;
        line-height: 1.7;
        opacity: 0.85;
        max-width: 90%;
        font-weight: 300;
    }

    

    .profilbillede-beholder {
        flex: 1;
        width: 100%;
        max-width: 400px;
        aspect-ratio: 4 / 5;
    min-height: 0;
    overflow: hidden;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid rgba(255, 255, 255, 0.7);
        z-index: 2;
        box-shadow: 0 20px 40px rgba(0,0,0,0.2);
        transform: scale(0.95);
    transition: opacity 1.2s ease 0.4s, transform 1.2s ease 0.4s;
    }

    .profilbillede {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }



/*-------------start animation---------------*/
    /* .navigationsbar, */
    .hero-indhold,
    .profilbillede-beholder {
        opacity: 0;
        will-change: opacity, transform;
    }


    /* .loaded .navigationsbar, */
    .loaded .hero-indhold,
    .loaded .profilbillede-beholder {
        opacity: 1;
    }

    /* .loaded .navigationsbar {
        transform: translateY(0);
    } */

    .loaded .hero-indhold {
        transform: translateY(0);
    }

    .loaded .profilbillede-beholder {
        transform: scale(1);
    }





/*-------------------kompetence-baand----------------------*/
    .kompetence-baand {
    width: 100%;
    overflow: hidden;

    background-color: #fff0ee;
    border-top: 1px solid #b1b1b1;
    border-bottom: 1px solid #b1b1b1;
    padding: 0.8rem 0;
    }

    .kompetence-track {
    display: flex;
    width: max-content;
    animation: scrollLoop 40s linear infinite;
    }

    .kompetence-indhold {
    display: flex;
    align-items: center;
    gap: 4rem;
    flex-shrink: 0;
    padding-right: 4rem;
    }

    .kompetence-indhold span {
    font-size: 1.4rem;
    font-weight: 400;
    color: #424242;
    white-space: nowrap;
    }

    @keyframes scrollLoop {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
    }



    
/*--------------Projekter sektion-------------------*/
    #projekter-sektion {
        display: flex;
        flex-direction: column;
        padding: 5rem 10em;
        gap: 2em;
        
    }

    /*-----------kort--------------*/
        .kort-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: stretch;
            gap: 4rem;
            padding: 0rem 0;
            width: 100%;
        }

        .projekt-link {
            text-decoration: none;
            color: inherit;
            display: block;
            width: 100%;
            max-width: 350px;

        }

        .projekt-kort {
            display: flex;
            flex-direction: column;
            /* background-color: var(--farve-sart-pink);  */
            border-radius: 20px;
            overflow: hidden;
            width: 100%;
            max-width: 350px;
            min-width: 200px;
            overflow: hidden;
            justify-content: center;
            align-items: center;
            gap: 2em;
            opacity: 0;
            transform: translateY(70px) scale(0.96);
            transition:
                opacity 3s ease,
                transform 1s ease;
        }

        

        .projekt-kort:hover {
            transform: translateY(-5px);
        }

        /* .projekt-billede-beholder {
            flex: 1 1 50px;
            max-height: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
        } */

        .projekt-kort img {
            max-width: 280px;
                height: auto;
                max-height: 280px;
                display: block;
                transition: transform .2s;
        }

        .projekt-kort img:hover {
        transform: scale(1.02);
        }
        
            

        .projekt-kort h3 {
            font-size: 1.5rem;
            margin: 1rem 0 0.5rem 0;
        }

        .projekt-kort p {
            font-size: 1rem;
            margin: 0 0 1rem 0;
            
        }


        .projekt-info{
            padding: 0 2em;
            
            
        }

        .projekt-info span{
            font-style: italic;
            font-size: 12px;
            color: #686868;

            
        }

        .metode {
            font-size: 1px;
            color: #a6a6a6;
            font-style: italic;
        }

        .projekt-kort a {
            color: #000000;
        }


        .projekter-overskrift {
            opacity: 0;
            transform: translateY(50px);
            transition:
                opacity 1s ease,
                transform 1s ease;
        }

        .projekter-overskrift.vis {
            opacity: 1;
            transform: translateY(0);
        }


        .projekt-kort.vis {
        opacity: 1;
        transform: translateY(0) scale(1);
        }




/*-------------om mig------------*/
    #om-mig-sektion {
        display: flex;
        background-color: var(--farve-pink);
        background-image: url('../img/baggrundOmMig.svg');
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        min-height: 90dvh;
        align-items: center;
        justify-content: center;

        padding: 2rem 10em;

        
    }

    #om-mig-beholder {
        display: flex;
        width: 100%;
        max-width: 100%;
        height: fit-content;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
        

        
    }

    .om-mig-indhold {
        display: flex;
        flex-direction: column;
        justify-content: left;
        min-width: 230px;
        flex: 1;
        max-width: 100%;
        opacity: 0;
        transition:
        opacity 2s ease,
        transform 1s ease;
        
    }


    .om-mig-indhold h2{
        /* font-weight: 400; */
        margin-bottom: 32px;
    }
    
    .om-mig-indhold p{
        font-size: 20px;
        line-height: 1.7;
        max-width: 600px;
        margin-bottom: 20px;
    }

    .om-mig-billede{
    
        justify-self: center;
        width: 100%;
        max-width: 300px;
        opacity: 0;
    transition:
        opacity 2s ease,
        transform 1s ease;
    }
    
    .om-mig-billede img{
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
    
    }


    .om-mig-indhold.vis {
    opacity: 1;
    transform: translateX(0);
    max-width: 600px;
}

.om-mig-billede.vis {
    opacity: 1;
    transform: translateX(0);
    max-width: 400px;
    
}


.knap-beholder {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;

}

        

/*----------------skills------------------*/

    #skills-sektion {
        position: relative;
        z-index: 5;
        padding: 8rem 10em;
        display: flex;
        /* align-items: center; */
        background-image: url('../img/baggrundProgram.svg');
        background-size: cover;
    
        background-position: center;
        min-height: 80dvh;
        width: 100%;
    }

    #skills-beholder {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        justify-content: flex-start;
        align-items: center;
        gap: 6em;
    } 

    .skills-tekst {
        display: flex;
        flex-direction: column;
        gap: 1em;
        opacity: 0;
        transform: translateY(40px);
        transition:
        opacity 1.2s ease,
        transform 1.2s ease;
    }

    #ikon-liste {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 3rem;
        position: relative;
        z-index: 5;
        list-style-type: none;
        align-items: center;
    }
    

    .ikon {

        width: 110px;
        height: 110px;

        position: relative;
        display: inline-block;
        cursor: pointer;
        z-index: 1;

        opacity: 0;
        transform: translateY(40px);
        transition:
        opacity 0.8s ease,
        transform 0.8s ease;
    }

    .ikon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        z-index: 1;
    }

    .skills-tekst.vis,
    .ikon.vis {
    opacity: 1;
    transform: translateY(0);
    }


    .programnavn {
    position: absolute;
    top: 100%; /* Placerer teksten under ikonet */
    left: 50%;
    transform: translateX(-50%) translateY(2px); /* Starter lidt tættere på ikonet */
    background-color: var(--farve-baggrund);
    border-radius: 20px;
    padding: 20px 20px;
    z-index: 100;
    
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6em;
    color: var(--farve-tekst); 
    /* white-space: nowrap; */
    overflow-wrap: break-word;
    
    
    display: block;
    max-width: 300px; /* Sætter den maksimale bredde */
    width: max-content; /* Gør kassen mindre hvis teksten er kortere end 30px */
    text-align: left;
    
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    pointer-events: none;
    }


    .ikon:hover .programnavn {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(8px); /* Glider 6px nedad */
    }


    .ikon.aktiv {
    z-index: 1000;
    }

    .ikon.aktiv .programnavn {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(8px);
    }



/*----------------Kontakt mig------------------*/
    #kontakt-sektion {
        position: relative;
        z-index: 5;
        padding: 8rem 8em;
        display: flex;
        align-items: center;
        background-color: #f6b7ca;
        background-image: url('../img/baggrundOmMig.svg');
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
        height: fit-content;
    }

    #kontakt-beholder {
        display: flex;
        flex-direction: column;
        width: 60%;
        max-width: 90%;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 3rem;
    }

#kontakt-beholder p {
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: 80%;
}



/*----------Knap------------*/
.knap {
    background-color: var(--farve-highlight);
    color: var(--farve-baggrund);
    border: none;
    border-radius: 4em;
    padding: 1rem 3rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-size: 16px;
    width: fit-content;
    font-weight: 50;
    
}

.knap:hover {
    background-color: rgb(160, 24, 24);
}



/*--------------Footer----------------*/
.footer {
  background-color: #f3f3f3;
  padding: 4rem 3.5rem 1rem;
  color: #111;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 3rem;
  margin-bottom: 2rem;
}

.footer-kontakt h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-kontakt a,
.footer-kontakt p {
  display: block;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.1rem;
  color: #111;
  margin-bottom: 1rem;
}

.footer-kontakt a {
  text-decoration: none;
  text-underline-offset: 4px;
}

.footer-nav {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  padding-top: 3.3rem;
}

.footer-nav a {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  color: #111;
  text-decoration: none;
}

.footer-bund {
  text-align: center;
}

.footer-bund p {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  margin: 0;
}



/* ----------Responsivt design til mindre skærme-------- */
@media (max-width: 992px) {
    
    h1 {
        font-size: 2.8rem;
    }

    h2{
        font-size: 2rem;
    }

    /*-----Navbar responsiv-------*/
    .navigationsbar {
            padding: 1rem 5%;
        }


        .burger-knap {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .menu-links {
        position: fixed;
        top: 0;
        right: -100%; 
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background-color: var(--farve-rød);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2.5rem;
        transition: right 0.4s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
        
    }

   

    .menu-links.active {
        right: 0;
        
    }

  
    .burger-knap.open .burger-ikon {
        transform: rotate(90deg);
    }


    /*-----Hero sektionen responsiv-------*/
        .hero-beholder {
            flex-direction: column-reverse;
            text-align: center;
            gap: 4rem;
        }
        .hero-indhold p {
            margin: 0 auto;
        }

        .profilbillede-beholder {
            width: 320px;
            height: 320px;
        }




    /*-----Projekter sektionen responsiv-------*/
        #projekter-sektion {
            padding: 4em;
        }


    /*-----Om mig sektionen responsiv-------*/

    #om-mig-sektion {
        height: fit-content;
        gap: 1px;
        padding: 4em;

    }
   
    
      #om-mig-beholder {
      flex-direction: column-reverse;
        text-align: left;
        gap: 1rem;
        width: 100%;
    }

    .om-mig-indhold.vis {
        height: 100%;
    }

    #om-mig-billede{
      order: -1;
    }

    /*-----Skills sektionen responsiv-------*/
   

    #skills-sektion {
    padding: 4em;
    overflow: visible;
}

#skills-beholder {
    padding: 0;
    gap: 3em;
    overflow: visible;
}

#ikon-liste {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    width: 100%;
    padding: 0;
    position: relative;
    z-index: 1;
    overflow: visible;
}

#ikon-liste li {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
}

/* Hover eller aktivt ikon kommer foran alle andre */
#ikon-liste li:hover,
#ikon-liste li.ikon-aktiv {
    z-index: 1000;
}

.ikon {
    position: relative;
    z-index: 1;
}

/* Tekstboksen */
.programnavn {
    position: absolute;

    top: 50%;
    left: 50%;

    width: 280px;
    max-width: 80vw;

    padding: 18px;

    font-size: 14px;
    line-height: 1.6em;

    background-color: var(--farve-baggrund);
    border-radius: 20px;

    transform: translate(-50%, -50%);

    z-index: 1001;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 0.2s ease,
        transform 0.2s ease,
        visibility 0.2s;

    pointer-events: none;
}

/* Hover på tablet */
#ikon-liste li:hover .programnavn {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, -50%);
}

/* Klik på tablet */
.ikon.aktiv .programnavn {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

    

    /*-----Kontakt sektionen responsiv-------*/
    #kontakt-sektion {
        padding: 4em 2em;
    }

    
    /*-----footer sektionen responsiv-------*/


}


@media (max-width: 600px) {
    
    h1 {
        font-size: 32px;
    }
    
    h2 {
        font-size: 24px;
    }

    h3 {
        font-size: 16px;
    }

    p {
        font-size: 16px;
    }

    
    /*-----Hero sektionen responsiv-------*/
    .hero-sektion {
        padding: 2em 1.5em;
    }

    .hero-beholder {
        max-width: 100%;
        gap: 2rem;
    }

    .profilbillede-beholder {
        width: min(100%, 260px);
        max-width: 100%;
        aspect-ratio: 1 / 1;
        min-height: 0;
        margin: 0 auto;
    }



    .hero-indhold h1 {
        font-size: 2rem;
    }

    .hero-indhold p {
        font-size: 20px;
    }



    
    /*-----Projekter sektionen responsiv-------*/
        #projekter-sektion {
        padding: 2em 1.5em;
        }

        .kort-container {
            gap: 2rem;
        }

        .projekt-link,
        .projekt-kort {
            width: 100%;
            max-width: 100%;
        }

        .projekt-info {
            padding: 0 1.2em 1.2em;
        }

        .projekt-kort img {
            max-width: 260px;
        }



    /*-----Om mig sektionen responsiv-------*/

     #om-mig-sektion {
        padding: 2em 1.5em;
     }

    .om-mig-indhold p {
        font-size: 16px;
    }





    /*-----Skills sektionen responsiv-------*/
    #skills-sektion {
    padding: 2em 1.5em;
}

#skills-beholder {
    gap: 2em;
}

#ikon-liste {
    gap: 1.5rem;
}

#ikon-liste li {
    width: calc(50% - 0.75rem);
}

.ikon {
    width: 80px;
    height: 80px;
}

.programnavn {
    width: 260px;
    max-width: 80vw;
    padding: 15px;
    font-size: 12px;
}


    /*-----Kontakt sektionen responsiv-------*/

    #kontakt-sektion {
        padding: 2em 1.5em;
    }

    #kontakt-beholder{
        width: 100%;
    }

   

    /*-----footer sektionen responsiv-------*/
      .footer {
    padding: 2.5rem 1.5rem 1rem;
  }

  .footer-top {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 2rem;
  }

  .footer-kontakt {
    max-width: 100%;
  }

  .footer-kontakt h2 {
    font-size: 1.9rem;
    margin-bottom: 0.8rem;
  }

  .footer-kontakt a,
  .footer-kontakt p {
    font-size: 1rem;
    margin-bottom: 0.8rem;
  }

  .footer-nav {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
    padding-top: 0;
  }

  .footer-nav a {
    font-size: 1rem;
  }

  .footer-bund {
    text-align: left;
  }

  .footer-bund p {
    font-size: 0.95rem;
  }
}






/*---------------------------Projekter lumina, museum ovartaci og børnenes bogunivers-----------------------------------*/

    /*-------------Hero-------------------*/
        .projekt-hero-sektion {
            position: relative;
            display: flex;
                z-index: 5;
                padding: 3em 0;
                display: flex;
                align-items: center;
                justify-content: center;

                background-color: var(--farve-pink);
                background-image: url('../img/baggrundOmMig.svg');
                background-size: cover;
                background-position: center;
                height: fit-content;
            }

            .projekt-hero-beholder {
                display: flex;
                width: 100%;
                max-width: 90%;
                margin: 0 auto;
                align-items: center;
                justify-content: center;
                align-content: center;
                gap: 4rem;
            }

            #projekt-hero-indhold {
                text-align: center;
                font-size: 25px;
            
            }
                

    /*-------------intro-------------------*/

        #projekt-intro-sektion {
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 4em 6em;
        }


        .intro-beholder {
            display: flex;
            align-items: center; 
            justify-content: space-between;
            gap: 4rem; 
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
        }


        .intro-billede-beholder {
            flex: 1;
           
            width: 100%;
            overflow: hidden;

            opacity: 0;
            transform: translateX(-60px);
            transition:
            opacity 1.2s ease,
            transform 1.2s ease;
           
            
        }

        
        .intro-billede-beholder img {
            width: 100%;
            height: auto;
            display: block;
           
        } 

        .intro-billede-beholder video {
            width: 100%;
            height: auto;
            display: block;
           
        }


        .intro-tekst {
            flex: 1;
            color: var(--farve-tekst); 
            max-width: 30em;

            opacity: 0;
            transform: translateX(60px);
            transition:
                opacity 1.2s ease,
                transform 1.2s ease;
        }

        .intro-billede-beholder.vis,
        .intro-tekst.vis {
            opacity: 1;
            transform: translateX(0);
        }

        .intro-info {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin-bottom: 2.5rem;
        }

        .intro-info p {
            font-size: 1.1rem;
            line-height: 1.4;
        }

        .intro-info strong {
            font-weight: 600;
            color: var(--farve-tekst);
        }


        .projekt-beskrivelse h3 {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1rem;
        }

        .projekt-beskrivelse p {
            font-size: 1rem;
            line-height: 1.6;
            margin-bottom: 1.2rem;
            opacity: 0.9;
        }


    /*-------------Problem-----------------*/

        #lumina-problem-sektion {
            display: flex;
            padding: 4em 10em;
            background-color: var(--farve-pink);
            background-image: url('../img/luminaproblem.svg');
            background-size: cover;
            background-position: center;
            height: fit-content;
        }

        #lumina-problem-beholder{
            display: flex;
            flex-direction: column;   
            gap: 5em;
            width: 100%;
            
        }


        #for-efter-beholder {
            display: flex;
            flex-direction: wrap;
            align-items: flex-start;
                    justify-content: space-between;
                    max-width: 1200px;
                    width: 100%;
                    margin: 0 auto;

        }

        /*-----kort-----*/
            .for-efter-kort-beholder {
                display: flex;
                flex-direction: column;
                max-width: 380px;
                gap: 1em;
                padding: 0;
                justify-items: center;
                align-items: center;

            }


        /*-----tekst og liste i kort-----*/
            .for-efter-tekst {
                display: flex;
                flex-direction: column;
                text-align: center;
                gap: 20px;
            }

            .for-efter-tekst h3 {
                font-size: 24px;
            }

            .for-efter-tekst p {
                font-size: 20px;
                font-style: italic;
            }

            .for-efter-kort-beholder ul {
                padding-left: 1.5rem; /* Skubber prikkerne ind, så de står flot på række */
                margin: 0;
            }

            .for-efter-kort-beholder li {
                margin-bottom: 0.4rem; /* Giver lidt god afstand mellem linjerne */
            }


        /*-----billede i kort-----*/
                .for-efter-billede-beholder {
                    flex: 1;
                    max-width: 100%;
                    
                }

                .for-efter-billede-beholder video {
                    width: 100%;
                    height: auto;
                    display: block;
                
                }


				.for-efter-billede-beholder img {
                    width: 100%;
                    height: auto;
                    display: block;
                
                }

       /* ---------- Animation ---------- */

            .overskrift-beholder {
                display: flex;
                flex-direction: column;

                opacity: 0;
                transform: translateY(40px);
                transition:
                    opacity 0.8s ease,
                    transform 0.8s ease;
            }

            .overskrift-beholder.vis {
                opacity: 1;
                transform: translateY(0);
            }


            /* Før-kort */
            .for-efter-kort-beholder:first-child {
                opacity: 0;
                transform: translateX(-80px);
                transition:
                    opacity 0.8s ease,
                    transform 0.8s ease;
            }


            /* Efter-kort */
            .for-efter-kort-beholder:last-child {
                opacity: 0;
                transform: translateX(80px);
                transition:
                    opacity 0.8s ease,
                    transform 0.8s ease;
            }


            /* Når kortene bliver vist */
            .for-efter-kort-beholder.vis {
                opacity: 1;
                transform: translateX(0);
            }



    .overskrift-beholder h3 {
        font-style: italic;
        font-weight: 400;
        font-family: 'Playfair Display', serif;
        font-size: 22px;
        
    }


    /* -------------Proces lumina one projekt----------------*/

        .proces-sektion {
            /* background-color: var(--farve-pink); */
            padding: 4em 10em;
        
        }

        .proces-beholder {
            max-width: 100%;
            max-height: fit-content;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-items: center;
            justify-content: center;
            gap: 2.5em;
        }

        .proces-beholder h2 {
            
            font-weight: 700;
            color: #1a1a1a;
        }

        .proces-beholder h2 span {
            font-weight: 400;
            font-style: italic; 
        }

        
        .proces-indhold-beholder {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3.5rem;
        }

        .proces-boks {
            display: flex;
            flex-direction: column;
            max-width: 50%;
        }
        

        /* ------------Proces punkter/kortene-------------- */
            .proces-punkter-beholder {
                flex: 1;
                display: flex;
                flex-direction: column;
                gap: 1.5rem; 
                max-width: 52%;
            }

            .proces-punkter {
                background-color: var(--farve-sart-pink);
                padding: 1.8rem 2.2rem;
                border-radius: 20px; 
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            }

            .proces-punkter h3 {
                font-size: 1.25rem;
                font-weight: 700;
                margin-bottom: 0.6rem;
                color: #1a1a1a;
            }

            .proces-punkter p {
                font-size: 0.95rem;
                line-height: 1.6;
                color: #2a2a2a;
            }

            .proces-punkter strong {
                font-weight: 700;
                
            }

            

        /* ------Proces billede------- */
            .proces-billede-beholder {
                flex: 1;
                max-width: 40%;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                
            }

            .proces-billede-beholder img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: contain;
                transition: transform .2s;
            }

            .proces-billede-beholder img:hover {
                transform: scale(1.1);
            }

        /*---------transtion------*/
            .overskrift-beholder,
            .proces-punkter,
            .proces-billede-beholder {
                opacity: 0;
                transform: translateY(40px);
                transition:
                    opacity 0.8s ease,
                    transform 0.8s ease;
            }

            .overskrift-beholder.vis,
            .proces-punkter.vis,
            .proces-billede-beholder.vis {
                opacity: 1;
                transform: translateY(0);
            }

        /*------modal billeder------*/
            .billede-modal {
                display: none;
                position: fixed;
                inset: 0;
                z-index: 9999;
                background-color: rgba(0, 0, 0, 0.85);
                justify-content: center;
                align-items: center;
                padding: 2rem;
            }

            .billede-modal.aktiv {
                display: flex;
            }

            .modal-indhold {
                max-width: 90%;
                max-height: 90vh;
                width: auto;
                height: auto;
                object-fit: contain;
                border-radius: 12px;
                box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
                animation: zoomInd 0.3s ease;
            }

            .luk-modal {
                position: absolute;
                top: 1.5rem;
                right: 2rem;
                font-size: 2.5rem;
                color: white;
                cursor: pointer;
                line-height: 1;
            }

            @keyframes zoomInd {
                from {
                    transform: scale(0.8);
                    opacity: 0;
                }
                to {
                    transform: scale(1);
                    opacity: 1;
                }
            }

    /* -------------------Løsning-----...-----------*/   
        .loesning-sektion {
            padding: 4em 10em;
            display: flex;
            justify-content: center;
            align-items: center;
            background-image: url(../img/loesningbaggrund.svg);
            background-size: cover;
            background-position: center;
            height: fit-content;
            
            }


    
        .loesning-beholder {
            max-width: 100%;
            max-height: fit-content;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-items: center;
            justify-content: center;
            gap: 5em;
        }

        .loesning-indhold-beholder {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 3.5rem;
        }

        .loesning-billede-beholder {
            flex: 1;
                max-width: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
            }

        .loesning-billede-beholder img {
                width: 100%;
                height: auto;
                display: block;
                object-fit: contain;
        }
        
        .loesing-tekst {
            flex: 1;
                display: flex;
                flex-direction: column;
                gap: 1.5rem; 
                max-width: 40%;
        }

        .loesing-knapper-beholder {
            display: flex;
            flex-wrap: wrap;
            flex: 1;
            gap: 2em;
            justify-content: center;
        }


        .overskrift-beholder,
        .loesning-billede-beholder,
        .loesing-tekst {
            opacity: 0;
            transform: translateY(40px);
            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
        }

        .overskrift-beholder.vis, 
        .loesning-billede-beholder.vis,
        .loesing-tekst.vis {
            opacity: 1;
            transform: translateY(0);
        }


        
    /*---------------læring sektion----------------*/




    /*---------------nav bund----------------*/
    .bun-nav-sektion {
        padding: 4em 10em;
        
        justify-content: center;
        align-items: center;
    }

    .bund-nav-beholder {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    #andre-projekter {
        display: flex;
        flex-direction: column;
        gap: 0.5em;
    }

    #andre-projekter ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        
        
    }

   

    .bund-nav-beholder a {
        color: var(--farve-tekst);
        text-decoration: none; 
        font-size: 12px;
    }




/* -------------Responsiv design - projekt sider----------------*/

    @media (max-width: 1000px) {

        /*------------Intro----------------*/

        .intro-beholder {
            flex-direction: column; 
            gap: 2.5rem;
        }

        .intro-billede-beholder {
            max-width: 100%;
        }

        /*-------------Problem---------------*/

        #lumina-problem-sektion {
            padding: 4em 4em;
        }

        #for-efter-beholder {
            display: flex;
            flex-direction: wrap;
            gap: 2.5rem;}


        .for-efter-kort-beholder {
            max-width: 250px;
        }


        /*-------------Proces---------------*/

        .proces-sektion {
            padding: 4em 4em;
        }

        .proces-indhold-beholder {
        flex-direction: column;
        }

        .proces-punkter-beholder,
        .proces-billede-beholder {
            max-width: 100%;
            width: 100%;
        }

        /*-------------Løsning---------------*/
        .loesning-sektion {
            padding: 4em 4em;
        }




        /*-------------bund nav---------------*/
        .bun-nav-sektion {
        padding: 4em 4em;
    }

    }



    @media (max-width: 600px) {

        /*----------------------------*/
        #projekt-intro-sektion {
            padding:2em 1.5em;

            gap: 2.5rem;
        }

        /*----------------------------*/
        #lumina-problem-sektion {
            padding: 2em 1.5em;

            gap: 2.5rem;
        }

        #for-efter-beholder {
            flex-direction: column;
            gap: 2.5rem;
            justify-content: center;
            align-items: center;
        
        }
            
         .for-efter-kort-beholder{
            flex-direction: column; 
            gap: 1rem;
        }


        /*-------------proces---------------*/
            .proces-sektion {
               padding: 2em 1.5em;
            }


        /*-------------Løsning---------------*/
            .loesning-sektion {
               padding: 2em 1.5em;
            }

            .loesning-indhold-beholder {
                flex-direction: column;
                gap: 1em;
            }

            .loesing-tekst {
                max-width: 100%;
            }




        /*-------------bund nav---------------*/
        .bun-nav-sektion {
        padding: 2em 1.5em;}
    }



    /*----------------------Børnenes bogunivers projektside--------------------------*/
       
        #bogunivers-problem-sektion {
            /* background-color: var(--farve-pink, #f8c8c8);  */
            padding: 4rem 10em;
            color: #1a1a1a;
            display: flex;
            /* justify-content: center; */
        }

        #bogunivers-problem-beholder {
            max-width: 1200px;
            width: 100%;
            display: flex;
            flex-direction: column;
            gap: 3rem;
        }

        /* Overskrift */
        #bogunivers-problem-beholder h2 {
            
            font-weight: 700;
            color: #000000;
            line-height: 1.3;
        }

        #bogunivers-problem-beholder h2 span {
            font-weight: 400;
            font-style: italic; 
        }

        /* To-kolonne layout: Tekst til venstre, kort til højre */
        .bogunivers-problem-indhold {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
            
        }

        /* Venstre kolonne: Tekst */
        .bogunivers-problem-tekst {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3rem;
            max-width: 480px;
        }

        .bogunivers-problem-tekst p {
            font-size: 1.05rem;
            line-height: 1.6;
            color: #2b2b2b;
        }

        /* Højre kolonne: Det hvide kort */
        #bogunivers-problem-personer-beholder {
            flex: 1;
            background-color: #fef1f1; 
            padding: 2.5rem 2rem;
            border-radius: 28px;
            display: flex;
            justify-content: space-around;
            align-items: flex-start;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
            max-width: 580px;
        }

        /* Enkelte personer inde i kortet */
        .bogunivers-problem-person {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width: 45%;
        }

        .bogunivers-problem-person h3 {
            font-size: 1.4rem;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #000000;
        }

        /* Runde billeder */
        .bogunivers-problem-billede {
            width: 130px;
            height: 130px;
            margin-bottom: 1.2rem;
        }

        .bogunivers-problem-billede img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%; /* Tvinger billederne til at blive helt runde */
        }

        /* Liste med punkter */
        .bogunivers-problem-person ul {
            list-style-type: disc;
            text-align: left;
            padding-left: 1.2rem;
            margin: 0;
        }

        .bogunivers-problem-person li {
            font-size: 1rem;
            margin-bottom: 0.4rem;
            color: #1a1a1a;
        }

        /* Stiplet linje i midten af det hvide kort */
        .stiplet-adskiller {
            border-left: 2px dashed #a09090;
            align-self: stretch; /* Strækker linjen i hele kortets højde */
            margin: 0 0.5rem;
        }

        /*---------Bogunivers problem animation---------*/

        .overskrift-beholder,
        .bogunivers-problem-tekst,
        #bogunivers-problem-personer-beholder {
            opacity: 0;
            transform: translateY(40px);
            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
        }

        .overskrift-beholder.vis,
        .bogunivers-problem-tekst.vis,
        #bogunivers-problem-personer-beholder.vis {
            opacity: 1;
            transform: translateY(0);
        }


        /* ------------- Responsivt design ----------------*/

        /* Tablets & mindre skærme */
        @media (max-width: 900px) {

            #bogunivers-problem-sektion {
                padding: 4em 4em;
            }

            .bogunivers-problem-indhold {
                flex-direction: column;
                align-items: center;
                gap: 2.5rem;
            }

            .bogunivers-problem-tekst,
            #bogunivers-problem-personer-beholder {
                max-width: 100%;
                width: 100%;
            }
        }

        /* Mobilskærme */
        @media (max-width: 600px) {
            #bogunivers-problem-sektion {
                padding: 2rem 1.5rem;
            }

            #bogunivers-problem-personer-beholder {
                flex-direction: column;
                align-items: center;
                gap: 2rem;
                padding: 2rem 1rem;
            }

            .bogunivers-problem-person {
                width: 100%;
            }

            
            .stiplet-adskiller {
                border-left: none;
                border-top: 2px dashed #a09090;
                width: 100%;
                height: 1px;
                margin: 0.5rem 0;
                justify-content: center;
                align-items: center;
                
            }
        }


    /*----------------museum ovartaci------------------*/

        #ovartaci-problem-sektion {
            /* background-color: var(--farve-pink, #f8c8c8);  */
            padding: 4rem 10em;
            color: #1a1a1a;
            display: flex;
            /* justify-content: center; */
        }

        #ovartaci-problem-beholder {
            display: flex;
            
            width: 100%;
        }

        .ovartaci-problem-indhold {
            display: flex;
            flex-direction: row;
            gap: 3.5em;
            justify-content: space-between;
            width: 100%;
            height: fit-content;
            
            align-items: center;
            
            
        }

        .ovartaci-problem-tekst {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 3rem;
            max-width: 480px;
            
        }
       
        
        .ovartaci-problem-kort-beholder {
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            gap: 1.5rem;
            max-width: 600px;
            width: 100%;
            max-height: fit-content;
            height: 100%;
            
          
        }

        .ovartaci-problem-kort {
            display: flex;
            flex-direction: column;
            background-color: var(--farve-pink);
            padding: 1.8rem 2.2rem;
            border-radius: 20px; 
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            gap: 1em;
            justify-content: space-between;
            max-width: 300px;
            width: 100%;
            min-height: 180px;
            max-height: 250px;
            

        }

        .ovartaci-problem-kort p strong {
            font-size: 16px;
            color: var(--farve-tekst);

        }


        .problem-kort-billede-beholder {
            flex: 0 0 35px;
            height: 35px;
            display: flex;
            align-items: flex-start; 
            justify-content: flex-start;
        }

        .problem-kort-billede-beholder img {
                height: 100%;
                width: auto;
                
                display: block;
                object-fit: contain;
        }


        /*----animation----*/
            .ovartaci-problem-tekst .overskrift-beholder,
            .ovartaci-problem-tekst > div:last-child,
            .ovartaci-problem-kort {
                opacity: 0;
                transform: translateY(30px);
                transition: opacity 0.8s ease, transform 0.8s ease;
            }

            /* Synlig */
            .ovartaci-problem-tekst .overskrift-beholder.vis,
            .ovartaci-problem-tekst > div:last-child.vis,
            .ovartaci-problem-kort.vis {
                opacity: 1;
                transform: translateY(0);
            }

    /*------------- Responsivt design - tablet -------------*/

@media (max-width: 1000px) {

    #ovartaci-problem-sektion {
        padding: 4rem 5%;
    }

    #ovartaci-problem-beholder {
        max-width: 100%;
    }

    .ovartaci-problem-indhold {
        flex-direction: column;
        gap: 3rem;
    }

    .ovartaci-problem-tekst {
        max-width: 100%;
        width: 100%;
    }

    .ovartaci-problem-kort-beholder {
        max-width: 100%;
        width: 100%;
    }

    .ovartaci-problem-kort {
        max-width: 100%;
        width: 100%;
    }

}

/*------------- Responsivt design - mobil -------------*/

@media (max-width: 600px) {

    #ovartaci-problem-sektion {
        padding: 3rem 1.5rem;
    }

    .ovartaci-problem-indhold {
        gap: 2.5rem;
    }

    .ovartaci-problem-tekst {
        gap: 2rem;
    }

    .ovartaci-problem-kort-beholder {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .ovartaci-problem-kort {
        max-width: 100%;
        min-height: 160px;
        padding: 1.5rem;
    }

    .problem-kort-billede-beholder {
        flex: 0 0 35px;
        height: 35px;
    }

    .ovartaci-problem-kort p {
        font-size: 15px;
    }

}

/*-----------------------et billede fire moods------------------------*/

        #firemoods-sektion {
            padding: 4rem 10em;
            color: #1a1a1a;
            display: flex;
            background-image: url('../img/luminaproblem.svg');
            background-size: cover;
            background-position: center;
            height: fit-content;
        
            /* justify-content: center; */
        }

        #firemoods-beholder {
            display: flex;
            flex-direction: column;
            gap: 2em;
        }

        #udgangspunkt-beholder {
            display: flex;
        
            
            width: 100%;
        }

        .udgangspunkt-billede-beholder img {
            width: 100%;

        }

        #firemoods-beholder .overskrift-beholder,
        .udgangspunkt-billede-beholder {
            opacity: 0;
            transform: translateY(40px);

            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
        }

        #firemoods-beholder .overskrift-beholder.vis,
        .udgangspunkt-billede-beholder.vis {
            opacity: 1;
            transform: translateY(0);
        }

/*--------løsning---------*/
.loesning-foto-beholder {
    display: flex;
    

    gap: 1em;

    
}

.mood-kort img {
    width: 100%;
    aspect-ratio: 0.62;

    object-fit: cover;
    display: block;

    cursor: pointer;
}

.mood-kort p {
    margin: 0;

    text-align: center;

    font-size: 1.1rem;
    line-height: 1.3;
    font-weight: 600;
}

/* --------Animation Løsning-------- */

.loesning-sektion .overskrift-beholder,
.loesning-sektion .mood-kort {
    opacity: 0;
    transform: translateY(40px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* Når JS tilføjer .vis */
.loesning-sektion .overskrift-beholder.vis,
.loesning-sektion .mood-kort.vis {
    opacity: 1;
    transform: translateY(0);
}



/*-------responsiv fire moods----------*/

@media (max-width: 1000px) {
   


    #firemoods-sektion {
        padding: 4em 4em;
    }


}


@media (max-width: 600px) {
    .loesning-foto-beholder {
        flex-direction: column;
    }

    #firemoods-sektion {
        padding: 2rem 1.5rem;
    }
    
}


/*---------------------------Om mig side-----------------------------------*/

    #hvem-er-sektion {
        display: flex;
        flex-direction:column;
        padding: 4em 10em;
        min-width: 100%;
        
    }

    #hvem-er-beholder {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        height: fit-content;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
    }

    .standard-tekst-beholder {
        flex: 1 1 300px;
        display: flex;
        flex-direction: column;
        gap: 1.5rem; 
        max-width: 600px;
       

    }

    #hvem-er-billede-beholder {
        flex: 1 1 300px;
        max-width: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #hvem-er-billede-beholder img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
    }


    /* -------- Animation: Hvem er.. -------- */
        .standard-tekst-beholder,
        #hvem-er-billede-beholder {
            opacity: 0;
            transform: translateY(40px);
            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
        }

        .standard-tekst-beholder.vis,
        #hvem-er-billede-beholder.vis {
            opacity: 1;
            transform: translateY(0);
        }


    /*------------------tilgang-----------------------*/
        #tilgang-sektion {
            display: flex;
            flex-direction:column;
            padding: 6em 10em;
            min-width: 100%;
        }

        #tilgang-beholder {
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            max-width: 100%;
            height: fit-content;
            margin: 0 auto;
            align-items: center;
            justify-content: space-between;
            gap: 4rem;
        }

        .standard-tekst-beholder {
            flex: 1 1 300px;
            display: flex;
            flex-direction: column;
            gap: 1.5rem; 
            max-width: 600px;

        }

        .tilgang-kort-beholder {
            display: grid;
            grid-template-columns: repeat(2, 1fr); 
            gap: 1.5rem;
            max-width: 600px;
            width: 100%;
            max-height: fit-content;
            height: 100%;
          
        }

        .tilgang-kort {
            display: flex;
            flex-direction: column;
            background-color: var(--farve-sart-pink);
            padding: 1.8rem 2.2rem;
            border-radius: 20px; 
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            gap: 1em;
            justify-content: space-between;
            max-width: 300px;
            width: 100%;
            min-height: 100px;
            max-height: 200px;
            

        }

        .tilgang-kort p strong {
            font-size: 16px;
            color: var(--farve-tekst);

        }


        .tilgang-kort-billede-beholder {
            flex: 0 0 35px;
            height: 35px;
            display: flex;
            align-items: flex-start; 
            justify-content: flex-start;
        }

        .tilgang-kort-billede-beholder img {
                height: 100%;
                width: auto;
                
                display: block;
                object-fit: contain;
        }


        /* -------- Animation: Min design tilgang -------- */
        .tilgang-kort,
        #tilgang-beholder .standard-tekst-beholder {
            opacity: 0;
            transform: translateY(40px);
            transition:
                opacity 0.8s ease,
                transform 0.8s ease;
        }

        .tilgang-kort.vis,
        #tilgang-beholder .standard-tekst-beholder.vis {
            opacity: 1;
            transform: translateY(0);
        }




    
    /*------------------erfaringer-----------------------*/
        /*------------------ erfaringer -----------------------*/

#erfaring-sektion {
    display: flex;
    flex-direction: column;
    padding: 4em 10em;
    width: 100%;
    box-sizing: border-box;
    background-image: url('../img/baggrundOmMig.svg');
    background-size: cover;
        background-attachment: fixed;
        background-position: center;
        min-height: 90dvh;
        align-items: center;
        justify-content: center;
}

#erfaring-beholder {
    display: flex;
    flex-direction: column;
    gap: 3em;
    width: 100%;
}

#erfaring-kort-beholder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.erfaring-kort {
    display: flex;
    flex-direction: column;
    background-color: var(--farve-sart-pink);
    
    flex: 1;
    width: 100%;
    max-width: 320px;
    
    justify-content: flex-start;
    align-items: center;
    
    padding: 2em;
    gap: 2em;
    border-radius: 20px;
    box-sizing: border-box;
}

.erfaring-ikon {
    flex: 0 0 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.erfaring-ikon img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}

.erfaring-tekster {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1em;
    text-align: center;
}

.erfaring-tekster h3 {
    font-size: 24px;
}

.erfaring-tekster p {
    font-size: 16px;
}


/* -------- Animation: Erfaringer -------- */

#erfaring-beholder h2,
.erfaring-kort {
    opacity: 0;
    transform: translateY(40px);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

#erfaring-beholder h2.vis,
.erfaring-kort.vis {
    opacity: 1;
    transform: translateY(0);
}


        /*-------------Fritid----------------*/

        #fritid-sektion {
        display: flex;
        flex-direction:column;
        padding: 6em 10em;
        min-width: 100%;
        
    }

    #fritid-beholder {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-width: 100%;
        height: fit-content;
        margin: 0 auto;
        align-items: center;
        justify-content: space-between;
        gap: 4rem;
    }

    .standard-tekst2-beholder {
        flex: 1 1 300px;
        display: flex;
        flex-direction: column;
        gap: 1.5rem; 
        max-width: 600px;
       
    }

    #fritid-billede-beholder {
        flex: 1 1 300px;
        max-width: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #fritid-billede-beholder img {
            width: 100%;
            height: auto;
            display: block;
            object-fit: contain;
            transition: transform .2s;
    }

    

        #fritid-billede-beholder img:hover {
                transform: scale(1.1);
            }


            strong {
                color: var(--farve-highlight);
                font-style: italic;
            }


        /*---------- Animation fritid ----------*/

            .standard-tekst2-beholder,
            #fritid-billede-beholder {
                opacity: 0;
                transform: translateY(40px);
                transition:
                    opacity 0.8s ease,
                    transform 0.8s ease;
            }

            .standard-tekst2-beholder.vis,
            #fritid-billede-beholder.vis {
                opacity: 1;
                transform: translateY(0);
            }

    /* -------------Responsiv design - Om mig----------------*/

        @media (max-width: 900px) {

            /*---------hvem er-----------*/
            #hvem-er-sektion {
                padding: 4em 4em; 
            }

            #hvem-er-beholder {
            flex-wrap: wrap-reverse;
            justify-content: center;
            }

            .standart-tekst-beholder,
            #hvem-er-billede-beholder {
            max-width: 100%;
            }

            /*---------design tilgang-----------*/
            #tilgang-sektion {
            padding: 4em 4em;
            }

            #tilgang-beholder {
                flex-direction: column;
                align-items: center;
                gap: 3rem;
            }

            .tilgang-kort-beholder {
                width: 100%;
                max-width: 600px;
            }

            .tilgang-kort {
                max-width: 100%;
                width: 100%;
            }

            #tilgang-beholder .standard-tekst-beholder {
                max-width: 600px;
                width: 100%;
            }



            /*-----------Erfaringer-------------*/
            #erfaring-sektion {
                padding: 4em 4em;
            }

            #erfaring-kort-beholder {
                gap: 1.2rem;
            }

            .erfaring-kort {
                padding: 1.5em;
                max-width: none;
            }

            .erfaring-tekster h3 {
                font-size: 20px;
            }

            .erfaring-tekster p {
                font-size: 15px;
            }

            .erfaring-ikon {
                flex-basis: 65px;
                height: 65px;
            }


            /*---------fritid-----------*/
            #fritid-sektion {
                padding: 4em 4em;
            }
            

        }



        @media (max-width: 600px) {

            /*---------hvem er-----------*/
                #hvem-er-sektion {
                    padding: 2em 1.5em; 
                }
                
                #hvem-er-beholder {
                gap: 2em;
                }

            /*---------design tilgang-----------*/
                #tilgang-sektion {
                    padding: 2em 1.5em;
                }

                #tilgang-beholder {
                    gap: 2.5rem;
                }

                .tilgang-kort-beholder {
                    grid-template-columns: repeat(2, 1fr);
                    gap: 1rem;
                    width: 100%;
                }

                .tilgang-kort {
                    padding: 1.3rem;
                    min-height: 110px;
                    border-radius: 16px;
                }

                .tilgang-kort p strong {
                    font-size: 14px;
                }

                .tilgang-kort-billede-beholder {
                    flex: 0 0 30px;
                    height: 30px;
                }

                #tilgang-beholder .standard-tekst-beholder {
                    width: 100%;
                    max-width: 100%;
                }


            /*-----------Erfaringer-------------*/
            #erfaring-sektion {
                padding: 2em 1.5em;
            }

            #erfaring-beholder {
                gap: 2.5em;
            }

            #erfaring-kort-beholder {
                flex-direction: column;
                align-items: center;
                gap: 1.5rem;
            }

            .erfaring-kort {
                width: 100%;
                max-width: 450px;
                padding: 1.5em;
                gap: 1.5em;
            }

            .erfaring-ikon {
                flex-basis: 60px;
                height: 60px;
            }

            .erfaring-tekster {
                gap: 0.8em;
            }

            .erfaring-tekster h3 {
                font-size: 20px;
            }

            .erfaring-tekster p {
                font-size: 15px;
                line-height: 1.5;
            }

            /*---------fritid-----------*/
            #fritid-sektion {
                padding: 2em 1.5em;
            }
            

        }



/*---------------gå til top knap----------------*/
    #til-top-knap {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 99; /* Sørger for at knappen ligger øverst over alt andet indhold */
        
        width: 45px;
        height: 45px;
        border: none;
        outline: none;
        background-color: #1a1a1a; /* Knappe baggrundsfarve (ret gerne til f.eks. din pink/mørke farve) */
        color: #ffffff; /* Pilens farve */
        cursor: pointer;
        border-radius: 50%; /* Gør knappen helt rund */
        font-size: 20px;
        font-weight: bold;
        
        /* Gør knappen usynlig som standard */
        opacity: 0;
        pointer-events: none; /* Forhindrer at man kan klikke på den, når den er usynlig */
        
        /* Blød overgang når den dukker op og forsvinder */
        transition: opacity 0.3s ease, transform 0.2s ease, background-color 0.3s ease;
    }

    /* Skift farve når musen holdes over */
    #til-top-knap:hover {
        background-color: #e59898; /* Dine farvevalg til hover */
        transform: translateY(-3px); /* Løfter knappen en lille smule */
    }

    /* Klassen der gør knappen synlig når der er scrollet */
    #til-top-knap.vis {
        opacity: 1;
        pointer-events: auto; /* Gør den klikbar igen */
    }



/*-------------------Kontakt mig side-------------------------------*/


     #kontakt-side-sektion {
    display: flex;
    flex-direction: column;
    padding: 4em 10em;
    width: 100%;
    background-image: url('../img/kontaktbaggrund.svg');
    background-size: cover;
            background-position: center;
            height: fit-content;
            
}

#kontakt-side-beholder {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;
    height: fit-content;
    margin: 0 auto;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
}

.kontakt-tekst-beholder {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    gap: 2rem; 
    max-width: 580px;
}

#oplysninger {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.oplysning-beholder {
    width: 100%;
    display: flex;
    align-items: center;
    align-content: center;
    gap: 1.5em;
}

.oplysning-beholder a {
    color: var(--farve-tekst);
    text-decoration: none;
    font-size: 20px;
    overflow-wrap: break-word;
    word-break: break-word;
}

#kontaktbillede-billede-beholder {
    flex: 1 1 300px;
    justify-self: center;
    width: 100%;
    max-width: 390px;
}

#kontaktbillede-billede-beholder img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

@media (max-width: 900px) {
    #kontakt-side-sektion {
        padding: 4em 3em; /* Skruer ned for den store sidetegns-padding */
    }

    #kontakt-side-beholder {
        flex-direction: row; /* Tvinger række-layout */
        flex-wrap: nowrap;   /* Forhindrer at de hopper ned under hinanden */
        gap: 2rem;
        justify-content: space-between;
    }

    .kontakt-tekst-beholder {
        max-width: 55%; /* Tildeler plads til teksten */
        flex: 1;
    }

    #kontaktbillede-billede-beholder {
        max-width: 40%; /* Tildeler plads til billedet */
        flex: 1;
    }
}

/* Under 600px (Mobil): Hopper under hinanden */
@media (max-width: 600px) {
    #kontakt-side-sektion {
        padding: 2em 1.5em;
    }

    #kontakt-side-beholder {
        flex-direction: column; /* Lægger elementerne lodret */
        align-items: center;
        gap: 2.5rem;
    }

    .kontakt-tekst-beholder
     {  max-width: 100%; /* Begge elementer fylder hele bredden */
        width: 100%;
        
    }

 #kontaktbillede-billede-beholder {
    max-width: 300px;
 }

    .oplysning-beholder img {
        width: 3em;
    }

    .oplysning-beholder a {
        font-size: 16px;
    }
}