:root {
    /* Schrift */
    --portfolio-font: "bely", serif;

    /* Farben */
    --label-bg: #f2f2f2;
    --label-bg-hover: #c0c0c0;

    /* Abstände */
    --folder-gap: 40px;
}

.project-content{
    margin-top: auto;
    margin-bottom: 20px;
}

.project-title {
    font-family: var(--portfolio-font);
    font-weight: 400;
    font-size: 14px;
    padding-bottom: 10px;
    margin: 0;
    width: 360px;
}

.project-back {
    
    margin-top: 10px;
}

.project-back a {
    font-family: var(--portfolio-font);
    font-weight: 400;
    font-size: 14px;
    text-decoration: none;
    color: inherit;      /* übernimmt Textfarbe vom Parent */
    cursor: pointer; 
    padding: 4px 8px;

    background: var(--label-bg);
    border-radius: 4px;
}

/*
* {
    cursor: none !important;
}


body {
    cursor: none;
}

.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;

    width: 7.5px;
    height: 7.5px;

    background: #2c2c2c; 
    border-radius: 50%;

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

    transform: translate(-50%, -50%);
}


/* Zentrierte Basisebene */
.folder-menu {
    position: fixed;
    inset: 0;

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

    pointer-events: none;
    z-index: 1;
}

/* Container */
.folder-wrapper {
    display: flex;
    gap: var(--folder-gap);

    pointer-events: auto;
}

/* Einzelner Ordner */
.folder-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    text-decoration: none;
    cursor: pointer;
}

/* Ordnerbild */
.folder-item img {
    width: 68px;
    height: auto;

    opacity: 0.3;
    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

/* Beschriftung */
.folder-label {
    margin-top: 10px;
    padding: 4px 8px;

    background: var(--label-bg);
    border-radius: 4px;

    font-family: var(--portfolio-font);
    font-size: 14px;
    color: #444;

    transition:
    background-color 0.25s ease;
}

/* Hover über Bild ODER Text */
.folder-item:hover img {
    opacity: 1;
    transform: scale(1.03);
}

.folder-item:hover .folder-label {
    background: var(--label-bg-hover);
}

.folder-item.active img {
    opacity: 1;
    transform: scale(1.02);
}

.folder-item.active .folder-label {
    background: var(--label-bg-hover);
}


.a {
    text-decoration: none;
}

p {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

#grafikContent {
    font-family: var(--portfolio-font);
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    padding-top: 20px;
    padding-right: 20px;
    gap: 80px;
    margin-left: 50%;
    text-decoration: none;
}

/* alle links ausgerichtet */
.textbox {
    display: flex;
    flex-direction: column;
    text-align: left;
}

/* rechte Box nach rechts schieben */
.box3 {
    margin-left: auto;
    text-align: right;
    
}

.box3 a {
    text-decoration: none;
    color: inherit;      /* übernimmt Textfarbe vom Parent */
    cursor: pointer; 
    padding: 4px 8px;

    background: var(--label-bg);
    border-radius: 4px;
}

#grafikContent {
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.4s ease;
}

/* sichtbar */
#grafikContent.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Startzustand aller Boxen */
.textbox {
    opacity: 0;
    transform: translateY(-30px);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

/* aktiv → Endposition */
#grafikContent.active .textbox {
    opacity: 1;
    transform: translateY(0);
}

#grafikContent.active .box1 {
    transition-delay: 0.05s;
}

#grafikContent.active .box2 {
    transition-delay: 0.25s;
}

#grafikContent.active .box3 {
    transition-delay: 0.35s;
}



.overlay-box {
    position: fixed;

    right: 0px;
    top: 126px;
    bottom: 0px;
    width: 100%;
    
    z-index: 2;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-items: flex-start;

    background-color: white;

    transform: translateY(40px);
    opacity: 0;

    transition: transform 0.6s ease, opacity 0.5s ease;

    pointer-events: none;
}

/* aktiv = fährt rein */
.overlay-box.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    margin: 0px;
    padding: 0px;
}


/* LIST CONTAINER */
.work-list {
    width: 50%;
    display: flex;
    flex-direction: column;
    padding-right: 20px;
    padding-left: 20px;
    
}

/* EINE ZEILE */
.first-work-item {
    display: flex;
    flex-direction: column;

    text-decoration: none;
}

.work-item {
    display: flex;
    flex-direction: row;


    text-decoration: none;
}

/* TEXT LINKS */
.work-title {
    font-family: var(--portfolio-font);
    font-size: 14px;
    color: #111;
    text-align: right;
    padding-bottom: 10px;
    margin-top: auto;
}

.work-line {
    flex: 1;
    height: 1px;
    background: rgba(0,0,0,0.3);
    margin-top: auto;
    margin-bottom: 13px;
    margin-left: 10px;
    margin-right: 10px;
}

.work-number {
    font-family: var(--portfolio-font);
    font-size: 14px;
    color: #111;
    margin-top: auto;
    padding-right: 0;
    padding-bottom: 10px;
    text-decoration: none;
}

/* THUMBNAIL RECHTS */
.first-work-item img {
    width: 105px;
    height: 105px;
    object-fit: cover;
    padding: 0px;
    margin: 0px;
}

.work-item img {
    width: 105px;
    height: 105px;

    object-fit: cover;
    margin-top: 10px;
    
}

.work-show {
    width: 50%;
    height: 100%;
    padding-bottom: 20px;
    padding-left: 20px;
    display: flex;
    box-sizing: border-box;

    opacity: 1;
    transition: opacity 0.2s ease;
}

.work-show img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}

.work-show video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    inset: 0;
}


/* zweite overlay-box  */
.project-overlay {
    position: fixed;

    right: 0;
    top: 126px;
    bottom: 0;
    width: 100%;

    background: white;

    z-index: 3; /* höher als overlay-box */

    transform: translateY(40);
    opacity: 0;

    transition: transform 0.6s ease, opacity 0.5s ease;
    pointer-events: none;

    display: flex;
    flex-direction: row;
}

.project-overlay.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    margin: 0px;
    padding: 0px;
}

.project-content {
    display: flex;
    flex-direction: column;
    margin-right: 20px;
    padding-left: 20px;
    width: 50%;
}

.project-image {
    width: 50%;
    height: 100%;
    padding-bottom: 20px;
    padding-left: 20px;
    display: flex;
    box-sizing: border-box;
    cursor: pointer;

    transition: opacity 0.2s ease;
}

.project-image img,
.project-image video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#projectHeroVideo {
    display: none;
}