:root {
    /* Farben */
    --accent-color: #006999;
    --accent-light: #4dbef3;
    --accent-lighter: #5DCEFF;
    --accent-lightest: #98dcfc;
    --primary-color: #1B1C1F;
    --secondary-color: #101113;
    --text-color: #f5f5f5;
    --secondary-text-color: #7f8082;
    --hover-color: #0999dc82;
    --primtive-color: #ffffff;

    /* Background Gradients */
    --bg-gradient-main: linear-gradient(90deg, rgb(19, 19, 19) 0%, rgb(19, 28, 32) 100%);
    --bg-gradient-sections: linear-gradient(90deg, rgb(16, 24, 27) 0%, rgb(22, 22, 22) 100%);

    /* Spezifische Farben */
    --bg-dark-1: rgb(19, 19, 19);
    --bg-dark-2: rgb(19, 28, 32);
    --bg-section-1: rgb(16, 24, 27);
    --bg-section-2: rgb(22, 22, 22);
    --bg-card: rgba(16, 17, 19, 0.5);
    --bg-skill-card: rgba(20, 22, 24, 0.6);
    --bg-skill-list: #141618;
    --bg-dot: #404040;
    --bg-nav: rgba(27, 28, 31, 0.4);

    /* Gradient Helper Colors */
    --gradient-accent: linear-gradient(to right, var(--accent-color), var(--accent-light));
    --gradient-button: linear-gradient(to right, rgba(0, 105, 153, 0.5), rgba(77, 190, 243, 0.5));
    --gradient-button-hover: linear-gradient(to right, rgba(10, 139, 201, 0.6), rgba(109, 212, 255, 0.6));

    /* Opacity Variations - Whites */
    --white-02: rgba(255, 255, 255, 0.02);
    --white-03: rgba(255, 255, 255, 0.03);
    --white-05: rgba(255, 255, 255, 0.05);
    --white-08: rgba(255, 255, 255, 0.08);
    --white-10: rgba(255, 255, 255, 0.1);
    --white-15: rgba(255, 255, 255, 0.15);
    --white-30: rgba(255, 255, 255, 0.3);

    /* Opacity Variations - Blacks */
    --black-10: rgba(0, 0, 0, 0.1);
    --black-20: rgba(0, 0, 0, 0.2);
    --black-25: rgba(0, 0, 0, 0.25);
    --black-30: rgba(0, 0, 0, 0.3);
    --black-40: rgba(0, 0, 0, 0.4);
    --black-50: rgba(0, 0, 0, 0.5);
    --black-58: rgba(0, 0, 0, 0.58);
    --black-60: rgba(0, 0, 0, 0.6);
    --black-70: rgba(0, 0, 0, 0.7);

    /* Opacity Variations - Accent */
    --accent-10: rgba(77, 190, 243, 0.1);
    --accent-15: rgba(77, 190, 243, 0.15);
    --accent-20: rgba(77, 190, 243, 0.2);
    --accent-30: rgba(77, 190, 243, 0.3);
    --accent-40: rgba(77, 190, 243, 0.4);
    --accent-60: rgba(77, 190, 243, 0.6);
    --accent-dark-15: rgba(0, 105, 153, 0.15);
    --accent-dark-25: rgba(0, 105, 153, 0.25);

    /* Text Opacity */
    --text-85: rgba(245, 245, 245, 0.85);
    --text-100: rgba(245, 245, 245, 1);

    /* Universelle Spacing-Variablen */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-2xl: 80px;
    --spacing-3xl: 100px;

    /* Universelle Border-Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 50px;

    /* Universelle Schriftgrößen */
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-md: 1.15rem;
    --font-size-lg: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-2xl: 2.5rem;
    --font-size-3xl: 4rem;

    /* Universelle Font-Weights */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Universelle Schatten */
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.5);

    /* Universelle Übergänge */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(10px);

    /* Marquee Variables */
    --marquee-width: 100%;
    --marquee-height: 55vh;
    --marquee-elements-displayed: 7;
    --marquee-element-width: calc(var(--marquee-width) / var(--marquee-elements-displayed));
    --marquee-animation-duration: calc(var(--marquee-elements) * 2s);
}

* {
    margin: 0;
    padding: 0;
    cursor: url('cursor.svg') 0 0, auto;
}

/* Text Selection Highlighting */
::selection {
    background-color: var(--accent-light);
    color: var(--primary-color);
}

/* Custom Pointer Cursor for interactive elements */
a,
button,
input[type="submit"],
input[type="button"],
.card-button,
.hamburger-menu,
.nav-pills a,
.mobile-nav a,
.timeline-header,
.toggle-btn,
[role="button"],
[onclick] {
    cursor: url('Cursorpointer.svg') 0 0, pointer !important;
}

/* Ensure all children of pointer elements also have the pointer cursor */
a *,
button *,
.card-button *,
.nav-pills a *,
.hamburger-menu *,
.mobile-nav a *,
.timeline-header *,
.toggle-btn *,
[role="button"] *,
[onclick] * {
    cursor: url('Cursorpointer.svg') 0 0, pointer !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--primary-color);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent-color) 100%);
    border-radius: 6px;
    border: 2px solid var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-lighter) 0%, var(--hover-color) 100%);
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) var(--primary-color);
}

html {
    font-family: 'Segoe UI', Tahoma, Verdana;
    font-size: 14pt;
    color: var(--text-color);
    scroll-behavior: smooth;
    background-color: var(--secondary-color);

}

body {
    min-height: 100vh;
    background: var(--bg-gradient-main);
}

/* Modern Section Headings */
.section-heading {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-extrabold);
    color: var(--secondary-text-color);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-top: 0;
    margin-bottom: var(--spacing-lg);
    text-align: left !important;
    align-self: flex-start;
    width: 100%;
}

.section-heading::before {
    content: '';
    display: inline-block;
    width: 25px;
    height: 2px;
    background: var(--gradient-accent);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

#skill-section .section-heading,
#project-section .section-heading,
#tools-section .section-heading {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Large desktop - match 3-column grid width */
@media (min-width: 1700px) {
    #project-section .section-heading {
        max-width: 1800px;
    }
}

/* Extra large desktop - match skill section wrapper's expanded width */
@media (min-width: 1600px) {
    #skill-section .section-heading {
        max-width: 1800px;
    }
}

/* Ultrawide - match 4-column grid width */
@media (min-width: 2900px) {
    #project-section .section-heading {
        max-width: 3100px;
    }
}

#tools-section .section-heading {
    margin-top: 40px;
    padding: 0 80px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Match tools-section heading with projects-section responsive behavior */
@media (min-width: 1700px) {
    #tools-section .section-heading {
        max-width: 1800px;
    }
}

@media (min-width: 2000px) {
    #tools-section .section-heading {
        padding: 0;
    }
}

@media (min-width: 2900px) {
    #tools-section .section-heading {
        max-width: 3100px;
    }
}

@media (max-width: 1302px) {
    #tools-section .section-heading {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    #tools-section .section-heading {
        padding: 0 20px;
    }
}

#education-section .section-heading {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#name {
    background: linear-gradient(90deg, var(--accent-color), white, var(--accent-color), white);
    background-size: 300%;
    /* Vergrößerung für nahtlosen Übergang */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow-gradient 10s linear infinite;
    /* Animation auf 10 Sekunden verlängert */
}

@keyframes flow-gradient {
    0% {
        background-position: 0% 50%;
        /* Startpunkt des Verlaufs */
    }

    50% {
        background-position: 100% 50%;
        /* Verlauf in die Mitte bewegt */
    }

    100% {
        background-position: 0% 50%;
        /* Rückkehr zum Startpunkt */
    }
}

/* Software Skills Badge Slider */
#tools-section {
    width: 100%;
    padding: 0px 0 100px 0;
    background: var(--bg-gradient-sections);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

@media (max-width: 1302px) and (min-width: 769px) {
    #tools-section {
        padding: 0px 0px 60px 0;
    }
}

@media (max-width: 768px) {
    #tools-section {
        padding: 0px 0px 40px;
    }
}

/* Badge Row Container */
.badge-row {
    width: 100%;
    overflow: hidden;
    position: relative;
    margin-bottom: 40px;
}

.badge-row:last-child {
    margin-bottom: 0;
}

@media (max-width: 1302px) and (min-width: 769px) {
    .badge-row {
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .badge-row {
        margin-bottom: 20px;
    }
}

/* Fade effect on edges */
.badge-row::before,
.badge-row::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.badge-row::before {
    left: 0;
    background: linear-gradient(to right, var(--bg-section-1) 0%, rgba(16, 24, 27, 0) 100%);
}

.badge-row::after {
    right: 0;
    background: linear-gradient(to left, var(--bg-section-2) 0%, rgba(22, 22, 22, 0) 100%);
}

@media (max-width: 768px) {

    .badge-row::before,
    .badge-row::after {
        width: 80px;
    }
}

@media (max-width: 480px) {

    .badge-row::before,
    .badge-row::after {
        width: 50px;
    }
}

/* Badge Track - holds all badges */
.badge-track {
    display: flex;
    gap: 20px;
    width: fit-content;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Row 1: Scroll Left to Right */
.badge-row-1 .badge-track {
    animation: scroll-left 35s linear infinite;
}

/* Row 2: Scroll Right to Left */
.badge-row-2 .badge-track {
    animation: scroll-right 45s linear infinite;
}

/* Pause animation on hover (only for devices with a real pointer/mouse) */
@media (hover: hover) {
    .badge-row:hover .badge-track {
        animation-play-state: paused;
    }
}



/* Glassmorphism Badge Styles */
.software-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 10px var(--spacing-md);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--glass-bg), var(--white-02));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    box-shadow: var(--shadow-md);
    white-space: nowrap;
    flex-shrink: 0;
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.software-badge img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.software-badge span {
    font-size: var(--font-size-sm);
    color: var(--text-color);
    font-weight: var(--font-weight-medium);
}

/* Logo-Specific Border Colors */
.badge-figma {
    border-color: rgba(162, 89, 255, 0.4);
}

.badge-js {
    border-color: rgba(247, 223, 30, 0.4);
}

.badge-css {
    border-color: rgba(38, 77, 228, 0.4);
}

.badge-html {
    border-color: rgba(227, 79, 38, 0.4);
}

.badge-react {
    border-color: rgba(97, 218, 251, 0.4);
}

.badge-ai {
    border-color: rgba(200, 200, 200, 0.4);
}

.badge-illustrator {
    border-color: rgba(255, 154, 0, 0.4);
}

.badge-premiere {
    border-color: rgba(153, 153, 255, 0.4);
}

.badge-xd {
    border-color: rgba(255, 38, 255, 0.4);
}

.badge-office {
    border-color: rgba(217, 83, 79, 0.4);
}

.badge-github {
    border-color: #6979D9;
    /* Lilac purple */
}

.badge-analytics {
    border-color: rgba(255, 165, 0, 0.4);
}

.badge-looker {
    border-color: rgba(66, 133, 244, 0.5);
}

.badge-rise {
    border-color: rgba(255, 87, 51, 0.4);
}

.badge-storyline {
    border-color: rgba(255, 182, 193, 0.5);
}

.badge-confluence {
    border-color: rgba(0, 82, 204, 0.4);
}

/* Smooth Infinite Scroll Animations */
@keyframes scroll-left {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-16.6666666667%, 0, 0);
    }
}

@keyframes scroll-right {
    0% {
        transform: translate3d(-16.6666666667%, 0, 0);
    }

    100% {
        transform: translate3d(0, 0, 0);
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .badge-track {
        gap: 15px;
    }

    .software-badge {
        padding: 8px 16px;
        gap: 10px;
    }

    .software-badge img {
        width: 24px;
        height: 24px;
    }

    .software-badge span {
        font-size: 0.85rem;
    }

    .badge-row-1 .badge-track,
    .badge-row-2 .badge-track {
        animation-duration: 30s;
    }
}

@media (max-width: 480px) {
    .badge-track {
        gap: 12px;
    }

    .software-badge {
        padding: 6px 14px;
        gap: 8px;
    }

    .software-badge img {
        width: 20px;
        height: 20px;
    }

    .software-badge span {
        font-size: 0.75rem;
    }
}

header {
    padding: 0 var(--spacing-md);
    margin-bottom: 60px;
    margin-top: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap-reverse;
    scroll-margin-top: 100px;
}

header .container {
    width: 850px;
    max-width: 100%;
}

/* Desktop layout - matches tablet structure but larger */
@media (min-width: 1303px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
        text-align: left;
        max-width: 1200px;
        margin: 0 auto;
        padding: 30px 20px 40px;
    }

    .title-container {
        display: flex !important;
        align-items: flex-start;
        gap: 30px;
        width: 100%;
        justify-content: space-between;
    }

    .title-text {
        flex: 1;
        order: 1;
    }

    .image-container {
        order: 2;
        flex-shrink: 0;
    }

    .image-container {
        position: relative;
    }

    .image-container img {
        width: 160px;
        height: 160px;
        border-radius: 50%;
        object-fit: cover;
        margin: 0;
        margin-right: 0;
        margin-bottom: 0;
        aspect-ratio: 1 / 1;
        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
        cursor: url('Cursorpointer.svg') 0 0, pointer;
        transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .image-container img:hover {
        transform: scale(1.08);
    }

    .speech-bubble {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%) translateY(-100%) scale(0) rotate(-12deg);
        background: var(--accent-color);
        color: var(--background-color);
        padding: 10px 14px;
        border-radius: 18px;
        font-weight: var(--font-weight-semibold);
        font-size: var(--font-size-xs);
        line-height: 1.3;
        white-space: normal;
        max-width: 280px;
        min-width: 200px;
        text-align: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        z-index: 100;
        word-wrap: break-word;
        hyphens: none;
    }

    .speech-bubble::after {
        content: '';
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 0;
        height: 0;
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 12px solid var(--accent-color);
    }

    .speech-bubble.show {
        opacity: 1;
        transform: translateX(-50%) translateY(-100%) scale(1) rotate(0deg);
        animation: bounce 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }

    @keyframes bounce {
        0% {
            transform: translateX(-50%) translateY(-100%) scale(0) rotate(-12deg);
        }

        50% {
            transform: translateX(-50%) translateY(calc(-100% - 8px)) scale(1.12) rotate(3deg);
        }

        100% {
            transform: translateX(-50%) translateY(-100%) scale(1) rotate(0deg);
        }
    }

    header .container {
        width: 100%;
    }

    header h1 {
        font-size: 3.5rem;
        font-weight: var(--font-weight-bold);
        margin-top: 0;
        margin-bottom: 0px;
        line-height: 1;
    }

    header h2 {
        font-size: 1.6rem;
        font-weight: var(--font-weight-light);
        margin-bottom: 0;
        margin-top: 0;
        line-height: 1.1;
    }

    /* Clear separation between title area and content */
    .title-container+br,
    .title-container+br+p {
        clear: both;
    }

    header p {
        font-size: 1.2rem;
        line-height: 1.6;
        width: 100%;
        margin-bottom: 30px;
        margin-top: 30px;
    }

    header .read-more {
        font-size: 1.3rem;
        padding: 0.6em 1.4em;
    }

    /* Ensure title container works as expected */
    .title-container {
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .title-text {
        flex: 1 !important;
    }
}

header h1 {
    margin-top: 0px;
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
}

header h2 {
    margin-top: 30px;
    margin-bottom: var(--spacing-md);
    font-weight: var(--font-weight-light);
    word-break: b;
}

header p {
    color: var(--secondary-text-color);
}

.text-link {
    color: var(--accent-light);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color var(--transition-base);
}

.text-link:hover {
    color: var(--accent-lighter);
    text-decoration: underline;
}

header .read-more {
    display: inline-block;
    background: var(--gradient-button);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--accent-15);
    color: var(--text-color);
    font-size: 1.25rem;
    font-weight: var(--font-weight-bold);
    border-radius: var(--radius-xl);
    padding: .5em 1.25em;
    text-decoration: none;
    text-decoration-line: none;
    border-left: none;
    outline: none;
    margin-top: 50px;
    transition: all var(--transition-base);
    cursor: url('Cursorpointer.svg') 0 0, pointer;
    position: relative;
}

header .read-more:hover {
    background: var(--gradient-button-hover);
    border-color: var(--accent-30);
}

/* Social Media Icons */
.name-socials-container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.social-links {
    display: flex;
    gap: 12px;
    align-items: center;
}

.social-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--accent-30);
    border-radius: 50%;
    transition: border-color var(--transition-base), background-color var(--transition-base);
    background: linear-gradient(135deg, var(--accent-dark-15), var(--accent-10));
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    text-decoration: none;
    box-shadow: var(--shadow-md);
}

.social-icon svg {
    width: 19px;
    height: 19px;
    color: var(--accent-light);
    transition: color 0.3s ease;
}

.social-icon:hover {
    border-color: var(--accent-60);
    background: linear-gradient(135deg, var(--accent-dark-25), var(--accent-20));
}

.social-icon:hover svg {
    color: var(--accent-lighter);
}

/* Hide social icons only on small mobile devices */
@media (max-width: 768px) {
    .social-links {
        display: none;
    }

    .name-socials-container {
        justify-content: center;
        width: 100%;
    }

    #name {
        text-align: center;
    }
}

/* Tablet - show icons with smaller size, centered */
@media (min-width: 769px) and (max-width: 1000px) {
    .name-socials-container {
        justify-content: center;
        width: 100%;
        gap: 20px;
    }

    .social-icon {
        width: 40px;
        height: 40px;
    }

    .social-icon svg {
        width: 19px;
        height: 19px;
    }

    .social-links {
        gap: 12px;
    }
}

/* Medium screens - position icons bottom right next to portfolio button */
@media (min-width: 1001px) and (max-width: 1302px) {
    header .container {
        position: relative;
    }

    .name-socials-container {
        display: block;
    }

    .social-links {
        position: absolute;
        bottom: 0;
        right: 20px;
        display: flex;
        gap: 12px;
    }

    .social-icon {
        width: 42px;
        height: 42px;
    }

    .social-icon svg {
        width: 20px;
        height: 20px;
    }
}

/* Desktop - icons centered next to name */
@media (min-width: 1303px) {
    .name-socials-container {
        flex-direction: row;
        align-items: center;
        gap: 42px;
    }

    .social-links {
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .social-icon {
        width: 48px;
        height: 48px;
    }

    .social-icon svg {
        width: 23px;
        height: 23px;
    }
}



#skill-section {
    padding: 100px 80px 150px 80px;
    background: var(--bg-gradient-sections);
}

/* Reduziertes Padding für Tablets und kleinere Bildschirme */
@media (max-width: 1302px) {
    #skill-section {
        padding: 100px 40px 150px 40px;
    }
}

@media (max-width: 768px) {
    #skill-section {
        padding: 80px 20px 100px 20px;
    }
}


#skill-section .wrapper {
    margin-top: 60px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1600px) {
    #skill-section .wrapper {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1800px;
    }
}

.skill-container {
    width: 100%;
    max-width: 100%;
    border-radius: var(--radius-lg);
    overflow: visible;
    box-shadow: var(--shadow-lg);
    /* Standard-Schatten */
    perspective: 800px;
    /* Perspektive für den 3D-Effekt */
    transform-style: preserve-3d;
    /* Aktiviert den 3D-Effekt */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Sanfter Übergang */
    background: var(--bg-skill-card);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    position: relative;
    --mouse-x: 50%;
    --mouse-y: 50%;
    --spotlight-color: var(--accent-30);
    opacity: 0;
    transform: translateY(var(--spacing-md));
}

.skill-container.card-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (min-width: 1303px) {
    .skill-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--radius-lg);
        pointer-events: none;
        background: radial-gradient(circle 350px at var(--mouse-x) var(--mouse-y),
                var(--accent-40),
                rgba(0, 150, 220, 0.15) 50%,
                transparent);
        opacity: 0;
        transition: opacity var(--transition-base);
        z-index: 10;
        mix-blend-mode: soft-light;
    }

    .skill-container::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: var(--radius-lg);
        pointer-events: none;
        border: 2px solid transparent;
        background: radial-gradient(circle 250px at var(--mouse-x) var(--mouse-y),
                rgba(100, 200, 255, 0.7),
                var(--accent-40) 40%,
                transparent 70%) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity var(--transition-base);
        z-index: 11;
    }

    .skill-container:hover::before {
        opacity: 0.6;
    }

    .skill-container:hover::after {
        opacity: 0.7;
    }
}

.skill-container:hover {
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.6);
}

.skill-container h3 {
    background-color: transparent;
    padding: 28px 32px var(--spacing-lg) 32px;
    text-align: left;
    text-transform: none;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    letter-spacing: 0.5px;
    position: relative;
    opacity: 0;
    transform: translateY(-20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.skill-container h3.text-visible {
    opacity: 1;
    transform: translateY(0);
}

.skill-container .skill-subtitle {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-regular);
    text-transform: none;
    color: var(--secondary-text-color);
    margin-top: 6px;
    letter-spacing: 0.3px;
}

.skill-container h3::after {
    content: 'expand_more';
    font-family: 'Material Symbols Rounded';
    position: absolute;
    right: 20px;
    top: 24px;
    font-size: 1.8rem;
    font-weight: var(--font-weight-light);
    color: var(--secondary-text-color);
    display: none;
    /* Hidden by default on desktop */
    transform: rotate(0deg);
    transform-origin: center center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}

.skill-container.card-active h3::after {
    transform: rotate(180deg);
    animation: chevronBounce 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes chevronBounce {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(200deg) scale(1.15);
    }

    100% {
        transform: rotate(180deg);
    }
}



.skill-container .spider-chart {
    width: 100%;
    max-width: 300px;
    height: auto;
    margin: 40px auto;
    display: block;
    overflow: visible;
    /* Allow text labels to extend beyond chart boundaries */
    border-radius: var(--radius-lg);
    /* Rounded corners - note: SVG may not fully respect this */
}

@media (max-width: 599px) {
    .skill-container .spider-chart {
        max-width: 240px;
        margin: 25px auto;
    }

    .skill-container .spider-chart text {
        font-size: 10px;
    }

    .skill-container .spider-chart text tspan {
        dy: 12px;
    }
}

@media (min-width: 600px) and (max-width: 768px) {
    .skill-container .spider-chart {
        max-width: 270px;
        margin: 30px auto;
    }

    .skill-container .spider-chart text {
        font-size: 11px;
    }

    .skill-container .spider-chart text tspan {
        dy: 13px;
    }
}

@media (min-width: 769px) and (max-width: 900px) {
    #skill-section .wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        padding: 0 20px;
    }

    .skill-container h3 {
        font-size: 1rem;
        padding: 24px 28px 14px 28px;
    }

    .skill-container .skill-subtitle {
        font-size: 0.78rem;
    }

    .skill-container .spider-chart {
        max-width: 235px;
        margin: 32px auto;
    }

    .skill-container .spider-chart text {
        font-size: 10px;
    }

    .skill-container .spider-chart text tspan {
        dy: 12px;
    }
}

@media (min-width: 901px) and (max-width: 950px) {
    #skill-section .wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        padding: 0 20px;
    }

    .skill-container h3 {
        font-size: 1rem;
        padding: 24px 28px 14px 28px;
    }

    .skill-container .skill-subtitle {
        font-size: 0.78rem;
    }

    .skill-container .spider-chart {
        max-width: 255px;
        margin: 35px auto;
    }

    .skill-container .spider-chart text {
        font-size: 11px;
    }

    .skill-container .spider-chart text tspan {
        dy: 13px;
    }
}

@media (min-width: 951px) and (max-width: 1024px) {
    #skill-section .wrapper {
        grid-template-columns: repeat(2, 1fr);
        gap: 50px;
        padding: 0 20px;
    }

    .skill-container h3 {
        font-size: 1rem;
        padding: 24px 28px 14px 28px;
    }

    .skill-container .skill-subtitle {
        font-size: 0.78rem;
    }

    .skill-container .spider-chart {
        max-width: 280px;
        margin: 35px auto;
    }

    .skill-container .spider-chart text {
        font-size: 12px;
    }

    .skill-container .spider-chart text tspan {
        dy: 14px;
    }
}

@media (min-width: 1025px) and (max-width: 1302px) {
    .skill-container .spider-chart {
        max-width: 310px;
        margin: 40px auto;
    }
}

.skill-container ul {
    margin: 40px auto;
}


.skill-container ul {
    margin: 0;
    list-style: none;
    border-radius: 0 0 var(--spacing-sm) var(--spacing-sm);
    overflow: hidden;
    background-color: var(--bg-skill-list);
}

.skill-container ul li {
    display: flex;
    /* Flexbox für gleichmäßige Anordnung */
    align-items: flex-start;
    /* Vertikale Ausrichtung */
    flex-direction: column;
    gap: 6px;
    /* Fester Abstand zwischen Text und Progressbar */
    padding: var(--spacing-lg) 24px;
    background-color: transparent;
    min-height: 45px;
}

.skill-container ul li span {
    width: 100%;
    display: block;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.skill-container ul li span.text-visible {
    opacity: 1;
    transform: translateX(0);
}

.skill-container ul li:last-child {
    border-bottom: none;
}

.skill-container ul li progress {
    width: 100%;
    /* Volle Breite für bessere Darstellung */
    height: 10px;
    /* Originalhöhe */
    border-radius: var(--radius-lg);
    /* Rundungen */
    overflow: hidden;
    /* Rundungen sichtbar machen */
    background-color: var(--white-15);
    /* Hintergrund der Progressbar */
    appearance: none;
    /* Entfernt Standard-Stil des Browsers */
    margin: 0;
    /* Kein zusätzlicher Abstand */
    flex-shrink: 0;
    /* Progress-Bar behält ihre Breite */
    margin-left: 0;
}

/* Für Webkit-basierte Browser (Chrome, Edge, Safari) */
.skill-container ul li progress::-webkit-progress-bar {
    background-color: var(--white-15);
    /* Hintergrund der Progressbar */
    border-radius: var(--radius-lg);
    /* Rundungen */
}

.skill-container ul li progress::-webkit-progress-value {
    background: var(--gradient-accent);
    /* Verlauf */
    border-radius: var(--radius-lg);
    /* Rundungen für den Fortschrittswert */
}

/* Für Mozilla-basierte Browser (Firefox) */
.skill-container ul li progress::-moz-progress-bar {
    background: var(--gradient-accent);
    /* Verlauf */
    border-radius: var(--radius-lg);
}



#education-section {
    padding: 100px 20px 150px;
    background: linear-gradient(90deg, rgb(16, 24, 27) 0%, rgb(22, 22, 22) 100%);
    color: var(--text-color);
    text-align: center;
}


/* Tab Navigation */
.tab-navigation {
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    margin-bottom: 60px;
    margin-left: auto;
    margin-right: auto;
    padding: 8px;
    background: var(--white-03);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 800px;
    position: relative;
}

.tab-slider {
    position: absolute;
    top: 8px;
    left: 8px;
    height: calc(100% - 16px);
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px var(--black-10),
        inset 0 1px 0 var(--white-10);
    z-index: 0;
    pointer-events: none;
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: transparent;
    border: none;
    color: var(--secondary-text-color);
    padding: var(--spacing-sm) 28px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    border-radius: var(--radius-xl);
    transition: color var(--transition-base);
    position: relative;
    z-index: 1;
    flex: 1;
}

.bento-card h3 {
    margin: 0;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--text-color);
    line-height: 1.3;
    z-index: 2;
    position: relative;
    /* Prevent awkward word breaks like "Vi- sion" */
    hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
}

.tab-btn .material-symbols-rounded {
    font-size: 1.4rem;
    transition: transform 300ms ease;
}

.tab-btn span:not(.material-symbols-rounded) {
    transition: transform 300ms ease;
}

.tab-btn:hover {
    color: var(--text-color);
}

.tab-btn.active {
    color: var(--text-color);
}

/* Tab Content */
.tab-content {
    display: none;
    opacity: 0;
}

.tab-content.active {
    display: block;
    animation: fadeInSlide 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }

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

@media (max-width: 768px) {

    .tab-navigation {
        gap: 6px;
        padding: 6px;
    }

    .tab-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .tab-btn .material-symbols-rounded {
        font-size: 1.2rem;
    }
}

@media (max-width: 600px) {

    .tab-navigation {
        gap: 6px;
        padding: 6px;
        max-width: 90%;
    }

    .tab-btn {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

.timeline {
    position: relative;
    margin: 0 auto;
    width: 100%;
    /* statt 5px */
    max-width: 800px;
    /* oder was du brauchst */
    padding-left: 40px;
    padding-right: 8px;
    /* Platz für die Linie */
}

.timeline::before {
    content: "";
    position: absolute;
    top: 0;
    left: 47px;
    width: 1px;
    /* Thinner line */
    height: 100%;
    background: rgba(255, 255, 255, 0.15);
    /* Subtle gray */
    border-radius: 1px;
}


.timeline-item {
    display: flex;
    align-items: flex-start;
    /* Wichtig */
    margin-bottom: 50px;
    position: relative;
}


.timeline-item .dot {
    position: absolute;
    left: calc(5.5px - 25px);
    /* Moved 3px further left */
    /* Moved 0.5px further left */
    /* exakt mittig zur Linie (bei 50px Breite) */
    top: 14.5px;
    width: 50px;
    height: 50px;
    background-color: #404040;
    /* Solid gray */
    border-radius: 50%;
    border: 2px solid transparent;
    /* Invisible border to prevent layout shift */
    z-index: 2;
    cursor: url('Cursorpointer.svg') 0 0, pointer;
    transition: all 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;

}

/* Gray stroke when timeline item is expanded */
.timeline-body.expanded+.timeline-item .dot,
.timeline-item:has(.timeline-body.expanded) .dot {
    border-color: var(--white-30);
    /* Only change color, not width */
}


.timeline-item .dot:hover {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    /* Only drop shadow, no glow */
    transform: scale(1.2);
    /* Leichtes Vergrößern beim Hover */
}

.timeline-item .dot:active {
    transform: scale(1);
    /* Leichtes Schrumpfen bei Klick für Feedback */
}

.timeline-item .dot .material-symbols-rounded {
    font-size: 28px;
    color: rgba(245, 245, 245, 0.85);
    /* Match h3 heading color */
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
}

.timeline-item .content {
    text-align: left;
    margin-left: 90px;
    font-size: var(--font-size-base);
    border-radius: var(--radius-lg);
    background: var(--bg-gradient-sections);
    padding: var(--spacing-md);
    position: relative;
    width: calc(100% - 90px);
    box-sizing: border-box;
}

/* Timeline Header mit Titel und Toggle-Button */
.timeline-header {
    cursor: url('Cursorpointer.svg') 0 0, pointer;
    user-select: none;
    padding-right: 50px;
}

.timeline-item h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-medium);
    margin-bottom: 0;
    line-height: 1.2;
    color: var(--text-85);
    transition: color var(--transition-base);
}

/* Toggle Button Styling */
.toggle-btn {
    background: none;
    border: none;
    cursor: url('Cursorpointer.svg') 0 0, pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: absolute;
    top: 20px;
    right: 20px;
}

.toggle-btn .icon {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--accent-light);
    transition: transform 0.3s ease, color 0.3s ease;
    display: block;
    line-height: 1;
    font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 48;
}

/* Icon Rotation beim Toggle */
.toggle-btn.active .icon {
    transform: rotate(135deg);
}

/* Hover-Effekt für beide Elemente wenn man auf header oder toggle-btn hovert - nur auf Desktop */
@media (min-width: 769px) {
    .timeline-header:hover h3 {
        color: rgba(245, 245, 245, 1);
    }

    .timeline-header:hover+.timeline-body {
        /* Kein Hover-Effekt auf den Body */
    }

    .toggle-btn:hover .icon {
        color: var(--accent-lightest);
    }

    /* Wenn man über den toggle-btn hovert, soll auch h3 den Effekt haben */
    .content:has(.toggle-btn:hover) .timeline-header h3 {
        color: #ffffff;
    }

    /* Wenn man über den header hovert, soll auch der Button den Effekt haben */
    .content:has(.timeline-header:hover) .toggle-btn .icon {
        color: var(--accent-lightest);
    }
}

/* Timeline Body - versteckt im Standardzustand */
.timeline-body {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s, margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.timeline-body.expanded {
    max-height: 1000px;
    opacity: 1;
    margin-top: 20px;
}

.timeline-item p {
    margin: 0 0 12px 0;
    color: var(--secondary-text-color);
    /* Grayer for visual hierarchy */
    line-height: 1.5;
}

.timeline-item p:first-of-type {
    margin-bottom: 16px;
}

.timeline-item p strong {
    display: block;
    color: var(--text-color);
    font-size: 1.05rem;
    margin-bottom: 4px;
    margin-top: 16px;
    letter-spacing: 0.3px;
}



/* Titel für Karriereweg, versteckt zu Beginn */
.timeline-title {
    opacity: 0;
    /* Anfangs unsichtbar */
    transform: translateY(50px);
    /* Leichte Verschiebung nach unten */
    transition: opacity 1s ease, transform 1s ease;
    /* Sanfte Übergänge */
}

/* Timeline Items unsichtbar anfangs */
.timeline-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease, transform 1s ease;
}

/* Wenn das Element sichtbar ist, wird die Animation angewendet */
.timeline-item.visible,
.timeline-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Pulsierende Animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 3px var(--white-30);
    }

    50% {
        transform: scale(1.3);
        box-shadow: 0 0 10px var(--white-15);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 3px var(--white-30);
    }
}

/* Letzter Punkt jeder Timeline pulsiert automatisch */
.timeline>.timeline-item:last-of-type .dot {
    animation: pulse 1.5s infinite ease-in-out;
}


/* .section-divider {
    margin: 240px auto;
    height: 3px;
    width: 80%;
    background-color: var(--white-10);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .section-divider {
        margin: 80px auto;
    }
} */

/* Verstecke Timeline Dots auf mobilen Geräten */
@media (max-width: 768px) {
    .timeline-item .dot {
        display: none;
    }

    .timeline::before {
        display: none;
    }

    .timeline-item .content {
        margin-left: 0;
        width: 100%;
        box-sizing: border-box;
    }

    .timeline {
        padding-left: 0;
    }

    .timeline-header {
        padding-right: 60px;
        text-align: left;
    }

    .timeline-item h3 {
        font-size: 1.3rem;
        color: #ffffff;
    }

    .toggle-btn {
        width: 35px;
        height: 35px;
    }

    .toggle-btn .icon {
        font-size: 2rem;
    }

    .timeline-body {
        text-align: left;
    }

    .timeline-item p {
        text-align: left;
    }
}


footer {
    background: var(--bg-gradient-main);
    padding: 100px 20px;
}

footer .grid-container {
    margin: 0 auto;
    width: 80%;
    max-width: 1400px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 200px;
    /* Erhöht von 100px auf 200px für deutlich mehr Abstand auf Desktop */
    text-align: left;
    border-radius: 16px;
}

footer #at-symbol {
    font-size: 250pt;
    background: linear-gradient(90deg, var(--accent-color), white, var(--accent-color), white);
    background-size: 300%;
    /* Vergrößerung für nahtlosen Übergang */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: flow-gradient 10s linear infinite;
    /* Animation auf 10 Sekunden verlängert */
}

@keyframes flow-gradient {
    0% {
        background-position: 0% 50%;
        /* Startpunkt des Verlaufs */
    }

    50% {
        background-position: 100% 50%;
        /* Verlauf in die Mitte bewegt */
    }

    100% {
        background-position: 0% 50%;
        /* Rückkehr zum Startpunkt */
    }
}

footer h3 {
    margin-top: 40px;
    font-size: 2rem;
}

footer a {
    margin-top: 5px;
    display: inline-block;
    color: var(--secondary-text-color);
    text-decoration: none;
}

/* Footer divider with fade effect */
.footer-divider {
    width: 80%;
    max-width: 80%;
    height: 1px;
    margin: 80px auto 50px;
    background: linear-gradient(to right,
            transparent 0%,
            var(--secondary-text-color) 50%,
            transparent 100%);
}

/* Footer bottom section */
.footer-bottom {
    text-align: center;
    margin-bottom: 0;
}

.footer-credits {
    color: var(--secondary-text-color);
    font-size: 0.9rem;
    margin: 0 0 15px 0;
    font-weight: 400;
}

.footer-greeting {
    color: var(--secondary-text-color);
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.7;
    font-weight: 300;
}


/* Allgemeine Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 60px;
    /* Feste Höhe für die Navigation */
    position: relative;
}

/* Desktop Pill Navigation */
.desktop-nav {
    display: none;
}

@media (min-width: 1303px) {
    .desktop-nav {
        display: block;
        position: fixed;
        top: 30px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1001;
    }

    .nav-pills {
        list-style: none;
        display: flex;
        gap: var(--spacing-xs);
        padding: 10px;
        margin: 0;
        background: var(--bg-nav);
        backdrop-filter: blur(40px) saturate(180%);
        -webkit-backdrop-filter: blur(40px) saturate(180%);
        border-radius: var(--radius-xl);
        border: 1.5px solid var(--glass-border);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
            0 2px 8px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.15),
            inset 0 -1px 0 rgba(0, 0, 0, 0.1);
        position: relative;
        --mouse-x: 50%;
        --mouse-y: 50%;
    }

    .nav-pills::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50px;
        pointer-events: none;
        border: 2px solid transparent;
        background: radial-gradient(circle 150px at var(--mouse-x) var(--mouse-y),
                rgba(77, 190, 243, 1),
                transparent 70%) border-box;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        opacity: 0;
        transition: opacity 0.3s ease;
        z-index: 0;
    }

    /* Bouncy Slider Background */
    .nav-slider {
        position: absolute;
        height: calc(100% - 20px);
        background: var(--white-10);
        border-radius: var(--radius-xl);
        top: 10px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 0;
        pointer-events: none;
        box-shadow: 0 2px 8px var(--black-10),
            inset 0 1px 0 var(--white-10);
        will-change: left, width;
    }

    /* Trigger animation on active change */
    .nav-slider.sliding {
        animation: sliderBounce 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes sliderBounce {
        0% {
            transform: scaleX(1);
        }

        50% {
            transform: scaleX(0.95) scaleY(1.05);
        }

        100% {
            transform: scaleX(1) scaleY(1);
        }
    }

    .nav-pills li {
        margin: 0;
    }

    .nav-pills a {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm) 24px;
        color: var(--text-85);
        text-decoration: none;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        border-radius: var(--radius-xl);
        transition: all 0.3s ease;
        position: relative;
        white-space: nowrap;
        z-index: 1;
        border: 1px solid transparent;
    }

    .nav-pills a .material-symbols-rounded {
        font-size: 20px;
        font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
        transition: all 0.3s ease;
    }

    .nav-pills a .nav-text {
        transition: all 0.3s ease;
    }

    /* Animated rotating border for Portfolio button in header */
    .read-more::before {
        content: '';
        position: absolute;
        inset: -3px;
        border-radius: 1000px;
        padding: 3px;
        background: conic-gradient(from var(--angle), transparent 40%, var(--accent-lightest) 65%, transparent 80%);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        animation: rotate-border 3s linear infinite;
        pointer-events: none;
        transition: background 200ms ease;
        z-index: -1;
        will-change: transform;
    }

    .read-more:hover::before {
        background: conic-gradient(from var(--angle), transparent 45%, #b8ecff 70%, transparent 85%);
    }

    @keyframes rotate-border {
        0% {
            --angle: 0deg;
        }

        100% {
            --angle: 360deg;
        }
    }

    @property --angle {
        syntax: '<angle>';
        initial-value: 0deg;
        inherits: false;
    }

    /* Hover-Effekt - subtil: heller Text + sanfte graue Pille */
    .nav-pills a:hover:not(.active) {
        color: var(--text-color);
        background: var(--white-05);
        border: 1px solid var(--glass-border);
    }

    .nav-pills a:hover:not(.active) .material-symbols-rounded {
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
    }

    .nav-pills a:active {
        transform: scale(0.98);
    }

    /* Active state - aktueller Abschnitt */
    .nav-pills a.active {
        color: var(--text-color) !important;
        font-weight: 500;
        /* Kein eigener Hintergrund, Slider übernimmt das! */
    }

    .nav-pills a.active .material-symbols-rounded {
        font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 20;
        color: var(--text-color) !important;
    }

    .nav-pills a.active .nav-text {
        color: var(--text-color) !important;
        font-weight: 500;
    }
}

/* Hamburger Menu Button - Mobile and Tablet only */
.hamburger-menu {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: linear-gradient(to right, var(--accent-color), #4dbef3);
    border: none;
    cursor: url('Cursorpointer.svg') 0 0, pointer;
    padding: 16px;
    border-radius: 16px;
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1001;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
    width: 64px;
    height: 64px;
    justify-content: center;
    align-items: center;
}

.hamburger-menu:hover {
    filter: brightness(0.85);
    transform: scale(1.05);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.hamburger-menu span {
    width: 32px;
    height: 3.5px;
    background-color: white;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Hamburger Animation when overlay is active */
.hamburger-menu.active span:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}

.hamburger-menu.active span:nth-child(2) {
    opacity: 0;
    transform: scale(0);
}

.hamburger-menu.active span:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Tablet und größer */
@media (min-width: 769px) {
    .hamburger-menu {
        width: 72px;
        height: 72px;
        padding: 18px;
        top: 25px;
        right: 25px;
    }

    .hamburger-menu span {
        width: 36px;
        height: 4px;
    }

    .hamburger-menu.active span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }

    .hamburger-menu.active span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
}

/* Desktop - Hide hamburger menu */
@media (min-width: 1303px) {
    .hamburger-menu {
        display: none;
    }
}

/* Mobile Menu Overlay */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(16, 17, 19, 0.98);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    clip-path: circle(0% at calc(100% - 52px) 52px);
    transition: clip-path 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity var(--transition-slow);
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
    clip-path: circle(150% at calc(100% - 52px) 52px);
}

/* Mobile Navigation Links */
.mobile-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 0;
    margin: 0;
}

.mobile-nav li {
    text-align: center;
}

.mobile-nav li a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-light);
    transition: color var(--transition-base);
    display: block;
    padding: 10px 30px;
}

.mobile-nav li a:hover,
.mobile-nav li a:active {
    color: var(--text-color);
}

footer a:hover {
    color: var(--text-color);
}

/* Base styles for smaller screens */
@media (max-width: 1302px) {
    header img {
        height: auto;
        margin-right: 0;
        margin-bottom: 0;
        border-radius: 50%;
        object-fit: cover;
    }
}

/* Base styles for title container structure */
.title-container {
    display: contents;
}

.title-text {
    flex: 1;
}

@media (max-width: 1302px) {
    header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        text-align: left;
    }

    .speech-bubble {
        display: none !important;
    }

    .title-container {
        display: flex;
        align-items: flex-start;
        gap: 20px;
        width: 100%;
        justify-content: space-between;
    }

    .title-text {
        flex: 1;
        order: 1;
    }

    .speech-bubble {
        display: none !important;
    }




    header .container {
        width: 100%;
    }

    header h1 {
        font-size: 2rem;
        margin-bottom: 8px;
    }

    header h2 {
        font-size: 1.3rem;
        margin-bottom: 15px;
    }

    header p {
        font-size: 1rem;
        width: 100%;
    }

    header {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 40px;
        padding: 40px 20px;
    }

    header .container {
        flex: 1;
        max-width: 600px;
        text-align: left;
    }

    header .image-container {
        flex-shrink: 0;
    }

    header img {
        display: block;
        height: auto;
        width: 200px;
        border-radius: 50%;
        margin: 0;
        object-fit: cover;
        aspect-ratio: 1 / 1;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }

    header h1 {
        margin-top: 0;
        font-size: 2.5rem;
    }

    header h2 {
        font-size: 1.1rem;
    }
}

@media (max-width: 1000px) {
    header {
        padding: 0px 20px 40px;
        text-align: left;
        gap: 30px;
    }

    header h1 {
        font-size: 2rem;
    }

    header h2 {
        font-size: 1rem;
    }

    header img {
        width: 150px;
    }
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
        padding: 0px 20px 20px;
    }

    .speech-bubble {
        display: none !important;
    }

    .title-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        order: 2;
    }

    .image-container {
        order: 1;
        margin-bottom: 10px;
    }

    .title-text {
        width: 100%;
        text-align: center;
        order: 2;
    }

    header .container {
        text-align: center;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    header p {
        order: 3;
        font-size: 0.9rem;
        line-height: 1.5;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: normal;
        hyphens: auto;
        max-width: 100%;
        margin-bottom: 20px;
    }

    header .read-more {
        order: 4;
        font-size: 1rem;
        padding: 0.4em 1em;
        margin-top: 0;
        margin-bottom: 30px;
        align-self: center;
    }

    header img {
        width: 120px;
        height: 120px;
        margin: 0 auto;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 0;
        margin-bottom: 0;
    }

    header h1 {
        font-size: 1.6rem;
        line-height: 1.3;
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    header h2 {
        font-size: 1.1rem;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    footer .grid-container {
        display: flex;
        flex-direction: column;
        text-align: center;
        gap: 0;
    }

    footer #at-symbol {
        font-size: 120pt;
        order: -1;
        margin-bottom: 10px;
    }

    footer h3 {
        margin-top: 30px;
        font-size: 1.5rem;
    }

    /* Responsive Footer Divider */
    .footer-divider {
        max-width: 90%;
        margin: 60px auto 40px;
    }

    .footer-credits {
        font-size: 0.8rem;
    }

    .footer-greeting {
        font-size: 0.75rem;
    }
}

@media (max-width: 768px) {
    .timeline {
        width: 100%;
        background: none;
        padding-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .timeline::before {
        display: none;
    }

    .timeline-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 90%;
        /* Optional: für bessere Kontrolle auf kleinen Bildschirmen */
    }

    .timeline-item .dot {
        position: static;
        margin-bottom: 10px;
        background-color: var(--accent-color);
        transform: none;
        /* Entfernt translateY für mobile */
    }

    .timeline-item .content {
        text-align: center;
        margin-left: 0;
    }
}


/* Stil der Progressbars */
progress {
    width: 100%;
    /* Damit die Progressbar die volle Breite ausnutzt */
    height: 20px;
    appearance: none;
    border-radius: 5px;
    overflow: hidden;
    opacity: 0;
    /* Anfangszustand ist unsichtbar */
    transform: scaleX(0);
    /* Anfangszustand: keine Breite */
    transition: opacity 0.5s ease, transform 1s ease;
    /* Animation für opazität und Breite */
}

/* Wenn die Progressbar sichtbar ist */
.progress-visible {
    opacity: 1;
    transform: scaleX(1);
    /* Setzt die Breite auf 100% */
}

/* Container für die Bento Cards */
#project-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    padding: 100px 80px 150px;
    max-width: 1400px;
    margin: 0 auto;
}

@media (max-width: 1302px) {
    #project-section {
        padding: 100px 40px 150px;
    }
}

@media (max-width: 768px) {
    #project-section {
        padding: 80px 20px 100px;
    }
}

/* Large Desktop - 3 Spalten */
@media (min-width: 1700px) {
    #project-section {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1800px;
    }
}

/* Ultrawide - 4 Spalten */
@media (min-width: 2900px) {
    #project-section {
        grid-template-columns: repeat(4, 1fr);
        max-width: 3100px;
    }
}


#project-section .section-heading {
    grid-column: 1 / -1;
}

/* Styling für jede Bento Card */
.bento-card {
    background: rgba(16, 17, 19, 0.5);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1.5px solid var(--glass-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: opacity 2s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    display: flex;
    flex-direction: column;
    height: 400px;
    /* Einheitliche Höhe */
    min-height: 400px;
    max-height: 400px;
    opacity: 0;
    transform: translateY(var(--spacing-md));
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.bento-card.card-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Bild */
.bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease, transform 0.3s ease;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    will-change: opacity, transform;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
}

/* Halbtransparenter Overlay-Hintergrund */
.bento-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
    pointer-events: none;
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

/* Inhalt */
.card-content {
    position: relative;
    padding: 32px;
    color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
    height: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
    will-change: opacity;
}

/* Tags Container */
.card-tags {
    position: absolute;
    top: 12px;
    left: 12px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-width: calc(100% - 24px);
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 10;
    pointer-events: none;
    will-change: opacity;
}

/* Tag Styles - Apple Chips Style */
.tag {
    display: inline-flex;
    align-items: center;
    padding: 6px var(--spacing-sm);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-regular);
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 6px 18px rgba(2, 8, 14, 0.25);
    transition: all var(--transition-fast);
    color: var(--text-color);
    /* uniform dark pill background for all tags; stroke/color applied per-category */
    background: var(--black-58);
}

.tag .material-symbols-rounded {
    font-size: 14px;
    margin-right: 6px;
}

/* Semitransparent backgrounds + matching stroke (blue tones) and dark readable text */
/* stronger semi-transparent backgrounds for contrast, white text and blue-toned stroke */
.tag-tech {
    background: var(--black-58);
    border: 1px solid rgba(77, 190, 243, 0.95);
    color: var(--text-color);
}

.tag-design {
    background: var(--black-58);
    border: 1px solid rgba(13, 110, 158, 0.95);
    color: var(--text-color);
}

.tag-skill {
    background: var(--black-58);
    border: 1px solid rgba(100, 210, 255, 0.95);
    color: var(--text-color);
}

.tag-area {
    background: var(--black-58);
    border: 1px solid rgba(6, 95, 136, 0.95);
    color: var(--text-color);
}

/* Hover-Effekt - nur Desktop */
@media (min-width: 1303px) {
    .bento-card {
        transition: opacity 0.4s ease, transform 0.2s ease;
    }

    .bento-card:hover::before {
        opacity: 1;
    }

    .bento-card:hover img {
        opacity: 0.35;
        transform: scale(1.05);
    }

    .bento-card:hover .card-content {
        opacity: 1;
    }

    .bento-card:hover .card-tags {
        opacity: 0;
    }
}

/* Stärkerer Drop Shadow beim Hover - nur Desktop */
@media (min-width: 1303px) {
    .bento-card:hover {
        box-shadow: 0px 8px 16px var(--black-70);
        transform: translateY(0) scale(1.02);
    }
}

/* Überschrift */
.card-content h3 {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spacing-md);
    overflow-wrap: break-word;
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    line-height: 1.2;
    max-width: 100%;
    pointer-events: none;
    will-change: auto;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Beschreibungstext */
.card-content p {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-lg);
    color: var(--secondary-text-color);
    word-wrap: break-word;
    overflow-wrap: break-word;
    pointer-events: none;
}

/* Button */
.card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    background: linear-gradient(to right, rgba(0, 105, 153, 0.7), rgba(77, 190, 243, 0.5));
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    border: 1px solid var(--accent-15);
    color: white;
    font-size: 1.2rem;
    font-weight: var(--font-weight-bold);
    padding: 0.7em 1.5em;
    border-radius: var(--radius-md);
    text-decoration: none;
    text-decoration-line: none;
    border-left: none;
    outline: none;
    min-width: 120px;
    text-align: center;
    transition: all var(--transition-base);
    transform: translateZ(0);
    will-change: background, border-color;
}

        .card-button::after {
            content: 'arrow_forward';
            font-family: 'Material Symbols Rounded';
            font-size: 1.2em;
            font-weight: normal;
            font-style: normal;
            line-height: 1;
            transform: translateY(2px);
            transition: transform 0.3s ease;
        }

        .card-button:hover::after {
            transform: translateX(4px) translateY(2px);
        }

        .card-button:hover {
            background: linear-gradient(to right, rgba(10, 139, 201, 0.8), rgba(109, 212, 255, 0.7));
            border-color: rgba(77, 190, 243, 0.5);
        }

        /* Responsive Design */

        /* Carousel Controls & Indicators - hidden on desktop */
        .carousel-controls,
        .carousel-indicators {
            display: none;
        }

        .carousel-wrapper {
            display: contents;
            /* Desktop: acts transparent, grid layout applies to children */
        }

        /* Tablet-Größe (zwei Karten nebeneinander) */
        @media (max-width: 1302px) {
            #project-section {
                position: relative;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 20px;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 50px;
                padding-bottom: 50px;
                overflow: hidden;
            }

            #project-section .section-heading {
                width: 75%;
                max-width: 900px;
                align-self: center;
                padding: 0;
            }

            #skill-section .section-heading {
                width: calc(100% - 40px);
                /* Account for wrapper's own 20px padding on each side */
                max-width: 1400px;
                align-self: center;
                margin-left: auto;
                margin-right: auto;
                padding: 0;
            }

            #education-section .section-heading {
                width: 100%;
                max-width: 800px;
                align-self: center;
                margin-left: auto;
                margin-right: auto;
                padding: 0;
            }

            /* Carousel Wrapper */
            .carousel-wrapper {
                display: flex;
                width: 75%;
                max-width: 900px;
                transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
                position: relative;
                overflow: visible;
                gap: 40px;
                padding-right: 0;
                perspective: 1500px;
                transform-style: preserve-3d;
                will-change: transform;
                backface-visibility: hidden;
                -webkit-backface-visibility: hidden;
            }

            /* Ensure last card centers properly */
            .bento-card:last-child {
                margin-right: 0;
            }

            /* Carousel Controls */
            /* .carousel-controls {
        display: flex;
        justify-content: space-between;
        width: 90%;
        max-width: calc(900px + 60px);
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 15;
        pointer-events: none;
    }

    .carousel-btn {
        pointer-events: all;
        background: rgba(0, 0, 0, 0.6);
        border: 1px solid rgba(77, 190, 243, 0.8);
        color: white;
        font-size: 2.2rem;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: url('Cursorpointer.svg') 0 0, pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        line-height: 1;
        padding: 0;
    }

    .carousel-prev {
        padding-right: 2px;
        padding-bottom: 5px;
    }

    .carousel-next {
        padding-left: 2px;
        padding-bottom: 5px;
    }

    .carousel-btn:hover {
        background: rgba(77, 190, 243, 0.3);
        transform: scale(1.1);
    }

    .carousel-btn:active {
        transform: scale(0.95);
    } */

            /* Carousel Indicators */
            .carousel-indicators {
                display: flex;
                gap: 8px;
                justify-content: center;
                margin-top: 25px;
            }

            .carousel-indicator {
                width: 10px;
                height: 10px;
                border-radius: 50%;
                background: var(--white-30);
                cursor: url('Cursorpointer.svg') 0 0, pointer;
                transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                    border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            }

            .carousel-indicator.active {
                background: var(--gradient-accent);
                width: 30px;
                border-radius: 5px;
            }

            .bento-card {
                flex: 0 0 100%;
                min-width: 100%;
                flex-direction: column;
                height: 580px;
                min-height: 580px;
                max-height: 580px;
                transform: scale(0.85) translateZ(-100px);
                /* Smaller and further back when inactive */
                opacity: 0.5;
                transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
                flex-shrink: 0;
            }

            .bento-card.active {
                transform: scale(1) translateZ(0);
                /* Full size when active */
                opacity: 1;
                z-index: 10;
                height: 580px;
                min-height: 580px;
                max-height: 580px;
            }

            .bento-card img {
                position: relative;
                height: 50%;
                /* Reduced from 60% to give more space for text on tablet */
                min-height: 50%;
                max-height: 50%;
                object-fit: cover;
                opacity: 1;
                transform: none;
                flex-shrink: 0;
                border-radius: 14px 14px 0 0;
            }

            .card-content {
                position: relative;
                opacity: 1;
                padding: 32px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                flex-grow: 1;
                word-wrap: break-word;
                overflow-wrap: break-word;

                /* Glassmorphism Effect */
                background: var(--white-03);
                backdrop-filter: var(--glass-blur);
                -webkit-backdrop-filter: var(--glass-blur);
                border-top: 1px solid var(--white-05);
                border-radius: 0 0 14px 14px;
                align-items: flex-start;
                /* Left align everything */
                text-align: left;
            }

            .card-tags {
                opacity: 1;
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 5;
            }

            .tag {
                font-size: 0.7rem;
                padding: 5px 10px;
            }

            .card-content h3 {
                font-size: 1.4rem;
                margin-bottom: 10px;
                margin-top: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
                line-height: 1.3;
                text-align: left;
            }

            .card-content p {
                font-size: 1rem;
                margin-bottom: 15px;
                flex-grow: 1;
                word-wrap: break-word;
                overflow-wrap: break-word;
                text-align: left;
            }

            .card-button {
                margin-top: auto;
                margin-bottom: 0px;
                align-self: flex-start;
                font-size: 1rem;
                padding: 14px 20px;
                /* Taller (14px) and less wide (20px instead of 28px) */
                min-width: 130px;
            }
        }

        footer {
            background-color: var(--primary-color);
            padding: 50px 20px;
        }

        @media (max-width: 768px) {}


        @media (max-width: 600px) {

            #project-section .section-heading,
            #skill-section .section-heading,
            #education-section .section-heading {
                width: 90%;
                max-width: 100%;
                padding: 0;
            }

            #project-section {
                padding: 30px 15px;
            }


            .carousel-wrapper {
                width: 90%;
                max-width: 100%;
                gap: 30px;
            }

            /* .carousel-controls {
        width: 95%;
    }

    .carousel-btn {
        width: 55px;
        height: 55px;
        font-size: 2rem;
    } */

            .bento-card {
                flex-direction: column;
                height: 600px !important;
                min-height: 600px !important;
                max-height: 600px !important;
                transform: none !important;
                will-change: auto;
                flex-shrink: 0;
                -webkit-tap-highlight-color: transparent;
                -webkit-touch-callout: none;
                -webkit-user-select: none;
                user-select: none;
            }

            .bento-card:active {
                transform: none !important;
                border-radius: 12px !important;
            }

            .bento-card img {
                position: relative;
                height: 280px;
                /* Increased from 240px to reduce text space on mobile */
                min-height: 280px;
                max-height: 280px;
                object-fit: cover;
                opacity: 1;
                transform: none !important;
                flex-shrink: 0;
                transition: none;
                will-change: transform;
                /* Hardware acceleration */
            }

            /* Remove heavy effects on mobile to improve performance */
            .bento-card {
                transition: transform 0.3s ease !important;
                /* Faster transition */
                backdrop-filter: none !important;
                -webkit-backdrop-filter: none !important;
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
                /* Simple shadow */
            }

            .card-content {
                position: relative;
                opacity: 1;
                padding: 24px;
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                min-height: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .card-tags {
                opacity: 1;
                position: absolute;
                top: 10px;
                left: 10px;
                z-index: 5;
            }

            .tag {
                font-size: 0.65rem;
                padding: 4px 9px;
            }

            .card-content h3 {
                font-size: 1.1rem;
                margin-bottom: 14px;
                margin-top: 0;
                word-wrap: break-word;
                overflow-wrap: break-word;
                hyphens: auto;
                line-height: 1.3;
                flex-shrink: 0;
            }

            .card-content p {
                font-size: 0.85rem;
                margin-bottom: 12px;
                line-height: 1.4;
                word-wrap: break-word;
                overflow-wrap: break-word;
            }

            .card-button {
                font-size: 1rem;
                padding: 0.65em 1.3em;
                min-width: 110px;
                flex-shrink: 0;
                margin-top: 15px;
            }

            .bento-card::after {
                content: none;
            }


            header {
                padding: 0 20px;
                margin-bottom: 0px;
                display: flex;
                justify-content: center;
                flex-wrap: wrap-reverse;
            }

            footer {
                background-color: var(--primary-color);
                padding: 40px 20px;
            }


        }

        /* Responsive Design für mobile Geräte */
        @media (max-width: 1302px) {
            .skill-container {
                transition: max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1), padding 0.18s ease;
                overflow: hidden;
                max-height: 105px;
            }

            .skill-container h3 {
                cursor: url('Cursorpointer.svg') 0 0, pointer;
            }

            .skill-container h3::after {
                display: block;
                /* Show chevron on tablet/mobile */
            }

            .card-active {
                max-height: 1000px;
                overflow: visible;
            }
        }


        @media (max-width: 768px) {
            .skill-container {
                transition: max-height 0.18s cubic-bezier(0.4, 0, 0.2, 1), padding 0.18s ease;
                overflow: hidden;
                max-height: 95px;
            }

            .skill-container h3 {
                font-size: 0.9rem;
                padding: 22px 26px 12px 26px;
                cursor: url('Cursorpointer.svg') 0 0, pointer;
            }

            .skill-container .skill-subtitle {
                font-size: 0.72rem;
            }

            .skill-container h3::after {
                display: block;
                /* Show chevron on mobile */
                font-size: 1.5rem;
                top: 20px;
            }

            .card-active {
                max-height: 1000px;
                overflow: visible;
            }
        }

        @media (max-width: 768px) {
            #skill-section .wrapper {
                margin-top: 70px;
                /* kleinerer Abstand nach oben */
                gap: 40px;
                /* kleinerer Abstand zwischen den Items */
                grid-template-columns: 1fr;
                justify-content: center;
                /* Optional: Items links ausrichten */
                padding: 0 10px;
                /* Optional: etwas Innenabstand */
            }

            .skill-container ul li {
                padding: 16px 12px;
            }
        }

        @media (max-width: 1302px) {
            .skill-container {
                transform: none !important;
                /* Deaktiviert 3D-Transformation auf Mobile/Tablet */
                box-shadow: 0px 8px 16px var(--black-40);
                /* Leichterer, stabiler Schatten */
            }

            .skill-container:hover {
                box-shadow: 0px 8px 20px var(--black-60);
                /* Optional stärkerer Hover-Schatten */
                transform: none !important;
                /* Kein Verschieben oder Drehen */
            }
        }

        @media (max-width: 768px) {
            .skill-container {
                transform: none !important;
                /* Deaktiviert 3D-Transformation */
                box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
                /* Leichterer, stabiler Schatten */
            }

            .skill-container:hover {
                box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
                /* Optional stärkerer Hover-Schatten */
                transform: none !important;
                /* Kein Verschieben oder Drehen */
            }
        }

        /* --- ULTRAWIDE LAYOUT FIXES (Override) --- */
        /* --- ULTRAWIDE LAYOUT FIXES (Override) --- */
        @media (min-width: 2900px) {

            /* 1. General Sections (Tools, Education, Skill): Container 100%, Header 80% */
            #skill-section .section-heading,
            #tools-section .section-heading,
            #education-section .section-heading {
                max-width: 80% !important;
                padding: 0 !important;
                margin-left: auto;
                margin-right: auto;
            }

            #skill-section,
            #tools-section,
            #education-section {
                max-width: none !important;
                width: 100% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
            }

            /* 2. Uncap Content Containers to match 80% Heading Alignment */
            #skill-section .wrapper {
                max-width: 80% !important;
                width: 80% !important;
                margin-left: auto !important;
                margin-right: auto !important;
            }

            /* Education Section: Keep content fixed/centered, align heading with it */
            #education-section .section-heading {
                max-width: 800px !important;
                /* Match max-width of .tab-navigation (800px) */
                width: 80% !important;
                /* Ensure it respects the gap */
                margin-left: auto !important;
                margin-right: auto !important;
                padding: 0 !important;
                text-align: left;
                /* Ensure text is left-aligned within the centered box */
            }

            /* 3. Project Section (Grid acts as Container): Container 80%, Header 100% of Container */
            #project-section {
                max-width: none !important;
                width: 80% !important;
                padding-left: 0 !important;
                padding-right: 0 !important;
                margin-left: auto !important;
                margin-right: auto !important;
                grid-template-columns: repeat(4, 1fr);
            }

            #project-section .section-heading {
                max-width: 100% !important;
                padding: 0 !important;
                /* Align text left within the 80% container */
                text-align: left !important;
            }

            footer .grid-container,
            .footer-divider {
                max-width: none !important;
                width: 80% !important;
            }

            /* 4. Fix Double Row Issue on Ultrawide (if needed) */
            .badge-row-2 {
                display: none;
            }

            .badge-row-1 {
                margin-bottom: 0;
            }

            .badge-track {
                width: max-content;
            }
        }

        /* 5. Spacing Adjustments (General, outside media query if applies everywhere, or specific) 
   User asked for "less padding to bottom content" (tightness complaint?) OR "make consistent".
   We will INCREASE it to make it look better as previously it was visually too tight. */

        #education-section .section-heading {
            margin-bottom: 60px !important;
        }

        #tools-section .section-heading {
            margin-bottom: 60px !important;
        }

        /* 3. Spacing Adjustments (General, outside media query if applies everywhere, or specific) 
   User asked for "less padding to bottom content" (tightness complaint?) OR "make consistent".
   We will INCREASE it to make it look better as previously it was visually too tight. */

        #education-section .section-heading {
            margin-bottom: 60px !important;
        }

        #tools-section .section-heading {
            margin-bottom: 60px !important;
        }