/* 1. FONT IMPORTS */
@import url('https://fonts.googleapis.com/css?family=Nunito+Sans|Rubik');
/*
* {outline: 1px solid red !important;}
*/
/* 2. RESET & BASE */

#lang-toggle {
  /* Positioning */
    position: absolute; 
    z-index: 1000;
    bottom: 10px;
    right: 0px;
  
  /* Exact coordinates from the bottom-right corner */


  /* Look and Feel */
  cursor: pointer;
  font-family: monospace; /* Technical look */
  font-size: 70px;
  font-weight: bold;

}

/* Hover state to stop animation and show it's clickable */
#lang-toggle:hover {
  animation: none !important;
  opacity: 1;
  color: #00ff41; /* Optional: color change on hover */
}

.lang-de {
  display: none;
}
.lang-en {
  display: inline; /* or block, depending on your layout */
}

/* German active state (toggled by JS) */
body.de-active .lang-en {
  display: none;
}
body.de-active .lang-de {
  display: inline;
}

* {
    box-sizing: border-box;
}

.header {
    z-index: 1;
    text-align: center;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Rubik', sans-serif;
    width: 80%;
}

.site-title {
    font-size: 35px;
    display: block;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    /* Or a clean sans-serif */
    letter-spacing: 2px;
    color: #fff;
    text-transform: uppercase;
    /* Layered shadows create a neon tube effect */
    text-shadow:
        0 0 2px rgba(157, 0, 255, 0.8),
        0 0 5px #00ff41,
        0 0 10px rgba(0, 255, 65, 0.3);
}

.site-title span {
    display: inline-block;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.site-title span:hover {
    /* 1. Enlarge the letter */
    transform: scale(1.4) translateY(-5px);

    color: #00ff88;

    /* 3. Add a glow that matches the color change */
    text-shadow: 0 0 15px #fff,
        0 0 30px rgba(0, 255, 255, 0.3);

    /* Ensure the hovered letter is on top of neighbors */
    position: relative;
    z-index: 10;
}

.site-description {
    font-size: 18px;
    display: block;
    margin-top: 10px;
}

/* This targets the <i> tags with the class "icon" */
.header-icons .icon {
    color: #fff;
    border: 2px solid #fff;
    border-radius: 50%;
    display: inline-block;
    width: 44px;
    height: 44px;
    line-height: 40px;
    /* This centers the icon vertically inside the circle */
    font-size: 20px;
    margin: 0 8px;
    transition: all 0.3s ease;
    text-align: center;
}

/* Hover Effect: Background turns white, icon turns blue */
.header-icons .icon:hover {
    background: #fff;
    color: #1488CC;
}

.header-links .link {
    color: #fff;
    text-decoration: none;
    margin: 0 15px;
    font-size: 16px;
    transition: opacity 0.3s;
}

.header-links .link:hover {
    opacity: 0.7;
}



/* icon bilder */
@font-face {
    font-family: 'FontAwesome';
    src: url(../fonts/fontawesome-webfont.eot?v=4.7.0);
    src: url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format("embedded-opentype"), url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format("woff2"), url(../fonts/fontawesome-webfont.woff?v=4.7.0) format("woff"), url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format("truetype"), url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format("svg");
    font-weight: 400;
    font-style: normal
}

.fa {
    display: inline-block;
    font: 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-github-alt:before {
    content: "\f113"
}


.fa-linkedin:before {
    content: "\f0e1"
}

.fa-user-circle:before {
    content: "\f2bd"
}

.fa-envelope-square:before {
    content: "\f199"
}

.fa-tasks:before {
    content: "\f0ae"
}

.fa-sticky-note-o:before {
    content: "\f249"
}

.fa-user-secret:before {
    content: "\f21b"
}

.fa-file-pdf:before {
    content: "\f1c1"
}

.fa-envelope:before {
    content: "\f0e0"
}

.fa-home:before {
    content: "\f015"
}

.fa-chevron-down:before {
    content: "\f078"
}

.SidebarContainer {
    display: flex;
    flex-direction: column;
    /* Stacks them under one another */
    gap: 0px;
    /* Space between text and dot */
    align-items: center;
    /* Aligns everything to the left */
}

.SidebarItemTitle {
    font-size: 13px;
    color: #eee;
    font-weight: 500;
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important;
}

.glow-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    filter: blur(1.5px);
    /* Your blurred effect */
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
    margin-top: 15px;
    /* Extra breathing room for the dot */
}

.status-green {
    background: #00ff88;
    box-shadow: 0 0 8px #00ff88;
}

.status-red {
    background: #ff4b4b;
    box-shadow: 0 0 8px #ff4b4b;
}



/* 5. NAVIGATION ARROW */
.down {
    position: absolute;
    bottom: 30px;
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 30px;
    text-decoration: none;
}

.down i {
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-10px);
    }

    60% {
        transform: translateY(-5px);
    }
}

/* 7. MOBILE RESPONSIVENESS */
@media (min-width: 600px) {
    .site-title {
        font-size: 80px;
    }

    .site-description {
        font-size: 30px;
    }

    .header-icons .icon {
        width: 56px;
        height: 56px;
        line-height: 52px;
        font-size: 26px;
    }
}


/* The Sidebar */
.sidebar {
    width: 100px;
    height: 100vh;
    /* Full viewport height */
    position: fixed;
    left: 0;
    top: 0;
    background-color: #16181d;
    border-right: 1px solid #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 10px;
    z-index: 1000;
    /* Keeps it above the circuit canvas */
}

.sidebar ul {
    list-style: none;
    padding: 0;
    width: 100%;
}

.sidebar li {
    padding: 20px 0;
    text-align: center;
}

.sidebar a {
    color: #ffffff;
    text-decoration: none;
    font-size: 32px;
    font-weight: bold;
    transition: color 0.3s;
}

.sidebar a:hover {
    color: #00ff41;
    /* Circuit Blue */
}

/* Main Content Shift */
.content {
    margin-left: 100px;
    /* Offset for the sidebar width */
}

html,
body {
    height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Nunito Sans', sans-serif;
    background-color: #0a0b0d;
    line-height: 1.5;
    color: white;
    align-items: center;
}

/* --- Global Scroll Setup --- */
html {
    scroll-snap-type: y proximity;
    scroll-behavior: smooth;
    height: 100%;
}

body {
    overflow-x: hidden;
}

/* 3. SECTION LAYOUT (The Y-Axis Fix) */
section {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    /* This forces all content, including titles, to start at the top */
    justify-content: flex-start;
    align-items: flex-start;
    border-bottom: 1px solid #222;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    position: relative;
    /* Offset for the 100px fixed sidebar */
    padding-left: 100px;
}

/* 4. UNIFIED TITLE SYSTEM */
.title {
    display: block !important;
    width: 100%;
    /* Y-Axis: 80px from top. X-Axis: 40px from the sidebar edge */
    margin: 80px 0 40px -50px !important;

    font-size: 5rem;
    color: #ffffff;
    text-align: left;
    position: relative;
    font-family: sans-serif;
    text-transform: uppercase;
    line-height: 1;
    z-index: 10;
    pointer-events: none;
}

.title::before {
    content: attr(data-title);
    position: absolute;
    /* Placed 35px above the baseline of the main title */
    top: -35px;
    left: 0;
    font-size: 1.5rem;
    color: rgba(0, 255, 65, 0.3);
    letter-spacing: 5px;
    white-space: nowrap;
}

#About {
    position: relative;
    /* CRITICAL: Acts as an anchor for the canvas */
    width: 100%;
    height: 100vh;
    /* Or your specific height */
    overflow: hidden;
    /* Prevents cracks from "growing" into Home2 */
    /* Deep void: Darkest purple to absolute black */
    background: radial-gradient(circle, #0a0015 0%, #000000 100%) !important;
    overflow: hidden;
    z-index: 0;
}

/* The Dust Layer */
#About::after {
    content: "";
    position: absolute;
    /* We make it larger than the container so it doesn't show edges when rotating */
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    z-index: -1;
    /* Layering 3 different "particle" sizes using gradients */
    background-image:
        /* Small, faint purple dust */
        radial-gradient(circle, rgba(140, 0, 255, 0.3) 1px, transparent 1px),
        /* Tiny white sharp sparks */
        radial-gradient(circle, rgba(255, 255, 255, 0.15) 1px, transparent 1px),
        /* Larger, soft magic "blobs" */
        radial-gradient(circle, rgba(100, 0, 255, 0.05) 4px, transparent 4px);

    /* Different spacing for each layer to make it look organic */
    background-size: 50px 50px, 110px 110px, 250px 250px;
    background-position: 0 0, 25px 25px, 50px 50px;

    /* The movement */
    animation: arcaneSwirl 120s linear infinite;
    pointer-events: none;
}

/* The subtle rotation that makes it feel "magic" */
@keyframes arcaneSwirl {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* Base style for all images to be round */
.orbit-container img {
    border-radius: 50%;
    width: 10%;
    height: 10%;
    object-fit: cover;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}


.orbit-container {
    position: absolute;
    /* Changed from relative */
    /* Y-AXIS CENTERING */
    top: 58%;
    /* This moves the box up by half its own height */
    transform: translateY(-50%);
    left: 50px;
    /* Hardcoded X-position to keep it next to sidebar */

    width: 700px;
    height: 700px;
    /* Use fixed height to match width */
    display: grid;
    place-items: center;
    z-index: 5;
}

.center-image {
    position: relative;
    /* Use percentage of the container instead of fixed 650px */
    width: 92%;
    height: 92%;
    margin: 0 auto;
    overflow: hidden;
    border: 2px solid white;
    background: #ccc;
    border-radius: 50%;
    /* Fix for image disappearing: ensures container has dimensions */
    display: block;
}

.center-image img {
    position: absolute;
    /* Centering the image inside the circle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.75);

    /* Keeping your specific styling */
    width: 100% !important;
    height: 100% !important;
    object-position: 20% -30%;
    display: block;
    transition: opacity 0.5s ease-in-out;
    border-radius: 0 !important;
}

/* 1. The Base Image (The Magician) */
.img-base {
    z-index: 2;
    opacity: 1;
}

/* 2. The Hover Image (The Second Picture) */
.img-hover {
    z-index: 1;
    /* Starts behind */
    opacity: 1;
    /* Keep opacity at 1 so it's 'ready' */
}

/* 3. The Swap Logic */
/* Instead of fading the second one IN, we fade the first one OUT */
.center-image:hover .img-base {
    opacity: 0;
}



.orbit-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;

    margin-top: -50px;
    margin-left: -50px;
    transition: transform 0.5s ease;
    pointer-events: auto;
    /* The icons themselves remain interactive */
}

.orbit-item img {
    width: 100%;
    height: 100%;
    animation: counter-rotation 20s linear infinite;
}

/* 1. Make the list spin */
.orbiting-list {
    position: absolute;
    list-style: none;
    width: 100%;
    height: 100%;
    animation: orbit-rotation 20s linear infinite;
    z-index: 2;
    pointer-events: none;
    /* Adjust 20s for speed */
}

/* Keyframes to spin the container */
@keyframes orbit-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Keyframes to keep images level (Inverse of container rotation) */
@keyframes counter-rotation {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(-360deg);
    }
}

/* Optional: Stop rotation on hover */
.orbit-container:hover .orbiting-list,
.orbit-container:hover .orbit-item img {
    animation-play-state: paused;
}

.progress-wrapper {
    position: absolute;
    /* Y-AXIS CENTERING */
    top: 50%;
    /* This moves the box up by half its own height */
    transform: translateY(-50%);
    left: 1150px;
    z-index: 100;

}

.progress-box {
    height: 30px;
    /* Moved height here */
    background: #000;
    border-radius: 50px;
    border: 2px solid #1a1a1a;
    box-shadow:
        0 0 30px rgba(0, 255, 65, 0.2),
        inset 0 0 15px #000;
    width: calc(100vw - 1350px);
    padding: 2px;
    z-index: 5;
}

.progress-fill {
    height: 30px;
    /* Moved height here */
    border-radius: 40px;
    position: relative;
    background: #002200;
    border: 2px solid #1a1a1a;
    box-shadow: inset 0 0 15px #000;
    overflow: visible;
    /* Force start at 0 */
    width: 0% !important;
    transition: width 1.5s cubic-bezier(0.1, 0.5, 0.5, 1) !important;
}

/* This class will override the 0% above */
.progress-fill.animated {
    width: var(--target-width) !important;
}


/* 1. THE GLOWING CORE (Heat center) */
.progress-fill::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(10deg, #004d00, #adff2f, #9f9f00, #adff2f, #004d00);
    background-size: 200% 100%;
    filter: blur(10px);
    animation: glowMove 3s infinite linear;
    border-radius: 40px;
    z-index: 2;

}

/* 2. THE LICKING FLAMES (Turbulent layer) */
.flame-layer {
    position: absolute;
    top: -12.5%;
    /* Flames lick above the tube */
    left: 0;
    width: 00%;
    height: 125%;
    background: repeating-linear-gradient(90deg,
            transparent,
            rgba(0, 100, 35, 0.8) 25%,
            #9f6f00 30%,
            transparent 35%);
    background-size: 300% 100%;
    filter: blur(15px);
    mix-blend-mode: screen;
    animation: flameDance 10s infinite linear;
    z-index: 3;
}

/* 3. RANDOM GREEN SMOKE */
.smoke-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.smoke {
    position: absolute;
    background: rgba(0, 255, 65, 0.4);
    border-radius: 100%;
    filter: blur(7px);
    opacity: 0;
    bottom: 20px;
    width: 20px;
    /* Added size so they are visible */
    height: 20px;
    /* Added size so they are visible */
    animation: riseAndDissipate 3s infinite ease-out;
    animation-play-state: paused;
    pointer-events: none;
    /* Mouse passes through smoke */
}

/* ANIMATIONS */
/* Ensure everything starts PAUSED */
.progress-fill::before,
.flame-layer,
.smoke {
    animation-play-state: paused;
}

/* FIX 1: Proper Hover Selector */
/* We trigger the animation when the mouse enters the BOX */
.progress-fill:hover .progress-fill::before,
.progress-fill:hover .flame-layer,
.progress-fill:hover .smoke {
    animation-play-state: running;
}

.progress-fill:hover {
    box-shadow: 0 0 30px rgba(0, 255, 65, 0.4), inset 0 0 15px #000;
}

.progress-fill:hover .flame-layer {
    width: 100%;
}

@keyframes glowMove {
    0% {
        background-position: 200% 0%;
    }

    50% {
        background-position: 00% 0%;
    }
}

@keyframes fillOnLoad {
    from {
        width: 0%;
    }

    to {
        width: width;
    }

    /* Adjust your starting fill level here */
}

@keyframes flameDance {
    0% {
        background-position: 200% 0%;
        transform: skewX(-5deg) scaleY(1);
    }

    50% {
        transform: skewX(10deg) scaleY(1.3);
    }

    100% {
        background-position: 0% 0%;
        transform: skewX(-5deg) scaleY(1);
    }
}

/* 3. The Animation Logic */
@keyframes riseAndDissipate {
    0% {
        transform: translateY(500) scale(0.5);
        opacity: 0;
    }

    20% {
        opacity: 0.6;
    }

    100% {
        transform: translateY(-150px) translateX(40px) scale(8);
        opacity: 0;
    }
}

#crackCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    /* Bring it to the front */
    background: #000;
    pointer-events: none;
    /* Hardware acceleration */
    will-change: transform, filter;
    filter: blur(7px) contrast(1.2);
}


#dynamic-info-box {
    position: absolute;
    /* Y-AXIS CENTERING */
    top: 56%;
    /* This moves the box up by half its own height */
    transform: translateY(-50%);
    /* Adjust based on your UI layout */
    left: 775px;
    width: 350px;
    height: 700px;
    padding: 20px;
    border: 1px solid #00ff41;
    border-radius: 15px;
    transition: opacity 0.3s ease;
    background-color: #001500;
    /* Dark green tint, 85% opacity */
    z-index: 1000;
}

.info-box-visible {
    opacity: 0;
    visibility: visible;
}

#info-text {
    white-space: pre-line;
    /* This tells CSS to render the \n as a line break */
    z-index: 500;
    text-align: left;
    margin-top: 0px;
    margin-bottom: 0px;
    color: #ffffff;
    /* Your red color */
    transition: opacity 0.2s ease;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
}

#Work {
    background-image:
        linear-gradient(rgba(0, 255, 65, 0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.02) 1px, transparent 1px),
        linear-gradient(rgba(0, 255, 65, 0.01) 2px, transparent 2px),
        linear-gradient(90deg, rgba(0, 255, 65, 0.01) 2px, transparent 2px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}

#Work::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.1;
    pointer-events: none;
    z-index: 1;
}

.Work-wrapper {
    width: 100%;
    /* Spans full width of the 40px padded container */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.resume-wrapper {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    color: white;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* Header Alignment */
.resume-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
    width: 100%;
}

.column-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #00ff88;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Split Lines */
.divider-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    opacity: 0;
}

.line-left {
    margin-right: 20px;
    transform-origin: right;
}

.line-right {
    margin-left: 20px;
    transform-origin: left;
}

/* Body: Forcing the sides */
.resume-body {
    display: flex;
    justify-content: space-between;
    /* This pins them to the edges */
    width: 100%;
}

.content-block {
    width: 45%;
    opacity: 0;
}

/* Specific Alignment */
.left-align {
    text-align: left;
}

.right-align {
    text-align: right;
}


.date-tag {
    font-size: 0.8rem;
    color: #888;
    display: block;
    margin-bottom: 5px;
}

.work-title {
    margin: 0 0 15px 0;
    font-size: 1.2rem;
}

.task-list {
    list-style: none;
    padding: 0;
    color: #bbb;
    line-height: 1.8;
}

.left-align .task-list li::before {
    content: "— ";
    color: #00ff88;
}

.right-align .task-list li::after {
    content: " —";
    color: #00ff88;
}


/* Base state for items: visible but waiting */
.divider-line,
.content-block {
    opacity: 0;
}

/* --- THE KEYFRAMES --- */
@keyframes growLineLeft {
    0% {
        transform: scaleX(0);
        transform-origin: left;
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        transform-origin: left;
        opacity: 1;
    }
}

@keyframes growLineRight {
    0% {
        transform: scaleX(0);
        transform-origin: right;
        opacity: 0;
    }

    100% {
        transform: scaleX(1);
        transform-origin: right;
        opacity: 1;
    }
}

@keyframes flowInLeft {
    0% {
        transform: translateX(-100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes flowInRight {
    0% {
        transform: translateX(100px);
        opacity: 0;
    }

    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- THE TRIGGER --- */
/* We look for [data-animate="true"] instead of a class */
[data-animate="true"] .line-left {
    animation: growLineLeft 1s forwards ease-out;
}

[data-animate="true"] .line-right {
    animation: growLineRight 1s forwards ease-out;
}

[data-animate="true"] .left-align {
    animation: flowInLeft 1s forwards cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.4s;
}

[data-animate="true"] .right-align {
    animation: flowInRight 1s forwards cubic-bezier(0.22, 1, 0.36, 1);
    animation-delay: 0.4s;
}


/* --- Notebook Container --- */
#Work .notebook-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    /* Sidebar is fixed, 1fr takes ALL remaining space */
    margin: 0px 0px 0px -50px;
    width: 100%;
    max-width: none;
    border: 1px solid #333;
    background: rgba(22, 24, 29, 0.7);
    border-radius: 4px;
    overflow: hidden;
}

/* --- Vertical Tabs (Left Side) --- */
#Work .filter-tabs.vertical {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #333;
    background: rgba(10, 11, 13, 0.5);
}

#Work .filter-btn {
    text-align: left;
    padding: 20px;
    background: transparent;
    color: #00ff41;
    border: none;
    border-bottom: 1px solid #222;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 2rem;
    font-weight: bold;
    text-transform: uppercase;
}

#Work .filter-btn.active {
    background: rgba(0, 255, 65, 0.1);
    border-right: 3px solid #00ff41;
    color: #fff;
}

#Work

/* --- Internal Scrollable Page (Right Side) --- */
.notebook-page {
    padding: 40px;
    height: 70vh;
    overflow-y: auto;
    width: 100%;
    /* Ensure the scrolling area fills the grid column */
    box-sizing: border-box;
    display: block;
    /* Reset from any old flex/grid styles */
}

#Work

/* --- Content Container (Invisible Folder) --- */
.project-box {
    display: none !important;
    /* Hidden by default for JS */
    width: 100%;
}

#Work .project-box.active {
    display: flex !important;
    /* Use flex to allow stretching */
    flex-direction: column;
    align-items: stretch;
    /* FORCES paper-entry to hit the right wall */
    width: 100%;
    gap: 20px;
    animation: fadeIn 0.5s ease forwards;
}

.info-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 30px;
    width: 100%;
    text-align: left;
}

#Work

/* --- The Paper Entry Card --- */
.paper-entry {
    position: relative;
    width: 100%;
    /* Fills the 1fr column width */
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid #333;
    border-left: 4px solid #00ff41;
    padding: 25px;
    margin-bottom: 5px;
    /* Minimal gap as requested */
    transition: all 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
}

#Work .paper-entry:hover {
    background: rgba(0, 255, 65, 0.08);
    transform: translateX(10px);
    border-color: #00ff41;
}

#Work

/* Invisible Link Layer */
.stretched-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

#Work

/* Text Content */
.paper-entry h3 {
    color: #ffffff;
    margin: 0 0 10px 0;
    pointer-events: none;
    font-size: 1.4rem;
    text-align: justify;
}

#Work .paper-entry p {
    color: #b0b0b0;
    margin: 0 0 10px 0;
    pointer-events: none;
    line-height: 1.5;
}

#Work .ieee-label {
    color: #00ff41;
    font-size: 0.8rem;
    pointer-events: none;
    font-family: monospace;
}

#Work

/* --- Scrollbar Styling --- */
.notebook-page::-webkit-scrollbar {
    width: 6px;
}

.notebook-page::-webkit-scrollbar-track {
    background: #0a0b0d;
}

.notebook-page::-webkit-scrollbar-thumb {
    background: #00ff41;
    border-radius: 10px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#Work .notebook-container {
    position: relative;
    z-index: 10;
}

/* 1. THE MOUSE PULSE (White) */
.radar-pulse {
    position: fixed;
    background: transparent;
    border: 2px solid #ffffff;
    /* White initiator */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 15;
    animation: hull-expand 1.5s linear forwards;
}

/* 2. THE RETURN PULSES (Green) */
.return-pulse {
    position: fixed;
    background: transparent;
    border: 1px solid #00ff41;
    /* Green reflections */
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 5;
    animation: hull-expand 1.5s linear forwards;
}

@keyframes hull-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        width: 2000px;
        /* Radius is 1000px */
        height: 2000px;
        opacity: 0;
    }
}

/* Ghost Targets */
.ghost-target {
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00ff41;
    border-radius: 50%;
    opacity: 0.15;
    z-index: 1;
    transition: opacity 0.1s;
}

/* Flare Up (Green) */
.ghost-target.active-ping {
    opacity: 1 !important;
    transform: scale(2.5);
    box-shadow: 0 0 10px #00ff41;
}

.active-ping {
    border-color: rgba(103, 163, 118, 0.6) !important;
    background: rgba(0, 255, 65, 0.1) !important;
}


.thumbnail-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.thumbnail-row img {
    width: 240px;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid transparent;
}

.thumbnail-row img:hover {
    border-color: #00ff41;
    /* Matches your radar theme */
    transform: scale(1.15);
}

.details-area {
    padding: 20px;
    text-align: center;
    min-height: 150px;
    background: rgba(255, 255, 255, 0.05);
}

/* Ensure the parent doesn't force centering on the children */
.details-area {
    text-align: left;
    width: 100%;
}

/* 1. Hide project info by default */
.info-content {
    display: none !important;
}

/* 2. Your specific Side-by-Side Layout (Only when active) */
.info-content.active {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start;
    gap: 50px;
    width: 100%;
    max-width: 2000px;
    margin: -100px 0px;
    padding: 100px 0px;
}

/* Your image settings */
.detail-image {
    width: 300px;
    min-width: 300px;
    height: auto !important;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 65, 0.3);
    /* Essential for the hover to be smooth */
    transition: transform 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
}

.detail-image:hover {
    border-color: #00ff41;
    transform: scale(1.4);
    /* Ensures the image stays on top of text when it grows */
    z-index: 10;
    position: relative;
}

/* Your text settings */
.text-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.text-content h1 {
    margin: 0 0 0px 0;
    color: #00ff88;
    font-family: 'Courier New', monospace;
    text-align: justify;
}

.text-content p {
    margin: 0 0 0px 0;
    line-height: 1.6;
    color: #ccc;
    /* Ensures text is visible on dark bg */
}

/* Your Tag Styling */
.tag-container {
    display: flex;
    flex-wrap: wrap;
    margin: 0px 0px 0px 0;
    gap: 10px;
    justify-content: flex-start !important;
}

.tag {
    background: rgba(0, 255, 65, 0.1);
    color: #00ff41;
    border: 1px solid rgba(0, 255, 65, 0.3);
    padding: 4px 12px;
    border-radius: 15px;
    /* Pill shape */
    font-size: 0.75rem;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tag:hover {
    background: rgba(0, 255, 65, 0.2);
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.2);
    transform: translateY(-2px);
}

/* 1. Target the UL specifically inside your text-content */
.text-content ul {
    list-style: none !important;
    /* Force remove default dots */
    padding: 0 !important;
    /* Remove browser default padding */
    margin: 10px 0px !important;
    /* Add vertical space around the list */
}


.text-content ol {
    margin: 10px !important;
    /* Add vertical space around the list */
}

/* 2. Style the List Items */
.text-content ul li {
    position: relative;
    padding-left: 25px;
    /* Space for the custom bullet */
    margin-bottom: 10px;
    color: #ccc;
    /* Light grey text */
    font-size: 0.95rem;
    line-height: 1.4;
}

/* 3. Add the Custom "Radar" Bullet */
.text-content ul li::before {
    content: "•";
    color: #00ff88;
    font-weight: bold;
    position: absolute; 
    left: 0;  /* Pins the bullet to the far left */
    top: 0;   /* Aligns it with the top of the text */
    text-shadow: 0 0 5px #00ff88;
}

.timeline-container {
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
}

.timeline-nav {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 20px;
    padding: 0 20px;
}

.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0, 255, 65, 0.2);
    z-index: 1;
}

.timeline-dot {
    position: relative;
    z-index: 2;
    width: 15px;
    height: 15px;
    background: #000;
    border: 2px solid #00ff41;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.timeline-dot.active {
    background: #00ff41;
    box-shadow: 0 0 15px #00ff41;
}

.dot-label {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #00ff41;
    font-family: 'Courier New', monospace;
    font-size: 1rem;
    text-transform: uppercase;
    opacity: 0.6;
}

.timeline-dot.active .dot-label {
    opacity: 1;
    font-weight: bold;
}

/* Content Hiding Logic */
.milestone-section {
    display: none;
}

.milestone-section.active {
    display: flex;
    /* Side-by-side flex layout */
    animation: slideIn 1s ease forwards;
    margin: -50px -80px;
    padding: 100px 0px;
    gap: 50px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 1. Remove the numbers from the sub-list */
ol li ol {
    list-style-type: none;
}

/* 2. Style the custom markers */
.plus::marker {
    content: "+ ";
    color: #ff4141;
    font-weight: bold;
}

.minus::marker {
    content: "− ";
    /* Using a proper minus sign */
    color: #419cff;
    font-weight: bold;
}

.text-content h1,
.text-content p,
.text-content h3 {
    text-align: justify;
    /* Headers usually look better left-aligned */
    margin-top: 0px;
    margin-bottom: 10px;
}

/* --- THE SECTION WRAPPER --- */
#Projects {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #000;
    overflow: hidden;
}

.poe-tree-wrapper {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    overflow: hidden;
}

/* Subtle Nebula - Deep and dark */
.poe-tree-wrapper::before {
    content: "";
    grid-area: 1 / 1;
    width: 150%;
    height: 150%;
    background:
        radial-gradient(circle at 30% 30%, rgba(229, 193, 126, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 70% 70%, rgba(41, 52, 98, 0.05) 0%, transparent 60%);
    filter: blur(100px);
    animation: nebulaDrift 60s ease-in-out infinite alternate;
    z-index: 1;
}

#nebulaCanvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Background layer */
    display: block;
    pointer-events: auto;
    /* IMPORTANT: The canvas must catch the mouse */
}

/* 3. THE QUASAR CORE (The intense central pulse) */
.core-glow {
    grid-area: 1 / 1;
    width: 900px;
    height: 900px;
    background: radial-gradient(circle,
            rgba(0, 255, 65, 0.25) 0%,
            rgba(140, 0, 255, 0.05) 40%,
            transparent 75%);
    mix-blend-mode: screen;
    animation: corePulse 4s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: 3;
}

/* Layer 4: Fixed & Centered Lens Flare */
.lens-flare {
    grid-area: 1 / 1;
    position: absolute;
    /* Ensures it ignores relative flow and centers on the parent */
    left: 50%;
    top: 50%;
    width: 200vw;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(0, 255, 136, 0.4) 45%,
            #ffffff 50%,
            rgba(0, 255, 136, 0.4) 55%,
            transparent 100%);

    /* translate(-50%, -50%) centers the element exactly on its own middle point */
    transform: translate(-50%, -50%) rotate(-15deg);

    filter: blur(2px);
    opacity: 0.8;
    box-shadow: 0 0 20px rgba(0, 255, 65, 0.5);
    animation: flareGlint 10s ease-in-out infinite;
    z-index: 4;
    pointer-events: none;
}

/* Update the animation to preserve the translation, otherwise it will pop out of center */
@keyframes flareGlint {

    0%,
    100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) rotate(-15deg) scaleX(0.8);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(-15deg) scaleX(1.1);
    }
}

#skillTree {
    grid-area: 1 / 1;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

@keyframes nebulaDrift {
    from {
        transform: scale(1) rotate(0deg);
    }

    to {
        transform: scale(1.1) rotate(5deg);
    }
}

/* --- THE SKILL TREE (Ensuring it stays centered) --- */
#skillTree {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    pointer-events: none;
}

/* 2. Make sure the actual nodes/buttons inside REMAIN clickable */
#skillTree .node,
#skillTree button,
#skillTree a {
    pointer-events: auto;
}

/* --- THE NODES --- */
.node {
    position: absolute;
    background: #0a0a0a;
    /* BORDER FIXED TO GOLD */
    border: 2px solid #00ff41;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    cursor: not-allowed;
    z-index: 10;
    pointer-events: auto;
    overflow: hidden;
    aspect-ratio: 1 / 1;

    background-position: center;
    background-repeat: repeat;
    background-size: cover;
    background-clip: padding-box;

    /* Deep recessed shadow for the icon */
    box-shadow: inset 0 0 15px #000, 0 0 10px rgba(0, 0, 0, 0.8);

    /* Grayscale logic remains for the icon itself */
    filter: grayscale(100%) brightness(30%);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Unified Node Sizing */
.node[data-tier="0"],
.node[data-tier="1"],
.node[data-tier="2"],
.node[data-tier="3"] {
    width: 90px;
    height: 90px;
}

/* AVAILABLE STATE */
.node.available {
    filter: grayscale(100%) brightness(80%);
    /* Borders stay gold, icons stay grey until hover */
    cursor: pointer;
}

.node.available:hover {
    filter: grayscale(0%) brightness(110%);
    box-shadow: inset 0 0 10px #000, 0 0 30px rgba(0, 255, 136, 0.5);
    transform: translate(-50%, -50%) scale(1.1) rotate(5deg);
}

/* ACTIVE STATE */
.node.active {
    filter: grayscale(0%) brightness(120%);
    /* Stronger shadow for active nodes */
    box-shadow:
        inset 0 0 12px rgba(0, 0, 0, 0.9),
        0 0 35px rgba(0, 255, 65, 0.7),
        0 0 60px rgba(229, 193, 126, 0.2);
    animation: nodePulse 3s ease-in-out infinite;
}

@keyframes nodePulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

/* Logic for text/image display */
.node[style*="background-image"] span {
    display: none;
}

.node * {
    pointer-events: none;
}

.node span {
    display: block;
    width: 85%;
    line-height: 1.1;
    font-size: 11px;
    color: #00ff88;
    text-shadow: 2px 2px 4px #000;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* --- THE LINES --- */
#line-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tree-line {
    position: absolute;
    height: 1px;
    background: rgba(0, 255, 65, 0.3);
    transform-origin: 0 50%;
    z-index: 1;
}

.tree-line.active-path {
    background: linear-gradient(10deg, #004d00, #adff2f, #9f9f00, #adff2f, #004d00);
    background-size: 200% 100%;
    height: 3px;
    opacity: 1;
    box-shadow: 0 0 15px rgba(0, 255, 65, 0.8);
    animation: lightningFlow 2s linear infinite;
}

@keyframes lightningFlow {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: 0% 0;
    }
}

/* --- THE TOOLBOX (TOOLTIP) --- */
.node-tooltip {
    position: fixed;
    width: 300px;
    background: rgba(5, 5, 5, 0.95);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 65, 0.3);
    border-top: 4px solid #00ff41;
    padding: 20px;
    display: none;
    z-index: 9999;
    color: #fff;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 1);
    pointer-events: none;
    box-sizing: border-box;
    line-height: 0;
    /* This kills the height of those ghost spaces */
    display: block;
    /* Change flex to block for this specific trick */
    /* --- THE FIX FOR LINE BREAKS --- */
    white-space: pre-line;
    /* Respects \n and Enter keys */
    word-break: normal;
    overflow-wrap: break-word;

    hyphens: auto !important;
    -webkit-hyphens: auto !important;
}

/* THE FIX: Force any image inside the tooltip to stay within bounds */
.node-tooltip img {
    max-width: 100%;
    /* Never wider than the 300px (minus padding) */
    height: auto;
    /* Maintain aspect ratio */
    display: block;
    /* Prevents bottom alignment gaps */
    margin: 10px auto;
    /* Centers the image and adds vertical spacing */
    border-radius: 4px;
    /* Optional: rounds image corners to match theme */
    border: 1px solid rgba(0, 255, 65, 0.2);
    /* Optional: slight green border */
}

.node-tooltip h3 {
    margin: 0;
    color: #00ff41;
    font-size: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;

}

#ttDesc {
    color: #bdbdbd;
    font-size: 14px;
    line-height: 1.6;
    font-style: italic;
    text-align: center;
}

.divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.3), transparent);
    margin: 12px 0;
}

.node span.lang-de {
    display: none;
}
.node span.lang-en {
    display: inline;
}

/* Wenn du auf Deutsch umschaltest (per Klasse am Body) */
body.de-active .node span.lang-de {
    display: inline;
}
body.de-active .node span.lang-en {
    display: none;
}