/*
 * index_v3.css
 * ------------
 * Page-specific styles for the v3 landing page (main/index_v3.html).
 *
 * Only genuinely NEW components live here – chiefly the two user-controlled
 * carousels (club slider + functions slider) and the centred CTA panel.
 * Everything else reuses the shared tokens/classes from base.css,
 * gui_components_base.css, classes_base.css, main.css and index_V2.css.
 */

/* ------------------------------------------------------------------ */
/* Shared section helpers                                              */
/* ------------------------------------------------------------------ */

.v3-lead {
    /* explanatory paragraph blocks ("Für jede Art von Verein", DSGVO …) */
    margin: var(--large-gap) var(--medium-gap);
}

/* Centred white CTA panel ("In 8 Minuten…" and "In 3 Schritten…") */
.v3-panel {
    margin: var(--large-gap) var(--medium-gap);
    padding: var(--large-gap);
    background-color: var(--white-bg);
    border-radius: 2.4rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 24px rgba(0, 0, 0, .12);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

    .v3-panel > h2 {
        padding-top: 0;
    }

    .v3-panel__body {
        width: 70%;
    }

    .v3-panel .steps-list {
        text-align: left;
        width: 100%;
    }

    .v3-panel .btn-primary {
        margin-top: var(--large-gap);
    }

@media (max-width: 700px) {
    .v3-lead,
    .v3-panel {
        margin-left: var(--medium-gap);
        margin-right: var(--medium-gap);
    }

    .v3-panel {
        padding: var(--medium-gap);
        border-radius: var(--large-gap);
    }
}

/* ------------------------------------------------------------------ */
/* Slider navigation controls (shared by both carousels)              */
/* ------------------------------------------------------------------ */

.slider-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--medium-gap);
    margin-top: var(--medium-gap);
}

.slider-nav__btn {
    width: var(--pill-h);
    height: var(--pill-h);
    min-width: var(--pill-h);
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color-2) 0%, var(--primary-color-3) 100%);
    color: #fff;
    box-shadow: 0 3px 10px rgb(0 0 0 / 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

    .slider-nav__btn svg {
        width: 2rem;
        height: 2rem;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.5;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .slider-nav__btn:hover {
        filter: brightness(1.05);
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .12);
    }

    .slider-nav__btn:active {
        transform: scale(0.94);
    }

    .slider-nav__btn:focus-visible {
        outline: 3px solid var(--primary-color-2);
        outline-offset: 3px;
    }

.slider-nav__count {
    min-width: 7rem;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* For the dark functions section the counter text must stay legible. */
.fn-section .slider-nav__count {
    color: var(--gray-bg);
}

/* ------------------------------------------------------------------ */
/* Club slider (upper) – snap-to-centre, active card is full-bleed    */
/* ------------------------------------------------------------------ */

/* Decorative scattered dots are intentionally larger than the viewport in a
   few places; clip the horizontal bleed so it never creates page scroll.
   overflow-x: clip (not hidden/auto) keeps vertical flow untouched. */
.v3-clip-x,
.club-slider,
.v3-about {
    overflow-x: clip;
}

.club-slider {
    position: relative;
}

.club-slider__stage {
    position: relative;
}

/* Scattered dots anchored to the centre of the stage, bleeding outside
   whichever card is currently centred. Sits behind the track. */
.club-slider__dots {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(clamp(300px, 35rem, 90%) + var(--large-gap) * 4);
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
}

    .club-slider__dots svg {
        width: 100%;
        height: auto;
    }

.club-slider__track {
    list-style: none;
    padding-left: 0;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--medium-gap);
    /* Side padding lets the first and last card reach the centre. */
    padding-inline: max(var(--medium-gap), calc(50%));
    /* Vertical padding gives the scaled-up active card room (overflow-y is
       forced to auto by overflow-x, so this prevents clipping). */
    padding-block: var(--large-gap);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

    .club-slider__track::-webkit-scrollbar {
        display: none;
    }

    .club-slider__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none; /* free scrolling while dragging */
    }

.club-card {
    flex: 0 0 auto;
    width: clamp(300px, 35rem, 90%);
    scroll-snap-align: center;
    scroll-snap-stop: always;
    /* Calm cards sit smaller and slightly dimmed; the centred one grows. The
       transition is what makes the size + image animate as cards reach centre. */
    transform: scale(0.84);
    /*opacity: 0.68;*/
    transition: transform 0.45s cubic-bezier(.22, .61, .36, 1), opacity 0.45s ease;
    will-change: transform;
}

.club-card__inner {
    /* framed-box look: squared edges, 1px outline, white inset around the photo */
    position: relative;
    background-color: var(--white-bg);
    border: 1px solid var(--text-color);
    padding: var(--pill-gap);
}

/* The photo always fills the frame (full-bleed) so it can scale/animate
   smoothly between the calm and centred states. */
.club-card__media {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    background-color: var(--dark-gray-bg);
}

    .club-card__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: scale(1.02); /* hide sub-pixel edges under the ken-burns */
        transition: transform 0.45s ease;
        -webkit-user-drag: none;
        user-select: none;
        pointer-events: none;
    }

/* Name (+ revealed benefit) sit as a white overlay over the bottom of the photo. */
.club-card__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--small-gap);
    padding: var(--large-gap) var(--medium-gap) var(--medium-gap);
    color:var(--text-color);
    /*background: linear-gradient(to top,
            rgba(0, 0, 0, .80) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%);*/
}

.club-card__name {
    margin: 0;
    padding: 0;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
}

.club-card__benefit {
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    /* hidden on calm cards, revealed (animated) on the centred one. The blur
       lets the text resolve into focus as it rises instead of just fading,
       which reads as a softer, less mechanical reveal. */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    filter: blur(8px);
    transition: max-height 0.45s ease, opacity 0.45s ease, transform 0.45s ease,
                filter 0.45s ease;
}

/* Pen-highlight effect: inline span so background only covers text width */
.club-card__name > span,
.club-card__benefit > span {
    display: inline;
    background-color: var(--white-bg);
    padding: var(--pill-gap);
    padding-right: var(--large-gap);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    line-height: 2;
}

/* --- Active (centred) card: clearly larger, lit up, the image animates --- */
.club-card.is-active {
    transform: scale(1.12);
    opacity: 1;
    z-index: 2;
}

    .club-card.is-active .club-card__inner {
       /* border-image: linear-gradient(to bottom,
                #FF8C00 0%, #FF0037 33%, #FF0037 66%, #FF8C00 100%) 1;*/
        /*box-shadow: 0 14px 38px rgba(0, 0, 0, .28);*/
    }

    .club-card.is-active .club-card__benefit {
        max-height: 12rem;
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    /* slow "ken-burns" zoom keeps the centred photo alive */
    .club-card.is-active .club-card__media img {
        animation: clubKenburns 9s ease-in-out infinite alternate;
    }

@keyframes clubKenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.14); }
}

/* ------------------------------------------------------------------ */
/* Functions section (dark band) + functions slider (lower)           */
/* ------------------------------------------------------------------ */

.fn-section {
    /* Full-bleed dark band – same technique as .divider: a normal-flow block
       (starts at the viewport's left edge) stretched to the full viewport
       width. No left/translate, which would shift it off-centre when the
       parent is narrower than 100vw (scrollbar). */
    width: 100vw;
    background-color: var(--text-color);
    color: var(--gray-bg);
    padding: var(--large-gap) 0;
    overflow: hidden; /* contain the horizontally scrolling track */
}

    .fn-section h2 {
        color: var(--gray-bg);
    }

    .fn-section .fn-section__intro {
        color: var(--gray-bg);
        opacity: 0.92;
    }

.fn-section__head {
    padding: 0 var(--large-gap);
}

/* Representative icon row (decorative – the cards carry the real content). */
.fn-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pill-gap);
    justify-content: center;
    margin: var(--large-gap) 0;
}

.fn-icon {
    min-width: var(--pill-h);
    height: var(--pill-h);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--pill-gap);
    background-color: var(--white-bg);
    border-radius: calc(var(--pill-h) / 2);
    padding: 0 var(--pill-gap);
}

    .fn-icon img {
        width: calc(var(--pill-h) / 2.3);
        height: calc(var(--pill-h) / 2.3);
    }

    .fn-icon span {
        /* dark text on the white pill (the band itself is dark) */
        color: var(--text-color);
        font-weight: 700;
        padding-right: var(--small-gap);
    }

.fn-slider__track {
    /* The JS positions cards with offsetLeft, which is measured from the
       nearest positioned ancestor - so the track has to be that ancestor, or
       the values come out in page coordinates and every scroll target is off
       by the slider's distance from the left edge of the page. (The club
       slider's track is already position: relative for its z-index.) */
    position: relative;
    display: flex;
    align-items: start;
    gap: var(--medium-gap);
    padding-inline: max(var(--medium-gap), calc(50% - 20rem));
    padding-block: var(--medium-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
}

    .fn-slider__track::-webkit-scrollbar {
        display: none;
    }

    .fn-slider__track.is-dragging {
        cursor: grabbing;
        scroll-snap-type: none;
    }

/* Reuse the existing .section-4-card visuals, just make them snap + sit in
   a flat (non-sticky) row. The cards are white, so reset the text colour the
   dark band would otherwise inherit. */
.fn-slider__track .section-4-card {
    scroll-snap-align: center;
    scroll-snap-stop: always;
    margin: 0;
    color: var(--text-color);
}

@media (max-width: 700px) {
    .fn-section__head {
        padding: 0 var(--medium-gap);
    }
}

/* ------------------------------------------------------------------ */
/* "Über mich" – photo with scattered dots behind it                  */
/* ------------------------------------------------------------------ */

.v3-about {
    display: flex;
    flex-wrap: wrap;
    gap: var(--large-gap);
    align-items: center;
    margin: var(--large-gap) var(--medium-gap);
}

.v3-about__media {
    position: relative;
    flex: 0 0 auto;
    width: 22rem;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .v3-about__media svg {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 150%;
        height: 150%;
        transform: translate(-50%, -50%);
        z-index: 0;
        pointer-events: none;
    }

    .v3-about__media img {
        position: relative;
        z-index: 1;
        width: 16rem;
        height: 16rem;
        object-fit: cover;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 10px 20px rgba(0, 0, 0, .12);
    }

.v3-about__text {
    flex: 1 1 30rem;
}

    .v3-about__text > h2 {
        padding-top: 0;
    }

@media (max-width: 700px) {
    .v3-about {
        margin: var(--large-gap) var(--medium-gap);
        justify-content: center;
        text-align: center;
    }
}

/* ------------------------------------------------------------------ */
/* Smooth drag-release snapping + seamless loop teleport               */
/* ------------------------------------------------------------------ */

/* While the JS glides a released card to centre, keep snapping off so the
   browser doesn't instantly jump it to the snap point first. */
.club-slider__track.is-snapping,
.fn-slider__track.is-snapping {
    scroll-snap-type: none;
}

/* During the infinite-loop teleport the active card hands over to its
   pixel-identical clone; freeze the card transitions/animation for that single
   frame so the name/benefit text reveal doesn't replay. */
.club-slider__track.is-shifting .club-card,
.club-slider__track.is-shifting .club-card__benefit,
.club-slider__track.is-shifting .club-card__media img {
    transition: none !important;
    animation: none !important;
}

/* ------------------------------------------------------------------ */
/* Reduced motion: instant snap, no scale/transition theatrics        */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    .club-card,
    .club-card__benefit,
    .club-card__media img,
    .slider-nav__btn {
        transition: none;
    }

    .club-card.is-active .club-card__media img {
        animation: none;
    }

    .club-card__benefit {
        filter: none;
    }

    .club-slider__track,
    .fn-slider__track {
        scroll-behavior: auto;
    }
}