/* ============================================
   Hero Slider CSS — LumivioPress
   Konvertiert aus Astro/Tailwind
   ============================================ */

/* ── Radio verstecken ── */
.slide-radio {
    position: fixed;
    opacity: 0;
    pointer-events: none;
    top: -9999px;
    left: -9999px;
}

/* ── Slider Wrapper ── */
.hero-slider {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: transparent;
}

/* ── Slides Container ── */
.slides-container {
    position: absolute;
    inset: 0;
}

/* ── Einzelner Slide ── */
.slide {
    position: absolute;
    background-size: cover;
    background-position: center;
    transition: all 0.7s ease-in-out;
    width: 200px;
    height: 300px;
    top: calc(100vh - 430px);
    box-shadow: 6px 6px 10px 2px rgba(0, 0, 0, 0.6);
    z-index: 3;
}

/* Overlay */
.slide-previewer {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    pointer-events: none;
}

/* Aktiver Slide: fullscreen */
#slide-0:checked ~ .slides-container .slide[data-slide="0"],
#slide-1:checked ~ .slides-container .slide[data-slide="1"],
#slide-2:checked ~ .slides-container .slide[data-slide="2"],
#slide-3:checked ~ .slides-container .slide[data-slide="3"] {
    width: 100vw;
    height: 100vh;
    top: 0;
    left: 0;
    border-radius: 0;
    z-index: 2;
}

/* Preview slides rechts: slide nach aktiv +1 */
#slide-0:checked ~ .slides-container .slide[data-slide="1"],
#slide-1:checked ~ .slides-container .slide[data-slide="2"],
#slide-2:checked ~ .slides-container .slide[data-slide="3"],
#slide-3:checked ~ .slides-container .slide[data-slide="0"] {
    right: var(--main-padding);
    border-radius: 0.75rem;
}

#slide-0:checked ~ .slides-container .slide[data-slide="1"] .slide-previewer,
#slide-1:checked ~ .slides-container .slide[data-slide="2"] .slide-previewer,
#slide-2:checked ~ .slides-container .slide[data-slide="3"] .slide-previewer,
#slide-3:checked ~ .slides-container .slide[data-slide="0"] .slide-previewer {
    border-radius: 0.75rem;
}

@media (min-width: 768px) {
    #slide-0:checked ~ .slides-container .slide[data-slide="1"],
    #slide-1:checked ~ .slides-container .slide[data-slide="2"],
    #slide-2:checked ~ .slides-container .slide[data-slide="3"],
    #slide-3:checked ~ .slides-container .slide[data-slide="0"] {
        right: var(--main-padding-md);
    }
}

/* +2 */
#slide-0:checked ~ .slides-container .slide[data-slide="2"],
#slide-1:checked ~ .slides-container .slide[data-slide="3"],
#slide-2:checked ~ .slides-container .slide[data-slide="0"],
#slide-3:checked ~ .slides-container .slide[data-slide="1"] {
    right: calc(var(--main-padding) + 160px);
    border-radius: 0.75rem;
}

#slide-0:checked ~ .slides-container .slide[data-slide="2"] .slide-previewer,
#slide-1:checked ~ .slides-container .slide[data-slide="3"] .slide-previewer,
#slide-2:checked ~ .slides-container .slide[data-slide="0"] .slide-previewer,
#slide-3:checked ~ .slides-container .slide[data-slide="1"] .slide-previewer {
    border-radius: 0.75rem;
}

@media (min-width: 768px) {
    #slide-0:checked ~ .slides-container .slide[data-slide="2"],
    #slide-1:checked ~ .slides-container .slide[data-slide="3"],
    #slide-2:checked ~ .slides-container .slide[data-slide="0"],
    #slide-3:checked ~ .slides-container .slide[data-slide="1"] {
        right: calc(var(--main-padding-md) + 160px);
    }
}

@media (min-width: 1024px) {
    #slide-0:checked ~ .slides-container .slide[data-slide="2"],
    #slide-1:checked ~ .slides-container .slide[data-slide="3"],
    #slide-2:checked ~ .slides-container .slide[data-slide="0"],
    #slide-3:checked ~ .slides-container .slide[data-slide="1"] {
        right: calc(var(--main-padding-md) + 240px);
    }
}

/* +3 */
#slide-0:checked ~ .slides-container .slide[data-slide="3"],
#slide-1:checked ~ .slides-container .slide[data-slide="0"],
#slide-2:checked ~ .slides-container .slide[data-slide="1"],
#slide-3:checked ~ .slides-container .slide[data-slide="2"] {
    right: calc(var(--main-padding) + 320px);
    border-radius: 0.75rem;
}

#slide-0:checked ~ .slides-container .slide[data-slide="3"] .slide-previewer,
#slide-1:checked ~ .slides-container .slide[data-slide="0"] .slide-previewer,
#slide-2:checked ~ .slides-container .slide[data-slide="1"] .slide-previewer,
#slide-3:checked ~ .slides-container .slide[data-slide="2"] .slide-previewer {
    border-radius: 0.75rem;
}

@media (min-width: 768px) {
    #slide-0:checked ~ .slides-container .slide[data-slide="3"],
    #slide-1:checked ~ .slides-container .slide[data-slide="0"],
    #slide-2:checked ~ .slides-container .slide[data-slide="1"],
    #slide-3:checked ~ .slides-container .slide[data-slide="2"] {
        right: calc(var(--main-padding-md) + 320px);
    }
}

@media (min-width: 1024px) {
    #slide-0:checked ~ .slides-container .slide[data-slide="3"],
    #slide-1:checked ~ .slides-container .slide[data-slide="0"],
    #slide-2:checked ~ .slides-container .slide[data-slide="1"],
    #slide-3:checked ~ .slides-container .slide[data-slide="2"] {
        right: calc(var(--main-padding-md) + 480px);
    }
}

/* ── Preview Content (kleine Karten) ── */
.slide-preview-content {
    position: absolute;
    left: 0;
    z-index: 10;
    padding: 0 1rem;
    color: rgba(255, 255, 255, 0.87);
    bottom: 20px;
    transition: opacity 0.3s;
}

/* Aktiver Slide: Preview ausblenden */
#slide-0:checked ~ .slides-container .slide[data-slide="0"] .slide-preview-content,
#slide-1:checked ~ .slides-container .slide[data-slide="1"] .slide-preview-content,
#slide-2:checked ~ .slides-container .slide[data-slide="2"] .slide-preview-content,
#slide-3:checked ~ .slides-container .slide[data-slide="3"] .slide-preview-content {
    opacity: 0;
}

.preview-line {
    width: 30px;
    height: 5px;
    border-radius: 9999px;
    background: #fef2f2;
}

.preview-place {
    margin-top: 0.375rem;
    font-size: 13px;
    font-weight: 500;
}

.preview-title {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: 'Oswald', sans-serif;
}

/* ── Details (Text links über Bild) ── */
.details {
    position: absolute;
    z-index: 2;
    color: #fef2f2;
    top: 240px;
    padding: 0 var(--main-padding);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

@media (min-width: 768px) {
    .details {
        padding: 0 var(--main-padding-md);
    }
}

#slide-0:checked ~ .details[data-details="0"],
#slide-1:checked ~ .details[data-details="1"],
#slide-2:checked ~ .details[data-details="2"],
#slide-3:checked ~ .details[data-details="3"] {
    opacity: 1;
    pointer-events: auto;
    animation: detailsSlideIn 0.8s ease-out both;
}

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

/* Place */
.place-wrapper {
    height: 46px;
    overflow: hidden;
}

.place-text {
    padding-top: 1rem;
    font-size: 1.25rem;
    position: relative;
    animation: textSlideUp 0.7s ease-out 0.1s both;
}

.place-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 4px;
    border-radius: 9999px;
    background: var(--color-primary);
}

@keyframes textSlideUp {
    from { transform: translateX(-200px); }
    to   { transform: translateX(0); }
}

/* Titles */
.title-line-1-wrap {
    padding: 0.75rem 0;
}

.title-wrapper {
    margin-top: 0.125rem;
    height: 100px;
    overflow: hidden;
}

.title-1,
.title-2 {
    font-size: 64px;
    font-weight: 600;
    line-height: 1;
    animation: titleSlideUp 0.7s ease-out 0.15s both;
}

@keyframes titleSlideUp {
    from { transform: translateX(-200px); }
    to   { transform: translateX(0); }
}

/* Description */
.description {
    margin-top: 1rem;
    width: 500px;
    max-width: 90vw;
    animation: descSlideUp 0.4s ease-out 0.3s both;
}

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

/* CTA */
.cta-wrapper {
    margin-top: 1.5rem;
    width: 500px;
    max-width: 90vw;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    animation: ctaSlideUp 0.4s ease-out 0.35s both;
}

.cta-wrapper .group {
    display: flex;
    align-items: center;
    justify-content: center;
}

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

/* News Button */
.news-btn {
    padding: 0.375rem;
    margin-top: 0.125rem;
    border-radius: 0.5rem;
    background: var(--color-primary);
    color: white;
    border: none;
    height: 2.25rem;
    width: 2.25rem;
    cursor: pointer;
    transition: background 0.2s;
    display: grid;
    place-items: center;
}

.news-btn:hover {
    background: var(--color-primary-dark);
}

.news-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.news-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Tooltip */
.news-tooltip {
    position: relative;
    bottom: 100%;
    margin-bottom: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    color: white;
    background: rgba(239, 68, 68, 0.8);
    border-radius: 0.25rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    white-space: nowrap;
    left: -2.7rem;
    top: -2.5rem;
}

.relative:hover .news-tooltip {
    opacity: 1;
}

/* Discover Button */
.discover-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.25rem;
    padding: 0 1rem;
    border-radius: 0.125rem;
    border: 1px solid white;
    background: transparent;
    color: white;
    font-size: 0.75rem;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s;
    font-weight: 500;
}

.discover-btn:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* ── Slider Pagination ── */
.slider-pagination {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    top: calc(100vh - 100px);
    right: 0;
    padding: 0 var(--main-padding);
    animation: paginationSlideUp 0.8s ease-out 0.6s both;
}

@media (min-width: 768px) {
    .slider-pagination {
        padding: 0 var(--main-padding-md);
    }
}

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

/* Pfeile */
.arrow {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 2px solid #fef2f2;
    background: transparent;
    display: none;
    place-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

#slide-0:checked ~ .slider-pagination .arrow[data-for-slide="0"],
#slide-1:checked ~ .slider-pagination .arrow[data-for-slide="1"],
#slide-2:checked ~ .slider-pagination .arrow[data-for-slide="2"],
#slide-3:checked ~ .slider-pagination .arrow[data-for-slide="3"] {
    display: grid;
}

.arrow:hover {
    border-color: var(--color-primary);
    background: rgba(227, 30, 36, 0.1);
}

.arrow-right {
    margin-left: 1.25rem;
}

.arrow svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #fef2f2;
    stroke-width: 2;
}

/* Progress Bar */
.progress-container {
    margin-left: 1.5rem;
    width: 260px;
    height: 50px;
    display: flex;
    align-items: center;
}

.progress-bg {
    width: 100%;
    height: 3px;
    background: #fef2f2;
    position: relative;
    overflow: hidden;
}

.progress-fg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-primary);
    width: 0;
    display: none;
}

#slide-0:checked ~ .slider-pagination .progress-fg[data-progress="0"] { display: block; width: 5%; }
#slide-1:checked ~ .slider-pagination .progress-fg[data-progress="1"] { display: block; width: 33%; }
#slide-2:checked ~ .slider-pagination .progress-fg[data-progress="2"] { display: block; width: 66%; }
#slide-3:checked ~ .slider-pagination .progress-fg[data-progress="3"] { display: block; width: 100%; }

/* Slide Number */
.slide-number {
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden;
}

.number-item {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    display: grid;
    place-items: end;
    font-size: 2rem;
    font-weight: 700;
    color: #fef2f2;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

#slide-0:checked ~ .slider-pagination .number-item[data-number="0"],
#slide-1:checked ~ .slider-pagination .number-item[data-number="1"],
#slide-2:checked ~ .slider-pagination .number-item[data-number="2"],
#slide-3:checked ~ .slider-pagination .number-item[data-number="3"] {
    transform: translateY(0);
    opacity: 1;
}

/* Cover Animation */
.cover {
    position: absolute;
    inset: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    z-index: 10;
    pointer-events: none;
    animation: coverSlide 1.1s ease-in-out 0.5s both;
}

@keyframes coverSlide {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(100vw + 400px)); }
}

/* ── Responsive ── */

@media (max-width: 1279px) {
    .slide { width: 180px; height: 270px; top: calc(100vh - 380px); }
    .progress-container { width: 400px; }
    .details { top: 200px; }
    .title-1, .title-2 { font-size: 3.75rem; }
    .description, .cta-wrapper { width: 450px; }
}

@media (max-width: 1023px) {
    .slide { width: 160px; height: 240px; top: calc(100vh - 320px); }
    .slider-pagination { top: calc(100vh - 80px); }
    .progress-container { width: 300px; }
    .details { top: 160px; }
    .title-1, .title-2 { font-size: 3rem; }
    .title-wrapper { height: 80px; }
    .description, .cta-wrapper { width: 400px; max-width: calc(100vw - 3rem); }
    .arrow { width: 45px; height: 45px; }
    .arrow svg { width: 1.25rem; height: 1.25rem; }
}

@media (max-width: 639px) {
    .slide { width: 140px; height: 180px; top: calc(100vh - 240px); }
    .slider-pagination { top: calc(100vh - 40%); }
    .progress-container { width: 195px; }
    .details { top: 120px; }
    .title-1, .title-2 { font-size: 1.875rem; }
    .title-wrapper { height: 50px; }
    .place-wrapper { height: 36px; }
    .place-text { font-size: 0.875rem; padding-top: 0.75rem; }
    .description { font-size: 0.75rem; margin-top: 0.75rem; }
    .cta-wrapper { margin-top: 1rem; }
    .news-btn { width: 2rem; height: 2rem; }
    .news-btn svg { width: 1rem; height: 1rem; }
    .discover-btn { height: 2rem; padding: 0 1rem; font-size: 0.625rem; }
    .arrow { width: 36px; height: 36px; }
    .arrow svg { width: 1rem; height: 1rem; }
    .arrow-right { margin-left: 0.75rem; }
    .slide-number { width: 36px; height: 36px; margin-left: 0.75rem; }
    .number-item { font-size: 1.25rem; }
    .preview-title { font-size: 1rem; }
    .preview-place { font-size: 0.75rem; }
}

@media (max-width: 900px) and (orientation: landscape) {
    .slide { width: 140px; height: 180px; top: calc(100vh - 310px); }
    .slider-pagination { top: calc(100vh - 32%); }
    .progress-container { width: 195px; }
    .details { top: 120px; }
    .title-1, .title-2 { font-size: 1.25rem; }
    .title-wrapper { height: 36px; }
    .place-wrapper { height: 32px; }
    .place-text { font-size: 0.75rem; padding-top: 0.5rem; }
    .description { font-size: 0.75rem; margin-top: 0.5rem; }
    .cta-wrapper { margin-top: 0.75rem; }
    .news-btn { width: 1.75rem; height: 1.75rem; }
    .news-btn svg { width: 0.75rem; height: 0.75rem; }
    .discover-btn { height: 1.75rem; padding: 0 0.75rem; font-size: 0.5rem; }
    .arrow { width: 32px; height: 32px; }
    .arrow svg { width: 0.75rem; height: 0.75rem; }
    .arrow-right { margin-left: 0.75rem; }
    .slide-number { width: 32px; height: 32px; margin-left: 0.75rem; }
    .number-item { font-size: 0.875rem; }
    .preview-title { font-size: 0.75rem; }
    .preview-place { font-size: 0.75rem; }
}

.title-1,
.title-2 {
    text-decoration: none;
    color: inherit;
}

.title-1:hover,
.title-2:hover {
    text-decoration: none;
    color: inherit;
}

.title-1:visited,
.title-2:visited {
    color: inherit;
}