/* FONTS */

/* 1. Schriftart: PP Neue Montreal (unverändert, aber mit korrektem Pfad) */
@font-face {
    font-family: 'PP Neue Montreal';
    src: url('/fonts/PPNeueMontreal-Light.woff2') format('woff2'),
         url('/fonts/PPNeueMontreal-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap; 
}

/* 2. Schriftart: Sometype Mono (NEU hinzugefügt) */
@font-face {
  font-family: 'Sometype Mono';
  src: url('/fonts/SometypeMono-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* GENERAL STYLES */
::selection {
    background-color: #7772E4;
    color: #1C0F30;
}

@property --pixel-mask-size {
    syntax: '<length-percentage>';
    inherits: false;
    initial-value: 80px;
  }

html, body {
    background-color: #000000;
    background: #000000;
    color: #B0B0B0;
    font-family: monospace;
    font-size: 12px;
    font-family: 'Sometype Mono', monospace;
    -ms-overflow-style: none;  /* IE und Edge */
    scrollbar-width: none;  /* Firefox */
}



html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;  /* Chrome, Safari und Opera */
}
.container {
    width: 100%;
    box-sizing: border-box;
}

a {
    transition: opacity 0.4s ease-in-out;
    text-decoration: none;
}

a:hover {
    text-decoration: none!important;
}

h1{
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 300;
    color: #cdcdcd;
}

h2{
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 1.6px;
}

h3{
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #cdcdcd;
}

h4{
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #cdcdcd;
    opacity: 0.5;
}



/* NAVBAR */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 32px;
    font-family: 'Sometype Mono', monospace;
    z-index: 99;
    position: fixed;
    top: 0;
    width: calc(100% - 60px);
    background-color: #000000;
    color: #fff;
}

.logo {
    color: #666;
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-decoration: none;
}

.bold {
    color: #cdcdcd;;
}
.blinking {
    animation: blink 1.2s linear infinite;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

.nav-center {
    display: flex;
    justify-content: center;
    gap: 12px;
    width: 100%;
    margin-left: 100px;
}
.nav-button {
    padding: 6px 13px;
    border: 1px solid #66666670;
    border-radius: 4px;
    background: none;
    color: #cdcdcd;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    margin-top: 10px;
    margin-bottom: 4px;
}



.nav-button-round {
    padding: 6px 12px;
    border: 1px solid #66666670;
    border-radius: 30px;
    background: none;
    color: #cdcdcd;
    cursor: pointer;
    transition: 0.3s;
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    margin-top: 10px;
    margin-bottom: 4px; /* Hinzugefügt für komplette Konsistenz */
}

.nav-button-round:hover {
    color: black;
    background-color: #cdcdcd;
    border-color: #cdcdcd;
}

.nav-button-round {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link,
.nav-button-round {
    margin-right: 20px;
}

.icon {
    width: 14px;
    height: 14px;
}

.nav-link {
    text-decoration: none;
    color: #cdcdcd;
    transition: 0.3s;
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
}

.nav-link:hover {
    color: #cdcdcd;
}

.divider {
    width: 1px;
    height: 10px;
    background-color: #666;
}

/* DROPDOWN MENU */
.menu-container {
    position: relative;
    padding-bottom: 6px;
}

.menu-container:hover .nav-button,
.menu-container:hover .dropdown-menu {
    color: black;
    background-color: #cdcdcd;
    border-color: #cdcdcd;
    opacity: 1.0;
    transition: opacity 1.3s ease-in-out;
}

.menu-container:hover .nav-button-round,
.menu-container:hover .dropdown-menu {
    color: black;
    background-color: #cdcdcd;
    border-color: #cdcdcd;
    opacity: 1.0;
    transition: opacity 1.3s ease-in-out;
}
/* Custom rule to remove border from the top-right "LINKS" navigation button */
.menu-container.right-aligned .nav-button-round {
    border: none;
}

.menu-container:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 0px);
    left: 126%;
    transform: translateX(-50%);
    background-color:hsl(0 0% 8% / 1) !important;
    border: 1px solid #6666670!important;
    padding: 4px;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    width: 390px;
    font-family: 'Sometype Mono', monospace;
    opacity: 1.0;
}

.menu-container:hover .dropdown-menu,
.dropdown-menu:hover {
    display: block;
    animation: fadeIn 0.3s ease-in forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dropdown-menu.lefter{
    margin-left: -178px!important;
}

.dropdown-menu.music{
    margin-left:9px!important;
}

.right-aligned .dropdown-menu {
    right: 0;
}

.menu-container.right-aligned .dropdown-menu {
    width: 125px;
}

/* MENU ITEMS */
a.menu-item {
    text-decoration: none;
    color: inherit;
}

a.menu-item:hover {
    color: inherit;
}

.menu-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding: 20px 0;
    margin-top: 0px;
    padding-top: 0px;
    transition: top 0.5s ease;
    border-radius: 3px;
    opacity: 0;
    transform: translateX(-5%);
    animation: slideIn 0.5s forwards;
    animation-fill-mode: both;
}

.menu-item:hover {
    background-color: #f0f0f012;
}

.menu-elements {
    display: flex;
    align-items: center;
}

.menu-icon {
    width: 32px;
    height: 32px;
    padding: 10px;
    background: hsl(0 0% 20% / 1);
    border-radius: 4px;
    margin-right: 12px;
    margin-top: 16px;
    margin-left: 16px;
    opacity: 0.4;
    transition: background 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.menu-item:hover .menu-icon {
    opacity: 1;
    background: black;
}

.menu-title {
    font-family: 'Sometype Mono', monospace;
    color: #cdcdcd;
    font-size: 12px;
    letter-spacing: 1.6px;
}

.menu-desc {
    font-size: 12px;
    color: #cdcdcd;
    letter-spacing: 1.6px;
}

.menu-info {
    display: flex;
    color: #cdcdcd;
    align-items: center;
    gap: 10px;
    margin-left: 6px;
    position: relative;
    top: 8px;
    transition: top 0.4s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
}

.menu-item:hover .menu-info {
    top: -2px;
}

.product-description {
    font-family: 'PP Neue Montreal', sans-serif;
    margin-left: 86px;
    margin-top: -18.5px;
    margin-bottom: 0px;
    padding-bottom: 4px;
    opacity: 0.0;
    color: #f0f0f0;
    font-size: 10px;
    letter-spacing: 1px;
    top: 8px;
    position: relative;
    pointer-events: none;
    transition: top 0.6s cubic-bezier(0.4, 0, 0.6, 1), opacity 0.2s cubic-bezier(0.4, 0, 0.6, 1);
}

.menu-item:hover .product-description {
    top: -4px;
    opacity: 1.0;
    transition: top 0.4s cubic-bezier(0.42, 0, 0.58, 1), opacity 0.4s cubic-bezier(0.42, 0, 0.58, 1);
    display: block;
}

/* MENU ANIMATIONS */
.menu-container:hover .menu-item:nth-of-type(1),
.dropdown-menu:hover .menu-item:nth-of-type(1) {
    animation-delay: 0s;
}

.menu-container:hover .menu-item:nth-of-type(2),
.dropdown-menu:hover .menu-item:nth-of-type(2) {
    animation-delay: 0.1s;
}

.menu-container:hover .menu-item:nth-of-type(3),
.dropdown-menu:hover .menu-item:nth-of-type(3) {
    animation-delay: 0.2s;
}

@keyframes slideIn {
    from {
        transform: translateX(-5%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ERSETZEN SIE DIESE REGEL in styles.css */
.title-img {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
    /* Setzt die finale "Ruheposition" des Elements statisch. */
    margin-top: -20px;
    left: 0;
    z-index: 1;

    /* Startzustand für die Animation: Unten, verkleinert und unsichtbar. */
    transform: translateY(320px) scale(0.9);
    opacity: 0;

    /* Ruft die neue, performante Animation auf. */
    animation: slideAndScaleUp 2.2s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
    animation-delay: 0.8s;
}

/* ERSETZEN SIE DIESE KEYFRAME-REGEL */
@keyframes slideAndScaleUp {
    100% {
        /* Endzustand der Animation: An der finalen Position und in Originalgröße. */
        transform: translateY(0) scale(1.0);
        opacity: 1;
    }
}

.title-img img {
    display: block;
    border-radius: 20px;
    object-fit: cover;
}

.project-img{
    width: 1000px;
    margin: auto;

}

.project-catch {
    width: 100%;
    height: 95vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    color: #cdcdcd;
    opacity: 0; /* NEU: Macht den gesamten Container initial komplett unsichtbar. */
    transition: opacity 0.5s ease-in-out; /* NEU: Sorgt für ein sanftes Einblenden des Containers. */
}

.project-catch-home {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-sizing: border-box;
    padding: 20px;
    color: #cdcdcd;
}

.project-catch h1 {
    font-size: 28px;
    color: #b0b0b0;
    margin-bottom: 10px;
}

.project-icon {
    position: absolute;
    top: 35%; /* NEU: Immer 50% von oben */
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert das Element perfekt */
    will-change: transform, opacity;
}


.project-titles {
    position: absolute;
    top: 35%; /* NEU: Immer 50% von oben */
    margin-top: 100px; /* Der Abstand zum Icon bleibt erhalten */
    left: 50%;
    /* NEU: Y-Achse zur Zentrierung hinzugefügt */
    transform: translate(-50%, -50%);
}

.project-titles-home {
    position: absolute;
    top: 45%;
    margin-top: 160px;
    z-index: 9;
}
.project-titles-home h1, .project-titles-home p {
    transition: transform 1s ease, opacity 1s ease;
}

/* "Makin.." (p) soll sofort beim Scrollen animiert werden */
.project-titles-home p {
    transition-delay: 0s;
}

/* "DOMINIC ZILLER" (h1) wird leicht verzögert, um die Überlappung zu vermeiden */
.project-titles-home h1 {
    transition-delay: 0.15s;
}

@keyframes performantMoveToPosition {
    0% {
        opacity: 0;
        /* Bewegt das Element von seiner Endposition (300px) zum exakten Viewport-Zentrum und skaliert es */
        transform: translate(-50%, calc(-50% + 50vh - 300px)) scale(0.25);
    }
    60% {
        opacity: 1;
        /* Hält die Position im Viewport-Zentrum und skaliert es größer */
        transform: translate(-50%, calc(-50% + 50vh - 300px)) scale(0.35);
    }
    80% {
        opacity: 1;
        /* Hält diese Position und Größe, bevor es zur Endposition geht */
        transform: translate(-50%, calc(-50% + 50vh - 300px)) scale(0.35);
    }
    100% {
        opacity: 1;
        /* Kehrt zur im CSS definierten Standard-Transformation zurück (seine finale Position) */
        transform: translate(-50%, -50%) scale(0.2);
    }
}

.project-headline{
    font-family: 'Sometype Mono', monospace;
    font-size: 10px!important;
    letter-spacing: 1.6px;
    color: #cdcdcd!important;
}


.project-claim{
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 30px!important;
    font-weight: 300;
    margin-top:14px;
    margin-bottom:16px;
    color: #cdcdcd!important;
    width: 100%;
}

.project-catch p {
    font-size: 28px;
    color: #b0b0b0;
    max-width: 900px;
    line-height: 1.5;
}

/* styles.css */

/* NEU: Trigger-Klassen für die Animation */
.project-catch.animate-in {
    opacity: 1; /* NEU: Blendet den Container ein, wenn die Animationen starten. */
}

.project-catch.animate-in .project-icon {
    animation: performantMoveToPosition 1.8s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
}

/* === NEU & KORRIGIERT (in styles.css) === */

/* Definiert den unsichtbaren Startzustand für h1 und p,
   solange .project-catch NICHT die .animate-in Klasse hat. */
   .project-catch h1,
   .project-catch p {
       opacity: 0;
       transform: translateY(20px);
   }
   
   /* Wendet die Animation an, SOBALD .animate-in gesetzt wird. */
   .project-catch.animate-in h1,
   .project-catch.animate-in p {
       animation: fadeInUp 1.5s cubic-bezier(0.25, 0.1, 0.25, 1.0) forwards;
   }
   
   /* Die Verzögerungen bleiben wie gehabt. */
   .project-catch.animate-in h1 {
       animation-delay: 1.5s;
   }
   
   .project-catch.animate-in p {
       animation-delay: 1.6s;
   }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    65% {
        opacity: 1;
        transform: translateY(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



/* In styles.css */
.scroll-button-project-page{
bottom: 0px!important;
}

.scroll-button {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 300;
    color: #cdcdcd;
    background-color: #000000;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 2px 14px 2px 2px;
    cursor: pointer;
    position: absolute;
    bottom: 100px;
    left: 50%;
    /* MODIFIED: Set the initial off-screen position and horizontal centering */
    transform: translateX(-55.5%) translateY(60px);
    z-index: 3;

    /* Startet unsichtbar */
    opacity: 0; 

    /* MODIFIED: Added 'transform' to the transition for the slide-up animation */
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.5s ease-out, background-color 0.5s ease-in-out;
}
.scroll-button.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#scrollButton.hidden {
    opacity: 0;
    pointer-events: none;
}

.scroll-button .button-icon {
    margin-right: 6px;
    padding: 6px;
    border-radius: 2px;
    background-color: #000000;
    width: 10px;
    height: 12px;
    transition: filter 0.3s ease;
}




.scroll-button .scroll-text {
    transition: opacity 0.5s ease;
}

/* BACKGROUND & CANVAS */
.background-image {
    margin-left: 32px;
    margin-right: 32px;
    width: calc(100% - 64px);
}

.bg-container {
    height: 90vh;
    width: 100%;
    overflow: hidden;
    position: relative;
    cursor: crosshair;
    background-color: #000;
}

.bg-canvas {
    z-index: 2;
    mix-blend-mode: hard-light;
    width: 900px;
    max-width: 94vw;
    height: auto;
    aspect-ratio: 1000 / 1000;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    transition: width 0.4s ease-out, height 0.4s ease-out, max-height 0.4s ease-out;
}

.bg-img-base {
    z-index: 1;
    mix-blend-mode: hard-light;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    width: 900px;
    max-width: 94vw;
    height: auto;
    aspect-ratio: 900 / 450;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    user-select: none;
    -webkit-user-drag: none;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
    transition: width 0.4s ease-out, height 0.4s ease-out, max-height 0.4s ease-out, opacity 0.3s ease-in-out;
}

.bg-img-base.visible {
    opacity: 1;
}

/* CHAPTER SECTION */
.chapter-section {
    padding-left: 32px;
    padding-right: 32px;
    max-width: 685px;
}

.chapter-title {
    color: #cdcdcd;
    margin: 0;
    margin-bottom: 28px;
}

.chapter-description {
    font-family: 'PP Neue Montreal', sans-serif;
    color: #cdcdcd;;
    font-size: 24px;
    line-height: 1.4;
    font-weight: 300;
    margin-top: 10px;
    margin-bottom: 60px;
}

.chapter-description span {
    display: inline;
    opacity: 0.2;
    transition: opacity 0.5s ease-in-out;
}

.chapter-description span.is-revealed {
    opacity: 1.0;
}

.chapter-description br {
    display: block;
    content: "";
    margin-top: 0;
}






.main-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 800px;
    margin: 120px auto 0px auto; 
    padding: 0 32px;
    box-sizing: border-box;
    text-align: center;
}

.project-claim-static {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 30px;
    font-weight: 300;
    color: #cdcdcd;
    margin-bottom: 28px;
}

/* Find and modify this existing rule */
.text {
    font-family: 'PP Neue Montreal', sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: 0.5px;
    color: #cdcdcd;
    opacity: 0.4;
    margin-top: 0px;
    margin-bottom: 80px;
}

/* Add this new rule anywhere in your CSS file */
.text .highlight {
    color: #cdcdcd; /* Sets the highlight color back to full opacity */
}

.visual-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

.more-margin{
    margin-bottom:60px;
}

.visual-image-container {
    margin-top: 40px;
    margin-bottom: 10px;
    box-sizing: border-box;
    width: 60%;
}

.visual-image-container img,
.visual-image-container video {
    display: block;
    width: 100%;
    height: auto;
}

.visual-image-full {
    /* 1. Breite festlegen (Viewport-Breite minus 64px für den Abstand) */
    width: calc(100% - 64px);
    
    /* 2. Automatische Ränder für die horizontale Zentrierung */
    margin-left: auto;
    margin-right: auto;

    /* Hilfreiche Eigenschaft beibehalten */
    box-sizing: border-box; 
}

.visual-image-full img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
}








.visual-caption {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 10px;
    color: #cdcdcd;
    opacity: 0.4;
    letter-spacing: 0.5px;
    margin: 0;
}


/* ===== START: NEUER CSS-CODE ===== */
.features-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 960px;
    margin: 120px auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.features-section-wrapper .lorem-text {
    max-width: 660px; /* Stellt sicher, dass der Textblock lesbar bleibt */
    margin-bottom: 80px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px 30px; /* Zeilen- und Spaltenabstand */
    width: 60%;
    text-align: left;
    /* NEU: Zentriert das Grid horizontal auf der Seite */
    margin-left: auto;
    margin-right: auto;
    margin-top: 100px;
    margin-bottom: 160px;
}

.feature-icon-container {
    height: 50px; /* Feste Höhe, um eine konsistente Grundlinie zu schaffen */
    display: flex;
    align-items: flex-start; /* Richtet die Icons oben im Container aus */
}


.feature-item img {
    zoom: 0.5;
}

.feature-title {
    font-family: 'PP Neue Montreal', sans-serif;
    color: #cdcdcd;
    font-size: 12px;
    font-weight: 500;
    margin: 0 0 10px 0;
    letter-spacing: 0.6px;
    text-transform: capitalize;
}

.feature-description {
    font-family: 'PP Neue Montreal', sans-serif;
    color: #cdcdcd;
    opacity: 0.5;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.6px;
    margin: 0;
    margin-bottom: 25px;
}







/* TILES */
.tiles-container {
    display: flex;
    margin: 32px 32px 120px; /* Adjusted margin to apply 300px only to the bottom */
}

/* NEU: Definiert den Link als flexibles Element.
  Dies ist der wichtigste Schritt, um die Kacheln gleichmäßig zu verteilen.
*/
/* Passen Sie Ihre bestehende .tile-link Regel an */
.tile-link {
    flex: 1;
    display: flex;
    text-decoration: none !important;
    color: inherit !important;
    transition: flex 0.3s ease;
    margin-left: 10px; /* NEU: Fügt links von jeder Kachel einen Abstand hinzu */
}

/* Fügen Sie diese GANZ NEUE Regel hinzu */
.tile-link:first-child {
    margin-left: 0; /* NEU: Entfernt den Abstand bei der allerersten Kachel */
}

/* KORRIGIERT: Die Hover-Animation wirkt jetzt auf den Link statt auf die Kachel */
.tile-link:hover {
    flex: 1.2; /* Lässt den Link beim Hovern wachsen */
    opacity: 1 !important; /* Verhindert unerwünschte Transparenz */
}


.tile {
    background-color: rgba(255, 255, 255, 0.07);
    padding: 20px;
    height: 500px;
    width: 100%; /* Füllt die Breite des umschließenden Links aus */
    position: relative;
    color: #b0b0b0;
    border-radius: 6px;
    overflow: hidden;
    /* Die 'flex'-Transition wurde nach oben zu .tile-link verschoben */
    transition: background-color 0.3s ease,
                color 0.3s ease,
                opacity 0.6s ease-out;
    opacity: 0;
    /* "flex: 1" wurde von hier entfernt, da es jetzt auf .tile-link liegt */
}

/* KORRIGIERT: Farb- und Stiländerungen werden durch den Hover auf den Link ausgelöst,
   wirken aber auf die Kachel im Inneren. */
.tile-link:hover .tile {
    background-color: #7772e4;
    color: #1C0F30;
}

.tile h1 {
    margin: 0;
    font-size: 30px;
    transition: color 0.3s ease, font-size 0.3s ease;
    color: #cdcdcd;
}

.tile-link:hover .tile h1 {
    color: #1C0F30;
    font-size: 40px;
}

.tile img.tile-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    transition: opacity 0.3s ease;
}

.tile-link:hover .tile .tile-icon {
    opacity: 0;
}

.tile-info {
    font-family: 'PP Neue Montreal', sans-serif;
    position: absolute;
    bottom: -100px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    transition: bottom 0.3s ease;
    color: #1C0F30;
    opacity: 0;
}

.tile-link:hover .tile .tile-info {
    bottom: 20px;
    opacity: 1;
}

.tile-info span {
    background-color: rgba(28, 15, 48, 0.07);
    padding: 10px;
    border-radius: 4px;
    width: auto;
}

.tile-info-bottom {
    background-color: rgba(28, 15, 48, 0.07);
    padding: 10px;
    border-radius: 4px;
}

.tile-link:hover .tile .tile-info span,
.tile-link:hover .tile .tile-info-bottom {
   background-color: rgba(28, 15, 48, 0.1);
   color: #1C0F30;
}


.tile h1 {
    margin: 0;
    font-size: 30px;
    transition: color 0.3s ease, font-size 0.3s ease;
    color: #cdcdcd;;
}

.tile:hover h1 {
    color: #1C0F30;
    font-size: 40px;
}

.tile img.tile-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
    transition: opacity 0.3s ease;
}

.tile:hover .tile-icon {
    opacity: 0;
}

.tile-info {
    font-family: 'PP Neue Montreal', sans-serif;
    position: absolute;
    bottom: -100px;
    left: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    transition: bottom 0.3s ease;
    color: #1C0F30;
    opacity: 0;
}

.tile:hover .tile-info {
    bottom: 20px;
    opacity: 1;
}

.tile-info span {
    background-color: rgba(28, 15, 48, 0.07);
    padding: 10px;
    border-radius: 4px;
    width: auto;
}

.tile-info-bottom {
    background-color: rgba(28, 15, 48, 0.07);
    padding: 10px;
    border-radius: 4px;
}

.tile:hover .tile-info span,
.tile:hover .tile-info-bottom {
   background-color: rgba(28, 15, 48, 0.1);
   color: #1C0F30;
}


/* ========================================================= */
/* ===== FINALER FOOTER CODE (DESKTOP & MOBILE) ===== */
/* ========================================================= */

/* Hide Old Footer */
.footer {
    display: none !important;
}

/* New Footer Styles */
.new-footer {
    font-family: 'Sometype Mono', monospace;
    color: #cdcdcd;
    padding: 40px 32px 20px 32px;
    background-color: #000;
    margin-top: 120px;
}

.footer-main-contact {
    text-align: left; /* Geändert von 'center' zu 'left' */
    margin-bottom: 20px;
}

.footer-main-contact p {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 30px;
    font-weight: 300;
    margin: 0;
    color: #cdcdcd;
}

.footer-main-contact .get-in-touch {
    font-family: 'PP Neue Montreal', sans-serif;
    font-size: 30px;
    font-weight: 300;
    text-decoration: none;
    color: #cdcdcd;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.footer-main-contact .get-in-touch:hover {
    opacity: 1;
}

.footer-bottom-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid rgba(205, 205, 205, 0.25);
    padding-top: 20px;
}

.footer-credits {
    display: flex;
    flex-direction: column;
    gap: 1px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.5;
}

.footer-links-new {
    display: flex;
    gap: 40px;
}

.footer-column {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.footer-column-title {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: 0.5;
}

.footer-column a {
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #cdcdcd;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.footer-column a:hover {
    opacity: 0.7;
}


/* ========================================= */
/* INLINE-ICON STYLES FÜR CHAPTER DESCRIPTION */
/* ========================================= */

.chapter-description-overview {
    margin-top:240px;
    margin-bottom:40px;
    margin-left: 32px;;
    font-family: 'PP Neue Montreal', sans-serif;
    color:#cdcdcd;
    font-weight: 300;
    font-size: 32px; /* Diesen Wert an die gewünschte Textgröße anpassen */
    line-height: 1.2;
    max-width: 570px; /* Optional: Begrenzt die Breite des Textblocks */
}

.word-icon-wrapper-grey{
    opacity: 0.5;
}

.inline-icon {
    /* WICHTIG: Definiert die Größe des Icons */
    width: 32px;   /* Gleiche Höhe wie die Schriftgröße des umgebenden Textes */
    height: 32px;
    /* WICHTIG: Sorgt dafür, dass das Icon auf der gleichen Linie wie der Text bleibt */
    vertical-align: middle; 

    /* NEU: Hebt das Icon um 5px an */
    transform: translateY(-3px);
    
    /* Stellt sicher, dass das Icon auch auf Touch-Geräten gut aussieht */
    display: inline-block;
}

/* Anpassung der Schriftgröße für kleinere Bildschirme */
@media (max-width: 768px) {
    .chapter-description {
        font-size: 18px;
    }

    .inline-icon {
        width: 18px;
        height: 18px;
    }
}

.gallery-work-item {
    display: block;
    
    /* WICHTIG: Definiert die Breite auf 100% minus den gewünschten Rand (40px links + 40px rechts) */
    width: calc(100% - 64px); 
    
    /* LÖSUNG: Zentriert das Element horizontal und weist den Browser an, 
       den überschüssigen Platz (die 80px) als gleichmäßigen Margin (40px links, 40px rechts) zu verwenden. */
    margin: 0 auto 60px auto; 
    
    /* max-width ist jetzt redundant, kann aber als safety-catch bleiben */
    /* max-width: calc(100% - 80px); */ 
    
    text-decoration: none;
    color: inherit;
    position: relative; 
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.3s ease;
}

.work-name{
    margin-bottom: 4px;
    margin-top: 10px;
}
.work-description{
    margin-top: 0px;
}


/* Mobile Korrektur */
@media (max-width: 768px) {
    .gallery-work-item {
        /* Mobile: 20px Rand links/rechts */
        width: calc(100% - 40px); /* 100% minus 20px links und 20px rechts */
        margin: 0 auto 40px auto; /* Vertikaler Abstand 40px, horizontal zentrieren */
    }
}

.work-image {
    top: 0;
    left: 0;
    width: 100%; /* Das Bild füllt 100% seines work-image-container aus */
    height: auto;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    /* max-width: calc(100% - 80px); MUSS HIER ENTFERNT WERDEN */
}



/* 1. Ein Flex-Container für die Elemente, die nebeneinander stehen sollen */
/* WICHTIG: Ersetzen Sie `.gallery-work-row` durch den tatsächlichen Klassennamen 
   des Elternelements von .gallery-work-item-square und .gallery-work-item-long,
   falls er anders lautet. */
.gallery-work-row {
    display: flex;
    justify-content: space-between; /* Verteilt den Platz gleichmäßig zwischen den Elementen */
    gap: 12px; /* Setzt den Abstand ZWISCHEN den Elementen (anstelle von Margins) */
    
    /* Der Container soll die gleiche äußere Breite/Ränder haben wie die anderen Items */
    width: calc(100% - 64px); 
    margin: 0 auto 60px auto; 
}


/* 2. Styles für die nebeneinander liegenden Elemente */
.gallery-work-item-square{
    /* Setzt die Breite für beide Elemente auf 50% */
    width: calc(60% - 8px); /* 50% der Reihe minus die Hälfte des 32px Gaps (16px) *
    flex-shrink: 0; /* Verhindert das Schrumpfen */
    flex-grow: 1; /* Erlaubt gleichmäßiges Wachsen */
    
    /* Setzen Sie hier alle allgemeinen Stile, die Sie von .gallery-work-item benötigen. */
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative; 
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Kein margin: 0 auto; da sie im Flex-Container liegen! */
}

.gallery-work-item-long {
    /* Setzt die Breite für beide Elemente auf 50% */
    width: calc(40% - 8px); /* 50% der Reihe minus die Hälfte des 32px Gaps (16px) *
    flex-shrink: 0; /* Verhindert das Schrumpfen */
    flex-grow: 1; /* Erlaubt gleichmäßiges Wachsen */
    
    /* Setzen Sie hier alle allgemeinen Stile, die Sie von .gallery-work-item benötigen. */
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative; 
    overflow: hidden; 
    cursor: pointer;
    transition: transform 0.3s ease;
    /* Kein margin: 0 auto; da sie im Flex-Container liegen! */
}

/* Optional: Korrektur für .gallery-work-item-square, um ein echtes Quadrat zu erzwingen */
/* Dies hängt von Ihrer HTML-Struktur ab (z.B. mittels Padding-Hack) */
.gallery-work-item-square .image-wrapper {
    height: auto;
    position: relative;
    overflow: hidden;
}

@media (max-width: 768px) {
    /* 1. Container: Zeigt Elemente untereinander an und korrigiert die Ränder/Abstände */
    .gallery-work-row {
        flex-direction: column; /* Elemente untereinander */
        gap: 40px; /* Vertikaler Abstand (entspricht dem margin-bottom der Einzel-Items) */
        
        /* Mobile Ränder anpassen: 20px links/rechts */
        width: calc(100% - 40px); 
        margin: 0 auto 40px auto; 
    }
    
    /* 2. Elemente: Full-Width auf Mobilgeräten */
    .gallery-work-item-square,
    .gallery-work-item-long {
        width: 100%; /* Nimmt die gesamte Breite des Containers ein */
        
        /* Optional: Falls Sie den vertikalen Abstand nur via gap im Container steuern möchten,
           können Sie hier margin-bottom: 0 hinzufügen, was aber dank gap nicht nötig ist. */
    }
}















/* Responsive adjustments for the new footer */
/* Responsive adjustments for the new footer */
@media (max-width: 768px) {
    .new-footer {
        padding: 40px 20px 20px 20px;
        margin-top: 80px;
    }
    .footer-main-contact p,
    .footer-main-contact .get-in-touch {
        font-size: 28px;
    }
    .footer-bottom-bar {
        flex-direction: column;
        align-items: flex-start; /* Geändert: Richtet alle Elemente links aus */
        gap: 60px;
    }

.footer-links-new {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 15px;
    width: 100%;
    /* Flexbox-Eigenschaften werden entfernt oder zurückgesetzt, da Grid verwendet wird */
    flex-wrap: unset;
    justify-content: unset;
}

.mobile-only-footer-column {
    display: flex; /* Stellt die Sichtbarkeit auf mobilen Geräten wieder her */
}
    .footer-column {
        align-items: flex-start; /* Geändert: Richtet Inhalt in den Spalten links aus */
    }
    .footer-credits {
        align-items: flex-start; /* Geändert: Richtet die Credits links aus */
        order: 2;
    }
    .footer-links-new {
        order: 1;
    }
}
/* --- IMAGE GALLERY --- */
.gallery-container {
    width: calc(100% - 64px);
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.gallery-main-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

.gallery-thumbnails {
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Erlaubt horizontales Scrollen */
    padding-bottom: 10px;
    touch-action: pan-x; /* NEU: Verhindert das vertikale Scrollen der Seite */
}

.gallery-thumb {
    width: 100px;
    height: 75px;
    object-fit: cover;
    cursor: pointer;
    transition: border-color 0.3s ease, opacity 0.3s ease;
    opacity: 0.3;
}

.gallery-thumb:hover {
    opacity: 1;
}

.gallery-thumb.active-thumb {
    border-color: #cdcdcd; /* Highlight color for the active thumbnail */
    opacity: 1;
}

/* Responsive adjustments for mobile */
@media (max-width: 700px) {
    .gallery-container {
        width: calc(100% - 40px); /* Adjust padding for mobile */
    }

    .gallery-thumb {
        width: 36px;
        height: auto;
    }
    .gallery-thumbnails{
        gap: 0px;
    }
}

/* --- MOBILE: Gewünschtes Layout mit Divider (max-width: 700px) --- */
@media (max-width: 700px) {
    .footer {
        display: grid; /* Wir nutzen CSS Grid für das flexible Layout */
        grid-template-columns: auto 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "email     email"
            "imprint   copyright";
        gap: 12px 0; /* 12px Abstand zwischen den Zeilen */
        padding: 20px;
        margin-top: 120px;
    }

    .footer-email {
        grid-area: email;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(102, 102, 102, 0.44); /* Der Divider */
        text-align: left;
    }

    .footer-imprint {
        grid-area: imprint;
        justify-self: start; /* Richtet sich links aus */
    }

    .footer-copyright {
        grid-area: copyright;
        justify-self: end; /* Richtet sich rechts aus */
    }
}

/* MUSIC PLAYER LAYOUT */
/* MUSIC PLAYER LAYOUT */
.main-content-area {
    display: flex;
    justify-content: center; /* Zentriert den Inhalt (z.B. #canvas-container) horizontal */
    align-items: center;   /* Zentriert den Inhalt vertikal */
    position: relative;
    box-sizing: border-box;  /* Wichtig, damit Padding in die height: 100vh einberechnet wird */
    width: 100%;
    height: 100vh;           /* Lässt den Bereich versuchen, die volle Viewport-Höhe einzunehmen */
    
    /* Korrigiertes Padding, um Platz für fixierte Elemente zu schaffen */
    padding-top: 60px;       /* Geschätzte Höhe der oberen fixen Navbar */
    padding-bottom: 118px;   /* Geschätzter Platz für die unteren fixen Bedienelemente 
                               (Oberkante der Fortschrittsanzeige ist ca. 118px vom unteren Rand) */
    
    /* Vorhandenes horizontales Desktop-Padding beibehalten */
    padding-left: 32px;
    padding-right: 32px;

    /* Optional: Eine absolute Mindesthöhe, falls der Viewport extrem klein wird.
       Dies ersetzt die alte min-height-Berechnung.
       Wenn 100vh - (padding-top + padding-bottom) zu klein wird,
       greift dies als unterste Grenze für die Höhe des .main-content-area Blocks selbst. */
    /* min-height: 250px; */ /* Beispiel: 250px als absolute Mindesthöhe für den gesamten Block */
}

#canvas-container {
    flex-grow: 1; /* Nimmt im Desktop-Layout (falls .main-content-area row-flex wäre) den Platz neben der Trackliste ein.
                     Da Trackliste absolut positioniert ist, füllt #canvas-container den gesamten Bereich von .main-content-area. */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;  /* Füllt die Breite des Content-Bereichs von .main-content-area */
    height: 100%; /* Füllt die Höhe des Content-Bereichs von .main-content-area */
    box-sizing: border-box;
}

canvas {
    display: block;
    max-width: 100%;
    max-height: 100%;
    margin: 0;
}

/* Die #trackListContainer Desktop-Styles bleiben unverändert (position: absolute etc.) */
#trackListContainer {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    max-height: 65vh; /* Begrenzt die Höhe der Trackliste */
    overflow-y: auto;
    z-index: 5; /* Stellt sicher, dass sie über dem Canvas liegt, falls sie sich überlappen würden (sollte aber nicht) */
}

/* VISUALIZER CONTROLS */
.viz-controls {
    position: absolute;
    right: 32px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

/* TRACKLIST */
#trackListContainer {
    position: absolute;
    left: 32px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    max-height: 75vh;
    overflow-y: auto;
    z-index: 5;
}

#trackList {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- REFAKTORISIERTE TRACKLIST STYLES BEGINN --- */

.track-list-item {
    display: flex;
    align-items: center;
    padding: 8px 8px 8px 2px; /* Ursprüngliches Padding links ist 2px */
    margin-bottom: 5px;
    cursor: pointer;
    border-radius: 4px;
    color: #999;
    opacity: 0; /* Für slideInLeft Animation */
    transition: background-color 0.9s ease, padding 0.5s ease, opacity 0.5s ease, transform 0.5s ease, scale 0.25s ease;
    animation-name: slideInLeft;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

.track-list-item:hover {
    background-color: #1D1D1D;
    padding-left: 8px; /* Padding-Änderung bei Hover */
}

.track-list-item-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    gap: 1px;
    opacity: 0; /* Für JS-gesteuerte Einblendung */
    transition: opacity 0.4s ease;
}

.track-list-item:last-child {
    border-bottom: none;
}

.track-list-item-cover {
    width: 90px;
    height: 89px;
    object-fit: cover;
    margin-right: 12px;
    flex-shrink: 0;
    transition: opacity 0.4s ease, filter 0.4s ease;
}

.track-list-item-title {
    font-family: 'Sometype Mono', monospace;
    font-size: 9px;
    letter-spacing: 1.6px;
    color: #cdcdcd;;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}

.track-list-item-artist,
.track-list-item-year {
    font-family: 'Sometype Mono', monospace;
    font-size: 9px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.8;
    letter-spacing: 1.6px;
    opacity: 0.4; /* Standard-Opazität für Artist/Year */
    color: #cdcdcd;
}

.track-list-item-year {
    font-size: 7px!important;
    letter-spacing: 1.6px;
}

/* KLICK-FEEDBACK ANIMATION (unabhängige Klasse) */
.track-item-pressed {
    /* background-color: rgba(29, 29, 29, 0.5); // Optional: Hintergrund kann auch hier sein */
    scale: 0.95;
}

/* ZUSTANDSKLASSEN FÜR TRACKLIST-EINTRÄGE */
.track-list-item--active {
    color: #cdcdcd;
}

.track-list-item--active .track-list-item-cover {
    filter: grayscale(0%);
    opacity: 1.0;
}


/* === NEU: Stil für inaktive Elemente, wenn ein Track aktiv ist === */
#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active) .track-list-item-cover {
    filter: grayscale(100%);
    opacity: 0.4;
}

/* Der Titel inaktiver Tracks bekommt ebenfalls reduzierte Deckkraft. */
#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active) .track-list-item-title {
    opacity: 0.4;
    /* Fügt einen weichen Übergang für den Effekt hinzu */
    transition: opacity 0.4s ease;
}
/* ================================================================ */


.track-list-item--active .track-list-item-title{
    opacity: 1.0;
}


/* === Stil für inaktive Elemente, wenn ein Track aktiv ist === */
#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active) .track-list-item-cover {
    filter: grayscale(100%);
    opacity: 0.4;
}

#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active) .track-list-item-title {
    opacity: 0.4;
    transition: opacity 0.4s ease;
}

/* === NEU: Hover-Effekt stellt das ursprüngliche Aussehen wieder her === */
#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active):hover .track-list-item-cover {
    filter: grayscale(0%);
    opacity: 1.0;
}

#trackListContainer.track-is-active .track-list-item:not(.track-list-item--active):hover .track-list-item-title {
    opacity: 1.0;
}
/* ====================================================================== */



.track-list-item--loading {
    color: #aaa; /* Leicht ausgegraut */
    cursor: wait; /* Warte-Cursor */
}
/* Für Loading könnten Sie auch Cover/Text dimmen, ähnlich wie bei inactive */
.track-list-item--loading .track-list-item-cover {
    opacity: 0.5;
}
.track-list-item--loading .track-list-item-info span { /* Alle Spans im Info-Bereich */
    opacity: 0.5;
}

.track-list-item--error {
    color: #ff6666; /* Rote Farbe für Fehler */
    text-decoration: line-through; /* Durchgestrichen */
    cursor: not-allowed; /* Kein Klick möglich (symbolisch) */
    background-color: #402020; /* Dunkelroter Hintergrund */
}

.track-list-item--error:hover {
     background-color: #503030; /* Etwas hellerer roter Hintergrund bei Hover */
}


/* Animations-Verzögerungen für das Hineingleiten */
.track-list-item:nth-child(1) { animation-delay: 0.1s; }
.track-list-item:nth-child(2) { animation-delay: 0.6s; }
.track-list-item:nth-child(3) { animation-delay: 1.2s; }
.track-list-item:nth-child(4) { animation-delay: 1.8s; }


@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

/* --- REFAKTORISIERTE TRACKLIST STYLES ENDE --- */

/* TRACKLIST SCROLLBAR */
#trackListContainer::-webkit-scrollbar {
    width: 5px;
}
#trackListContainer::-webkit-scrollbar-track {
    background: transparent;
}
#trackListContainer::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 3px;
}
#trackListContainer::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* PLAYER CONTROLS BAR */
.player-controls-bar {
    position: fixed;
    bottom: 18px;
    left: 34px;
    width: calc(100% - 68px);
    height: 40px;
    /* ==== MODIFIED START ==== */
    display: flex; 
    align-items: center;
    justify-content: space-between; 
    /* ==== MODIFIED END ==== */
    box-sizing: border-box;
    z-index: 100;
    color: #cdcdcd;
    font-family: 'PP Neue Montreal', sans-serif;
}

/* ==== NEW START ==== */
.mobile-only-control {
    display: none; 
    background: none;
    border: none;
    color: #aaa; 
    padding: 5px;
    cursor: pointer;
    flex-shrink: 0; 
}

/* ==== NEW END ==== */

#playerCover{
    display: none; /* Original style, kept as is */
}

/* PLAYER TRACK INFO */
.track-info {
    display: flex;
    align-items: center;
    gap: 10px;
    /* width: 400px; /* Removed for flexibility */
    color: #ccc;
    font-family: 'PP Neue Montreal', sans-serif;
    /* ==== MODIFIED START ==== */
    flex-shrink: 1; 
    flex-grow: 1; 
    min-width: 0; 
    /* ==== MODIFIED END ==== */
    margin-right: auto; /* Original style, kept as is */
}

.text-details {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.artist-name {
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    color: #cdcdcd;;
}

.player-controls-bar .artist-name::after {
    content: '–';
    margin-left: 4px;
}

.track-title {
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.6px;
    color: #cdcdcd;;
}

.release-year{
    display: none !important;
}

/* PLAYER PLAYBACK SECTION */
.playback-section {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
}

.playback-buttons {
    display: flex;
    bottom: 10px;
}

.control-button {
    background: none;
    border: none;
    color: #aaa;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    transition: color 0.2s ease, transform 0.1s ease;
}

.control-button:hover:not(:disabled) {
    color: #fff;
}
.control-button:active:not(:disabled) {
    transform: scale(0.9);
}
.control-button:disabled {
    opacity: 1.0;
    cursor: not-allowed;
}

button { /* General button style, ensure it doesn't override specific control buttons too much */
    padding: 0.5rem 1rem;
    font-size: 1rem;
    background-color: #333;
    color: #eee;
    border: 1px solid #555;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

button:disabled { /* General button disabled style */
    opacity: 0.5;
    cursor: not-allowed;
}

/* PLAYER PROGRESS BAR */
.full-width-progress-wrapper {
    position: fixed;
    left: 0;
    width: 100vw;
    bottom: 64px;
    padding: 5px 32px;
    box-sizing: border-box;
    height: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.time-displays-container {
    margin-left: 2px;
    width: 100%;
    margin-bottom: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    display: none;
}

.time-display {
    font-family: 'Sometype Mono', monospace;
    font-size: 9px;
    color: #888;
    min-width: 30px;
    text-align: center;
}

.full-width-progress-wrapper .time-display {
    font-family: 'Sometype Mono', monospace;
    font-size: 9px;
    color: #888;
}

.full-width-progress-wrapper #currentTime {
    text-align: left;
}

.full-width-progress-wrapper #totalDuration {
    text-align: right;
}

.progress-bar {
    flex-grow: 1;
    height: 1px;
    width: 100%;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    border-radius: 4px;
    margin-top: 4px;
    outline: none;
    --progress-percent: 0%;
    /* MODIFIED: Change the second color to #cdcdcd with 20% opacity */
    background: linear-gradient(to right, #ccc var(--progress-percent), rgba(205, 205, 205, 0.2) var(--progress-percent));
}

.progress-bar:disabled {
    cursor: not-allowed;
    opacity: 0.5;
    /* Also update the disabled state if needed */
    background: linear-gradient(to right, #666 var(--progress-percent), rgba(205, 205, 205, 0.2) var(--progress-percent));
}

.progress-bar::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; width: 12px; height: 12px;
    background: #ccc; border-radius: 50%; cursor: pointer; margin-top: -4px;
    transition: background 0.2s ease, transform 0.2s ease; transform: scale(0);
}

.player-controls-bar:hover .progress-bar::-webkit-slider-thumb,
.progress-bar:hover::-webkit-slider-thumb,
.progress-bar:active::-webkit-slider-thumb,
.progress-bar::-webkit-slider-thumb:hover {
    transform: scale(1);
}

.progress-bar:hover::-webkit-slider-thumb {
    background: #fff;
}
.progress-bar:active::-webkit-slider-thumb {
    background: #fff;
}
.progress-bar:disabled::-webkit-slider-thumb {
    background: #555;
    transform: scale(0) !important;
    cursor: not-allowed;
}

.progress-bar::-moz-range-thumb {
    width: 12px; height: 12px; background: #ccc; border-radius: 50%;
    cursor: pointer; border: none;
    transition: background 0.2s ease, transform 0.2s ease; transform: scale(0);
}

.player-controls-bar:hover .progress-bar::-moz-range-thumb,
.progress-bar:hover::-moz-range-thumb,
.progress-bar:active::-moz-range-thumb,
.progress-bar::-moz-range-thumb:hover {
    transform: scale(1);
}

.progress-bar:hover::-moz-range-thumb {
    background: #fff;
}
.progress-bar:active::-moz-range-thumb {
    background: #fff;
}
.progress-bar:disabled::-moz-range-thumb {
    background: #555;
    transform: scale(0) !important;
    cursor: not-allowed;
}

canvas { /* Gilt für alle Canvas-Elemente */
    display: block;
    background-color: transparent !important;
    max-width: 100%;
    max-height: 100%;
    margin: 0; /* Verhindert unerwünschte Außenabstände */
}
/* Oder spezifischer, falls p5.js eine Standard-ID vergibt und Sie keine eigene setzen: */
#defaultCanvas0 {
    background-color: transparent !important;
}




/* =================================================================== */
/* ===== CUSTOM STYLES FOR "LINKS" DROPDOWN (FINALER FIX) ===== */
/* =================================================================== */

/*
  FIX: Um die Hover-Lücke zu schließen, wird der Außenabstand (margin-top)
  entfernt und durch einen Innenabstand (padding-top) im Dropdown ersetzt.
  So gibt es keine funktionale Lücke mehr, aber der visuelle Abstand bleibt.
*/

/* =================================================================== */
/* ===== CUSTOM STYLES FOR "LINKS" DROPDOWN (MIT ANIMATION) ===== */
/* =================================================================== */

/* NEU: Definiert die "Slide-In von rechts"-Animation */
@keyframes slideInFromRight {
    from {
        transform: translateX(20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* --- Dropdown Container und Hover-Verhalten --- */

.menu-container.right-aligned .dropdown-menu {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-top: 0 !important;
    padding: 2px 0 0 0 !important;
    flex-direction: column;
    gap: 12px;
    position: absolute;
    right: 18px;
    align-items: flex-end;
    left: auto !important;
    transform: none !important;
}

.menu-container.right-aligned:hover .dropdown-menu {
    display: flex !important;
}


/* --- Styling der einzelnen Links (Buttons) --- */

.menu-container.right-aligned .dropdown-menu .menu-item {
    /* Startet unsichtbar, um die Animation zu ermöglichen */
    opacity: 0;

    /* Behält die restlichen Stile bei */
    margin: 0 !important;
    right: 2px;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;
    width: auto;
    padding: 6px 12px 6px 7px !important;
    border: 1px solid #66666670 !important;
    border-radius: 30px !important;
    background-color: #0d0d0d !important;
    color: #cdcdcd !important;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* NEU: Löst die Animation aus, wenn das Menü gehovert wird */
.menu-container.right-aligned:hover .dropdown-menu .menu-item {
    /* Wendet die oben definierte Animation an */
    animation: slideInFromRight 0.4s ease-out forwards;
}

/* NEU: Definiert die versetzte Verzögerung für jeden Link */
.menu-container.right-aligned:hover .dropdown-menu .menu-item:nth-child(1) {
    animation-delay: 0.05s;
}
.menu-container.right-aligned:hover .dropdown-menu .menu-item:nth-child(2) {
    animation-delay: 0.10s;
}
.menu-container.right-aligned:hover .dropdown-menu .menu-item:nth-child(3) {
    animation-delay: 0.15s;
}
.menu-container.right-aligned:hover .dropdown-menu .menu-item:nth-child(4) {
    animation-delay: 0.20s;
}
.menu-container.right-aligned:hover .dropdown-menu .menu-item:nth-child(5) {
    animation-delay: 0.25s;
}


/* --- Hover-Effekte und Icon-Styling (unverändert) --- */

.menu-container.right-aligned .dropdown-menu .menu-item:hover {
    background-color: #cdcdcd !important;
    border-color: #cdcdcd !important;
}

.menu-container.right-aligned .dropdown-menu .menu-item:hover .menu-title {
    color: #000000 !important;
}

.menu-container.right-aligned .dropdown-menu .menu-icon {
    background: none !important;
    padding: 0 !important;
    margin: 0 8px 0 0 !important;
    width: 14px !important;
    height: 14px !important;
    opacity: 1 !important;
    transition: filter 0.3s;
}

.menu-container.right-aligned .dropdown-menu .menu-item:hover .menu-icon {
    filter: invert(1);
}

.menu-container.right-aligned .dropdown-menu .menu-info {
    position: static !important;
    top: auto !important;
    transform: none !important;
}
.menu-container.right-aligned .dropdown-menu .menu-item:hover .menu-info {
    top: auto !important;
}

.menu-container.right-aligned .dropdown-menu .menu-title {
    color: inherit !important;
}

.menu-container.right-aligned .dropdown-menu .product-description {
    display: none !important;
}


/* ========================================================= */
/* ===== FINALER CODE: SYNTESIA CATEGORIES (LINIEN VOLLE BREITE) ===== */
/* ========================================================= */

.syntesia-categories-section {
    width: 100%;
    margin: 0px auto;
    padding: 32px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'PP Neue Montreal', sans-serif;
}

/*
  Container für eine einzelne Textzeile.
  WICHTIGE ÄNDERUNG HIER:
*/
.category-row {
    display: flex;             /* Geändert von inline-flex */
    width: 100%;               /* HINZUGEFÜGT: Nimmt die volle Breite ein */
    justify-content: center;   /* HINZUGEFÜGT: Zentriert den Text innerhalb der Zeile */
    align-items: baseline;
    position: relative;
    margin-bottom: -10px;
}

/* Blendet die alte HTML-Linie aus */
.category-line {
    display: none;
}

/* Erzeugt die neue obere und untere Linie.
   Die Breite von 100% bezieht sich jetzt wieder auf die volle Breite. */
.category-row::before,
.category-row::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fdfdfd;
    opacity: 0.05;
    z-index: 9;
}

/* Position der oberen Linie (Cap-Height) */
.category-row::before {
    top: 17px;
}

/* Position der unteren Linie (Baseline) */
.category-row::after {
    bottom: 18px;
}

/* Styling für den Haupttext */
.category-main-text {
    font-size: 80px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* Styling für den Zusatztext */
.category-sub-text {
    font-family: 'Sometype Mono', monospace;
    font-size: 12px;
    font-weight: 300;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 1.6px;

    /* NEU: Globale Positionierung */
    position: absolute;
    right: 10px;  /* Positioniert das Element 10px vom rechten Rand */
    bottom: 18px; /* Richtet es an der Desktop-Grundlinie aus */
}

/* ---- Animations-Styling ---- */
/* 1. Normalzustand (Ausgeblendet) */
/* Diese Regel sorgt für das LANGSAME AUSBLENDEN, wenn die Klasse '.is-visible' entfernt wird. */
.syntesia-categories-section .category-row span span {
    opacity: 0.1;
    color: #cdcdcd;
    display: inline-block;
    transition: opacity 1.5s ease-out, color 1.5s ease-out;
}

/* 2. Aktiver Zustand (Eingeblendet) */
/* Diese Regel sorgt für das SCHNELLE EINBLENDEN, wenn die Klasse '.is-visible' hinzugefügt wird. */
.syntesia-categories-section .category-row span span.is-visible {
    opacity: 1.0;
    color: #ffffff;
    transition: opacity 0.1s ease-in, color 0.1s ease-in; /* Sehr kurze Dauer für schnelles Reagieren */
}

.syntesia-categories-section .category-row span span.is-visible {
    opacity: 1.0;
    color: #ffffff;
}





/* RESPONSIVE & MOBILE */
@media (max-width: 1000px) {
    .tiles-container {
        flex-direction: column;
    }
    .tile img.tile-icon {
        left: auto;
        right: 20px!important;
    }
}



@media (min-width: 700px) {
    .mob  {
        display: none;
    }
    /* ==== NEW START ==== */
    /* Ensure mobile-only controls are NOT displayed on desktop */
    .mobile-only-control {
        display: none !important;
    }
    /* ==== NEW END ==== */
}

@media (max-width: 700px) {
    body{
        margin: 0;
    }

    .navbar {
        display: none;
    }

    .mob {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        padding: 21px 20px;
        box-sizing: border-box;
        background-color: #000000;
        z-index: 1100;
    }

    a.logo{
        padding: 0;
    }

    .menu-button {
        position: fixed;
        top: 14px;
        padding-bottom:30px ;
        padding-left:30px ; 
        right: 10px;
        color: #cdcdcd;
        background: none;
        border: none;
        font-size: 18px;
        font-family: 'Sometype Mono', monospace;
        cursor: pointer;
        font-size: 12px;
        letter-spacing: 1.6px;
        z-index: 1100;
        outline: none;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-button:hover{
        background-color: transparent !important;
    }

    .mobile-menu {
        position: fixed;
        top: 55px;
        left: 0;
        width: calc(100% - 30px);
        height: calc(100% - 20px);
        background-color: #000000;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        padding: 40px 20px 20px;
        z-index: 1099;
    }

    .mobile-menu.active {
        display: flex;
    }

    .mobile-menu .menu-item {
        animation-delay: 0s !important;
    }

/* NACHHER (korrigiert) */
.mobile-menu.active .menu-item:nth-child(2) {
    animation-delay: 0.1s !important;
}
.mobile-menu.active .menu-item:nth-child(3) {
    animation-delay: 0.2s !important;
}
.mobile-menu.active .menu-item:nth-child(4) {
    animation-delay: 0.3s !important;
}
/* NEU: Korrigierte Regel für das 5. Element */
.mobile-menu.active .menu-item:nth-child(5) {
    animation-delay: 0.4s !important;
}

    @keyframes slideInFromTop {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    .mobile-menu .menu-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        color: #cdcdcd;
        text-decoration: none;
        font-size: 12px;
        margin: 5px 0;
        padding: 4px 4px 4px 0;
        border-radius: 8px;
        width: calc(100% - 18px);
        justify-content: flex-start;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        opacity: 0;
        animation: slideInFromTop 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
        border: 1px solid rgba(205, 205, 205, 0.1);
    }

    .menu-head{
        animation: slideInFromTop 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
    }

    .menu-abs{
        margin-top: 40px;
    }

    .menu-icon{ /* This is for mobile menu, not player menu icon */
        opacity: 1.0;
        margin-top: 0px;
        margin-left: 4px;
        margin-right: 0px;
        background: rgba(205, 205, 205, 0.08);
    }

    .mob-menu-title{
        color: #cdcdcd;
        font-size: 12px;
        letter-spacing: 1.6px;
        margin-left: 24px;
    }

    .footer-links {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 100px;
        left: 0;
        /* Bestehende Stile, die beibehalten werden können */
        margin-top: 20px;
        animation: slideInFromTop 0.5s cubic-bezier(0.42, 0, 0.58, 1) forwards;
    }
    
    /* 2. Setzt die Stile für die Links ("IMPRINT", "CONTACT") gezielt zurück */
    .footer-links > .menu-item {
        width: auto; /* WICHTIG: Setzt die Breite zurück, damit sie nur so breit sind wie ihr Inhalt */
        background-color: transparent; /* Entfernt den Button-Hintergrund */
        padding: 4px; /* Optional: kleiner Abstand */
        margin: 0;
        margin-right: 10px; /* Abstand zwischen den beiden linken Links */
        color: #b0b0b0;
    }
    
    /* 3. Schiebt den "LINKS"-Button ganz nach rechts */
    .footer-links .menu-container {
        margin-left: auto;
    }

    .footer-links a {
        font-size: 12px;
        color: #b0b0b0;
        letter-spacing: 1.6px;
        background-color: #0D0D0D;
    }

    .project-claim{
        margin-top:2px;
        font-size: 24px!important;
    }

    .project-titles-home{
        top:36%;
    }


    .project-titles {
        width: 100%;
        margin-top:120px;
    }


    .tiles-container{
        margin: 20px;
    }

    .bg-img, .bg-canvas{ /* Note: .bg-img selector */
        top: 40%;
    }

    .tile {
        height: 140px;
        margin-top:10px;
    }

    .tile-link {
    margin-left: 0;
}


    .chapter-section {
        margin-top: 120px;
        padding-left: 20px;
        padding-right: 20px;
    }

/* In styles.css innerhalb von @media (max-width: 700px) einfügen */

.footer {
    display: block;
    margin-top: 120px;
    padding: 20px 20px 10px 20px;
    text-align: left;
    color: #b0b0b0;
    font-size: 12px;
    letter-spacing: 1.6px;
}

.footer-top {
    width: 100%;
    padding-bottom: 12px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(102, 102, 102, 0.2);
}

.footer-top a,
.footer-bottom a {
    color: inherit;
    text-decoration: none;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* In styles.css einfügen */

.footer-bottom a, 
.footer-bottom span {
    font-size: 8px !important;
    opacity: 0.5;
}
    .nav-button-round{ /* This is for main nav, ensure mobile player icons are styled if needed */
        margin-top: 0px;
    }
    .nav-link, .nav-button-round{
        margin-right: 10px;
    }

    /* ==== MODIFIED/NEW CSS FOR MOBILE PLAYER AND TRACKLIST ==== */
    #trackListContainer {
        opacity: 0;
        visibility: hidden;
        display: none; /* << HINZUGEFÜGT/WICHTIG: Stellt sicher, dass es initial versteckt ist und keinen Platz einnimmt */
        position: fixed; 
        left: 0;
        width: 100%;
        height: calc(100% - 200px); 
        background-color: rgba(0,0,0,0.95); 
        z-index: 1050; 
        overflow-y: auto;
        padding: 20px; 
        box-sizing: border-box;
        /* Die 'display'-Eigenschaft kann nicht animiert werden, 
           aber opacity und visibility sorgen für den Fade-Effekt, wenn .mobile-visible hinzugefügt wird. */
        transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out; 
    }

    #trackListContainer.mobile-visible {
        opacity: 1;
        visibility: visible;
        display: block; /* << HINZUGEFÜGT/WICHTIG: Macht es sichtbar und stellt den Layout-Fluss wieder her */
    }

    .player-controls-bar {

        left: 0px;
        width: 100%;
        bottom: 30px;
        padding: 0 10px; 
    }

    .mobile-only-control {
        display: flex; /* Show these buttons on mobile */
        /* align-items and justify-content inherited if needed, or add here */
    }
    
    .player-controls-bar .track-info {
        flex-grow: 1; 
        display: flex; 
        justify-content: center; 
        align-items: center;
        text-align: center; 
        min-width: 0; 
        margin: 0 5px; 
        overflow: hidden; 
    }


    .player-controls-bar .track-info .release-year, 
    .player-controls-bar .artist-name::after { 
        display: none !important;
    }

    .player-controls-bar .track-info .text-details {
        justify-content: center; 
        width: 100%; 
        overflow: hidden; 
        /* align-items: baseline; /* Inherited */
        /* gap: 6px; /* Inherited, less relevant with only one item */
    }

    .player-controls-bar .track-info .track-title {
        display: block; 
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 0 5px; 
        /* font-size: 12px; /* Inherited, adjust if needed */
    }

    .main-content-area {
        padding-top: 56px;    /* Platz für die obere .mob Navigationsleiste */
        padding-bottom: 218px; /* KORRIGIERTER WERT: Platz für .full-width-progress-wrapper (Oberkante bei 118px vom unteren Rand) */
        height: 100vh;
        min-height: initial; /* Überschreibt Desktop min-height */
        width: 100%;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        /* Horizontales Padding nach Bedarf anpassen, 10px war der vorherige Wert */
        padding-left: 10px; 
        padding-right: 10px;
    }

    /* Die Stile für #canvas-container und canvas sollten weiterhin korrekt sein */
    #canvas-container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    canvas {
        display: block;
        max-width: 100%;
        max-height: 100%;
        margin: 0;
    }

    @media (max-width: 700px) {
        /* ... Ihre existierenden mobilen Styles ... */
    
        /* --- ANPASSUNGEN FÜR MUSIKPLAYER --- */
    
        /* 1. Trackname (#playerTrackTitle) über die Progressbar positionieren */
        #playerTrackTitle {
            display: block !important;
            position: fixed;
            /* NEU: Stellt die Sichtbarkeit explizit wieder her. */
            visibility: visible;
            bottom: 125px;
            left: 0;
            width: 100%;
            text-align: center;
            color: #cdcdcd;
            font-family: 'Sometype Mono', monospace;
            font-size: 12px;
            letter-spacing: 1.6px;
            padding: 0 20px;
            box-sizing: border-box;
            z-index: 101;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    
        /* 2. Steuerungsleiste und Icons korrigieren */
        .player-controls-bar {
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        
        /* ÄNDERUNG: Wir nehmen den Container aus dem Layout-Fluss, anstatt ihn komplett auszublenden.
           Dadurch können die Icons verteilt werden, aber der Titel darin bleibt erreichbar. */
        .player-controls-bar .track-info {
            position: absolute;
            visibility: hidden;
        }
    
        /* Setzt die Desktop-Positionierung für die mobile Ansicht zurück */
        .player-controls-bar .playback-section {
            position: unset;
            transform: none;
            top: auto;
            left: auto;
        }
    
        .player-controls-bar .playback-section {
            display: contents; /* Behält die Regel für die Sektion bei */
        }
        
        .player-controls-bar .playback-buttons {
            display: flex; /* WICHTIG: Setzt dies zurück auf flex */
        }
    
        /* Setzt die Außenabstände der Buttons zurück */
        .player-controls-bar .control-button,
        .player-controls-bar #cdMenuButtonMobile,
        .player-controls-bar #linksButtonMobile,
        .player-controls-bar #prevButton,
        .player-controls-bar #playPauseButton,
        .player-controls-bar #nextButton {
            margin: 0;
        }
    

    }
    .full-width-progress-wrapper {
opacity: 0.5;
padding: 5px 16px;
bottom: 88px;
    }
    .time-displays-container {
    
    opacity: 0;
    }


    /* BACKGROUND & CANVAS */
.background-image {
    margin-left: 10px;
    margin-right: 10px;
    width: calc(100% - 20px);
}

.title-img{
    border-radius: 8px;
    margin-top: -60px; 
    transform: translateY(420px) scale(0.9);
}
.title-img img {
    border-radius: 8px;
}

.features-grid{
    grid-template-columns: repeat(3,1fr);
    margin-left: 40px;
    margin-right: 40px;
    width: calc(100% - 80px);
    margin-top: 0;
    margin-bottom: 100px;
}

.project-claim-static {
    font-size: 24px;
    margin-bottom: 14px;
}

.visual-image-container{
    width: 100%;
    margin: 20px;
}


.main-content-wrapper {
    display: flex; /* Flexbox aktivieren */
    flex-direction: column; /* Optional, falls nötig */
   /* align-items: flex-start; /* Inhalte links ausrichten 
    text-align: left;*/
    padding: 20px;
    margin-top: 0px;
}

.visual-image-full{
    width: calc(100% - 10px);
}
.visual-image-full img{
    border-radius: 4px;
}

.text{
    font-size:24px;
}

.feature-title {
    font-size: 8px;
}

.feature-description {
    font-size: 8px;
}

.category-main-text {
    font-size: 12vw;
}

.category-row {
    margin-bottom: 4px;
}

.category-sub-text {
    font-size: 6px; /* Behält die kleinere Schriftgröße bei */
    bottom: 12px;    /* KORREKTUR: Passt die vertikale Position an die mobile Baseline an */
    mix-blend-mode: difference;
}

/* Position der oberen Linie (Cap-Height) */
.category-row::before {
    top: 10px;
}

/* Position der unteren Linie (Baseline) */
.category-row::after {
    bottom: 11px;
}
.visual-image-container {
    margin: 40px;
}
/* FÜGT EINEN ABSTAND ÜBER DEM 4. MENÜPUNKT IM MOBILEN MENÜ HINZU */
.mobile-menu .menu-item:nth-child(4) {
    margin-top: 60px;
}
/* ===== SOLUTION: Reposition mobile "LINKS" dropdown to appear above the button ===== */
@keyframes slideUpAndFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.mobile-menu .footer-links .menu-container.right-aligned .dropdown-menu {
    top: auto;
    bottom: 100%;
    right: 0;
    left: auto;
    align-items: flex-end;
}
.mobile-menu .footer-links .menu-container.right-aligned:hover .dropdown-menu .menu-item {
    animation-name: slideUpAndFadeIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}
.mobile-menu .footer-links > .menu-item {
    border: none;
    background-color: transparent;
    padding-bottom: 10px;
}

#playerArtistName {
    display: block !important;
    visibility: visible !important; /* WICHTIG: Überschreibt das "hidden" des Eltern-Containers */
    position: fixed;
    bottom: 150px; /* Positioniert es über dem Track-Titel */
    left: 0;
    width: 100%;
    text-align: center;
    color: #cdcdcd;
    font-family: 'Sometype Mono', monospace;
    font-size: 9px; /* Etwas kleiner als der Titel */
    letter-spacing: 1.6px;
    opacity: 0.6; /* Leicht transparent */
    z-index: 101;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 20px;
    box-sizing: border-box;
}
/* ===== NEU: Stile für das mobile Player-Links-Menü ===== */

/* Positioniert den Container relativ, damit das Menü darin absolut positioniert werden kann */
#mobilePlayerLinks {
    position: relative;
}

#mobilePlayerLinks .dropdown-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* NEU: Richtet die Buttons rechts aus */
    gap: 8px;
    position: absolute;
    bottom: 100%;
    right: 0;
    margin-bottom: 10px;
    background-color: #00000000!important;
    z-index: 999;
    top: auto;
    left: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
}

/* Macht das Menü sichtbar, wenn der Container die Klasse "active" hat */
#mobilePlayerLinks.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

#mobilePlayerLinks .dropdown-menu .menu-item {
    display: flex; /* Stellt sicher, dass der Inhalt zentriert werden kann */
    width: auto; /* SEHR WICHTIG: Button schrumpft auf Inhaltsbreite */
    padding: 6px 16px;
    border-radius: 30px; /* Die abgerundete "Pillen"-Form */
    border: 1px solid #66666670;
    background-color: #000000;
    color: #cdcdcd;
    text-align: center;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-decoration: none;
    white-space: nowrap;
}

#mobilePlayerLinks .dropdown-menu .menu-item:hover {
    background-color: #cdcdcd;
    border-color: #cdcdcd;
    color: #000;
}
.syntesia-categories-section {
    padding: 0;
    padding-top: 20px;
    margin-bottom: -80px;
}
.bg-container {
height: 98vh;
}
.scroll-button{
    bottom: 60px!important;
}
    body.project-scroll .scroll-button {
        display: none;
    }

@keyframes moveToPosition {
    0% {
        opacity: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.5);
    }
    60% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.8);
    }
    80% {
        opacity: 1;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.8);
    }
    100% {
        opacity: 1;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.0);
    }
}
/* In styles.css innerhalb von @media (max-width: 700px) einfügen */

#mobileCoverButton {
    padding: 0;
    border: none;
    background: none;
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* Verhindert, dass das Icon schrumpft */
    border-radius: 0px;
    overflow: hidden; /* Stellt sicher, dass das Bild innerhalb des Radius bleibt */
}

#mobilePlayerCover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 2px ;
}

/* Optional: Stellt sicher, dass der alte Button sicher versteckt ist, falls er nicht aus dem HTML entfernt wurde */
#cdMenuButtonMobile {
    display: none !important;
}
}

/* Optimierung für breite, aber nicht hohe Bildschirme (Widescreen-Monitore) */
@media (max-width: 1000px) {
    .bg-canvas,
    .bg-img-base {
        max-height: 55vh;
        width: auto;
        top: 35%;
    }



}

/* ===== LÖSUNG: HOVER-EFFEKTE AUF TOUCH-GERÄTEN KOMPLETT DEAKTIVIEREN ===== */
@media (hover: none) {
    /* Verhindert Klick-, Tap- und Hover-Simulationen auf dem gesamten Link-Element. */
    .tile-link {
        pointer-events: none;
    }

    /* Die folgenden :hover-Regeln sind nun technisch überflüssig,
       schaden aber nicht und können zur Sicherheit drinbleiben. */
    .tile-link:hover {
        flex: 1;
    }
    .tile-link:hover .tile {
        background-color: rgba(255, 255, 255, 0.07);
        color: #b0b0b0;
    }
    .tile-link:hover .tile h1 {
        color: #cdcdcd;
        font-size: 30px; /* Sicherstellen, dass es die Basis-Größe ist */
    }
    .tile-link:hover .tile .tile-icon {
        opacity: 1;
    }
    .tile-link:hover .tile .tile-info {
        opacity: 0;
        bottom: -100px;
    }
    .visual-caption {
        margin: -30px 0 0 0;
    }
}