@font-face {
	font-family: 'Arial';
	src: url(../fonts/arial-webfont.woff);
}
@font-face {
	font-family: 'Times';
	src: url(../fonts/times_new_roman-webfont.woff);
}
@font-face {
	font-family: 'Times Italic';
	src: url(../fonts/times_new_roman_italic-webfont.woff);
}
* {
    margin: 0;
    box-sizing: border-box;
}
::selection {
    background: none;
    color: #CCCCCC;
}
main {
    scroll-behavior: smooth
}
html {
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth
}
p {
    font-family: "Times";
    font-size: 10pt;
}
a {
    font-size: 10pt;
    text-decoration: none;
    color: black;
}
a:hover {
    font-family: "Times Italic";
    transition: ease-in-out 200ms;
    transition-delay: 50ms;
    color: #CCCCCC;
}
/* a:hover::before {
    content: "🔗 ";
} */
.left-logo {
    height: 25pt;
    position: fixed;
    bottom: 20px;
    left: 20px;
    transition: 450ms ease-in-out;
}
.logo-on-top {
    transform: translateY(calc(-100vh + 4.5rem));
    transition: 450ms ease-in-out;
}
.right-logo {
    height: 25pt;
    position: fixed;
    bottom: 20px;
    right: 20px;

    transition: 450ms ease-in-out;
}
.foldout-btn {
    height: 20pt;
    transition: 300ms ease-in-out;
}
.foldout-btn:hover {
    transition: 300ms ease-in-out;
}
.foldout-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    translate: -50%;
    width: 600px;
    height: 25pt;
    text-align: center;
    align-items: center;
    transition: 250ms ease-in-out;
}
.foldout-container:hover {
    transition: 250ms ease-in-out;
}
.navigation {
    height: 100%;
    width: 100%;
}
.navbar {
    opacity: 0;
    transition: 200ms ease-in-out;
    padding-top: 10vh;
    width: 100vw;
    height: 30pt;
    text-align: center;
    vertical-align: middle;
    align-content: center;
    bottom: 20px;
    box-sizing: unset;
}
.navbar:hover {
    opacity: 1;
    transition: 200ms ease-in-out;
}
nav {
    position: fixed;
    z-index: 1000;
    bottom: 27px;
}
ul {
    list-style: none;
    padding: 0;
    vertical-align: middle;
}
li {
    list-style-type: none;
    display: inline-block;
    vertical-align: middle;
    margin-left: 3rem;
    margin-right: 3rem;
    transition: 200ms ease-in-out;
}
li:hover {
    transition: 200ms ease-in-out;
}
.gallery-container {
    /*display: grid;
    grid-auto-columns: min-content;
    gap: 0;*/
    /*display: inline-flex;*/
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    white-space: nowrap;
    /*height: 90vh;
    scrollbar-width: none;*/
    height: 100vh;
    white-space: nowrap;
    position: relative;
}
.scroll-content {
    display: flex;
    overflow-x: auto; /* Enable horizontal scrolling */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* For Firefox */
    width: 100vw; /* or the width of your container */
    height: 100vh;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
    transform: translateZ(0); /* Hardware acceleration */
}
.scroll-content::-webkit-scrollbar {
    display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
}
.projektgallerie {
    scroll-snap-align: start;
    height: 100vh;
    overflow: hidden;
}
#about {
    scroll-behavior: smooth;
}
.about-block {
    scroll-snap-align: start;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-top: 3.3rem;
}
.about-h {
    align-self: end;
}
.projektkachel-link {
    display: block;
}
.projektkachel-link:hover > .project-info-container > .project-title > .open-project-btn {
    color: #CCCCCC;
    transition: color ease-in-out 200ms;
}
.projektkachel-link:hover > .project-info-container > .project-description {
    color: black !important;
    transition: color ease-in-out 200ms;
}
.aboutgrid {
    height: fit-content;
    /* margin: 20px; */
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: auto auto auto 1fr; */
    grid-auto-rows: min-content;
    gap: 1rem;
    z-index: 1000;
}
.general {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 1rem;
}
.education {
    grid-column: 2;
    grid-row: 3;
    display: grid;
    width: 100%;
    gap: 1rem;
    grid-column-gap: 1rem;
}
.project-list {
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    width: 100%;
    gap: 1rem;
    grid-column-gap: 1rem;
}
.profex {
    grid-column: 3;
    grid-row: 3;
    display: grid;
    width: 100%;
    gap: 1rem;
    grid-auto-rows: min-content;
    grid-column-gap: 1rem;
}
.vol-ex {
    grid-column: 4;
    grid-row: 3;
    display: grid;
    width: 100%;
    gap: 1rem;
    grid-auto-rows: min-content;
    grid-column-gap: 1.5rem;
}
h1 {
    width: 100%;
    text-transform: none;
    font-size: unset;
    font-family: "Times";
    font-weight: normal;
    font-size: 10pt;
}
hr {
    width: 100%;
    height: 1px;
    border-width: 0;
    color: black;
    background-color: black;

}
.scroll-content::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
}
.project-thumbnail {
    /*grid-column: auto;
    grid-row: 1;*/
    position: relative;
    width: 300px;
    height: fit-content;
    /*flex-shrink: 0;*/
    flex-shrink: 0;
    /*overflow: hidden;*/
    transition: flex-shrink 1.5s ease-in-out, opacity 0.4s ease-in-out;
    pointer-events: all;
    will-change: flex-shrink, opacity;
}
.project-info-container {
    /*width: 300px;
    height: auto;
    box-sizing: border-box;*/
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100%);
    display: flex;
    flex-direction: column;
    background: rgba(255, 255, 255, 1);
    opacity: 0;

    transition: ease-in-out 350ms;
    transition-delay: 150ms;
}
.project-info-container-shrink {
    background: rgba(255, 255, 255, 0);
    opacity: 1;
    transition: ease-in-out 350ms;
    transition-delay: 150ms;
    height: 150px;
}
.project-info-container p {
    margin: 10px;
}
.project-thumbnail:hover .project-info-container {
    opacity: 1;
}
.project-thumbnail:hover .thumbnail-img {
    opacity: 0;
}
.project-title, .project-year, .project-description {
    position: absolute;
    font-family: "Times";
}
.project-title {
    font-family: "Times";
    display: inline-block;
    transition: ease-in-out 350ms;
    transition-delay: 300ms;
    text-wrap: pretty;
}
.project-title-shrink {
    opacity: 0;
    transition: ease-in-out 350ms;
}
.project-year {
    display: inline-block;
    right: 0;
    transition: ease-in-out 200ms;
    /* transition-delay: 300ms; */
}
.project-year-shrink {
    opacity: 0;
    transition: ease-in-out 300ms;
}
.project-description {
    bottom: -5px;
    font-family: "Times Italic";
    text-wrap: wrap;
    transition: ease-in-out 300ms;
    transition-delay: 150ms;
}
.project-description-shrink {
    bottom: calc(-100% - 0.8rem);
    transition: ease-in-out 300ms;
    transition-delay: 300ms;
    line-height: 1;
    
}
.project-number {
    position: absolute;
    font-family: "Times";
    /* bottom: calc(0% - 1rem - 8px); */
    bottom: -20px;
    left: 10px;
    transition: ease-in-out 550ms;

    transition-delay: 150ms;
}
.project-number-shrink {
    /* bottom: calc(-100% - 2rem); */
    transition: ease-in-out 450ms;
    transition-delay: 150ms;
}
.project-number::before {
    content: "(";
}
.project-number::after {
    content: ")";
}
.thumbnail-img {
    width: 100%;
    height: auto;
    transition: opacity 250ms ease;
    /*translate: 0% -100%;*/
}
.thumbnail-img:hover {
    opacity: 0;
}
/* Control flex-shrink property */
.no-shrink {
    flex-shrink: 1;
}
.project-tags {
    color: #CCCCCC;
}
.project-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0;
    grid-column: 3 / span 2;
    text-align: right;
    /* justify-content: end; */
}
.project-tag {
    font-family: "Times";
    font-size: 10pt;
    color: #CCCCCC;
    text-align: right;
}

button {
    background-color: rgba(255, 255, 255, 0);
    border: none;
    color: black;
    font-family: "Times";
    font-size: 10pt;
    padding: 0;
}
button:hover {
    font-family: "Times Italic";
    cursor: pointer;
    transition: ease-in-out 200ms;
    transition-delay: 50ms;
    color: #CCCCCC;
}

/*PROJECT GALLERY VIEW*/
.vertical-gallery {
    width: 100%;
    height: fit-content;
    box-sizing: border-box;
    align-items: center;
    background-color: white;
}
.gallery-img-fullscreen {
    scroll-snap-align: start;
    height: 100vh;
    max-width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    will-change: transform;
}

/* Video styles for gallery */
video.gallery-img-fullscreen {
    width: 100%;
    height: 100vh;
    object-fit: contain;
    /* background: black; */
}
.projekttexte-overlay {
    width: 50%;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    mix-blend-mode: difference;
    z-index: 100;
    align-items: center;
}
.projekttexte-overlay p {
    font-family: "Times";
    color: white;
    height: fit-content;
    
}
.projektbeschreibung-overlay {
    width: 50%;
    position: fixed;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    grid-template-columns: repeat(3, 1fr);
    mix-blend-mode: difference;
}
.projektbeschreibung-overlay p {
    font-family: "Times";
    color: white;
    height: fit-content;
    grid-column: 1 / span 3;
    text-align: center;
}
.projekt-titel {
    text-align: left;
}
.projekt-jahr {
    text-align: right;
}
.projekt-img-number {
    text-align: center;
}
.projekt-img-number::before {
    content: "(";
}
.projekt-img-number::after {
    content: ")";
}
iframe {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    background-color: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: none;
}
.show-iframe {
    display: block;
}

.open-project-btn {
    font-family: "Times";
    margin: 0;
    padding: 0;
    text-align: left;
    transition: color ease-in-out 200ms;
    transition-delay: 50ms;
}
.open-project-btn:hover {
    font-family: "Times Italic";
    color: #CCCCCC;
}

.close-btn {
    font-family: "Times";
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    left: 1rem;
    mix-blend-mode: difference;
    padding: 0;
    z-index: 100;
}
.closebtn-link {
    color: white;
}
.closebtn-link:hover {
    font-family: "Times Italic";
    color: #CCCCCC;
}
.next-btn {
    font-family: "Times";
    position: fixed;
    top: 50%;
    translate: 0 -50%;
    right: 1rem;
    text-align: right;
    color: white;
    padding: 0;
}
.nextbtn-link {
    mix-blend-mode: difference;
    position: relative;
    z-index: 100;
}
.nextbtn-link:hover {
    font-family: "Times Italic";
    color: #CCCCCC;
}
/* .navbar:hover .logo {
    opacity: 0;
    transition: opacity 0.3s ease;
} */
 td em {
    font-style: italic;
 }
 table {
    font-family: "Times";
    font-size: 10pt;
    border-spacing: 0;
    width: 100%;
    table-layout: fixed; /* Back to fixed for better width control */
 }
 .info-table {
    display: block;
    padding: 1rem;
    padding-top: 0;
    padding-bottom: 0;
 }
 .info-table table,
 .info-table-mobile table {
    table-layout: fixed !important; /* Back to fixed for width control */
    width: 100% !important;
    border-collapse: collapse;
 }
 .info-table th,
 .info-table td,
 .info-table-mobile th,
 .info-table-mobile td {
    word-wrap: break-word; /* Allow text to wrap within cells */
    overflow-wrap: break-word;
    vertical-align: top;
    box-sizing: border-box;
    white-space: normal; /* Allow text to wrap */
 }
 /* Ensure width styles are respected for td elements */
 .info-table table td[style*="width"],
 .info-table-mobile table td[style*="width"] {
    width: inherit !important;
 }
 th {
    text-align: left;
    font-weight: normal;
    border-bottom: 1px solid black;
    padding-top: 1rem;
    padding-bottom: 1rem;
 }
 td {
    vertical-align: top;
    /* max-width: 390px; */
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem; /* Default padding-right */
 }
 .info-table-mobile {
    display: none;
 }
 .imprint-block {
    height: calc(100vh - 3.3rem);
    padding: 1rem;
    scroll-snap-align: start;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
    gap: 1rem;
    /* padding-top: 4rem; */
 }
 .imprint-block p {
    grid-column: 1 / span 2;
    /* text-indent: 10%; */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
 }
 strong {
    grid-column: 1 / span 2;
    font-weight: normal;
 }
 .imprint-block br {
    display: none;
 }
 em {
    font-style: normal;
    grid-column: 1 / span 2;
    column-count: 2;
    column-gap: 1rem;
 }
 .mobile-menu-button {
    cursor: none;
    opacity: 0;
    visibility: hidden;
    display: none;
    width: 0px;
    height: 0px;
}
.mobile-menu-button:hover {
    font-family: "Times";
    color: black;
}
.mobileview-project-list {
    display: none;
}
.overview-filtertags-container {
    position: sticky;
    bottom: 70px;
    left: 20px;
    width: fit-content;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    column-count: 2;
    transition: opacity 0.4s ease-in-out, visibility 0s 0.4s;
}
.clear-all-btn {
    color: black;
}
body.overview-active .overview-filtertags-container {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0.8s; /* Delay appearance to sync with shrink animation */
}
.overview-filtertags-container .project-tag {
    text-align: left;

}
.overview-filtertags-title {
    text-align: left;
}
@media only screen and (max-width: 1300px) {
    .project-description-shrink {
        visibility: hidden;
        opacity: 0;
    }
}
 @media only screen and (max-width: 900px) {
    .overview-filtertags-container {
        column-count: 2;
    }
    body {
        -webkit-text-size-adjust: 100%;
        -moz-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    .info-table table,
    .info-table-mobile table {
       table-layout: unset !important; /* Back to fixed for width control */
    }
    .projektgallerie {
        height: 100dvh;
    }
    .gallery-img-fullscreen {
        max-width: 100%;
        height: auto;
        scroll-snap-align: unset;
        padding-top: unset !important;
        padding-bottom: unset !important;
    }
    .desktopview-project-list {
        display: none;
    }
    .mobileview-project-list {
        display: block;
        scroll-snap-align: start;
        /* height: 100dvh !important; */
        padding-top: 3.3rem !important;
    }
    .imprint-block {
        height: auto;
        padding-bottom: 4.5rem;
        padding-top: 4rem;
    }
    .project-description-shrink,
    .project-title-shrink,
    .project-year-shrink {
        visibility: hidden;
        transition: none;  /* Remove transition for visibility */
        opacity: 0;
        transition: opacity 0s;  /* Make opacity change immediate */
    }
    .project-info-container-shrink {
        transition: none;
    }
    .project-info-container p {
        margin-bottom: 6px;
        /* margin-left: 0; */
    }
    .info-table {
        display: none;
    }
    .info-table-mobile {
        display: block;
        padding: 1rem;
        padding-top: 0;
        padding-bottom: 0;
        height: 100dvh;
    }
    td {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        padding-right: 1rem;
    }
    .project-list {
        grid-template-columns: repeat(2, 1fr);
    }
    .navbar {
        padding-top: 0;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        opacity: 1;
        box-sizing: border-box;
        width: 65px;
        bottom: 1rem;
        left: 50%;
        translate: -50%;
        /* background-color: rgba(200, 200, 200, 0.5);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px); */
        border-radius: 8px;
    }
    .mobilenavbartapped {
        padding-left: unset;
        padding-right: unset;
        opacity: 1;
        width: calc(100% - 12rem);
        transition: all 750ms cubic-bezier(0.960, 0.005, 0.350, 0.995); /* custom */
    }
    .mobile-menu-button {
        cursor: pointer;
        opacity: 1;
        visibility: visible;
        width: 100%;
        height: 100%;
        display: block;
    }
    .mobilemenubutton-hidden {
        opacity: 0;
        visibility: hidden;
        width: 0px;
        height: 0px;
        transition: all 750ms cubic-bezier(0.960, 0.005, 0.350, 0.995); /* custom */
        display: none;
    }
    ul {
        padding-top: unset;
        width: auto;
        height: auto;
    }
    .hidden {
        width: 0px;
        height: 0px;
        opacity: 0;
        /* transition: all 750ms cubic-bezier(0.960, 0.005, 0.350, 0.995); */
    }
    .ulmobiletapped {
        display: block;
        opacity: 1;
        width: auto;
        height: auto;
        transition: all 750ms cubic-bezier(0.960, 0.005, 0.350, 0.995); /* custom */
    }
    li {
        margin-left: unset;
        margin-right: unset;
        padding: 0.5rem;
        padding-top: 0;
        padding-bottom: 2px;
        position: relative;
        z-index: 1000;
    }
    .gallery-container {
        height: 80vh;
        margin-bottom: 20vh;
    }
    .about-block {
        height: auto;
        padding-top: 3.3rem;
    }
    .aboutgrid {
        padding: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 4.5rem;
        z-index: unset;
    }
    .about-h {
        grid-column: 1 / span 2;

    }
    .projekt-img-number {
        visibility: hidden;
    }
    .projekt-titel {
        white-space: nowrap;
    }
    .scroll-content {
        pointer-events: unset;
    }
    .overview-active .scroll-content {
        overflow-x: unset;
    }
    .project-number-shrink {
        left: 0;
        font-size: 9px;
    }
    #mobile-menubtn-03 {
        display: none;
    }
    .logo-on-top {
        transform: none;
        top: auto;
        bottom: 20px;
        position: fixed;
        transition: none; /* Remove transition on mobile to let JS handle it */
    }
}
.project-list a:hover .project-list-item {
    font-family: "Times Italic";
    color: #CCCCCC;
    transition: ease-in-out 200ms;
    transition-delay: 50ms;
}
.project-title-shrink:hover,
.project-year-shrink:hover,
.project-description-shrink:hover {
    color: #CCCCCC;
    font-family: "Times Italic";
    transition: color ease-in-out 200ms, font-family ease-in-out 200ms;
    transition-delay: 50ms;
}

.project-info-container-shrink:hover p {
    color: #CCCCCC;
    font-family: "Times Italic";
    transition: color ease-in-out 200ms, font-family ease-in-out 200ms;
    transition-delay: 50ms;
}

/* Ensure the hover effect works in both normal and shrink states */
.project-thumbnail:hover .project-info-container,
.project-thumbnail:hover .project-info-container-shrink {
    opacity: 1;
}

/* Add a specific transition for opacity on thumbnails to not interfere with flex-shrink */
.project-thumbnail {
    transition: flex-shrink 1.5s ease-in-out, opacity 0.4s ease-in-out;
    filter: grayscale(0);
}
.project-thumbnail.thumbnail-filtered-out {
    opacity: 0.15;
    filter: grayscale(100%);
    pointer-events: none;
}
.mobile-nav-btn {
    background: none;
    border: none;
    color: black;
    font-family: "Times";
    font-size: 10pt;
    padding: 0;
    cursor: pointer;
    text-decoration: none;
}
.mobile-nav-btn:hover {
    font-family: "Times Italic";
    transition: ease-in-out 200ms;
    transition-delay: 50ms;
    color: #CCCCCC;
}