/*  */
/* --------------------global styles--------------------- */
body {
    padding-inline: 20px;
    margin: 0;
}
/* -----------------------------------------font---------------------------------------------- */
/* Regular */
/* Regular */
@font-face {
    font-family: 'Romie';
    src: url('../assets/RomieTrial-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Italic */
@font-face {
    font-family: 'Romie';
    src: url('../assets/RomieTrial-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

/* Medium */
@font-face {
    font-family: 'Romie';
    src: url('../assets/RomieTrial-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/* Medium Italic */
@font-face {
    font-family: 'Romie';
    src: url('../assets/RomieTrial-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
/* -------------------------------------------------STYLING Dialogs*/

/* dialog::backdrop {
    background-color: rgba(2, 2, 2, 0);
    backdrop-filter: blur(20px);
} */

/* --------------------------------------------------
   IMAGE DIALOG – HINTERGRUND
-------------------------------------------------- */

#overlay-dialog {
    width: 500px;
    max-width: calc(100vw - 2rem);
    border: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
}

.home-page #overlay-dialog {
    width: 500px;
}

#overlay-dialog img {
    display: block;

    width: 500px;
    max-width: calc(100vw - 80px);
    max-height: calc(100vh - 80px);

    height: auto;
    object-fit: contain;
}

#overlay-dialog iframe {
    position: fixed;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    border:none
}
/* --------------------------------------------------
   OVERLAY CLOSE BUTTON
-------------------------------------------------- */

#overlay-dialog .overlay-archive {
    position: fixed;
    top: 1rem;
    right: calc(20px + 1rem);
    z-index: 110;

    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    font-family: 'Romie', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;
}

body.project-overlay-open #overlay-dialog .overlay-close {
    display: none;
}

body.project-overlay-open #selected-projects-trigger {
    visibility: hidden;
}

#overlay-dialog .overlay-close {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 100;

    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    color: #FF00EA;

    cursor: pointer;
}

/* ------------about-dialog----------------- */
/* ABOUT DIALOG */

#about-dialog {
    width: min(760px, calc(100% - 40px));
    max-width: none;
    border: 0;
    background: transparent;
    padding: 0;
    color: #FF00EA;
}

/* Hintergrund Blur */
/* #about-dialog::backdrop {
    background-color: rgba(2, 2, 2, 0);
    backdrop-filter: blur(20px);
} */
 
/* --------------------------------------------------
   DIALOG BACKDROP
   About + geöffnete Homepage-Bilder
-------------------------------------------------- */

#about-dialog::backdrop,
#overlay-dialog::backdrop {
    background-color: rgba(255, 255, 255, 0.8);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* --------------------------------------------------
   CLOSE BUTTON – GLOBAL
-------------------------------------------------- */

.about-dialog-close,
#overlay-dialog .overlay-close {
    position: fixed;

    top: 20px;
    right: 20px;

    z-index: 100;

    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;

    color: #FF00EA;

    cursor: pointer;
}


/* gesamter About-Inhalt */
.about-content {
    width: 100%;
}

/* oberer Text */
.about-intro {
    max-width: 650px;
    margin: 0;
}

/* unterer Bereich */
.about-info {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    margin-top: 36px;
}

/* CV + Kontakt */
.about-cv,
.about-contact {
    margin: 0;
}

/* Schrift */

.text-content {
    color: #FF00EA;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;

    line-height: 1.35;
    letter-spacing: 0.015em;
}


/* MOBILE */
@media (max-width: 600px) {

    #about-dialog {
        width: calc(100% - 40px);
    }

    .about-info {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}
/* /* ------------about-dialog close----------------- */

/* -------------------Masonry Grid ---------------------*/
/* --------------------------------------------------
   MASONRY GRID – 8 SPALTEN
-------------------------------------------------- */

.grid-images-container {
    --column-count: 8;
}

.grid-sizer,
.grid-item {
    width: calc(100% / var(--column-count, 8));
}

.grid-item {
    padding: 6px;
    box-sizing: border-box;
}

@media (max-width: 1200px) {
    .grid-images-container {
        --column-count: 6;
    }
}
@media (max-width: 800px) {
    .grid-images-container {
        --column-count: 4;
    }
}



/* --------------------------------------------------
   INHALT INNERHALB DER MASONRY-SPALTE
-------------------------------------------------- */

.grid-content {
    display: block;
    width: 90%;
    margin-inline: auto;

    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
}


/* Bildgrößen innerhalb der Spalte */

.grid-content.small {
    width: 70%;
}

.grid-content.medium {
    width: 85%;
}

.grid-content.large {
    width: 100%;
}


/* Bilder */

.grid-content img {
    display: block;
    width: 100%;
    height: auto;

    transform-origin: center;

    /* filter NICHT animieren */
    transition: transform 0.4s ease;

    /* hilft bei Browser-Compositing/Repaint */
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* verhindert, dass Hover-Schatten an Masonry-Boxen abgeschnitten werden */
.home-page .grid-images-container,
.home-page .grid-images-container > .grid-item,
.home-page .grid-content {
    overflow: visible;
}

/* --------------------------------------------------
   HOVER
-------------------------------------------------- */

@media (hover: hover) {

    .home-page .grid-images-container > .grid-item {
        z-index: 1;
    }

    .home-page .grid-images-container > .grid-item:hover {
        z-index: 10;
    }

    /* normal */
    body:not(.dialog-open).home-page
.grid-images-container > .grid-item:hover img {
    filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.3));
}

    /* WORK pink */
 body:not(.dialog-open).home-page
.grid-item.project-anna:hover img,

body:not(.dialog-open).home-page
.grid-item.project-hoppi:hover img,

body:not(.dialog-open).home-page
.grid-item.project-treasures:hover img,

body:not(.dialog-open).home-page
.grid-item.project-mdm:hover img,

body:not(.dialog-open).home-page
.grid-item.project-mengentext:hover img {
    filter: drop-shadow(
        0 8px 12px rgba(255, 0, 234, 0.6)
    );
}
}
/* --------------nav-list---------- */
.main-nav {
    position: fixed;
    inset: 0 0 auto;
    right: 20px;
    left: 20px;
    z-index: 60;
    height: 120px;
    pointer-events: none;
    
    background: linear-gradient(180deg, #fff 0%, rgba(255, 255, 255, 0) 100%);
}

.home-page .bottom-gradient {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    height: 120px;

    z-index: 90;
    pointer-events: none;

    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.7) 55%,
        rgba(255, 255, 255, 1) 100%
    );
}
.main-nav-list{
    background: transparent;
    font-family: 'Romie', sans-serif;
    font-size: 20px;
    list-style: none;

    display: flex;
    justify-content: space-between;

    padding: 1rem;

    border: 0;
    border-radius: 0;
    pointer-events: auto;
}

.main-nav a:focus-visible {
    outline: 2px solid #FF00EA;
    outline-offset: 4px;

}

.main-nav button {
    cursor: pointer;
}

.main-nav button:focus-visible {
    outline: 2px solid #FF00EA;
    outline-offset: 4px;
}

.home-page .grid-images-container {
    width: 100%;
    margin-top: 50px;
}

/* -------text project home page-------- */
/* -------text project home page-------- */


/* -----------------------------------------
   PROJECT DESCRIPTION – MICROTYPOGRAPHY
----------------------------------------- */

.project-description {
    margin-top: 2.5px;
    margin-bottom: 0;

    padding: 0;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;

    line-height: 1.35;
    letter-spacing: 0.015em;

    text-align: center;

    opacity: 1;
    transform: translateY(0);

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


/* Anna Blume – individueller Textabstand */
.project-anna .project-description {
    margin-top: -10px;
    padding: 6px;
}

/* Projekttext verschwindet beim Hover nach unten */

/* Projekttext verschwindet beim Hover nach unten */


/* -----------------------------------------
   PROJECT DESCRIPTION – SUBTLE HOVER
----------------------------------------- */

@media (hover: hover) {

    .home-page
    .grid-images-container
    > .grid-item:hover
    .project-description {
        opacity: 0;
        transform: translateY(8px);
    }
}


/* --------------------------------------------------
   WORK FOKUSMODUS
-------------------------------------------------- */

/*
   Der WORK-Button wird pink,
   solange der Fokusmodus aktiv ist.
*/

#selected-projects-trigger {
    transition: color 0.35s ease;
}

#selected-projects-trigger.active {
    color: inherit;
}

#selected-projects-trigger:hover,
.about-dialog-close:hover {
    color: #FF00EA;
}


/* --------------------------------------------------
   OPACITY-ÜBERGANG
-------------------------------------------------- */

/*
   Alle Masonry-Items erhalten einen weichen
   Übergang beim Ein- und Ausblenden.

   Wichtig:
   Es werden keine Positionen oder Größen verändert.
   Das Masonry-Layout bleibt dadurch unverändert.
*/

.home-page .grid-images-container > .grid-item {
    transition: 
        opacity 0.5s ease;
        filter: 0.5s ease;
}


/* --------------------------------------------------
   WORK AKTIV – NORMALE BILDER
-------------------------------------------------- */

/*
   Sobald der Body die Klasse
   .selected-work-active bekommt,
   werden zunächst alle Grid-Items auf 20 % gesetzt.
*/

body.selected-work-active
.grid-images-container > .grid-item {
    opacity: 0.2;
    filter: blur(6px);
}


/* --------------------------------------------------
   WORK AKTIV – AUSGEWÄHLTE PROJEKTE
-------------------------------------------------- */

/*
   Die fünf WORK-Projekte bleiben vollständig sichtbar.
*/

body.selected-work-active
.grid-images-container > .project-anna,

body.selected-work-active
.grid-images-container > .project-hoppi,

body.selected-work-active
.grid-images-container > .project-treasures,

body.selected-work-active
.grid-images-container > .project-mdm,

body.selected-work-active
.grid-images-container > .project-mengentext {
    opacity: 1;
    filter: none;
}
/* --------------------------------------------------
   FOOTER
-------------------------------------------------- */
.home-page .site-footer {
    position: relative;
    z-index: 100;

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

    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0;

    background: transparent;
    text-align: center;

    margin-top: -50px;

}

.home-page .site-footer p {
    margin: 0;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1;

    color: #FF00EA;
    white-space: nowrap;
}
/* --------------------------------------------------
   CLOSE BUTTON – GLOBAL
-------------------------------------------------- */

.about-dialog-close,
#overlay-dialog .overlay-close {
    position: fixed;

    top: 0px;
    right: 10px;

    width: 20px;
    height: 20px;

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

    z-index: 100;

    margin: 0;
    padding: 0;

    border: 0;
    background: none;

    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;

    color: #FF00EA;

    cursor: pointer;
}
/* --------------------------------------------------
   IMAGE ROTATION
-------------------------------------------------- */

.home-page .grid-content img.rotate-right {
    rotate: 90deg;
}

.home-page .grid-content img.rotate-left {
    rotate: -90deg;
}

/* --------------------------------------------------
   BUTTON RESET
-------------------------------------------------- */

#selected-projects-trigger,
.about-dialog-close,
#overlay-dialog .overlay-close,
#overlay-dialog .overlay-archive {
    appearance: none;
    -webkit-appearance: none;

    border: 0;
    outline: 0;
    box-shadow: none;
    background: transparent;
}

#selected-projects-trigger:focus,
#selected-projects-trigger:focus-visible,
.about-dialog-close:focus,
.about-dialog-close:focus-visible,
#overlay-dialog .overlay-close:focus,
#overlay-dialog .overlay-close:focus-visible,
#overlay-dialog .overlay-archive:focus,
#overlay-dialog .overlay-archive:focus-visible {
    outline: none;
    box-shadow: none;
}

/* ------about zentriert------ */
/* ABOUT – Position wie im Figma */

.home-page .about-content {
    position: fixed;

    top: 56px;
    left: 36px;

    width: min(650px, calc(100vw - 72px));

    transform: none;

    margin: 0;
    padding: 0;
}

.about-dialog-close {
    top: 16px;
    right: 36px;
    left: auto;
    width: auto;
    height: auto;
    display: block;
    font-size: 20px;
    color: #000;
    transition: color 0.35s ease;
}

.about-brand {
    position: fixed;
    top: 16px;
    left: 36px;
    z-index: 101;

    color: #FF00EA;
    font-family: 'Romie', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    pointer-events: none;
}

body.about-dialog-open #about-trigger {
    visibility: hidden;
}

@media (max-width: 600px) {
    .home-page .about-content {
        top: 88px;
    }
}

#about-dialog[open] .about-content {
    animation: about-content-enter 0.5s ease both;
}

#about-dialog[open]::backdrop {
    animation: about-backdrop-enter 0.5s ease both;
}

#about-dialog.is-closing .about-content,
#about-dialog.is-closing .about-dialog-close {
    animation: about-content-exit 0.5s ease both;
}

#about-dialog.is-closing::backdrop {
    animation: about-backdrop-exit 0.5s ease both;
}

@keyframes about-content-enter {
    from {
        opacity: 0.2;
        filter: blur(6px);
    }

    to {
        opacity: 1;
        filter: blur(0);
    }
}

@keyframes about-backdrop-enter {
    from {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }

    to {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
}

@keyframes about-content-exit {
    from {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 0.2;
        filter: blur(6px);
    }
}

@keyframes about-backdrop-exit {
    from {
        background-color: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    to {
        background-color: rgba(255, 255, 255, 0);
        backdrop-filter: blur(0);
        -webkit-backdrop-filter: blur(0);
    }
}

.home-page .about-intro {
    width: 100%;

    margin: 0;
    padding: 0;

    text-align: left;
}
/* -----------------overlys nicht mit esc schliessen-------- */

body.dialog-open {
    overflow: hidden;
}
body.dialog-open .grid-images-container {
    pointer-events: none;
}


/* -----------------------------------------
   JULIA HOLENWEG – HOVER PINK
----------------------------------------- */

#about-trigger {
    transition: color 0.35s ease;
}

#about-trigger:hover {
    color: #FF00EA;
}


/* -----------------------------------------
   CLOSE BUTTON – TYPOGRAPHY
----------------------------------------- */

#overlay-dialog .overlay-close {
    font-family: 'Romie', sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.015em;

    width: auto;
    height: auto;

    color: #FF00EA;
    cursor: pointer;
}

/* -----------------------------------------
   CLOSE BUTTONS – UNIFIED TYPOGRAPHY
----------------------------------------- */

#overlay-dialog .overlay-close,
#overlay-dialog .overlay-archive,
.about-dialog-close {
    font-family: 'Romie', sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;

    width: auto;
    height: auto;

    color: #000;
    cursor: pointer;

    transition: color 0.35s ease;
}

/* Hover pink */
#overlay-dialog .overlay-close:hover,
#overlay-dialog .overlay-archive:hover,
.about-dialog-close:hover {
    color: #FF00EA;
}


/* -----------------------------------------
   CLOSE – POSITION LIKE SELECTED WORK
----------------------------------------- */

#overlay-dialog .overlay-close,
#overlay-dialog .overlay-archive {
    position: fixed;

    top: 16px;
    right: 36px;
    left: auto;

    margin: 0;
    padding: 0;

    z-index: 110;
}

/* About Close */
.about-dialog-close {
    position: fixed;

    top: 16px;
    right: 36px;
    left: auto;

    margin: 0;
    padding: 0;
}

/* =========================================
   ABOUT – CV & CONTACT
========================================= */

.home-page .about-info {
    display: block;
    width: 100%;
    margin-top: 30px;
}

/* CV */

.home-page .about-cv {
    display: grid;
    gap: 0;
}

.home-page .cv-row {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) auto;
    column-gap: 20px;
    align-items: start;
}

.home-page .cv-description {
    min-width: 0;
}

.home-page .cv-year {
    text-align: right;
    white-space: nowrap;
}

/* CONTACT */

.home-page .about-contact {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 20px;
    margin-top: 30px;
}

.home-page .contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-page .contact-details a {
    color: inherit;
    text-decoration: none;
}

.home-page .contact-details a:hover {
    text-decoration: underline;
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    .home-page .cv-row {
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 4px;
        margin-bottom: 14px;
    }

    .home-page .cv-label {
        grid-column: 1 / -1;
    }

    .home-page .cv-description {
        grid-column: 1;
    }

    .home-page .cv-year {
        grid-column: 2;
    }

    .home-page .about-contact {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 24px;
    }

}


/* =========================================
   ABOUT – CV & CONTACT
========================================= */

.about-dialog .about-info {
    display: block;
    width: 100%;
    margin-top: 35px;
}


/* CV */

.about-dialog .about-cv {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-dialog .cv-row {
    display: grid;

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

    column-gap: 20px;
    align-items: start;
}

.about-dialog .cv-label {
    text-align: left;
}

.about-dialog .cv-description {
    min-width: 0;
}

.about-dialog .cv-year {
    text-align: right;
    white-space: nowrap;
}


/* CONTACT */

.about-dialog .about-contact {
    display: grid;

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

    column-gap: 20px;

    margin-top: 35px;
}

.about-dialog .contact-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.about-dialog .contact-details a {
    color: inherit;
    text-decoration: none;
}

.about-dialog .contact-details a:hover {
    text-decoration: underline;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .about-dialog .about-info {
        margin-top: 25px;
    }

    .about-dialog .cv-row {
        grid-template-columns:
            minmax(0, 1fr)
            65px;

        column-gap: 12px;
        row-gap: 4px;
        margin-bottom: 12px;
    }

    .about-dialog .cv-label {
        grid-column: 1 / -1;
    }

    .about-dialog .cv-description {
        grid-column: 1;
    }

    .about-dialog .cv-year {
        grid-column: 2;
    }

    .about-dialog .about-contact {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-top: 25px;
    }

    .about-dialog .contact-details a {
        overflow-wrap: anywhere;
    }

}