@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2&display=swap');

* {
    margin: 0;
    padding: 0
    ;
}
body {
    background-color: #FFFCED;
    overflow-x: hidden;
}
html {
    overflow-x: hidden;
}




h1, h2, h3, h4{
    font-family: "Archivo Black", sans-serif ;
    color: #2C3B55;
}
h1 {
    font-size: 64px;
}
h2 {
    font-size: 40px;
}
h3 {
    font-size: 28px;
    padding: 20px 0;
}
h4 {
    font-size: 24px;
}
p, a {
    font-family: "Baloo 2", sans-serif;
    color: #2C3B55;
    line-height: 200%;
    font-size: 18px;
    text-decoration: none;
}
section{
    padding: 25px 30px;
}

html {
    scroll-behavior: smooth;
}
@media screen and (max-width: 815px) {
    h1{
        font-size: 40px;
    }
}
/* Header css */
.icon {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
}
.burger-linje {
    display: block;
    width: 22px;
    height: 2px;
    background-color: #2C3B55;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}
@media screen and (min-width: 866px) {
    .icon {
        display: none !important;
    }
}
Header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 20px;
    background-color: #D3DEB5;
    display: flex;
    transition: transform 0.3s ease;
}
/* Skjuler headeren ved at flytte den opad, og viser den igen ved at fjerne transform */
Header.skjult {
    transform: translateY(-100%);
}
body {
    padding-top: 90px;
}
.nav a {
    font-size: 24px;
    font-family: "Archivo Black", sans-serif;
    color: #334360;
    text-decoration: none;
    margin: 0 10px;
    padding-bottom:0;
    line-height: 1;
    display: inline-block;

}
Header a:hover {
     transform: scale(1.2);
     transition: 0.3s;
}
.nav {
    display: flex;
    gap: 20px;
    margin-left: auto;
    align-items: center;
}
.om header {
    background-color: #FFFCED;
}
.vaerkb header {
    background-color: #FFFCED;
}
.nav a.aktiv {
    border-bottom: 2px solid #2C3B55;
    padding-bottom: 8px;
}


.logoheader {
    height: 50px;
    width: 100%;
    object-fit: cover;
}
/* responsiv header */
@media screen and (max-width: 865px) {
    .nav a:not(.icon) {
        display: none;
    }

    .nav.responsive a:not(.icon) {
        display: block;
        animation: navFadeIn 0.2s ease forwards;
    }

    .nav.collapsing a:not(.icon) {
        display: block;
        animation: navFadeOut 0.2s ease forwards;
    }
/* Animationer for at fade navigationen ind og ud ved responsiv menu */
    @keyframes navFadeIn {
        from { opacity: 0; transform: translateY(-4px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes navFadeOut {
        from { opacity: 1; transform: translateY(0); }
        to   { opacity: 0; transform: translateY(-4px); }
    }

    .nav .icon {
        display: flex;
        position: fixed;
        right: 20px;
        top: 45px;
        transform: translateY(-50%);
        z-index: 1001;
    }
/* Når menuen er åben, transformeres burger-ikonen til et kryds ved at rotere og flytte linjerne */
    .nav.responsive .burger-linje:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }
    .nav.responsive .burger-linje:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    /* Den tredje linje flyttes op og roteres i den modsatte retning for at danne det andet ben i krydset */
    .nav.responsive .burger-linje:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }
/* Når menuen er åben eller i færd med at lukke, positioneres navigationen absolut for at dække hele bredden og vises som en kolonne, der er justeret til højre */
    .nav.responsive,
    .nav.collapsing {
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: flex-end;
        padding: 15px 20px 20px;
        background-color: #D3DEB5;
        z-index: 999;
    }
}
/* Footer */
footer {
    background-color: #2C3B55;
    padding: 20px 120px 40px 120px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    position: relative;
}
.footer-main {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    padding-bottom: 12px;
}
.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 30px;
}
.footer-nav a {
    color: #FFFCED;
    text-decoration: none;
    font-size: 22px;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.footer-nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

#kontakt-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 370px;
}
.info {
    display: flex;
    flex-direction:column;
    gap: 8px;
}
textarea {
    min-height: 50px;
    resize: vertical;
}
button {
    justify-self: center;
    cursor: pointer;
}

input, textarea {
    padding: 7px 12px;
    border: none;
    border-radius: 6px;
}
.send {
    padding: 7px;
    border: none;
    border-radius: 6px;
    background-color: #D3DEB5;
    width: 100px;
    color: #2C3B55;
}
.send:hover {
    background-color: #F4EEDB;
    transform: scale(1.05);
    transition: 0.3s;
}
footer h2 {
    color: #FFF9F0;
    font-size: 20px;
    margin-bottom: 6px;
}
.footerimg {
    height: 115px;
    object-fit: contain;
    padding-top: 0;
}

.footerimg:hover {
     transform: scale(1.2);
    transition: 0.3s;
}
.footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.footer-tekst {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.footer-tagline {
    color: #FFFCED;
    font-size: 16px;
    text-align: left;
    margin-top: 6px;
}
.footer-intro {
    color: #FFF9F0;
    font-size: 14px;
    margin-bottom: 8px;
}
.footer-icons {
    display: flex;
    gap: 12px;
    margin-top: 6px;
}
.footer-ikon {
    color: #FFFCED;
    font-size: 22px;
    transition: transform 0.2s;
}
.footer-ikon:hover {
    transform: scale(1.2);
}
.footer-copyright {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #FFFCED;
    font-size: 14px;
    opacity: 0.7;
    margin: 0;
}
/* Responsiv footer */
@media screen and (max-width: 865px) {
    footer {
        padding: 20px 80px 40px 80px;
    }
    .footerimg {
        padding-top: 20px;
    }
    .footer-main {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .footer-nav {
        display: none;
    }
    .footer-logo {
        align-items: center;
    }
    .footer-tekst {
        align-items: center;
    }
    .footer-tagline {
        text-align: center;
    }
    .kontakt {
        width: 100%;
        text-align: center;
    }
    .footer-intro {
        text-align: center;
    }
    #kontakt-form {
        width: 100%;
    }
}

/* Herosectionerne */
.herotekst {
    max-width: 700px;
    padding: 30px;
}
.hero {
    height: auto;
    padding-bottom: 15px;
    position: relative;
    overflow: hidden;
}
.stempel {
   position: absolute;
    right: -20px;
    top: -20px;
    width: 340px;
    height: auto;
    transform: rotate(-10deg);
}
@media screen and (max-width: 550px) {
    .stempel {
        position: absolute;
        right: -20px;
        top: auto;
        bottom: 30px;
        width: 170px;
        height: 100px;
        object-fit: cover;
        object-position: 0% 55%;
        transform: rotate(-10deg);
    }
    .knap {
        margin-top: 10px;
    }
    .herotekst p {
        margin-bottom: 8px;
    }
    .ompraeg .flex {
        grid-template-columns: 1fr;
    }
    .img1 {
        width: 100%;
        height: auto;
        max-height: 280px;
        object-fit: cover;
    }
    .ompraeg p {
        max-width: 100%;
    }
}
@media screen and (min-width: 865px) {
    .ompraeg .flex {
        grid-template-columns: 1fr 1.4fr;
    }
}
.ned {
    display: flex;
    justify-content: center;
}
.omos .ned {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    color: #386350;
}
.quiz-hero .ned {
    color: #D3DEB5;
}
.ned:hover {
    transform: scale(1.5);
    transition: 0.3s;
}

/* forside hero */
.forside, h1, p {
    color: #2C3B55;
}
h1 {
     margin-bottom: 20px;
     line-height:90%;
}
p
    {
        font-size: 20px;
        line-height: 160%;
        margin-bottom: 20px;
        max-width: 32ch;
    }
.knap {
    display: inline-block;
    font-size: 20px;
    padding: 5px 15px;
    background-color: #2C3B55;
    color: #FFFFFF;
    text-decoration: none;
    margin-top: 25px;
    border-radius: 10px;
}
.knap:hover {
    border: 1px solid #2C3B55;
    background-color: #FFF9F0;
    color: #2C3B55;

}
/* Forside */
.laer {
    background-color: #FDDFED;
    padding-top: 40px;
}
    /* Det lærer vi dig slides*/
.udforsk {
   border: 1px solid #2C3B55;
   padding: 5px 30px;
   border-radius: 10px;
   margin-bottom: 0px;
}
.udforsk:hover {
    background-color: #2C3B55;
    color: #FFF9F0;
}
.slide-container{
    overflow: hidden;
    width: 100%;
}
.slides {
    display: flex;
    transition: 0.4s;
}
.slide {
    min-width: calc(100% / 3);
    padding: 20px;

    box-sizing: border-box;
}
.slideimg {
    height: 200px;
    width: 100%;
    object-fit: cover;
}
.slide h4 {
        margin-top: 16px;
        margin-bottom: 4px;
}
.slide p {
    margin-top: 0;
        margin-bottom: 16px;
}
        
    /* Vores mission */
    .mission{
        background-color: #386350;

    }
    .mission h2{
        color: #D3DEB5;
        font-size: 64px;
        max-width: 970px;
    }
    .mission p {
        color: #D3DEB5;
        max-width: 635px;
        padding: 20px 0;
    }
    .mission a {
        background-color: #D3DEB5;
        color: #386350;
        padding: 5px 20px;
        border-radius: 10px;
        text-decoration: none;
    }
    .mission a:hover {
        background-color: #386350;
        border: 1px solid #D3DEB5;
        color: #D3DEB5;
    }
    /* Værktøjer */
    .vaerkol {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        gap: 20px;
        padding: 30px 0;
    }
    .kortimg {
        height: 175px;
        width: 100%;
        object-fit: contain;
        padding: 0 0 15px 0;
    }
    .vaerk a {
        background-color: #2C3B55;
        color: #FFFCED;
        border-radius: 10px;
        padding: 5px 15px;
        display: flex;
        justify-self: end;
        align-items: center;
    }
    .laesmere-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.mere-tekst {
    font-size: 20px;
    font-weight: 6  00;
    color: #2C3B55;
    margin-bottom: 5px;
    
}

    .vaerk a:hover {
        background-color: #FFFCED;
        border: 1px solid #2C3B55;
        color: #2C3B55;

    }
    /* Om præg */
    .ompraeg {
        background-color: #D3DEB5;
        padding-bottom: 30px; 
    }
    .ompraeg h2 {
        color: #386350;
    }
   
    .ompraeg p {
    color: #386350;
    padding: 8px 0;
    max-width: 500px;
    margin-bottom: 8px;
}
    .personbilleder {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    .personbilleder img {
        width: 100%;
        height: auto;
    }
/* Responsiv billeder om præg*/
@media screen and (max-width: 550px) {
    .personbilleder {
        grid-template-columns: 1fr;
    }
    .personbilleder img {
        height: auto;
        object-fit: contain;
    }
}
    .ompraeg a {
        background-color: #386350;
        color: #FFFCED;
        text-decoration: none;
        padding: 5px 8px;
        border-radius: 10px;
    }
    .ompraeg a:hover {
        background-color: #D3DEB5;
        border: 1px solid #386350;
        color: #386350;
    }
    .img1 {
        height: 300px;
    }

/* responsiv */
        @media (max-width: 865px) {
            .slide {
            min-width: 100%;}
            .mission h2 {
                font-size: 40px;
            }
            .vaerkol {
                grid-template-columns: 1fr 1fr;
            }
}
 @media (max-width: 550px) { 
     .vaerkol {
                grid-template-columns: 1fr;
            }
 }

/* Branding side */
.branding {
    background-color: #386350;
}
.branding h1 {
    color: #D3DEB5;
}
.forside p {
    max-width: 50ch;
}
.branding p {
    color: #D3DEB5;
    max-width: 50ch;
}
.vaerktoejer p {
    max-width: 50ch;
}
.branding a {
    color: #D3DEB5;
    text-decoration: none;
}
.flex {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.brandimg {
    width: 100%;
    height: 415px;
    object-fit: cover;
    padding: 20px 0
}
/* Foldud tekstbokse */
.foldud {
    max-height: 280px;
    overflow: hidden;
    transition: max-height 0.5s ease;
    position: relative;
}
.foldud::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 70px;
    pointer-events: none;
    transition: opacity 0.3s;
}
/* Når tekstboksen er foldet ud, skjules gradienten ved at sætte opacity til 0 */
.foldud.vis::after {
    opacity: 0;
}
.maalgruppe .foldud::after { background: linear-gradient(transparent, #FFFCED); }
.trends .foldud::after    { background: linear-gradient(transparent, #FDDFED); }
.aestetik .foldud::after  { background: linear-gradient(transparent, #D3DEB5); }
.fonte .foldud::after     { background: linear-gradient(transparent, #FFFCED); }
.tekstcontainer p {
    max-width: none;
}
.trends {
    background-color: #FDDFED;
}
.aestetik {
    background-color: #D3DEB5;
}
.laesmere {
    background: none;
    border: 1px solid #2C3B55;
    border-radius: 8px;
    font-family: "Baloo 2", sans-serif;
    font-size: 16px;
    color: #2C3B55;
    padding: 8px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    transition: background-color 0.2s, color 0.2s;
}
.laesmere:hover {
    background-color: #2C3B55;
    color: #FFFCED;
}

        /* Responsiv brandside */
        @media screen and (max-width: 865px) {
    .flex {
        grid-template-columns: 1fr;
    }
    .brandimg {
        order: -1;
        max-height: 300px;
    }
    .branding {
        height: auto;
    }
    .omos {
        flex-direction: column;
        gap: 0;
        padding-right: 0;
    }
    .omos .ned {
        bottom: 1px;
    }
    .hero.omos {
        padding-bottom: 70px;
    }
    .omos .herotekst {
        padding-bottom: 0;
        padding-right: 0;
    }
    .omos .herotekst {
        padding-bottom: 0;
        padding-right: 0;
        padding-top: 35px;
    }
    .omos .herotekst h1 {
        margin-bottom: 4px;
    }
    .omos .herotekst p {
        margin-bottom: 0;
    }
    .omos.hero {
        padding-bottom: 10px;
    }
    .omos .hvemimg {
        width: 110%;
        align-self: center;
        margin-left: 18%;
        margin-top: -10px;
        margin-bottom: 10px;
        height: 200px;
    }
        }


/* Værktøjs side */
.vaerktoejer {
    background-color: #FDDFED;
}
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 45px;
}
.korthvid {
    padding: 15px;
    background-color: #F4EEDB;
    display: flex;
    flex-direction: column;
}
.container a {
    border: 1px solid #2C3B55;
   padding: 2px 30px;
   border-radius: 10px;
   margin-left: auto;
   margin-top: auto;
}
.container a:hover {
    background-color: #2C3B55;
    color: #F4EEDB;
}
.groen {
    background-color: #D3DEB5;
}
.kortgroen {
    padding: 15px;
    background-color: #C8D2AC;
     display: flex;
    flex-direction: column;
}
.hvid h2 {
    padding: 0 0 30px 0;
}
.groen h2 {
    padding: 0 0 30px 0;
}
        /* Placere knapperne hvor de skal være */
.slideshow-container {
    position: relative;
}
.prev, .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    font-family: "baloo", sans-serif;
    font-size: 30px;
}
.prev:hover, .next:hover {
    background-color: #F4EEDB;
     transition: 0.2s;
}
.prev{
    left: -20px;
}
.next {
    right: -20px;
}
.slide-dots {
    display: none;
    justify-content: center;
    gap: 8px;
    padding-top: 16px;
}
@media screen and (max-width: 815px) {
    .slide-dots {
        display: flex;
    }
}
.dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid #2C3B55;
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s;
}
.dot.active {
    background-color: #2C3B55;
}
/* Responsiv */
 @media screen and (max-width: 865px) {
    .container {
        grid-template-columns: 1fr;
    }
    .perskortimg {
        height: 220px;
    }
 }

/* Quiz side */
.quiz-hero {
    background-color: #386350;
}
.quiz-hero h1 {
    color: #D3DEB5;
}
.quiz-hero p {
    color: #D3DEB5;
    max-width: 50ch;
}
.quiz-sektion {
    background-color: #FFFCED;
    padding: 50px 30px 80px;
}
.quiz-sektion > * {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}
.quiz-progress {
    margin-bottom: 40px;
}
.progress-bar {
    height: 4px;
    background-color: #D3DEB5;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}
.progress-fill {
    height: 100%;
    width: 0%;
    background-color: #386350;
    transition: width 0.4s ease;
}
.progress-text {
    font-size: 14px;
    color: #2C3B55;
    opacity: 0.5;
}
.quiz-kort {
    background-color: #FFFCED;
    border-radius: 12px;
    padding: 30px;
    border: 1.5px solid #D3DEB5;
}
.quiz-spørgsmaal {
    font-size: 28px;
    color: #2C3B55;
    margin-bottom: 24px;
    line-height: 120%;
}
.quiz-valg {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 40px;
}
.quiz-option {
    padding: 12px 18px;
    border: 1.5px solid #D3DEB5;
    border-radius: 8px;
    background: none;
    font-family: "Baloo 2", sans-serif;
    font-size: 18px;
    color: #2C3B55;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
    width: 100%;
}
.quiz-option:hover {
    border-color: #2C3B55;
}
.quiz-option.valgt {
    border-color: #2C3B55;
    background-color: #2C3B55;
    color: #FFFCED;
}
.quiz-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.quiz-knap {
    padding: 10px 28px;
    border-radius: 8px;
    font-family: "Baloo 2", sans-serif;
    font-size: 17px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}
.quiz-knap.naeste {
    background-color: #2C3B55;
    color: #FFFCED;
}
.quiz-knap.naeste:hover {
    background-color: #2C3B55;
}
.quiz-knap.naeste.inaktiv {
    opacity: 0.3;
    cursor: not-allowed;
}
.quiz-knap.tilbage {
    background: none;
    border: 1.5px solid #2C3B55;
    color: #2C3B55;
}
.quiz-knap.tilbage:hover {
    background-color: #2C3B55;
    color: #FFFCED;
}
/* Resultat */
.resultat-kort h2 {
    font-size: 36px;
    margin-bottom: 8px;
}
.resultat-kort > p {
    color: #2C3B55;
    font-size: 16px;
    margin-bottom: 36px;
    max-width: none;
}
.resultat-sektion {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid #D3DEB5;
}
.resultat-sektion:last-of-type {
    border-bottom: none;
}
.resultat-sektion h3 {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #2C3B55;
    padding: 0 0 10px 0;
    margin: 0;
    opacity: 0.8;
}
.resultat-sektion p {
    max-width: none;
    margin: 0;
    font-size: 20px;
    color: #2C3B55;
}
.resultat-liste {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.resultat-liste li {
    font-family: "Baloo 2", sans-serif;
    font-size: 18px;
    color: #2C3B55;
    padding-left: 16px;
    position: relative;
    line-height: 1.6;
}
.resultat-liste li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 11px;
    width: 6px;
    height: 6px;
    background-color: #386350;
    border-radius: 50%;
}
.resultat-handlinger {
    display: flex;
    gap: 12px;
    margin-top: 36px;
    flex-wrap: wrap;
}
/* Animation for at fade quiz-kortet ind ved at ændre opacity og flytte det lidt op */
@keyframes quizFade {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Når quiz-kortet får klassen "quiz-fade", starter animationen, og kortet bliver synligt og flytter sig til sin normale position */
.quiz-fade {
    animation: quizFade 0.25s ease forwards;
}
/* Skjuler elementer ved at sætte display til none, og de vil ikke tage nogen plads i layoutet */
.quiz-skjult {
    display: none;
}
/* Responsiv quizside */
@media (max-width: 600px) {
    .quiz-sektion { padding: 30px 20px 60px; }
}
/* Printvenlig version: Skjuler header, footer, navigation og andre elementer, der ikke er relevante for udskrift, og justerer layoutet for at passe bedre til papirformatet */
@media print {
    header, footer, .quiz-navigation, .resultat-handlinger, .quiz-progress, .quiz-hero {
        display: none !important;
    }
    body { padding-top: 0; }
    .quiz-sektion { max-width: 100%; padding: 20px; }
}

/* Om præg side */
 .omos {
    background-color: #D3DEB5;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    padding-right: 60px;
 }
 .omos h1 {
    color: #386350;
 }
 .omos p {
    color: #386350;
    max-width: 50ch;
 }
 .hvemimg {
    width: 420px;
    height: 300px;
    object-fit: cover;
    flex-shrink: 0;
    margin-top: 50px;
    margin-bottom: 30px;
 }
    /* Mød os */
    .moed {
        background-color: #FDDFED;
    }
    .moed h2 {
        padding: 0 0 15px 0;
    }
    .perskortimg {
        height: 285px;
        width: 100%;
        object-fit: contain;

    }
    .perskort h3{
        display: flex;
        justify-content: center;
    }