/*
 * Widget-Showcase: Produktkarten mit Tiefe statt klassischem Karussell.
 *
 * Bewegung und 3D-Neigung laufen ueber CSS-Variablen, die das Skript setzt
 * (--showcase-shift). Dadurch animiert der Browser nur transform/opacity --
 * beides laeuft auf der Compositor-Ebene und erzwingt kein Neuberechnen des
 * Layouts.
 */
.widget-showcase {
    padding: 4rem 0 3.5rem;
    overflow: hidden;
}

.showcase__head {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    padding: 0 1.5rem;
    text-align: center;
}

.showcase__eyebrow {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.6;
    margin-bottom: 0.6rem;
}

.showcase__title {
    margin: 0 0 0.75rem;
}

.showcase__subtitle {
    opacity: 0.8;
}

/* Buehne: die Perspektive hier erzeugt die Tiefe der Karten darin. */
.showcase__viewport {
    perspective: 1600px;
    perspective-origin: 50% 50%;
    padding: 2.5rem 0 3rem;
    cursor: grab;
}

.showcase__viewport:active {
    cursor: grabbing;
}

.showcase__track {
    display: flex;
    gap: 1.75rem;
    /*
     * "safe center" zentriert die Karten, solange sie in die Breite passen --
     * bei drei Karten stehen sie damit mittig statt links angeschlagen.
     * Reicht der Platz nicht, faellt es auf linksbuendig zurueck; ein
     * gewoehnliches "center" wuerde in dem Fall den Anfang abschneiden,
     * und die erste Karte waere nicht mehr erreichbar.
     */
    justify-content: safe center;
    padding: 0 max(1.5rem, calc(50% - 11rem));
    transform-style: preserve-3d;
    will-change: transform;
    /* Sanftes Nachlaufen der Mausbewegung. Die eigentliche Position setzt
       das Skript pro Bild (requestAnimationFrame), diese Transition glaettet
       nur die Sprünge beim Betreten/Verlassen. */
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transform: translate3d(var(--showcase-shift, 0px), 0, 0);
}

.showcase-card {
    position: relative;
    flex: 0 0 22rem;
    border-radius: 1.5rem;
    background: var(--color-bg, #fff);
    box-shadow: 0 1.5rem 3rem rgba(15, 17, 26, 0.13);
    overflow: hidden;
    transform-style: preserve-3d;
    /* Leichte Grunddrehung: die Karten stehen wie aufgefaechert, nicht flach. */
    transform: rotateY(var(--card-rotate, 0deg)) scale(var(--card-scale, 1)) translateZ(var(--card-depth, 0px));
    transition:
        transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        box-shadow 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 0.4s ease;
    outline: none;
}

/*
 * Die Karte unter dem Zeiger richtet sich auf und kommt nach vorn.
 * !important ist hier noetig, weil das Skript --card-rotate/--card-depth
 * als Inline-Style je Position setzt (siehe js/script.js) -- ohne Vorrang
 * bliebe die Karte auch unter dem Zeiger schraeg stehen.
 */
.showcase-card:hover,
.showcase-card:focus-visible,
.showcase-card.is-active {
    --card-rotate: 0deg !important;
    --card-scale: 1.06;
    --card-depth: 70px !important;
    z-index: 3;
    box-shadow: 0 2.5rem 5rem rgba(15, 17, 26, 0.26);
}

/* Nachbarkarten treten zurueck, damit die aktive klar im Mittelpunkt steht. */
.showcase__track.has-hover .showcase-card:not(:hover):not(.is-active) {
    --card-scale: 0.95;
    opacity: 0.72;
}

.showcase-card__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: linear-gradient(135deg, #f2f2f7, #e6e6ef);
}

.showcase-card__image {
    width: 100%;
    height: 100%;
    /* "contain" statt "cover": das Bild soll VOLLSTAENDIG zu sehen sein.
       Mit "cover" wurde jede Vorschau beschnitten -- bei einem Screenshot
       eines Moduls fehlte damit genau das, was man beurteilen will. Der
       Farbverlauf des Rahmens fuellt die Raender. */
    object-fit: contain;
    display: block;
    padding: 0.5rem;
    box-sizing: border-box;
    transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Kein Zoom mehr beim Hover: er wuerde das Bild wieder ueber den Rand
   schieben und damit genau das zerstoeren, was "contain" erreicht. Die
   Karte selbst hebt sich weiterhin (siehe --card-scale). */

/* Vergroessern -- unten rechts im Bild, damit es den Inhalt nicht verdeckt. */
.showcase-card__zoom {
    position: absolute;
    right: 0.6rem;
    bottom: 0.6rem;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(15, 17, 26, 0.72);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

.showcase-card:hover .showcase-card__zoom,
.showcase-card:focus-within .showcase-card__zoom { opacity: 1; }
.showcase-card__zoom:hover { background: rgba(15, 17, 26, 0.92); }
/* Auf Touch-Geraeten gibt es kein Hover -- dort dauerhaft sichtbar. */
@media (hover: none) {
    .showcase-card__zoom { opacity: 1; }
}
.showcase-card__zoom:focus-visible { opacity: 1; outline: 2px solid #fff; outline-offset: 2px; }

/* ── Vergrößerte Ansicht ─────────────────────────────────────────────── */
.showcase-lightbox {
    border: none;
    border-radius: 1rem;
    padding: 0;
    max-width: min(92vw, 900px);
    max-height: 92vh;
    background: #14161f;
    color: #fff;
    overflow: visible;
}
.showcase-lightbox::backdrop { background: rgba(10, 11, 16, 0.86); }

.showcase-lightbox__image {
    display: block;
    max-width: 100%;
    max-height: calc(92vh - 4rem);
    /* Auch hier vollstaendig sichtbar, nicht beschnitten. */
    object-fit: contain;
    border-radius: 1rem 1rem 0 0;
    background: #0f1118;
}

.showcase-lightbox__caption {
    margin: 0;
    padding: 0.9rem 1.2rem;
    font-size: 0.95rem;
    /* Heller Text auf dunklem Grund, ausdruecklich gesetzt -- der Dialog
       erbt sonst die Schriftfarbe der Seite und wuerde auf hellen Themes
       unlesbar. */
    color: #fff;
}

.showcase-lightbox__close {
    position: absolute;
    top: -0.9rem;
    right: -0.9rem;
    width: 2.4rem;
    height: 2.4rem;
    border: none;
    border-radius: 50%;
    background: #fff;
    color: #14161f;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0.3rem 1rem rgba(0, 0, 0, 0.4);
}
.showcase-lightbox__close:focus-visible { outline: 2px solid color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff); outline-offset: 2px; }

.showcase-card__image--empty {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #a77df5) 62%, #fff), var(--color-primary, #76e7d2));
}

.showcase-card__body {
    padding: 1.5rem 1.5rem 1.75rem;
    text-align: center;
}

/*
 * Lesbarkeit: die Werte hier lagen bei opacity 0.55 bzw. 0.7. Auf
 * Fliesstext unterschreitet das die Kontrastempfehlungen deutlich --
 * 0.55 macht aus schwarzer Schrift ein mittleres Grau, das auf hellem
 * Grund kaum noch trennt. Angehoben und zusaetzlich etwas groesser: eine
 * Kategoriezeile in 0.7rem ist selbst bei vollem Kontrast grenzwertig.
 */
.showcase-card__category {
    display: block;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.8;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.showcase-card__title {
    margin: 0 0 0.4rem;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.25;
}

.showcase-card__text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    opacity: 0.88;
}

.showcase-card__link {
    display: inline-block;
    margin-top: 0.9rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-link, #6c5ce7);
    /* Erst beim Hover/Fokus der Karte einblenden -- ruhigere Grundansicht. */
    opacity: 0;
    transform: translateY(0.35rem);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.showcase-card:hover .showcase-card__link,
.showcase-card:focus-within .showcase-card__link,
.showcase-card.is-active .showcase-card__link {
    opacity: 1;
    transform: translateY(0);
}

.showcase__hint {
    margin: 0;
    text-align: center;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    opacity: 0.45;
}

/* --- Tablet und Handy: wischen statt Maussteuerung ---------------------- */
@media (max-width: 900px) {
    .showcase__viewport {
        perspective: none;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .showcase__viewport::-webkit-scrollbar {
        display: none;
    }

    .showcase__track {
        /* Auf Touch uebernimmt das Scrollen die Bewegung -- die vom Skript
           gesetzte Verschiebung wuerde sonst dagegen arbeiten. */
        transform: none !important;
        padding: 0 1.25rem;
        gap: 1.25rem;
    }

    .showcase-card {
        flex-basis: 17rem;
        scroll-snap-align: center;
        /* Ohne Hover muessen alle Angaben von vornherein sichtbar sein. */
        --card-rotate: 0deg;
        --card-scale: 1;
        --card-depth: 0px;
    }

    .showcase__track.has-hover .showcase-card:not(:hover):not(.is-active) {
        --card-scale: 1;
        opacity: 1;
    }

    .showcase-card__link {
        opacity: 1;
        transform: none;
    }

    .showcase__hint {
        display: none;
    }
}

@media (max-width: 560px) {
    .showcase-card {
        flex-basis: 78vw;
    }
}

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt eine
 * ruhige, statische Reihe -- keine Maussteuerung, keine Neigung.
 */
@media (prefers-reduced-motion: reduce) {
    .showcase__track {
        transform: none !important;
        transition: none;
        overflow-x: auto;
    }

    .showcase-card {
        --card-rotate: 0deg !important;
        --card-depth: 0px !important;
        transition: box-shadow 0.2s ease;
    }

    .showcase-card:hover,
    .showcase-card.is-active {
        --card-scale: 1.02;
    }

    .showcase-card__image {
        transform: none !important;
        transition: none;
    }

    .showcase-card__link {
        opacity: 1;
        transform: none;
    }
}

/* ── Gläserne Variante ────────────────────────────────────────────────────
   Die Karte wird durchscheinend und liegt wie Milchglas über dem
   Hintergrund.

   WICHTIG: Der Abschnitt bringt seinen eigenen dunklen Grund mit. Ohne ihn
   stünde helle Schrift auf hellem Grund -- auf einer hellen Website wäre
   das Modul schlicht unlesbar. Der dunkle Grund ist also keine
   Geschmacksfrage, sondern Voraussetzung dafür, dass Glas überhaupt
   funktioniert: durchscheinend sieht man nur gegen etwas.

   backdrop-filter ist die eigentliche Wirkung; Browser ohne Unterstützung
   bekommen einen leicht abgesetzten Halbton, der ebenfalls funktioniert. */
.showcase--glass {
    position: relative;
    background: #0f1118;
    /* Über die volle Breite, auch wenn der Inhaltsbereich schmaler ist --
       ein dunkler Block mit hellen Rändern sähe aus wie ein Fehler. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: max(1.5rem, calc(50vw - 50%));
    padding-right: max(1.5rem, calc(50vw - 50%));
    overflow: hidden;
}

.showcase--glass .showcase__eyebrow,
.showcase--glass .showcase__title,
.showcase--glass .showcase__subtitle,
.showcase--glass .showcase__hint,
.showcase--glass .showcase__empty {
    color: #fff;
}

.showcase--glass .showcase__eyebrow { opacity: 0.65; }
.showcase--glass .showcase__subtitle { opacity: 0.8; }
.showcase--glass .showcase__hint { opacity: 0.5; }

.showcase--glass .showcase-card {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.35);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .showcase--glass .showcase-card {
        background: rgba(255, 255, 255, 0.06);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
    }
}

.showcase--glass .showcase-card:hover,
.showcase--glass .showcase-card:focus-visible,
.showcase--glass .showcase-card.is-active {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, 0.45);
}

/* Auf Glas muss die Schrift hell sein -- sonst verschwindet sie im
   Hintergrund, den man ja absichtlich durchscheinen lässt. */
.showcase--glass .showcase-card__title,
.showcase--glass .showcase-card__text,
.showcase--glass .showcase-card__category,
.showcase--glass .showcase-card__link {
    color: #fff;
}

.showcase--glass .showcase-card__text { opacity: 0.82; }
.showcase--glass .showcase-card__category { opacity: 0.7; }

.showcase--glass .showcase-card__media {
    background: rgba(255, 255, 255, 0.05);
}

/* Farbige Lichtpunkte hinter den Karten -- sie erzeugen erst das, was man
   durch das Glas sieht. Ohne sie wäre der Effekt kaum wahrnehmbar.
   pointer-events: none, damit sie nichts blockieren. */
.showcase--glass .showcase__viewport::before,
.showcase--glass .showcase__viewport::after {
    content: "";
    position: absolute;
    width: 26rem;
    height: 26rem;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}

.showcase--glass .showcase__viewport::before {
    left: 4%;
    bottom: -8rem;
    background: var(--color-primary, #7a4fd0);
}

.showcase--glass .showcase__viewport::after {
    right: 2%;
    top: -10rem;
    background: color-mix(in srgb, var(--color-primary, #7a4fd0) 55%, #fff);
}

.showcase--glass .showcase__track { position: relative; z-index: 1; }

/* ── Suche und Sparten-Filter ─────────────────────────────────────────────
   Bei über 60 Karten ist Blättern keine Bedienung mehr. */
.showcase__tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.showcase__search {
    flex: 1 1 14rem;
    max-width: 22rem;
    padding: 0.6rem 0.9rem;
    font: inherit;
    color: inherit;
    background: rgba(128, 128, 128, 0.1);
    border: 1px solid rgba(128, 128, 128, 0.3);
    border-radius: 999px;
}

.showcase--glass .showcase__search {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.showcase--glass .showcase__search::placeholder { color: rgba(255, 255, 255, 0.55); }

.showcase__filter {
    padding: 0.45rem 0.85rem;
    font: inherit;
    font-size: 0.85rem;
    color: inherit;
    background: transparent;
    border: 1px solid rgba(128, 128, 128, 0.32);
    border-radius: 999px;
    cursor: pointer;
}

.showcase__filter:hover { background: rgba(128, 128, 128, 0.12); }

.showcase__filter.is-active {
    background: var(--color-primary, #4b7bd6);
    border-color: transparent;
    color: var(--wl-on-primary, #fff);
    font-weight: 600;
}

.showcase--glass .showcase__filter { border-color: rgba(255, 255, 255, 0.24); color: #fff; }
.showcase--glass .showcase__filter:hover { background: rgba(255, 255, 255, 0.12); }

.showcase-card--hidden { display: none; }

.showcase__empty {
    opacity: 0.7;
    font-size: 0.9rem;
}