@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Turret+Road:wght@200;300;400;500;700;800&display=swap');

:root {
    /* Basis-Hue für alle HSL-Farben */
    --hue-color: 210;
    /* Primär-Akzentfarbe (z.B. für Buttons, Links, Icons) */
    --skin-color: hsl(187, 66%, 55%);        /* ein sanftes Türkis */
    /* Sekundär-Dunkelton (z.B. für Hover-Effekte, Hintergrund von Modals) */
    --mirage-color: hsl(210, 20%, 40%);       /* gedämpftes Blaugrau */
    /* Überschriftenfarbe */
    --title-color: hsl(var(--hue-color), 15%, 20%);   /* dunkleres Blau für gute Lesbarkeit */
    /* Fließtextfarbe */
    --text-color: hsl(var(--hue-color), 15%, 40%);    /* mittleres Blaugrau */
    /* Seiten-Hintergrundfarbe */
    --body-color: hsl(var(--hue-color), 20%, 98%);    /* sehr helles Blau/Grau fast Weiß */
    /* Karten-/Box-Hintergrund */
    --box-color: hsl(var(--hue-color), 20%, 95%);     /* dezentes Hellblau/Grau */

    /* Scrollbar-Hintergrund */
    --scroll-box-color: hsl(var(--hue-color), 20%, 90%);

    /* Scrollbar-Thumb */
    --scroll-thumb-color: hsl(var(--hue-color), 20%, 80%);

    /* Typografie */
    --body-font: 'Poppins', sans-serif;
    --signature-font: 'Turret Road', sans-serif;

    /* Font-Größen (bleib gleich wie vorher) */
    --biggest-font-size: 3rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;

    /* Font-Weights */
    --font-medium: 500;
    --font-bold: 600;

    /* Abstände / Margins */
    --mb025: .25rem;
    --mb05: .5rem;
    --mb075: .75rem;
    --mb1: 1rem;
    --mb15: 1.5rem;
    --mb2: 2rem;
    --mb25: 2.5rem;
    --mb3: 3rem;

    /* Z-Index-Werte */
    --z-fixed: 10;
    --z-modal: 100;
}

@media screen and (max-width: 1024px) {
    :root {
        --biggest-font-size: 2rem;
        --h1-font-size: 1.5rem;
        --h2-font-size: 1.25rem;
        --h3-font-size: 1.125rem;
        --normal-font-size: .938rem;
        --small-font-size: .813rem;
        --smaller-font-size: .75rem;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, button, input { font-family: var(--body-font); font-size: var(--normal-font-size); }
    body { background-color: var(--body-color); color: var(--text-color); }
h1, h2, h3 { color: var(--title-color); font-weight: var(--font-bold); }
ul { list-style: none; }
a { text-decoration: none; }
img { max-width: 100%; height: auto; }
button { cursor: pointer; }
    button, input { border: none; outline: none; }
.container { max-width: 1250px; margin-left: auto; margin-right: auto; }
.grid { display: grid; }
.flex-col { display: flex; flex-direction: column;}
.flex-row { display: flex; flex-direction: row !important;}
.m-top-s {margin-top: 1rem;}.m-top-m {margin-top: 3rem;}.m-top-l {margin-top: 5rem;}
.m-bot-s {margin-bottom: 1rem;}.m-bot-m {margin-bottom: 3rem;}.m-bot-l {margin-bottom: 5rem;}
.button { 
    display: inline-flex; 
    align-items: center; 
    column-gap: .5rem; 
    background-color: var(--skin-color); 
    color: var(--title-color); 
    padding: 0.7rem 1.25rem; 
    border-radius: .25rem; 
    font-weight: var(--font-medium);
    position: relative;
    z-index: 1;
    transition: .4s;
}
    .button::after { 
        position: absolute; 
        content: ''; 
        left: 0; 
        top: 0; 
        width: 100%; 
        height: 100%; 
        background-color: var(--mirage-color); 
        opacity: 0;
        z-index: -1; 
        border-radius: .25rem;
        transition: .3s; 
    }
        .button:hover::after { opacity: 0.5; }
        .button:hover { color: white;}
.section { padding: 6.5rem 0 2rem; }
.section-title { text-align: center; font-size: var(--h1-font-size); margin-bottom: var(--mb3); }
    .section-title::before { content: attr(data-heading); display: block; font-size: var(--normal-font-size); font-weight: var(--font-medium); color: var(--skin-color); }
::-webkit-scrollbar { width: 0.6rem; background-color: var(--scroll-box-color); border-radius: .5rem; }
::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb-color); border-radius: .5rem; }

/* Sidebar */

.nav-menu { position: fixed;  width: 100vw; z-index: 10;}
.menu { display: flex; background-color: white;}
.nav-list { display: flex;  margin: -2px auto 0 auto; }
.nav-link { float: right; height: 100%; line-height: 100px; padding: 0 1rem; color: var(--title-color); font-weight: var(--font-medium); position: relative; transition: .4s; }
.nav-toggle {
    height: 32px;
    width: 36px;
    cursor: pointer;
    position: fixed;
    right: 1.5rem;
    top: 2rem;
    font-size: 1.2rem;
    border-radius: .25rem;
    background-color: var(--skin-color);
    color: var(--title-color);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}
.nav-close { font-size: 1.5rem; position: absolute; top: 1rem; right: 1.25rem; cursor: pointer; display: none; }
    .nav-link.active-link, .nav-link:hover { color: var(--skin-color); }
        .nav-link.active-link::after, .nav-link:hover::after {
            position: absolute;
            content: '';
            width: 6px;
            height: 6px;
            background-color: var(--skin-color);
            border-radius: 50%;
            bottom: 1.8rem;
            left: 0;
            right: 0;
            margin: auto;
        }

/* Main - Home */

.home { background: url('sources/home-2.jpg'); background-size: cover; background-position: top center; height: 100vh; height: 100dvh; }
.apply { background: url('sources/IMG_0759.jpeg'); background-size: cover; background-position: center center; height: 100vh; }

.home-container { position: relative; height: 100%; align-items: center; }
.home-social { position: absolute; top: 1.8rem; left: min(35%, 3rem); display: flex; flex-direction: column; z-index: var(--z-modal);}
.home-social-follow { font-weight: var(--font-medium); position: relative; }
.logo-titles { padding-left: 50px;}

.home-tooth { width: 32px; height: 50px; position: fixed; }
.svg-logo { height: 100%; fill: var(--text-color); }

.home-social-sub { color: var(--mirage-color); font-size: 12px; }
.home-img { display: none; }
.home-title { font-size: var(--biggest-font-size); }
.home-subtitle { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb075); }
.home-description { max-width: 450px; margin-bottom: var(--mb2); }
.my-info { display: flex; column-gap: 1.8rem; position: absolute; left: 0; bottom: 1.8rem; }
.info-item { display: flex; align-items: center; }
.info-title, .info-subtitle { font-size: var(--small-font-size); }
    .info-title { font-weight: var(--font-medium); color: white; }
    .info-subtitle { color: white; }
.info-icon { width: 24px; aspect-ratio: 1 / 1; fill: white; margin-right: var(--mb075); }
.icon-white { fill: white;}
.icon-color { fill: var(--text-color);}
.apply-button { padding: 0.3rem, 1rem !important;}


/* Main - Carousel */
#about-carousel { position: relative;}
.about-slide { position: absolute;top: 0;left: 0; width: 100%; display: flex;align-items: center;gap: 2rem;opacity: 0;transition: opacity 0.5s ease-in-out; }
.about-slide.active-slide { opacity: 1;z-index: 1;}
.about-img { width: 400px;aspect-ratio: 1 / 1;object-fit: cover;border-radius: .5rem;position: relative;}
.about-mail { width: 30px; height: 25px; position: absolute; top: 1.4em; left: 1.5em;}
    .about-mail:hover svg path { fill: var(--skin-color);}
.about-data { flex: 1;display: flex;flex-direction: column;margin-inline: 4rem;height: 100% !important;}
.about-description { text-align: justify; height: 100px;overflow: hidden;margin-bottom: 1rem;opacity: 0;transform: translateY(20px);transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;transition-delay: 0.2s;}
.about-slide.active-slide .about-description { opacity: 1;transform: translateY(0); }
.about-box { text-align: center;flex-basis: 1; transition: 0.33s ease;}
    .about-box:hover { background-color: var(--skin-color);}
    .about-box:hover > * { color: white; }
.about-slide.active-slide .about-info { opacity: 1;transform: translateY(0);}

.carousel-nav { transition: 0.33s ease;position: absolute;top: 50%;transform: translateY(-50%);border: none;font-size: 2rem;border-radius: 7px;padding: 0.5rem;cursor: pointer;z-index: 2;}
    .carousel-nav:hover{ background-color: var(--skin-color);}
.arrow { height: 24px;width: 24px;fill: var(--mirage-color); transition: 0.33s ease;}
    .arrow:hover { fill: white;}
.carousel-nav.prev { left: 1rem;}
.carousel-nav.next { left:  21rem;}

.about-container { grid-template-columns: repeat(2, 1fr); column-gap: 4rem; align-items: center; }
.about-heading { font-size: var(--h3-font-size); margin-bottom: var(--mb075); }
.about-info { display: grid; grid-template-columns: repeat(3, 140px); column-gap: 1.5rem; margin-bottom: var(--mb3); opacity: 0; transform: translateY(20px); transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; transition-delay: 0.33s; }
.about-box { text-align: center; border-radius: .25rem; padding: 1rem 1.25rem; background-color: var(--box-color); }
.about-icon { font-size: 1.5rem; color: var(--skin-color); margin-bottom: var(--mb075); }
.about-title { font-size: var(--small-font-size); }
.about-subtitle { font-size: var(--small-font-size); }

/* Main - Work */ 

.work-container { grid-template-columns: repeat(3, 330px); gap: 1.8rem; justify-content: center; padding-top: 1rem; }
.work-card { background-color: var(--box-color); padding: 1.25rem; border-radius: .5rem; height: 175px;}
.portfolio-item-details { display: none; }
.work-title { font-size: var(--normal-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb05); }
.work-button { color: var(--skin-color); font-size: var(--small-font-size); display: flex; align-items: center; column-gap: .25rem; cursor: pointer; }
.work-button-icon { font-size: 1rem; transition: .4s; }
    .work-button:hover .work-button-icon { transform: translateX(.25rem); }

.card-bg:nth-child(1){ background-image: url("sources/home.jpg"); background-size: cover;}
.card-bg:nth-child(3){ background-image: url("sources/img/bg_1.jpg"); background-size: cover;}

.portfolio-popup { 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background-color: rgba(0, 0, 0, .5); 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0 1rem;
    opacity: 0;
    visibility: hidden; 
    z-index: var(--z-modal); 
    transition: .4s; 
}
.portfolio-popup.open { opacity: 1; visibility: visible; }
.portfolio-popup-inner { background-color: var(--box-color); width: 900px; border-radius: .5rem; padding: 2.5rem; position: relative; }
.portfolio-popup-content { grid-template-columns: repeat(2, 1fr); align-items: center; column-gap: 3rem; }
.portfolio-popup-close { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 1.5rem; color: var(--skin-color); cursor: pointer; }
.portfolio-popup-img { border-radius: .5rem; }
.details-title { font-size: var(--h3-font-size); font-weight: var(--font-medium); margin-bottom: var(--mb1); }
.details-description { font-size: var(--small-font-size); margin-bottom: var(--mb2); }
.details-info li { margin-bottom: var(--mb075); text-transform: capitalize; font-size: var(--small-font-size); }
    .details-info li:last-child { margin-bottom: 0; }
    .details-info li span { font-weight: normal; }
    .details-info li a { text-transform: lowercase; color: var(--skin-color); }


/* Main - Contact */

.contact-content { height:  100%;}
.contact-container { grid-template-columns: 300px 340px; column-gap: 3rem; justify-content: center; align-items: center; }
.contact-info { display: grid; row-gap: 1rem; }
.contact-card { background-color: var(--box-color); padding: 1rem; border-radius: .5rem; text-align: center; }
.contact-card-icon { font-size: 1.8rem; color: var(--title-color); margin-bottom: var(--mb025); }
.contact-card-title, .contact-card-data { font-size: var(--small-font-size); }
    .contact-card-title { font-weight: var(--font-medium); }
    .contact-card-data { display: block; margin-bottom: var(--mb075); }
.contact-button { color: var(--skin-color); font-size: var(--small-font-size); display: flex; align-items: center; justify-content: center; column-gap: .25rem; cursor: pointer; }
.contact-button-icon { font-size: 1rem; transition: .4s; }
    .contact-button:hover .contact-button-icon { transform: translateX(.25rem); }
.input-container { position: relative; margin-top: 1rem; margin-bottom: 1.9rem; }
    .input-container:first-of-type { margin-top: 0px !important;}
.input { 
    width: 100%; 
    border: 2px solid var(--text-color); 
    background-color: transparent; 
    padding: 0.6rem 1.2rem; 
    color: var(--title-color); 
    font-weight: var(--font-medium); 
    font-size: var(--normal-font-size); 
    letter-spacing: .5px; 
    border-radius: .5rem;
    outline: none; 
    transition: .4s; 
}
textarea.input { padding: 0.8rem 1.2rem; min-height: 140px; border-radius: .5rem; resize: none; font-family: var(--body-font); }
    .input-container label {
        position: absolute;
        top: 50%;
        left: 1rem;
        transform: translateY(-50%);
        padding: 0 .4rem;
        color: var(--text-color);
        font-size: 1rem;
        font-weight: var(--font-medium);
        pointer-events: none;
        z-index: 15;
        transition: .5s;
    }
        
        .input-container.textarea label { top: 1rem; transform: translateY(0); }
    .input-container span { 
        position: absolute; 
        top: 0; 
        left: 25px; 
        transform: translateY(-50%); 
        font-size: var(--small-font-size); 
        padding: 0 .4rem; 
        pointer-events: none; 
        z-index: var(--z-fixed); 
        color: transparent; 
    }
        .input-container span::before, .input-container span::after { 
            content: '';
            position: absolute;
            width: 10%;
            opacity: 0;
            height: 5px;
            background-color: var(--body-color);
            top: 50%;
            transform: translateY(-50%);
            transition: .4s;
        }
            .input-container span::before { left: 50%; }
            .input-container span::after { right: 50%; }
            .input-container.focus label { top: 0; transform: translateY(-50%); left: 25px; font-size: var(--smaller-font-size); }
                .input-container.focus span::before, .input-container.focus span::after  { width: 50%; opacity: 1; }








/* Privacy Policy */
.index-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0;
    list-style: none;
}

.index-links li {
    margin: 0;
}

.index-links a {
    display: inline-block;
    padding: 0.4rem 0.75rem;
    font-size: var(--smaller-font-size);
    color: var(--text-color);
    background-color: var(--scroll-box-color); /* aus deinem :root */
    border-radius: 0.5rem;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.index-links a:hover {
    background-color: var(--mirage-color);
    color: white;
}
/* Footer */

.footer { padding-top: 2rem; }
.footer-container { grid-template-columns: repeat(3, 1fr); column-gap: 1.6rem; }
.footer-bg { background-color: var(--box-color); padding: 3rem 0 3.5rem; }
.footer-title { font-size: var(--h1-font-size); margin-bottom: var(--mb025); }    
.footer-subtitle { font-size: var(--small-font-size); }
.footer-links { display: flex; justify-self: center; column-gap: 2rem; }
    .footer-links:hover { color: var(--skin-color); }
.footer-socials { justify-self: flex-end; }
.footer-social { font-size: 1.25rem; margin-right: var(--mb15); }
    .footer-social:hover { color: var(--skin-color); }
.footer-copy { font-size: var(--smaller-font-size); text-align: center; margin-top: 4.5rem; }
    .footer-copy a { font-family: var(--signature-font); } 
        .footer-copy a:hover { color: var(--skin-color); }
    .footer-title, .footer-subtitle, .footer-links, .footer-social, .footer-copy a { color: var(--title-color); }

/* Media Queries */

@media screen and (max-width: 1408px) {
    .container { margin-left: var(--mb25); margin-right: var(--mb25); }
}

@media screen and (max-width: 1216px) {
    .about-container { column-gap: 2.5rem; }
    .about-description { padding-right: 0; }
    .work-container { grid-template-columns: repeat(2, 330px); gap: 3rem; }
}

@media screen and (max-width: 1024px) {
    .container { margin-left: var(--mb15); margin-right: var(--mb15); }
    .sidebar { width: 100%; z-index: 999; transform: translateX(-100%); }

    .home-tooth { background-color: white; width: 40px; border-radius: 11px;}
    .svg-logo { width: 100%; height: 36px; margin-top: 11px;}

    .show-sidebar { transform: translateX(0); }
    .nav-logo, .btn-share { display: none; }
    .nav-menu { height: 100%; width: 100%; transform: rotate(0deg) translateX(0); display: flex; justify-content: center; }
    .nav-list { flex-direction: column; height: 100%; justify-content: center; align-items: center; }
    .nav-link { padding: 1rem 0; line-height: 1.5; }
        .nav-link.active-link::after, .nav-link:hover::after { bottom: 0; }
    .nav-close { display: block; }
    .nav-toggle { display: flex; }

    .main { margin-left: 0; }

    .about-container { grid-template-columns: 1fr; row-gap: 2.5rem; }
    .about-img { width: 350px; }
    .about-data { text-align: center; }
    .about-info { justify-content: center; }
    .about-box { padding: 0.75rem .5rem; }
    .about-description { padding: 0 4rem; text-align: center; }

    .work-card { padding: 1rem; }
    .work-title { margin-bottom: var(--mb025); }

    .portfolio-item-details { margin-bottom: var(--mb15); }
    .details-info li { margin-bottom: var(--mb05); }
    .details-title { margin-bottom: var(--mb075); }
}

@media screen and (max-width: 768px) {
    .about-img { width: 250px; }
    .work-container { grid-template-columns: 330px; }

    .contact-container { grid-template-columns: 360px; row-gap: 3rem; }
    .footer-container { grid-template-columns: repeat(2, 1fr); row-gap: 3rem; }
    .footer-socials { justify-self: start; }
    .footer-links { flex-direction: column; row-gap: 1.5rem; }
    .footer-bg { padding: 2rem 0 3rem; }
    .footer-copy { margin-top: var(--mb3); }

    .portfolio-popup-inner { width: 420px; padding: 2.8rem 1.5rem 2.5rem; }
    .portfolio-popup-content { grid-template-columns: 1fr; row-gap: 1.6rem; }
    .details-title { font-size: var(--normal-font-size); }
    .portfolio-popup-close { top: .5rem;  }
}

@media screen and (max-width: 576px) {
    .nav-toggle { right: initial; left: 1.5rem; }
    .home {  height: initial; align-items: initial; padding: 7rem 0 2rem; }
    .home-container { row-gap: 2rem; }
    .home-img { display: block; width: 250px; justify-self: center; }
    .my-info { display: none; }

    .home-social-follow { font-size: var(--smaller-font-size); }
    .home-social-links { flex-direction: column; row-gap: .25rem; }
    .home-social-link { font-size: var(--normal-font-size); }

    .about-info { grid-template-columns: repeat(3, 1fr); }
    .about-description { padding: 0; }

    .portfolio-item-details { margin-bottom: var(--mb15); }
    .details-info li { margin-bottom: var(--mb05); }
    .details-title { margin-bottom: var(--mb075); }

    .work-container, .contact-container { grid-template-columns: 300px; }

    .footer-container { grid-template-columns: 1fr;  }
    .footer-links { justify-self: flex-start; }
}

@media screen and (max-width: 350px) {
    .container { margin-left: var(--mb1); margin-left: var(--mb1); }
    .home-img { width: 200px; }
    .home-title { font-size: var(--h1-font-size); }
    .home-subtitle { font-size: var(--normal-font-size); }
    
    .about-info { grid-template-columns: repeat(2, 1fr); row-gap: .5rem; }
    .work-container, .contact-container { grid-template-columns: 1fr; }

    .portfolio-item-details { margin-bottom: var(--mb15); }
    .details-info li { margin-bottom: var(--mb05); }
    .details-title { margin-bottom: var(--mb075); }
}