* {
    padding: 0;
    margin: 0;
}

html{
    background-color: var(--c-light);
    color: var(--c-dark); 
    font-family: Inter, Helvetica, Arial, sans-serif;
    font-size: 18px;
    text-transform: lowercase;
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* scroll-duration: 10s; */
}

@supports (font-variation-settings: normal) {
    html { font-family: 'Inter var', sans-serif; }
  }


:root {
    --c-dark: rgb(31, 31, 31);
    --c-light: #ffffff;
    --c-akzent: #df3535;
    --s-border: rgb(31, 31, 31) solid 1px;
    --s-border-no-color: solid 1px;
}

::selection {
  color: var(--c-light);
  background: var(--c-akzent);
}



/* * {
    border: red solid 1px;
} */



/**************************************************************
allgemein
**************************************************************/

h1 {
    font-weight: 300;
    font-size: 5em;
    padding-top: 38vh;
    margin-bottom: 0;
    line-height: 1em;
}

h2 {
    font-weight: 350;
    font-size: 3.3em;
    margin-block: 2em 0.3em;
}

h3 {
    font-weight: 300;
    font-size: 2em;
}

p {
    line-height: 1.4rem;
    font-weight: 400;
    margin-block: 0.8rem;
}

.badge {
    /* border: var(--s-border); */
    width: fit-content;
    /* padding-inline: 1em;
    padding-block: 0.4em; */
    /* color: #bebebe; */
    border-radius: 50px;
    font-size: smaller;
}

.container-badge {
    display: flex;
    gap: 10px;
    /* padding-bottom: 10px; */
}

.container-badge > .badge {
    margin: 0;
}

a {
    color: var(--c-dark);
    text-decoration: none;
}

.link-1 {
    border-bottom: var(--s-border);
    padding-bottom: 3px;
    width: fit-content;
}

.link-2 {
    transition: all 0.2s;
}

.link-3 {
    transition: all 0.2s;
    border: var(--s-border);
    width: fit-content;
    padding-inline: 1.2em;
    padding-block: 0.6em;
    border-radius: 50px;
}


.link-1:hover {
    color: var(--c-akzent);
    border-bottom: var(--s-border-no-color) var(--c-akzent)
}

.link-2:hover {
    color: var(--c-akzent);
}

.link-3:hover {
    color: var(--c-akzent);
    border: var(--s-border-no-color) var(--c-akzent);
}


    
    /* .content-all {
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }

    .content-scroll,
    .content-landing {
        scroll-snap-align: start;
        height: 100vh;
    } */



   


    .content-all,
    .content-header,
    .content-footer {
        max-width: 150ch;
        padding-inline: 30px;
        margin-inline: auto;
    }


    .content-landing,
    .content-header,
    .content-abschnitt,
    .content-footer,
    .container-link-landing,
    .grid.layout {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 1.3ch;
    }


@media (max-width: 1000px) {
    h1 {
        font-size: 3rem;
        padding-top: 30vh;
        padding-bottom: 0;
    }

    h2 {
        font-weight: 340;
        font-size: 2.4rem;
        margin-block: 1.5em 0.6em;
    }

    h3 {
        font-size: 1.8rem;
    }
    
    .content-all,
    .content-header,
    .content-footer {
        padding-inline: 15px;
        margin-inline: auto;
    }

    .content-landing,
    .content-header,
    .content-abschnitt,
    .content-footer,
    .container-link-landing {
        display: block;
    }

    /* .content-all {
        overflow-y: scroll;
        scroll-snap-type: y mandatory;
    }

    .content-scroll,
    .content-landing {
        scroll-snap-align: start;
        height: 100vh;
    } */

    .link-landing {
        position: relative;
        top: 20px;
    }

}

@media (max-width: 387px) {
    h1 {
        font-size: 2.3rem;
    }

    h3 {
        font-size: 1.5rem;
    }

}






/**************************************************************
header
**************************************************************/


header {
    position: fixed;
    width: 100%;
    z-index: 1;
    background-color: var(--c-light);
    padding-block: 10px;
    border-bottom: var(--s-border);
    height: 25px;
}

header a,
header p {
    margin-block: 0 0;
    /* padding-top: 3px; */
}


.content-header {
    align-items: center;
}





#icon-globe {
    height: 1rem;
    padding: 0.25rem;
    transition: all 0.3s;
    float: center;
}


#icon-globe-bg {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50px;
    float: inline-end;
    transition: all 0.3s;
}

#icon-globe-bg:hover {
    background-color: var(--c-akzent);
}

#icon-globe-bg:hover #icon-globe {
    filter: invert(1) brightness(1); 
}







@media (max-width: 1000px) {
    /* .content-header > * {
        grid-column: 1 / 6;
    } */

    .content-header {
        display: flex;
        justify-content: space-between;
    }
}



/**************************************************************
burger menu
**************************************************************/


/* <header>
<div class="content-header">
    <a href="index.html" class="link-2">vivian gölz</a>
    <div>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <img src="img/icon/icon-burger.svg" id="icon-burger" alt="Burger-Menu Icon"/>
            <img src="img/icon/icon-close.svg" id="icon-close" alt="Close Icon"/>
        </label>
        <div class="header-links">
            <div class="grid-layout">
                <a class="link-2" href="index.html/#portfolio">
                    <h2>portfolio</h2>
                </a>
                <a class="link-2" href="index.html/#mensch">
                    <h2>mensch</h2>
                </a>
                <a class="link-2" href="index.html/#kontakt">
                    <h2>kontakt</h2>
                </a>
            </div>
        </div>
    </div>
</div>
</header> */

/* * {
    border: red solid 1px;
} */

#check {
    display: none;
}

.checkbtn {
    display: flex;
}

.checkbtn img {
    width: 15px;
    height: auto;
}

.content-header img {
    z-index: 100;
}


/* .blur {
    position: fixed;
    background-color: var(--c-light);
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
} */

.header-links {
    position: absolute;
    width: 100%;
    height: 100vh;
    /* background: var(--c-light); */
    top: -1000%;
    /* left: 0; */
    display: flex;
    justify-content: start;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 100px;
    padding-bottom: 0;
    transition: all 0.7s;
}

.header-links h2 {
    margin: 0;
    padding: 0;
}


#check:checked ~ .header-links {
    top: 0;
    overflow: hidden;
}



#check:checked ~ .content-header ~ header ~ body ~ html{
    overflow: hidden;
}



#check:checked ~ .checkbtn #icon-burger {
    display: none;
}
    
#check:checked ~ .checkbtn #icon-close {
    display: block;
}
    
#check:not(:checked) ~ .checkbtn #icon-burger {
    display: block;
}
    
#check:not(:checked) ~ .checkbtn #icon-close {
    display: none;
}





/**************************************************************
landing
**************************************************************/

.content-landing {
    position: sticky;
    z-index: -1;
    top: 0px;
    height: 100vh;
    align-content: start;
}

.content-landing > * {
    grid-column: 2 / 6 ;
}

.content-landing h1 {
    position: relative;
    right: 5px;
    margin-bottom: 20px;
}

.content-landing p {
    margin-block: 30px;
}




@media (max-width: 1000px) {
    
    .content-landing h1 {
        position: static;
    }
}







.container-link-landing > div {
    width: 20ch;
    height: 2rem;
    grid-column: 2 / 6;
    margin-top: calc(38vh + 340px); 
}

.container-link-landing {
    position: absolute;
    width: 100vw;
}

.link-landing {
    transition: all 0.5s;
}



#link-landing-arrow {
    animation-name: bounce;
    display: inline-block;
    animation-timing-function: ease;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

/* #link-landing-text {
    text-decoration: underline;
} */

@keyframes bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(+5px); }
    50%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

@media (max-width: 1000px) {
    .container-link-landing > div {
        margin-top: calc(30vh + 230px); 
    } 
}



/**************************************************************
content-abschnitt
**************************************************************/

.content-abschnitt > * {
    grid-column: 2 / 6 ;
}


.content-abschnitt {
    background-color: var(--c-light);
    border-top: var(--s-border);
    padding-bottom: 70px;
    min-height: 90vh;
    align-content: start;
}


.p-1{
    grid-column: 2 / 3;
}

.p-lang {
    grid-column: 2 / 5;
}


.p-1-2{
    grid-column: 2 / 4;
}

.p-1-3{
    grid-column: 2 / 5;
}

.p-1-1{
    grid-column: 2 / 3;
}

.p-3-2{
    grid-column: 4 / 6;
}

.p-4-1{
    grid-column: 5 / 6;
}

.p-2-3{
    grid-column: 3 / 6;
}

.p-2-2{
    grid-column: 3 / 5;
}

.pagina {
    grid-column: 1 / 2;
    position: sticky;
    top: 53px;
    padding-top: 3px;
    height: fit-content;
}

.pagina-p-1 {
    grid-column: 2 / 3;
    position: relative;
    padding-bottom: 10px;
    top: 130px;
    display: flex;
    gap: 10px;
}


@media (max-width: 1000px) {
    
    .pagina {
        position: static;
        padding-top: 5px;
        margin-top: 0px;
    }

    .pagina-p-1 {
        top: 60px;
    }
}



/**************************************************************
projekt
**************************************************************/

.projekt {
    margin-top: 50px;
    padding-block: 20px;
}



.projekt img {
    width: 100%;
    height: 78vh;
    object-fit: cover;
    margin-block: 20px;
}


.projekt p {
    margin-bottom: 0;
}

@media (hover:hover) {
    .projekt{
        filter: grayscale(1);
        transition: all 0.5s;
    }

    .projekt:hover {
        filter: none;
    }
}


@media (max-width: 1000px) {
    .projekt {
        padding-block: 0px;
    }
    .projekt img {
        height: 250px;
    }

    .pagina-p-1 {
        padding-bottom: 0px;
    }

}



/* @media (min-width: 1000px) and (hover:hover) { 


    .portfolio div:hover > *{
        color: var(--c-akzent);
    }

    .portfolio .projekt {
        border-bottom: var(--s-border);
        margin-block: 0;
        padding-block: 35px 0;
    }

    .portfolio .projekt:last-child {
        border-bottom: 0;
    }

    .portfolio .projekt {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.3ch;
    }

    .portfolio .projekt img {
        grid-column: 2 / 3;
    }

    .portfolio img {
        visibility: hidden;
        transition: all 0.5s ease-in-out; 
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        position: relative;
        left: calc(1.3ch + 100%);
        top: -60px;
    }

    .portfolio div:hover img {
        visibility: visible;
        height: 300px;
        width: 100%;
        opacity: 1;
    }

} */




/**************************************************************
mensch
**************************************************************/

#portrait {
    width: 100%;
    height: 78vh;
    /* min-height: 90%; */
    object-fit: cover;
    margin-block: 80px;
    /* padding-bottom: 100px; */
    /* filter: grayscale(1); */
}


@media (max-width: 1000px) {
    
    #portrait {
        height: 70vh;
    }   
}


/**************************************************************
kontakt
**************************************************************/

.kontakt p:not(.pagina) {
    margin-top: 70px;
    margin-bottom: 0.3em;
}

.kontakt h3 {
    line-height: 1.4em;
}

.kontakt a {
    font-weight: 300;
}

/**************************************************************
impressum
**************************************************************/

footer {
    min-height: fit-content;
    border-top: var(--s-border);
}

.content-footer > * {
    font-size: smaller;
    padding: 0;
    margin: 0;
}

.content-footer {
    align-items: center;
    height: 55px;
}

.impressumhtml p {
    margin-block: 10px;
}


@media (max-width: 1000px) {
    .content-footer {
        display: flex;
        justify-content: space-between;
    }
}

.impressumhtml .p-1-2  {
    font-size: smaller;
}




/**************************************************************
portfolio
**************************************************************/

.portfoliohtml img {
    width: 100%;
    align-self: center;
    margin-block: 20px;
}

#icon-globe {
    margin-block: 0;
    width: 1rem;
}


.portfolio-cover {
    padding-block: 30px;
}

.tabelle {
    display: grid;
    margin-top: 30px;
    grid-template-columns:1fr 2fr;
}

.trennlinie {
    border-bottom: var(--s-border);
    grid-column: 1 / 3;
}

.tabelle p {
    margin-block: 0.8em 0.7em;
    line-height: 1.2em;
}

.gallery-first {
    padding-top: 100px;
}

.gallery-last {
    padding-bottom: 50px;
}







.abschnitt-portfolio-next {
    height: fit-content;
    min-height: 0;
}

.abschnitt-portfolio-next h3 {
    margin-top: 1em;
}

.portfolio-empfehlung .projekt {
    /* border-bottom: var(--s-border); */
    margin-block: 0;
    padding-block: 35px 0;
}

.portfolio-empfehlung .projekt:first-child {
    padding-block: 70px 0;
}

.portfolio-empfehlung img {
    visibility: hidden;
    transition: all 0.5s ease-in-out; 
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
    position: relative;
    left: 100%;
    top: -60px;
}

@media (min-width: 1000px) { 

    .portfolio-empfehlung .projekt {
        border-bottom: var(--s-border);
        margin-block: 0;
        padding-block: 35px 0;
    }

    .portfolio-empfehlung .projekt:last-child {
        border-bottom: 0;
    }

    .portfolio-empfehlung .projekt {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.3ch;
        grid-auto-flow: row;
    }

    .portfolio-empfehlung .projekt img {
        grid-column: 2 / 3;
    }

    .portfolio-empfehlung img {
        visibility: hidden;
        transition: all 0.5s ease-in-out; 
        width: 0;
        height: 0;
        margin: 0;
        padding: 0;
        opacity: 0;
        position: relative;
        left: calc(1.3ch + 100%);
        top: -60px;
    }

    .portfolio-empfehlung div:hover img {
        visibility: visible;
        height: 300px;
        width: 100%;
        opacity: 1;
    }


}





#hive-logoc {
    filter: opacity(0.3);
    padding-block: 30px 50px;
}

#hive-color {
    width: calc(100% - 100px);
    padding: 50px;
}



#finstagram-1 {
    object-fit: contain;
}

.finstagram h3 {
    position: relative;
    top: 20px;
}

.finstagram .p-3-2 {
    padding-block: 15px;
}

#finstagram-logo-1 {
    /* width: 80%;
    margin-inline: auto; */
    margin-block: 70px 0;
}


.finstagram-pic {
    padding-block: 50px;
}





.fontography img:not(:first-child){
    margin-block: 0 14px;
}


.the-beauty-of-equality img:not(:first-child){
    margin-block: 0 14px;
}




#cycl-animation {
    height: 300px;
    object-fit: cover;
}







#framed-figma {
    float: block-start;
}


/* .the-beauty-of-equality:root {
    --c-akzent: #a165e5;
} */

@media (min-width: 1000px) {
    #shooting-lena {
        position: relative;
        top: 250px;
    }

    #scribble {
        display: flex;
        width: 100%
    }
    #scribble > * {
        width: 50%;
    }
}



/* .content-abschnitt {
    row-gap: 1.3ch;
} */

@media (max-width: 1000px) {

    .portfoliohtml img {
        margin-block: 5px;
    }

    .under-header {
        opacity: 0;
    }


    .finstagram h3 {
    position: static;
    margin-block: 4rem 1rem;
    }

    .finstagram .p-3-2 {
        padding-top: 0;
    }

    #finstagram-logo-1 {
        margin-block: 50px 20px;
    }

}






/**************************************************************
gallery
**************************************************************/


.gallery {
    display: flex;
    flex-direction: column;
}

.gallery img {
    margin: 0;
    float:left;
}


.gallery-nebeneinander {
    display: flex;
}

.gallery-nebeneinander img {
    width: 50%;
}

@media (max-width: 1000px) {

    .gallery-nebeneinander {
        display: block;
    }

    .gallery-nebeneinander img {
        width: 100%;
    }
    
}



/**************************************************************
cursor
**************************************************************/

div.cursors div,
.cursor-fast {
    position: absolute;
    top: 300px;
    left: 300px;
    width: 15px;
    height: 15px;
    /* background-color: var(--c-akzent); */
    border: var(--s-border-no-color) var(--c-akzent);
    border-radius: 50%;
    z-index: 10;
    transform: translate(-50%, -50%);
    pointer-events: none;
    /* filter: invert(1);
    mix-blend-mode: difference; */
}


div.cursors div:first-child {
    background-color: var(--c-akzent);
}

/* @media (hover:hover) {
    * {
        cursor: none;
    }
} */

@media (hover:none) {
    .none-hover {
        display: none;
    }
}

/* 
.link-2:hover div.cursors div:first-child{
    background-color: blue;
} */







/**************************************************************
allgemein
**************************************************************/

.none {
    display: none
}


.none-mobile {
    display: none;
}

.none-desktop {
    display: block;
}

@media (max-width: 1000px) {
    .none-desktop {
        display: none;    
    }
    .none-mobile {
        display: block;
    }
}