:root {
    --project-page-main: #300108;
    --project-page-second: #851e3b;
    --project-page-third: #c54254;
    --project-page-fourth: #ff684d;
    /* spürbar poppiger */
    --project-page-shadow: #230408;
}

.projects-page {
    position: absolute;
    color: var(--project-page-main);

    top: 0;
    left: 0;
    /* width: 100%; */

    background-image: radial-gradient(var(--project-page-second), var(--project-page-third));
    z-index: 1;
    mask-image: url('#maskProjects');
    -webkit-mask-image: url('#maskProjects');
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
    mask-mode: alpha;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-mode: alpha;
    will-change: opacity;
    text-shadow: 0 0 2ex var(--project-page-shadow), 0 0 2px var(--project-page-shadow);
    /* Performance hint */
}

.projects-page .container {
    max-width: 1200px;
    min-height: 100%;
    margin: 0 auto;
    display: grid;
    opacity: 0.7;
    grid-auto-columns: 1fr;
    grid-template-rows: auto 1fr auto;

    grid-template-areas:
        "projects-header projects-header projects-header projects-header projects-header"
        "projects-page-main projects-page-main projects-page-main projects-page-main projects-page-main"


        "footer footer footer footer footer";
    grid-gap: 10px;


    padding: 10px;

}

.projects-page header {
    grid-area: projects-header;
    font-family: "Kanit", sans-serif;
}

.projects-page-main {
    grid-area: projects-page-main;
    margin: 5rem;

}



.projects-page a {
    color: var(--project-page-main);
}

.projects-page .name {
    text-shadow: 1px 1px 1px var(--project-page-second),
        1px 2px 1px var(--project-page-second),
        1px 3px 1px var(--project-page-second),
        1px 4px 1px var(--project-page-second),
        1px 5px 1px var(--project-page-second),
        1px 6px 1px var(--project-page-second),
        1px 7px 1px var(--project-page-second),
        1px 8px 1px var(--project-page-second),
        1px 9px 1px var(--project-page-second),
        1px 10px 1px var(--project-page-second),
        1px 18px 6px var(--project-page-shadow),
        1px 22px 10px var(--project-page-shadow),
        1px 25px 35px var(--project-page-shadow),
        1px 30px 60px var(--project-page-shadow);
}

#hamburger-icon-projects>span {
    width: 100%;
    height: 0.4rem;
    border-radius: 0.2rem;
    background-color: var(--project-page-main);

    box-shadow: 0.05rem 0.2rem var(--project-page-second);
}

.projects-page i {
    color: var(--project-page-main);
}



.projects-page a::after {
    background-color: var(--project-page-main);
}

.projects-page a::before {
    background-color: var(--project-page-main);
}


/* Grid: 3×? → 2×? → 1×? */
.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.1rem;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.retro-card {
    color: var(--project-page-main);
    flex: 1 1 calc(33.333% - 1.1rem);
    max-width: calc(33.333% - 1.1rem);
    position: relative;
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.22));
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.45),
        inset 0 0 0 1px rgba(255, 255, 255, 0.04);
    color: var(--project-page-fourth);
    overflow: hidden;
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

/* CRT scanlines + corner glow */
.retro-card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(to bottom,
            rgba(255, 255, 255, 0.045) 0px,
            rgba(255, 255, 255, 0.045) 1px,
            transparent 2px,
            transparent 4px);
    mix-blend-mode: soft-light;
    opacity: .35;
}

.retro-card::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(120% 100% at 110% -10%, color-mix(in srgb, var(--project-page-fourth) 18%, transparent), transparent 50%),
        radial-gradient(160% 130% at -10% 110%, rgba(255, 255, 255, 0.06), transparent 50%);
    opacity: .6;
}

/* Top bar with dots (retro window) */
.retro-head {
    color: var(--project-page-main);
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .7rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), rgba(255, 255, 255, 0.04));
}

.retro-head .dot {

    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--project-page-shadow) 65%, var(--project-page-fourth));
    /* box-shadow: 0 0 6px color-mix(in srgb, var(--project-page-fourth) 55%, transparent); */
}

.retro-head .label {
    margin-left: auto;
    font-size: .72rem;
    letter-spacing: .08em;
    opacity: .85;
}

/* Media placeholder (drop an <img> rein, wenn du hast) */
.retro-media {
    aspect-ratio: 16/10;
    background: rgba(0, 0, 0, .25);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.retro-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Title & copy */
.retro-title {
    margin: .9rem .9rem .3rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--project-page-third);
    text-shadow: 0 1px 3px var(--text-shadow);
}

.retro-desc {
    margin: 0 .9rem;
    font-size: .94rem;
    line-height: 1.55;
    color: var(--project-page-main);
}

/* Tags */
.retro-tags {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: .8rem .9rem 1rem;
}

.retro-tags span {
    font-size: .75rem;
    padding: .18rem .55rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--project-page-third);
    color: var(--project-page-main);
}

/* Hover neon lift */
.retro-card:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--project-page-fourth) 35%, transparent);
    box-shadow:
        0 22px 44px rgba(0, 0, 0, 0.55),
        0 0 0 1px color-mix(in srgb, var(--project-page-fourth) 30%, transparent);
}

/* Focus-visible ring (a11y) */
.retro-card:focus-within {
    outline: 2px solid color-mix(in srgb, var(--project-page-fourth) 55%, transparent);
    outline-offset: 2px;
}

/* Responsiv: 2 Spalten / 1 Spalte */
@media (max-width: 1100px) {
    .retro-card {
        flex: 1 1 calc(50% - 1.1rem);
        max-width: calc(50% - 1.1rem);
    }

    .projects-page-main {
        margin: 2rem;
    }
}

@media (max-width: 700px) {
    .retro-card {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .projects-page-main {
        margin: 1rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .retro-card,
    .retro-card:hover {
        transition: none;
        transform: none;
    }
}