.aufnahmen-section{min-height: 87dvh;padding: 7rem 7rem 3.5rem 7rem;background: linear-gradient( 29deg, rgba(61, 28, 65, 0.653) 0%, rgba(65, 88, 136, 0.95) 50%, rgba(92, 125, 185, 0.95) 100% );overflow: hidden} .aufnahmen-section::before{content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: radial-gradient( circle at top right, rgba(173, 216, 230, 0.15), transparent 60% );pointer-events: none} .aufnahmen-content{margin: 0 auto;padding: 1.2rem 0} .aufnahmen-section h2{font-size: clamp(2rem, 4vw, 3rem);margin-bottom: 3rem;color: var(--color-light);font-weight: 500;position: relative;display: inline-block;letter-spacing: 0.05em} .aufnahmen-section h2::after{content: "";position: absolute;width: 100%;height: 2px;bottom: -0.5rem;left: 0;background: linear-gradient(90deg, var(--color-accent) 0%, transparent 100%)} .cd-slider-container{position: relative;margin: 0 auto;display: flex;align-items: center;gap: 2rem;padding: 0.7rem 0;max-width: calc(18rem * 5 + 8rem)} .slider-button{position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;background: rgba(228, 184, 231, 0.1);border: 1px solid var(--color-accent);color: var(--color-light);border-radius: 50%;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 1.5rem;transition: all 0.3s ease;z-index: 10} .slider-button:hover{background: rgba(228, 184, 231, 0.2);transform: translateY(-50%) scale(1.1)} .prev-button{left: -3rem} .cd-slider{display: flex;gap: 2rem;overflow-x: hidden;scroll-behavior: smooth} .cd-slider{display: flex;transition: transform 0.5s ease} .cd-card{flex: 0 0 18rem;min-width: 18rem;max-width: 18rem;background: rgba(28, 35, 65, 0.85);border: 1px solid rgba(173, 216, 230, 0.15);border-radius: 1rem;padding: 2rem;transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;display: flex;flex-direction: column;align-items: center} .cd-card:hover{transform: translateY(-5px);background: rgba(35, 45, 80, 0.9);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);border: 1px solid rgba(173, 216, 230, 0.25)} .cd-image{width: 225px;height: 225px;margin-bottom: 1.5rem;border-radius: 4px;overflow: hidden} .cd-image img{width: 100%;height: 100%;object-fit: contain;transition: transform 0.3s ease} .cd-info{text-align: center;width: 100%} .cd-info h3{font-size: 1.2rem;color: var(--color-accent);margin-bottom: 0.8rem;font-weight: 500;height: 100px;display: flex;align-items: center;justify-content: center} .cd-info p{font-size: 1rem;color: var(--color-light);opacity: 0.8;margin-bottom: 2rem;height: 50px} .buy-button{display: inline-block;padding: 0.8rem 2rem;background: var(--color-button);color: var(--color-light);text-decoration: none;border-radius: 2rem;transition: all 0.3s ease;border: 1px solid var(--color-button)} .buy-button:hover{transform: scale(1.05);filter: brightness(1.2);box-shadow: 0 0 15px rgba(112, 24, 27, 0.5)} .next-button{right: -3rem} .pagination-controls{display: none;justify-content: center;width: 100%;margin-top: 100px;align-items: center;gap: 1rem;margin-top: 2rem;padding: 1rem} .pagination-btn{padding: 0.5rem 1rem;background: var(--color-button);color: var(--color-light);border: none;border-radius: 0.5rem;cursor: pointer;font-size: 0.9rem;transition: all 0.3s ease} .pagination-btn:disabled{opacity: 0.5;cursor: not-allowed} .pagination-btn:not(:disabled):hover{background: var(--color-accent);transform: translateY(-2px)} .page-numbers{display: flex;gap: 0.5rem;align-items: center} .page-number{width: 2rem;height: 2rem;display: flex;align-items: center;justify-content: center;background: rgba(173, 216, 230, 0.1);border: 1px solid var(--color-accent);color: var(--color-light);border-radius: 0.5rem;cursor: pointer;transition: all 0.3s ease} .page-number:hover{background: rgba(173, 216, 230, 0.2)} .page-number.active{background: var(--color-accent);color: var(--color-dark)} @media (max-width: 1280px){.cd-slider-container{max-width: calc(15rem * 4 + 8rem)} .cd-card{flex: 0 0 15rem;min-width: 15rem;max-width: 15rem} .cd-image{width: 180px;height: 180px} .next-button{right: -3rem} } @media (max-width: 1024px){.aufnahmen-section{padding: 2rem 2rem 0rem 2rem} .cd-slider-container{padding: 0 0rem;display: flex;flex-direction: column} .aufnahmen-section h2{text-align: center;margin-left: auto;margin-right: auto;display: block;width: 100%} .aufnahmen-section h2::after{left: 50%;transform: translateX(-50%);width: 40%} .cd-slider{display: flex;flex-direction: row;gap: 1.5rem;flex-wrap: wrap;justify-content: space-between;overflow: visible} .cd-card{flex: 0 0 calc(33.333% - 1.35rem);min-width: calc(33.333% - 1.35rem);max-width: calc(33.333% - 1.35rem);transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border 0.3s ease} .slider-button{display: none} .cd-image{width: clamp(130px, 19vw, 200px);height: clamp(130px, 15vw, 200px)} .pagination-controls{display: flex} } @media (max-width: 940px){.cd-slider{display: grid;grid-template-columns: repeat(2, 1fr);gap: 1.5rem} .cd-card{min-width: 100%;max-width: 100%} .cardsPerPage{--cards-per-page: 8} } @media (max-width: 768px){.cd-slider-container{justify-content: center} .cd-slider{grid-template-columns: 1fr} .cd-image{width: 70%;height: 70%} .cd-info h3{font-size: 1.6rem;height: auto;min-height: 60px} .cd-info p{font-size: 1.3rem} .cd-slider-container{align-items: unset} .buy-button{font-size: 1.2rem} .aufnahmen-section{padding: 2.5rem 1rem 0rem 1rem} } @media (max-width: 648px){.cd-info h3{font-size: 1.4rem} .cd-info p{font-size: 1.1rem} .buy-button{font-size: 1.1rem} } @media (max-width: 480px){.cd-info h3{font-size: 1.2rem} .cd-info p{font-size: 0.9rem} .buy-button{font-size: 0.9rem} } @media (max-width: 468px){.aufnahmen-section{padding: 3.4rem 2rem 0rem 2rem} } @media (max-width: 368px){.aufnahmen-section{padding: 3.4rem 1rem 0rem 1rem} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px){.buy-button{padding: 0.6rem 1.5rem !important} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){.buy-button{padding: 0.6rem 1.5rem !important} } @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){.buy-button{padding: 0.6rem 1.5rem !important} }