/* ==========================================================================
   KONTAKTSIDE - TONER FRA HJERTET
   CYBER NEON / DIGITAL STYLE
   PC - TABLET - MOBIL
   ========================================================================== */


/* ==========================================================================
   1. HELE KONTAKTSIDEN
   ========================================================================== */

.kontakt-side {

    display: flex;
    flex-direction: column;
    align-items: center;

    width: 100%;
    min-height: 100vh;

    padding: 40px 20px 70px;

    box-sizing: border-box;

    background:
        radial-gradient(circle at 10% 10%,
            rgba(0, 170, 255, .28),
            transparent 32%),

        radial-gradient(circle at 90% 15%,
            rgba(48, 36, 219, .30),
            transparent 35%),

        radial-gradient(circle at 15% 75%,
            rgba(15, 206, 44, .14),
            transparent 35%),

        radial-gradient(circle at 85% 80%,
            rgba(216, 16, 173, .16),
            transparent 35%),

        linear-gradient(145deg,
            #01040a,
            #030814,
            #061226,
            #02050d);

    background-attachment: fixed;

    color: white;
}


/* ==========================================================================
   2. HOVEDOVERSKRIFT
   ========================================================================== */

.kontakt-mig {

   

    width: 100%;
    max-width: none;

    min-height: 120px;

    margin: 0;

    padding: 25px 20px 35px;

    box-sizing: border-box;

    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: clamp(1.8rem, 5vw, 3rem);

    font-weight: 700;

    letter-spacing: 1px;

    line-height: 1.2;

    color: #ffffff;

    text-transform: uppercase;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .98),
            rgba(3, 8, 20, .98));

    border: 3px solid #5a9fb5;

    border-radius: 22px;

    text-shadow:
        0 0 6px rgba(90, 159, 181, .7),
        0 0 15px rgba(90, 159, 181, .35);

    box-shadow:
        0 0 20px rgba(90, 159, 181, .35),
        0 0 35px rgba(77, 82, 127, .25),
        inset 0 0 20px rgba(90, 159, 181, .08);
}


/* Lyslinje under overskriften */

.kontakt-mig::after {

    content: "";

    position: absolute;

    bottom: 12px;
    left: 15%;

    width: 70%;
    height: 3px;

    border-radius: 10px;

  

   

}


/* ==========================================================================
   3. CV BILLEDE
   ========================================================================== */

.cv-billede {


    width: 220px;
    height: 190px;

    margin: 0 auto;

    overflow: hidden;

    border-radius: 20px;

    border: 3px solid #00aaff;

    background: #02060f;

    box-shadow:
        0 0 20px rgba(0, 170, 255, .5),
        0 0 45px rgba(48, 36, 219, .25);
}


.cv-billede:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 25px rgba(0, 170, 255, .8),
        0 0 50px rgba(48, 36, 219, .5);
}


.cv-billede img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==========================================================================
   4. FAVORITGENRER - OVERSKRIFT
   ========================================================================== */

.genre-overskrift {

    width: 95%;
    max-width: 450px;

    margin: 20px auto 25px;
    padding: 5px 5px;

    box-sizing: border-box;

    text-align: center;

    color: #ffffff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 900;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .98),
            rgba(3, 8, 20, .98));

    border: 2px solid #00aaff;
    border-radius: 18px;

    text-shadow:
        0 0 8px #00aaff,
        0 0 18px rgba(0, 170, 255, .6);

    box-shadow:
        0 0 15px rgba(0, 170, 255, .5),
        0 0 30px rgba(0, 170, 255, .2),
        inset 0 0 15px rgba(0, 170, 255, .1);
}


/* ==========================================================================
   5. DE 2 GENRE-BOKSE
   ========================================================================== */

.genres-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 220px minmax(0, 1fr);

    align-items: center;

    width: 95%;
    max-width: 1000px;

    margin: 0 auto 40px;

    gap: 150px;

    box-sizing: border-box;
}

/* ==========================================================================
   6. GENRE PANEL 1 + GENRE PANEL 2
   ========================================================================== */

.genre-panel,
.genre-pane2 {
    width: 100%;
    min-width: 0;
    border-radius: 20px;
    padding: 5px;

    box-sizing: border-box;

    border: 4px solid rgba(0, 170, 255, .6);


    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    grid-auto-rows: 1fr;

    gap: 5px;

    align-items: stretch;

    /* SAMME HØJDE */
    height: 100%;
}


/* ==========================================================================
   7. GENRE-TEKSTER
   ========================================================================== */

.genre-panel span,
.genre-pane2 span {

    display: flex;

    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 15px;


    padding: 8px 10px;

    box-sizing: border-box;

    color: #00aaff;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: .9rem;
    font-weight: 600;

    line-height: 1.2;

    text-align: center;

    white-space: nowrap;

    cursor: pointer;

    background:
        linear-gradient(145deg,
            #06142a,
            #081d3a);

    border: 2px solid rgba(0, 170, 255, .6);

    border-radius: 12px;

    text-shadow:
        0 0 6px #00aaff;

    box-shadow:
        0 0 8px rgba(0, 170, 255, .2),
        inset 0 0 8px rgba(0, 170, 255, .08);

    transition:
        transform .25s ease,
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}


/* ==========================================================================
   8. GENRE HOVER
   ========================================================================== */

.genre-panel span:hover,
.genre-pane2 span:hover {

    color: #ffffff;

    background:
        linear-gradient(145deg,
            #008fd6,
            #00aaff);

    border-color: #00aaff;

    text-shadow:
        0 0 8px #ffffff;

    box-shadow:
        0 0 12px #00aaff,
        0 0 25px rgba(0, 170, 255, .6),
        inset 0 0 12px rgba(255, 255, 255, .15);

    transform:
        translateY(-3px) scale(1.03);
}


/* ==========================================================================
   9. SOCIALE MEDIER / PLATFORME
   ========================================================================== */

.social-boks {

    width: 320px;
    max-width: 100%;

    margin: 20px auto 35px;
    padding: 25px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .96),
            rgba(6, 20, 42, .98));

    border: 3px solid #3024db;

    border-radius: 20px;

    box-shadow:
        0 0 20px rgba(48, 36, 219, .4),
        inset 0 0 20px rgba(0, 170, 255, .06);
}


.social-boks h3 {

    margin: 0 0 20px;

    color: #00aaff;

    font-size: 1.5rem;

    font-weight: 900;

    text-shadow:
        0 0 8px #00aaff,
        0 0 18px rgba(0, 170, 255, .5);
}


/* ==========================================================================
   10. SOCIALE LINKS / PLATFORME
   ========================================================================== */

.social-link {

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 15px;

    width: 85%;
    max-width: 260px;

    margin: 18px auto;

    padding: 12px 20px;

    box-sizing: border-box;

    color: #ffffff;

    text-decoration: none;

    font-size: 1.2rem;
    font-weight: 700;

    letter-spacing: 1px;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .95),
            rgba(3, 8, 20, .98));

    border: 2px solid #00aaff;

    border-radius: 15px;

    text-shadow:
        0 0 8px #00aaff;

    box-shadow:
        0 0 15px rgba(0, 170, 255, .35),
        inset 0 0 12px rgba(0, 170, 255, .1);

    transition:
        transform .3s ease,
        color .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.social-link img {

    width: 40px;
    height: 40px;

    object-fit: contain;

    border-radius: 10px;
}


.social-link:hover {

    color: #0fce2c;

    transform: translateX(4px);

    border-color: #0fce2c;

    text-shadow:
        0 0 10px #0fce2c,
        0 0 20px rgba(15, 206, 44, .5);

    box-shadow:
        0 0 15px rgba(15, 206, 44, .5);
}


/* ==========================================================================
   11. "SKRIV TIL MIG"
   ========================================================================== */

.skriv-til-mig {

    width: 100%;
    max-width: 700px;

    margin: 20px auto 40px;

    padding: 25px 30px;

    box-sizing: border-box;

    text-align: center;

    font-size: 1.3rem;
    font-style: italic;
    font-weight: 600;

    line-height: 1.7;

    color: white;

    text-decoration: underline;

    background:
        linear-gradient(145deg,
            rgba(0, 170, 255, .18),
            rgba(10, 15, 40, .95));

    border: 2px solid #00aaff;

    border-radius: 25px;

    backdrop-filter: blur(8px);

    box-shadow:
        0 0 15px rgba(0, 170, 255, .8),
        0 0 40px rgba(0, 170, 255, .35),
        inset 0 0 25px rgba(0, 170, 255, .25);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.skriv-til-mig:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 25px rgba(0, 170, 255, 1),
        0 0 60px rgba(0, 170, 255, .6),
        inset 0 0 30px rgba(0, 170, 255, .35);
}


/* ==========================================================================
   12. KONTAKTTEKST
   ========================================================================== */

.kontakt-tekst {

    position: relative;

    width: 100%;
    max-width: 750px;

    margin: 35px auto 45px;

    padding: 25px 35px;

    box-sizing: border-box;

    overflow: hidden;

    text-align: center;

    color: white;

    font-size: 1.25rem;
    font-style: italic;
    font-weight: 600;

    line-height: 1.7;

    letter-spacing: .5px;

    background:
        linear-gradient(145deg,
            rgba(0, 170, 255, .18),
            rgba(15, 10, 45, .95));

    border: 2px solid #00aaff;

    border-radius: 22px;

    box-shadow:
        0 0 15px rgba(0, 170, 255, .6),
        0 0 35px rgba(216, 16, 173, .35),
        inset 0 0 25px rgba(0, 170, 255, .2);

    text-shadow:
        0 0 8px rgba(0, 170, 255, .8);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


/* Lys-animation */

.kontakt-tekst::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 60%;
    height: 100%;

    background:
        linear-gradient(120deg,
            transparent,
            rgba(255, 255, 255, .25),
            transparent);

    transform: skewX(-25deg);

    animation: kontaktLys 5s infinite;
}


@keyframes kontaktLys {

    0% {
        left: -100%;
    }

    40% {
        left: 130%;
    }

    100% {
        left: 130%;
    }
}


.kontakt-tekst:hover {

    transform: translateY(-5px);

    box-shadow:
        0 0 25px rgba(0, 170, 255, .9),
        0 0 55px rgba(216, 16, 173, .5),
        inset 0 0 30px rgba(0, 170, 255, .3);
}


/* ==========================================================================
   13. KONTAKT CONTAINER
   ========================================================================== */

.kontakt-container {

    display: flex;

    justify-content: center;
    align-items: flex-start;

    flex-wrap: wrap;

    gap: 40px;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
}


/* ==========================================================================
   14. KONTAKT FORMULAR
   ========================================================================== */

.kontakt-form {

    width: 450px;
    max-width: 100%;

    padding: 35px;

    box-sizing: border-box;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .97),
            rgba(6, 20, 42, .99));

    border: 3px solid #3024db;

    border-radius: 25px;

    box-shadow:
        0 0 25px rgba(48, 36, 219, .5),
        inset 0 0 20px rgba(0, 170, 255, .05);
}


/* ==========================================================================
   15. FORMULAR LABELS
   ========================================================================== */

.kontakt-form label {

    display: block;

    margin: 15px 0 8px;

    color: #45cfc6;

    font-weight: bold;

    font-size: 1rem;

    text-shadow:
        0 0 5px rgba(69, 207, 198, .3);
}


/* ==========================================================================
   16. INPUT + TEXTAREA
   ========================================================================== */

.kontakt-form input,
.kontakt-form textarea {

    display: block;

    width: 100%;

    padding: 16px 18px;

    box-sizing: border-box;

    background:
        linear-gradient(145deg,
            rgba(0, 170, 255, .08),
            rgba(2, 6, 15, .95));

    color: white;

    border: 2px solid rgba(0, 170, 255, .55);

    border-radius: 15px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 16px;

    letter-spacing: .5px;

    box-shadow:
        inset 0 0 12px rgba(0, 170, 255, .15),
        0 0 8px rgba(0, 170, 255, .15);

    transition:
        border-color .3s ease,
        box-shadow .3s ease,
        transform .3s ease,
        background .3s ease;
}


.kontakt-form input::placeholder,
.kontakt-form textarea::placeholder {

    color: #8fa8b8;
}


.kontakt-form textarea {

    min-height: 160px;

    resize: vertical;
}


/* ==========================================================================
   17. FOKUS PÅ FORMULARFELTER
   ========================================================================== */

.kontakt-form input:focus,
.kontakt-form textarea:focus {

    outline: none;

    border-color: #00aaff;

    background:
        linear-gradient(145deg,
            rgba(0, 170, 255, .15),
            rgba(10, 20, 45, .95));

    color: white;

    box-shadow:
        0 0 8px #00aaff,
        0 0 20px rgba(0, 170, 255, .6),
        inset 0 0 15px rgba(0, 170, 255, .25);

    transform: scale(1.02);
}


/* ==========================================================================
   18. SEND-KNAP
   ========================================================================== */

.kontakt-form button {

    width: 100%;

    padding: 15px;

    margin-top: 15px;

    border: none;

    border-radius: 15px;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 20px;

    font-weight: bold;

    cursor: pointer;

    color: white;

    background:
        linear-gradient(145deg,
            #0fce2c,
            #0a8d1f);

    box-shadow:
        0 0 20px rgba(15, 206, 44, .5);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.kontakt-form button:hover {

    transform: scale(1.03);

    box-shadow:
        0 0 20px #0fce2c,
        0 0 35px rgba(15, 206, 44, .5);
}


/* ==========================================================================
   19. CERTIFIKAT
   ========================================================================== */

.certifikat-boks {

    width: 300px;
    max-width: 100%;

    padding: 25px;

    box-sizing: border-box;

    text-align: center;

    background:
        linear-gradient(145deg,
            rgba(8, 29, 58, .97),
            rgba(6, 20, 42, .99));

    border: 3px solid #3024db;

    border-radius: 20px;

    box-shadow:
        0 0 25px rgba(48, 36, 219, .4),
        inset 0 0 20px rgba(0, 170, 255, .05);
}


.certifikat-boks h2 {

    margin-top: 0;

    color: #00aaff;

    font-weight: 900;

    text-shadow:
        0 0 8px #00aaff,
        0 0 18px rgba(0, 170, 255, .4);
}


.certifikat-boks img {

    display: block;

    width: 100%;
    height: auto;

    border-radius: 10px;
}


/* ==========================================================================
   20. NAVIGATIONSKNAPPER
   ========================================================================== */

.it-navigation-knapper {

    display: flex;

    justify-content: center;
    align-items: center;

    gap: 25px;

    flex-wrap: wrap;

    width: 100%;
    max-width: 1000px;

    margin: 60px auto 40px;
}


/* ==========================================================================
   21. NAVIGATIONSKNAP - FÆLLES
   ========================================================================== */

.it-navigation-knapper .knap,
.it-navigation-knapper .knap2 {

    display: inline-flex;

    justify-content: center;
    align-items: center;

    min-width: 180px;

    padding: 15px 30px;

    border-radius: 15px;

    text-decoration: none;

    color: white;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 1.1rem;

    font-weight: 900;

    letter-spacing: 1px;

    background:
        linear-gradient(145deg,
            #081d3a,
            #06142a);

    border: 3px solid #00aaff;

    text-shadow:
        0 0 8px #00aaff;

    box-shadow:
        0 0 20px rgba(0, 170, 255, .5),
        inset 0 0 15px rgba(0, 170, 255, .15);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;
}


/* TILBAGE */

.it-navigation-knapper .knap {

    border-color: #3024db;
}


/* NÆSTE */

.it-navigation-knapper .knap2 {

    border-color: #0fce2c;

    text-shadow:
        0 0 8px #0fce2c;
}


/* ==========================================================================
   22. NAVIGATION HOVER
   ========================================================================== */

.it-navigation-knapper .knap:hover,
.it-navigation-knapper .knap2:hover {

    transform:
        translateY(-5px) scale(1.05);
}


.it-navigation-knapper .knap:hover {

    box-shadow:
        0 0 30px #3024db,
        inset 0 0 20px rgba(48, 36, 219, .4);
}


.it-navigation-knapper .knap2:hover {

    box-shadow:
        0 0 30px #0fce2c,
        inset 0 0 20px rgba(15, 206, 44, .4);
}


/* ==========================================================================
   23. BUND-LYS
   ========================================================================== */

.kontakt-side::after {

    content: "";

    display: block;

    width: 80%;
    max-width: 900px;

    height: 3px;

    margin: 50px auto 0;

    background:
        linear-gradient(90deg,
            transparent,
            #00aaff,
            #3024db,
            #0fce2c,
            transparent);

    box-shadow:
        0 0 20px #00aaff;
}


/* ==========================================================================
   24. FOOTER
   ========================================================================== */

.site-footer {

    width: 100%;

    padding: 35px 20px;

    box-sizing: border-box;

    text-align: center;

    color: white;

    background:
        radial-gradient(circle at center,
            rgba(48, 36, 219, .25),
            transparent 40%),

        linear-gradient(145deg,
            #01040a,
            #030814);

    border-top: 3px solid #00aaff;

    box-shadow:
        0 -5px 25px rgba(0, 170, 255, .4);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;
}


.site-footer p {

    margin: 0;

    font-size: 1rem;

    text-shadow:
        0 0 8px #00aaff;
}


/* ==========================================================================
   25. TABLET
   ========================================================================== */

@media (max-width: 900px) {

    .genres-layout {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 95%;

        gap: 20px;
    }
}


/* ==========================================================================
   26. MOBIL
   ========================================================================== */

@media (max-width: 768px) {

    .kontakt-side {

        padding:
            25px 15px 50px;

        background-attachment: scroll;
    }


    .kontakt-mig {

        font-size: 2rem;

        margin: 20px auto 30px;

        padding: 10px;
    }


    .cv-billede {

        width: 200px;
        height: 175px;
    }


    /* GENRER */

    .genres-layout {

        grid-template-columns: 1fr;

        width: 95%;

        gap: 20px;
    }


    .genre-panel,
    .genre-pane2 {

        width: 100%;

        padding: 12px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .genre-panel span,
    .genre-pane2 span {

        min-height: 42px;

        font-size: .95rem;
    }


    /* SOCIALE MEDIER */

    .social-boks {

        width: 90%;

        max-width: 360px;
    }


    /* SKRIV TIL MIG */

    .skriv-til-mig {

        width: 95%;

        font-size: 1.1rem;

        padding: 15px 20px;
    }


    /* KONTAKT */

    .kontakt-container {

        width: 100%;

        flex-direction: column;

        align-items: center;

        gap: 30px;
    }


    .kontakt-form {

        width: 95%;

        max-width: 450px;

        padding: 25px;
    }


    .certifikat-boks {

        width: 95%;

        max-width: 350px;
    }


    /* NAVIGATION */

    .it-navigation-knapper {

        flex-direction: column;

        gap: 18px;

        margin: 40px auto;
    }


    .it-navigation-knapper .knap,
    .it-navigation-knapper .knap2 {

        width: 90%;

        max-width: 320px;
    }
}


/* ==========================================================================
   27. MEGET LILLE MOBIL
   ========================================================================== */

@media (max-width: 480px) {

    .kontakt-side {

        padding:
            20px 10px 40px;
    }


    .kontakt-mig {

        font-size: 1.7rem;

        letter-spacing: 1px;
    }


    .cv-billede {

        width: 180px;
        height: 155px;
    }


    /* GENRER */

    .genre-overskrift {

        width: 96%;

        font-size: 1.4rem;

        padding: 12px 10px;
    }


    .genres-layout {

        width: 96%;

        gap: 18px;
    }


    .genre-panel,
    .genre-pane2 {

        padding: 8px;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 7px;
    }


    .genre-panel span,
    .genre-pane2 span {

        min-height: 42px;

        font-size: .82rem;

        padding: 7px 4px;
    }


    /* SOCIALE MEDIER */

    .social-boks {

        width: 96%;

        padding: 20px 15px;
    }


    .social-link {

        font-size: 1rem;

        gap: 10px;

        margin: 13px auto;
    }


    .social-link img {

        width: 35px;
        height: 35px;
    }


    /* SKRIV TIL MIG */

    .skriv-til-mig {

        width: 96%;

        font-size: 1rem;

        line-height: 1.5;
    }


    /* KONTAKTTEKST */

    .kontakt-tekst {

        width: 96%;

        padding: 20px 15px;

        font-size: 1rem;

        line-height: 1.5;
    }


    /* FORMULAR */

    .kontakt-form {

        width: 96%;

        padding: 20px 15px;
    }


    .kontakt-form input,
    .kontakt-form textarea {

        font-size: 16px;
    }


    /* CERTIFIKAT */

    .certifikat-boks {

        width: 96%;

        padding: 20px 15px;
    }
}


/* ==========================================================================
   SLUT
   ========================================================================== */