/* ============================================================
   THE SPATIALISTS — Hero Caroussel (v8, Theme-integriert)
   - Klassen-Prefix sp8-
   - Schrift: 'GeneralSans' (Theme-lokal, kein Fontshare-CDN)
   - cursor: grab/default mit !important wegen globalem cursor:none
   ============================================================ */

.sp8-outer {
    position: relative;
    /* Hero füllt von Anfang an den Viewport (100vh).
       Top-Padding 5rem für Menü-Abstand, Bottom-Padding 32px.
       Innerhalb .sp8 endet die grüne Box 0.75×infoH unter sp8-info (JS-padding). */
    height: 100vh;
    max-height: 1280px;
    padding: 5rem 32px 32px 32px;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
    /* Theme setzt section { border-bottom: 1px solid grey } global → hier abschalten */
    border-bottom: none;
}

.sp8 {
    background: #AAFF00;
    border-radius: 16px;
    position: relative;
    z-index: 1;
    /* Füllt den Outer (100vh - top-padding - bottom-padding).
       padding-bottom wird von JS gesetzt = 0.75 × infoH (Bottom-Spacing). */
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: visible;
    font-family: 'GeneralSans', 'Helvetica Neue', Helvetica, sans-serif;
    box-sizing: border-box;
}

.sp8 * { box-sizing: border-box; }

.sp8-top {
    flex-shrink: 0;
    padding: 52px 88px 26px;
}
.sp8-hl {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight);
    line-height: 1.18;
    color: #000;
    margin: 0;
    max-width: 60vw;
    letter-spacing: -0.02em;
}
/* Falls die Headline aus einem rich_text-Feld als <p> kommt: gleiche Optik */
.sp8-hl p {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    letter-spacing: inherit;
}

.sp8-caro {
    position: relative;
    flex: 0 0 auto;
    margin-top: 100px;
    overflow: hidden;
    cursor: grab !important;
    user-select: none;
}
.sp8-caro:active { cursor: grabbing !important; }

.sp8-track {
    display: flex;
    gap: 5px;
    align-items: flex-start;
    height: 100%;
    transition: transform 0.72s cubic-bezier(0.77, 0, 0.175, 1);
    /* kein will-change — damit mix-blend-mode durch den Track sieht */
}

/* ── Slides ── */
.sp8-slide {
    position: relative;
    flex: 0 0 60px;
    height: 60px;
    overflow: hidden;
    background: transparent;
    cursor: pointer !important;
    border-radius: 0;
    transition:
        flex-basis 0.72s cubic-bezier(0.77, 0, 0.175, 1),
        height     0.72s cubic-bezier(0.77, 0, 0.175, 1),
        border-radius 0.22s ease-out;
}
.sp8-slide:hover { border-radius: 30px; }
.sp8-slide.is-active { cursor: pointer !important; }

.sp8-slide img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block; pointer-events: none;
}

/* Difference-Overlay: grüne Fläche über Bild mit mix-blend-mode:difference.
   opacity-Transition synchron mit Grössen-Animation */
.sp8-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #AAFF00;
    mix-blend-mode: difference;
    opacity: 1;
    transition: opacity 0.72s cubic-bezier(0.77, 0, 0.175, 1);
    pointer-events: none;
}
/* Aktives Bild: Overlay ausblenden → Bild erscheint normal */
.sp8-slide.is-active::after {
    opacity: 0;
}

.sp8-info {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 44px 28px;
    margin-top: 0.5rem;
    transition: opacity .22s;
}
.sp8-info.fading { opacity: 0; }

/* Meta-Kicker: Theme-Skala --font-size-xs, normal upper/lowercase, immer schwarz
   (Beschriftung erscheint nur auf grüner Fläche → Farbe ist mode-unabhängig) */
.sp8-meta {
    font-size: var(--font-size-xs);
    font-weight: 500;
    font-family: 'GeneralSans', sans-serif;
    color: #000;
    margin: 0 0 3px;
}

/* Projekt-Titel: Theme-Skala --font-size-base, semibold, immer schwarz */
.sp8-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    font-family: 'GeneralSans', sans-serif;
    color: #000;
    margin: 0;
    letter-spacing: -0.02em;
}

/* "Projekt ansehen"-Pille: aktuell verborgen.
   Falls später wieder einblenden: display:none → display:inline-block */
.sp8-proj-btn {
    display: none;
    padding: 0.4rem 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--current-text-color);
    color: var(--current-text-color);
    background: transparent;
    font-family: 'GeneralSans', sans-serif;
    font-size: var(--font-size-base);
    text-decoration: none;
    transition: 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
    margin-left: 12px;
}
.sp8-proj-btn:hover {
    background: var(--clr-black);
    color: var(--clr-white);
}
body[dark] .sp8-proj-btn:hover {
    background: var(--clr-white);
    color: var(--clr-black);
}

/* Ab ≤768px ist im Theme das Mobile-Menü aktiv (top:1.5rem, height:4rem).
   Hero startet darunter mit gleichem 1.5rem-Abstand → padding-top 7rem. */
@media (max-width: 768px) {
    .sp8-outer { padding-top: 7rem; }
}

@media (max-width: 640px) {
    .sp8-outer { padding: 7rem 16px 16px 16px; }
    .sp8-top   { padding: 36px 24px 18px; }
    .sp8-hl    { max-width: 90vw; }
    .sp8-caro  { margin-top: 48px; }
    .sp8-info  { flex-wrap: wrap; gap: 8px; }
    .sp8-proj-btn { margin-left: 0; }

    /* Mobile: Hover-Radius aus, nur das aktive (mittlere) Bild bekommt Radius */
    .sp8-slide:hover     { border-radius: 0; }
    .sp8-slide.is-active { border-radius: 30px; }
}