.track-ui__view { align-items: flex-start; display: flex; pointer-events: all; position: absolute; right: 6.25vw; top: 2rem }
@media only screen and (min-width:64em) { .track-ui__view { top: 4rem } }
.track-ui__view__note { background-color: #ef6c26; color: #fff; display: none; flex: 0 0 auto; font-weight: 200; margin-left: 1rem; margin-top: -.75rem; padding: .75rem 1rem; width: 18rem }
@media only screen and (min-width:64em) { .track-ui__view__note { display: block } }
.track-list { background-color: #0d0d0d; display: block; height: auto; overflow: hidden; width: 100%; z-index: 1 }
@media only screen and (min-width:64em) { .track-list { background-color: #0d0d0d; cursor: -webkit-grab; cursor: grab; height: 100vh; left: 6rem; overflow: auto; position: fixed; scroll-behavior: auto; top: 0; width: calc(100vw - 6rem) } }
.track-list__items { align-items: center; display: flex; flex-flow: column nowrap; height: auto; padding: 2rem 6.25vw 4rem; width: auto; z-index: 2 }
@media only screen and (min-width:64em) { .track-list__items { align-items: flex-start; flex-flow: row nowrap; height: 100vh; padding: 11vh 6.25vw 0; width: 100% } }
.track-list__title { flex: 0 0 auto; max-width: 24rem; text-align: center; width: 100% }
@media only screen and (min-width:64em) { .track-list__title { margin: 10vh 4rem 0 0; text-align: left } }
.track-list__item { flex: 0 0 auto; margin: 4rem 0 0; max-width: 20rem; transition: transform .2s ease-out; width: 100%; will-change: transition }
@media only screen and (min-width:64em) { .track-list__item { margin: 0; max-width: 28rem; padding: 0 4rem 0 0; background-position: .375rem calc(39vh - 2rem); background-repeat: repeat-x; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" opacity="0.55"><circle fill="white" cx="8" cy="16" r="8"/></svg>') } }
.track-list__item .track-article__image { -webkit-animation: float 3s ease-in-out infinite; animation: float 3s ease-in-out infinite }
.track-list__item:hover .track-article__image { -webkit-animation-play-state: paused; animation-play-state: paused }
.track-list__item:nth-child(8n) .track-article__image { -webkit-animation-delay: 0; animation-delay: 0 }
.track-list__item:nth-child(8n+1) .track-article__image { -webkit-animation-delay: .25s; animation-delay: .25s }
.track-list__item:nth-child(8n+2) .track-article__image { -webkit-animation-delay: .5s; animation-delay: .5s }
.track-list__item:nth-child(8n+3) .track-article__image { -webkit-animation-delay: .75s; animation-delay: .75s }
.track-list__item:nth-child(8n+4) .track-article__image { -webkit-animation-delay: 1s; animation-delay: 1s }
.track-list__item:nth-child(8n+5) .track-article__image { -webkit-animation-delay: 1.25s; animation-delay: 1.25s }
.track-list__item:nth-child(8n+6) .track-article__image { -webkit-animation-delay: 1.5s; animation-delay: 1.5s }
.track-list__item:nth-child(8n+7) .track-article__image { -webkit-animation-delay: 1.75s; animation-delay: 1.75s }
.track-list__item:nth-child(8n) img { transform: rotate(2.5deg) }
.track-list__item:nth-child(8n+1) img { transform: rotate(-1.25deg) }
.track-list__item:nth-child(8n+2) img { transform: rotate(-2.5deg) }
.track-list__item:nth-child(8n+3) img { transform: rotate(1.25deg) }
.track-list__item:nth-child(8n+4) img { transform: rotate(2.5deg) }
.track-list__item:nth-child(8n+5) img { transform: rotate(-1.25deg) }
.track-list__item:nth-child(8n+6) img { transform: rotate(-2.5deg) }
.track-list__item:nth-child(8n+7) img { transform: rotate(1.25deg) }
@keyframes float { 0% { transform: translateY(0) } 50% { transform: translateY(3.75%) } to { transform: translateY(0) } }
.track-list__background { align-items: center; display: flex; height: 100vh; justify-content: center; left: 0; position: fixed; top: 0; width: 100vw; z-index: 1 }
.track-list__background__image { background-size: cover; height: 100%; opacity: .5; width: 100% }
/* --- Custom Gradient Dark Banner --- */
.gradient-dark { position: relative; } .gradient-dark .branch__background__overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 70%); bottom: 0; left: 0; position: absolute; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .gradient-dark .content-layer { position: absolute; bottom: 0; left: 0; width: 100%; padding: 4rem; display: flex; flex-flow: column nowrap; justify-content: flex-end; z-index: 2; pointer-events: none; } @media screen and (max-width: 1023px) { .gradient-dark .branch__background__overlay, .gradient-dark .content-layer { display: none; } }
/* Mega Dropdown logic moved to header-overrides.css */
/* ========================================= */
/* 10. TEMPLATES & VIEWS */
/* ========================================= */
/* Global Structure moved to site-structure.css */
@media only screen and (max-width: 48em) { .mobile-reverse { display: flex; flex-direction: column-reverse; } }
/* Image Transitions moved to site-structure.css */
/* ========================================= */
/* 7. UTILITIES & SCROLL PROGRESS */
/* ========================================= */
#scroll-progress { background: transparent !important; left: 0; pointer-events: none; position: fixed; top: 0; z-index: 10001; }
#scroll-progress__bar { background: #ef6c26; transition: width .1s linear, height .1s linear; }
/* Mobile: Horizontal oben */
@media only screen and (max-width: 63.99em) { #scroll-progress { height: 4px; width: 100%; } #scroll-progress__bar { height: 100%; width: 0%; } }
/* Desktop: Vertikal links neben der Navigation */
@media only screen and (min-width: 64em) { #scroll-progress { height: 100vh; width: 4px; } #scroll-progress__bar { height: 0%; width: 100%; } }
/* --- Image Zoom Utility (Clip-Zoom) --- */
/* Wenn direkt auf img angewendet (Zoom nach außen) */
img.img-zoom, .img-zoom img { transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important; transform-origin: center center; } img.img-zoom:hover, .img-zoom:hover img { transform: scale(1.1) translateY(0) !important; } div.img-zoom { display: block; position: relative; overflow: hidden; width: 100%; border-radius: 15px; line-height: 0; -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); transform: none !important; } div.img-zoom img { width: 100%; height: auto; display: block; } @media screen and (max-width: 1024px) { div.img-zoom { border-radius: 10px; } }
/* --- Mood Section (2-Column Grid) --- */
.Mood { display: flex; gap: 1px; width: 100%; background-color: #fff; margin-top: 51px; margin-bottom: -95px; } @media screen and (max-width: 1024px) { .Mood { flex-direction: column; } } .Mood > div { flex: 1; overflow: hidden; position: relative; } .Mood img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
/* --- Showcase Frames --- */
.frames { display: flex; gap: 2rem; justify-content: center; margin: 6rem 0; padding: 0 6.25vw; } .browser-frame { flex: 1; background: #fff; border-radius: 10px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden; display: flex; flex-direction: column; border: 1px solid rgba(0, 0, 0, 0.05); transition: transform 0.4s ease; } .browser-frame:hover { transform: translateY(-10px); } .browser-header { height: 32px; background: #f1f1f1; display: flex; align-items: center; padding: 0 15px; gap: 8px; border-bottom: 1px solid #e0e0e0; } .dot { width: 9px; height: 9px; border-radius: 50%; } .dot--red { background: #ff5f56; } .dot--yellow { background: #ffbd2e; } .dot--green { background: #27c93f; } .browser-content { line-height: 0; } .browser-content img { width: 100%; height: auto; display: block; } .figma-frame { flex: 1; border-radius: 10px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); overflow: hidden; transition: transform 0.4s ease; line-height: 0; background: #fff; }
/* Staggered Layout (Versetzt) */
.figma-frame:nth-child(1) { transform: translateY(-40px); } .figma-frame:nth-child(2) { transform: translateY(0); } .figma-frame:nth-child(3) { transform: translateY(40px); } .figma-frame:hover { transform: translateY(-10px) scale(1.02) !important; z-index: 10; } .figma-frame img { width: 100%; height: auto; display: block; } @media screen and (max-width: 1024px) { .frames { flex-direction: column; gap: 4rem; padding: 40px 30px; } .figma-frame:nth-child(n) { transform: none; } }
/* --- Wireframes --- */
.wireframes, .lofi-prototyp { background-color: #F4F2F2; height: 500px; margin: 85px 0 70px 0; display: flex; justify-content: center; align-items: center; gap: 60px; position: relative; }
.wireframe { height: 500px; width: 428px; position: relative; transition: 0.3s ease; }
/* Individuelle Steuerung */
.wf-1 { transform: translateY(-60px); z-index: 1; }
.wf-2 { transform: translateY(-60px); z-index: 2; }
.wf-3 { transform: translateY(-60px); z-index: 1; }
/* --- Mobile Wireframe Gallery --- */
@media screen and (max-width: 1023px) { .wireframes.has-mobile-gallery, .lofi-prototyp.has-mobile-gallery { display: block; height: auto; margin: 37px 0 0 0; background: transparent; } .gallery-slider { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; gap: 15px; padding: 0 12.5vw; } .gallery-slider::-webkit-scrollbar { display: none; } .gallery-slide { flex: 0 0 75vw; scroll-snap-align: center; position: relative; } .gallery-slide .wireframe { width: 100%; height: auto; transform: scale(0.9) !important; opacity: 0.9; margin: 0; transition: transform 0.6s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.5s ease; } .gallery-slide.active .wireframe { transform: scale(1) !important; opacity: 1; } .gallery-slide .magnify-icon { opacity: 0; transition: opacity 0.4s ease; } .gallery-slide.active .magnify-icon { opacity: 1; } .magnify-icon { position: absolute; bottom: 15px; right: 15px; background: #fff; border-radius: 6px; padding: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); display: flex; pointer-events: none; color: #000; } .magnify-icon svg { width: 22px; height: 22px; } .gallery-pagination { display: flex; justify-content: center; gap: 10px; margin-top: 25px; } .gallery-dot { width: 10px; height: 10px; background: #d4d4d4; border-radius: 50%; transition: 0.3s; } .gallery-dot.active { background: #000; } }
@media screen and (min-width: 1024px) { .magnify-icon, .gallery-pagination { display: none; } .gallery-slider { display: contents; } .gallery-slide { display: contents; } }
/* --- LIGHTBOX --- */
/* Lightbox moved to project-specific.css */
.u-mt-15 { margin-top: 1.5rem !important; }
.u-mt-30 { margin-top: 30px !important; }
.u-ml-15 { margin-left: 1.5rem !important; }
.u-color-white { color: #fff !important; }
.u-nowrap { white-space: nowrap !important; }
.u-btn-icon { margin-right: 8px; vertical-align: text-bottom; display: inline-block; }
.u-br-25 { border-radius: 25px !important; }
.u-mt-1 { margin-top: 1rem !important; }
.u-hide { display: none !important; }