/* =====================================================================
 * carousel.css - 3.2.5-p21
 *
 * GEMEINSAME MECHANIK ALLER KARUSSELLS. Herausgeloest aus lets-dj.css,
 * das der Paketshop bis p20 ueber $pageStyleDeps vollstaendig mitgeladen
 * hat - mitsamt aller seitenspezifischen Form.
 *
 * LEITPRINZIP: Diese Datei regelt Mechanik, niemals Form.
 *
 * Erlaubt: Positionierung, Beschnitt, Sichtbarkeit, Zeigerereignisse,
 * Uebergaenge, Wisch-/Zieh-Verhalten.
 * Verboten: aspect-ratio, width, height, object-fit, Farben, Schatten.
 *
 * Groesse und Seitenverhaeltnis bestimmt jede Seite selbst - genau die
 * Vermischung war die Ursache der Spezifitaetsfalle aus p20.
 *
 * Ladereihenfolge: laeuft ueber $pageStyleDeps und damit VOR
 * pages/<seite>.css. Die Seite gewinnt bei gleicher Spezifitaet ueber die
 * Reihenfolge. Ueberschneidungen sind trotzdem vermieden, damit die Datei
 * reihenfolgeunabhaengig bleibt.
 *
 * Ablageort: liegt bewusst unter pages/, obwohl es keine Seite ist -
 * $pageStyleDeps aufloest ausschliesslich in dieses Verzeichnis, und
 * includes/page.php gehoert nicht zum Aenderungsumfang dieses Patches.
 * Verschiebung nach assets/css/carousel.css siehe BACKLOG.
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * BUEHNE
 *
 * position:relative ist Bezugsrahmen fuer die absolut gesetzten Kacheln
 * und die Vorschau-Flaechen. touch-action stand seit 3.2.4-p24 zentral
 * hier, weil an der Buehne die Zieh-Geste ankommt (die Bedienelemente
 * liegen ausserhalb des Tracks und verdecken ihn).
 *
 * Die BREITE der Buehne steht bewusst nicht hier - sie ist Form und
 * gehoert jeder Seite selbst.
 * --------------------------------------------------------------------- */
.dj-stage {
    position: relative;
    touch-action: pan-y;
}

/*
 * AUSNAHME FUER NATIVES SCROLLEN (3.4.0-p11)
 * ---------------------------------------------------------------------
 *
 * touch-action: pan-y erlaubt dem Finger NUR senkrechtes Wischen -
 * waagerechtes faengt das alte Bauteil selbst ab. Steht eine
 * .tile-scroller in der Buehne, wuerde diese Regel das native Scrollen
 * vollstaendig blockieren: Der Browser gibt die waagerechte Geste gar
 * nicht erst frei.
 *
 * Beinahe uebersehen. Es haette so ausgesehen, als funktioniere der
 * Umbau nicht - dabei waere nur eine Zeile aus dem alten Bauteil im Weg
 * gewesen.
 */
.dj-stage:has(.tile-scroller) {
    touch-action: auto;
}


/* ---------------------------------------------------------------------
 * TRACK
 *
 * Reiner Positionierungsrahmen ohne eigenen Fluss und ohne Scroll -
 * transform ist die einzige Positionsquelle (positionMultiTiles() in
 * carousel.js). Die Hoehe setzt ausschliesslich das Skript aus der
 * gemessenen Kachelgroesse; deshalb hier kein aspect-ratio.
 * --------------------------------------------------------------------- */
.dj-track {
    position: relative;
    display: block;
    width: 100%;
    min-height: 120px;
}

.dj-track.dj-track-multi {
    overflow: hidden;
    align-items: stretch;
}

/*
 * Weiche Randausblendung nur zusaetzlich mit .dj-track-overflow (Klasse
 * aus canLoop(), siehe carousel.js render()) - sonst blendet sie auch die
 * Raender vollstaendig sichtbarer Randkarten aus und wirkt wie ein
 * Unschaerferand (Korrektur 31.08.2026).
 *
 * Der Verlauf ist Teil der Ueberlauf-Mechanik, nicht der Kachelform: Er
 * sagt "hier geht es weiter". Lets_DJ setzt ueber #djTrack einen eigenen,
 * weiter aussen beginnenden Verlauf - dort liegt nur EIN Cover voll im
 * Bild.
 */
/*
 * 3.2.5-p23: Die Auslaufstrecke ist jetzt ein Schalter, kein fester Anteil.
 *
 * Vorher standen hier 14 % der Trackbreite. Ein ANTEIL waechst mit dem
 * Fenster mit - die Bedienelemente nicht. Auf einer 1400px breiten Buehne
 * liefen die 14 % rund 196px weit nach innen und legten sich damit auf die
 * erste voll sichtbare, klickbare Karte, waehrend die Pfeile des Paketshops
 * bei clamp(6px, 3vw, 56px) stehen bleiben (Befund Lars, 04.09.2026).
 *
 * Der Schleier gehoert dorthin, wo eine Kachel angeschnitten ist - nicht
 * auf eine nutzbare. Die Strecke setzt deshalb jede Seite selbst ueber
 * --anschnitt-schleier, an ihren eigenen Bedienelementen ausgerichtet.
 * Der Rueckfallwert entspricht dem bisherigen Verhalten.
 */
.dj-track.dj-track-multi.dj-track-overflow {
    mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--anschnitt-schleier, 14%),
        #000 calc(100% - var(--anschnitt-schleier, 14%)),
        transparent 100%);
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 var(--anschnitt-schleier, 14%),
        #000 calc(100% - var(--anschnitt-schleier, 14%)),
        transparent 100%);
}

.dj-track.dj-track-multi::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------------------------------
 * KACHEL - MECHANIK
 *
 * Form (Radius, Hintergrund, Schatten, Seitenverhaeltnis) steht seit p21
 * ausdruecklich in der jeweiligen Seitendatei, nicht mehr hier.
 *
 * border:3px solid transparent bleibt Mechanik, nicht Form: Der Ring
 * reserviert Platz und geht in die vom Skript gemessene Kachelgroesse
 * ein. Nur seine FARBE ist Sache der Seite.
 * --------------------------------------------------------------------- */
.dj-tile {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: 3px solid transparent;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity var(--zeit-wechseln) ease, border-color var(--zeit-wechseln) ease, box-shadow var(--zeit-wechseln) ease, transform var(--zeit-wechseln) var(--kurve);
}

/*
 * z-index:2 haelt die einlaufende Kachel unabhaengig von der
 * DOM-Reihenfolge oben - ohne ihn entschied die Richtung zufaellig,
 * welche Kachel beim Wechsel sichtbar vorn lag.
 */
.dj-tile.active {
    opacity: 1;
    z-index: 2;
    pointer-events: auto;
}

/*
 * REIHEN-LAYOUT.
 *
 * inset:0 aus der Grundregel wird rechts und unten zurueckgenommen: Sonst
 * ist die Kachel an allen vier Seiten festgenagelt und weder die vom
 * Skript gesetzte Breite noch das Seitenverhaeltnis der Seite greifen.
 *
 * Animiert wird ausschliesslich die Bewegung. Deckkraft und Filter aendern
 * sich im Reihen-Layout nicht mehr - jede weitere Angabe waere nur Arbeit
 * fuer jedes Einzelbild.
 */
.dj-track.dj-track-multi .dj-tile {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    z-index: 1;
    opacity: 1;
    pointer-events: auto;
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform var(--zeit-wechseln) var(--kurve);
}

/*
 * DREI INTERAKTIONSSTUFEN (Wunsch Lars, 31.08.2026).
 *
 * KERN (.active): voll bedienbar. PEEK (.peek, genau eine Kachel je Seite
 * am Rand des sichtbaren Blocks): inneren Bedienelemente gesperrt, die
 * Kachelflaeche selbst bleibt klickbar und verhaelt sich wie ein
 * Pfeilklick (selectOnPeekClick in carousel.js). JENSEITS der Peek-Zone:
 * keine Interaktion.
 */
.dj-track.dj-track-multi .dj-tile.peek * {
    pointer-events: none;
}

.dj-track.dj-track-multi .dj-tile:not(.active):not(.peek) {
    pointer-events: none;
}

/*
 * Bildmasse und Ziehschutz sind Mechanik - object-fit dagegen ist Form
 * und steht seit p21 ausschliesslich in der Seitendatei. Die frueher hier
 * gefuehrte Angabe contain wurde auf BEIDEN Seiten von cover
 * ueberschrieben und war damit wirkungslos.
 */
.dj-tile img {
    width: 100%;
    height: 100%;
    -webkit-user-drag: none;
    user-select: none;
}

@media (hover: hover) and (pointer: fine) {
    .dj-tile:hover {
        transform: scale(1.015);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dj-tile,
    .dj-track.dj-track-multi .dj-tile {
        transition: none;
    }

    .dj-tile:hover {
        transform: none;
    }
}


/* ---------------------------------------------------------------------
 * VORSCHAU-FLAECHEN
 *
 * Auf Lets_DJ seit 3.2.4-p37 ueberfluessig (die Nachbarcover liegen dort
 * als echte Kacheln in der Reihe) und per .dj-carousel .dj-peek in
 * lets-dj.css ausgeblendet. Der PAKETSHOP nutzt sie aktiv:
 * productPeekPrev/-Next und referencePeekPrev/-Next, siehe pakete.js.
 * --------------------------------------------------------------------- */
.dj-peek {
    position: absolute;
    top: 4%;
    bottom: 4%;
    width: min(82%, 320px);
    z-index: 0;
    padding: 0;
    border: 0;
    border-radius: 30px;
    background-size: cover;
    background-position: center;
    filter: brightness(.8);
    opacity: .65;
    cursor: pointer;
    transition: opacity .4s ease, filter .3s ease, transform .4s cubic-bezier(.25, .8, .3, 1);
}

.dj-peek:hover {
    opacity: .88;
    filter: brightness(.92);
    transform: scale(1.015);
}

.dj-peek-prev {
    right: calc(100% + 10px);
}

.dj-peek-next {
    left: calc(100% + 10px);
}

/* Richtet sich beim Hereinholen auf: Drehung geht auf null, Groesse
   waechst - die Bewegung "wird zum Hauptcover". */
/*
 * MEDIA QUERY WIEDERHERGESTELLT (3.2.5-p21).
 *
 * Beim Aufraeumen in p11 sind oeffnende UND schliessende Klammer dieser
 * Media Query verlorengegangen. Die Klammernbilanz blieb dadurch
 * unauffaellig, die eingerueckten Regeln galten aber auf ALLEN Breiten:
 * Die Vorschau war ueberall nur min(30%, 110px) breit und die
 * Surge-Bewegung ueberall abgeschaltet.
 *
 * Der Originalstand vor p11 lag nicht vor. 650px ist deshalb eine
 * ENTSCHEIDUNG, keine Rekonstruktion - sie folgt dem Breakpoint-System
 * der Website (650 / 1000 / 1100) und dem Inhalt des Blocks, der
 * eindeutig die Handy-Variante beschreibt.
 */
@media (max-width: 650px) {
    .dj-peek {
        width: min(30%, 110px);
        filter: brightness(.72);
        opacity: .5;
    }

    .dj-peek-prev {
        right: calc(100% + 8px);
    }

    .dj-peek-next {
        left: calc(100% + 8px);
    }
}


/* ---------------------------------------------------------------------
 * SEITENPUNKTE
 *
 * display:flex schlaegt [hidden] - die Begleitregel ist deshalb Pflicht,
 * nicht Kosmetik (Hausregel).
 * --------------------------------------------------------------------- */
.dj-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    margin-bottom: 18px;
}

.dj-dots[hidden] {
    display: none;
}

.dj-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--line);
    cursor: pointer;
}

.dj-dot.active {
    background: var(--gold);
}

/* =====================================================================
 * NATIVES WISCHEN (3.4.0-p11)
 * =====================================================================
 *
 * Gehoert zu assets/js/scroller.js. Die Klassen heissen bewusst anders
 * als .dj-track/.dj-tile: Dort stehen die Kacheln ABSOLUT positioniert,
 * und das ist mit nativem Scrollen unvereinbar. Zwei Mechaniken
 * nebeneinander statt einer umgedeuteten - die alte bleibt unberuehrt,
 * solange Lets_DJ und das Produktraster sie noch nutzen.
 *
 * DAS SCROLLEN MACHT DER BROWSER. Hier steht nur, dass er darf.
 * ===================================================================== */

.tile-scroller {
    /*
     * Rueckfall fuer Browser ohne :has() - die Bahn selbst setzt es
     * ebenfalls, und das gilt fuer ihren eigenen Bereich.
     */
    touch-action: pan-x pan-y;
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    /*
     * proximity statt mandatory (p12).
     *
     * mandatory zwingt zum Einrasten, auch mitten im Nachlauf - der
     * Browser bremst den Schwung ab, um die naechste Kachel zu treffen.
     * Genau das fuehlt sich hakelig an.
     *
     * proximity rastet ein, wenn die Bewegung ohnehin in der Naehe einer
     * Kachel endet, und laesst den Schwung sonst auslaufen. Das ist das
     * Verhalten, das man aus der Fotos-App kennt.
     */
    scroll-snap-type: x proximity;
    /* Nachlauf wie bei einer nativen Liste, nicht abrupt. */
    -webkit-overflow-scrolling: touch;
    /*
     * Die Bildlaufleiste verstecken, das Scrollen bleibt.
     *
     * NICHT display:none auf der Leiste selbst - das schaltet in
     * manchen Browsern das Scrollen mit ab. scrollbar-width ist der
     * vorgesehene Weg.
     */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /*
     * Rand innen statt aussen: Die erste und letzte Kachel sollen in
     * der Mitte einrasten koennen, nicht am Rand kleben.
     */
    scroll-padding-inline: 12%;
    padding-inline: 12%;
    /* Ueberschreibt .dj-track aus dem alten Bauteil, falls beides an
       derselben Stelle steht. */
    position: relative;
    min-height: 0;
}

.tile-scroller::-webkit-scrollbar {
    display: none;
}

.tile-scroller-item {
    /*
     * scroll-snap-align: center - die Kachel rastet mittig ein, sodass
     * die Nachbarn links und rechts angeschnitten sichtbar bleiben.
     * Das ist der Hinweis "hier geht es weiter", den sonst die
     * Peek-Knoepfe gaben.
     */
    scroll-snap-align: center;
    scroll-snap-stop: normal;

    flex: 0 0 auto;
    width: min(78%, 320px);

    /*
     * DAMIT DER BROWSER DIE KACHEL VORBEREITET (3.4.0-p12)
     *
     * Ohne diesen Hinweis entscheidet er erst beim ersten Bewegen, dass
     * hier etwas animiert wird - und genau in diesem Moment stockt es.
     * contain: paint sagt ausserdem zu, dass nichts ueber den Rand der
     * Kachel hinausgemalt wird; dann muss beim Scrollen nur der sichtbare
     * Ausschnitt neu gezeichnet werden, nicht die ganze Reihe.
     */
    /*
     * will-change: opacity IST HIER ENTFALLEN (3.5.0-p26).
     *
     * Der Hinweis sagt: an DIESEM Element wechselt gleich die
     * Deckkraft. Sie wechselt hier aber nicht - sie steht auf
     * `> .product-card`. Der Hinweis ging ins Leere und kostete eine
     * eigene Zeichenebene.
     *
     * Er steht jetzt bei der Karte.
     */
    contain: paint;
}

/*
 * DIE KACHEL IN DER SCROLLBAHN (3.4.0-p13)
 * ---------------------------------------------------------------------
 *
 * .dj-tile ist von den Referenzkacheln genommen. Sie gehoert zum alten
 * Bauteil und setzte position:absolute mit inset:0 - mitten in einer
 * Flexbox, die nativ scrollt.
 *
 * Damit fiel aber auch die Form weg: .product-card allein hat keine
 * Hoehe. Die steht jetzt hier.
 */
.tile-scroller-item > .product-card {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    position: relative;
    border: 3px solid transparent;
    border-radius: var(--radius);
    overflow: hidden;

    /*
     * KEIN transform auf der Kachel selbst.
     *
     * Genau das war der teure Teil im alten Bauteil: bei jeder
     * Fingerbewegung eine Transformation je Kachel. Hier bewegt sich
     * nichts ausser dem Scrollstand.
     */
    /*
     * Die gedaempften Nachbarn bleiben, aber der UEBERGANG entfaellt auf
     * dem Telefon.
     *
     * Ein Deckkraft-Wechsel ueber 250 ms laeuft genau dann, wenn die
     * Reihe einrastet - zwei Bewegungen gleichzeitig, und die zweite
     * bremst die erste. Ohne Uebergang wechselt die Deckkraft in dem
     * Bild, in dem der Beobachter meldet: nicht sichtbar, aber spuerbar.
     */
    /* Der Hinweis gehoert dorthin, wo die Deckkraft wechselt. */
    will-change: opacity;
    opacity: .55;
}

/*
 * DAS AUFHEBEN MUSS DASSELBE ELEMENT TREFFEN (Korrektur 3.5.0-p25,
 * Befund Lars: "leider immer noch inaktiv").
 *
 * Die Daempfung steht auf `.tile-scroller-item > .product-card` - also
 * auf der KARTE. Diese Regel hob sie bisher auf dem ELTERNTEIL auf, und
 * das wirkt nicht: Deckkraft auf einem Element aendert nichts an der
 * Deckkraft seiner Kinder. Sie multiplizieren sich.
 *
 * Ergebnis: ALLE Referenzkarten standen dauerhaft auf 55 Prozent, auch
 * die aktive. Genau das sah Lars als "inaktiv".
 *
 * Der Fehler bestand schon vor 3.5.0 - p24 hat ihn nur nicht behoben,
 * weil auch die neue Regel eine Ebene zu hoch ansetzte.
 */
.tile-scroller-item.active > .product-card {
    opacity: 1;
}

/*
 * WENN ALLES PASST, WIRD NICHT GEDAEMPFT (3.5.0-p24, Befund Lars:
 * "Sieht aus wie inaktiv").
 *
 * Die 55 Prozent sind der Anschnitt: Sie sagen, dass es seitlich
 * weitergeht. Passen alle Kacheln nebeneinander ins Bild, gibt es
 * nichts anzuschneiden - dann wirkt die Daempfung nur wie ein
 * gesperrtes Bedienelement.
 *
 * Genau das war bei den zwei Referenzen im Individualauftrag der Fall.
 *
 * Die Klasse setzt scroller.js, weil nur der Browser zur Laufzeit
 * weiss, ob etwas ueberlaeuft.
 */
.tile-scroller.tile-scroller-komplett .tile-scroller-item > .product-card {
    opacity: 1;
}

/*
 * KEIN GLAS IN DER SCROLLBAHN (3.4.0-p13, Befund Lars)
 * ---------------------------------------------------------------------
 *
 * Die Kacheln erben von .card/.panel in base.css:
 *
 *     backdrop-filter: blur(20px) saturate(165%);
 *
 * Ein backdrop-filter zwingt den Browser, bei JEDER Bewegung den
 * Hintergrund hinter der Kachel neu zu verwischen - 20 Pixel
 * Weichzeichnung plus Saettigung, fuer jede sichtbare Kachel, in jedem
 * Bild. Das ist die teuerste Eigenschaft in CSS, und sie schlaegt genau
 * dann zu, wenn sich etwas bewegt.
 *
 * Beim Pfeilklick faellt es weniger auf: Dort laeuft eine kurze
 * Transition, beim Wischen ein Nachlauf ueber eine Sekunde.
 *
 * ERSATZ: eine etwas kraeftigere Flaeche, damit es nicht flach wirkt.
 * Der Verlust ist gering - die Kacheln liegen auf einem ruhigen Grund
 * und tragen ohnehin ein Coverbild, hinter dem nichts durchscheint.
 */
/*
 * ALLES IN DER BAHN, nicht nur die Kachel selbst.
 *
 * Beim Nachsehen tragen FUENF weitere Elemente je Kachel einen
 * backdrop-filter: das Label, die Vorschau-Reiter, die Sprungmarken und
 * das Haekchen. Bei drei sichtbaren Kacheln sind das ueber ein Dutzend
 * Weichzeichner gleichzeitig, jeder mit eigenem Hintergrund.
 *
 * Deshalb der Sammelselektor statt einzelner Regeln - was in dieser Bahn
 * liegt, wird bewegt, und was bewegt wird, darf den Hintergrund nicht
 * verwischen.
 */
.tile-scroller *,
.tile-scroller,
.dj-track *,
.dj-track {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/*
 * AUCH IM ALTEN RASTER (3.4.0-p14, Befund Lars)
 * ---------------------------------------------------------------------
 *
 * Lars: "Lets_DJ laeuft sehr smooth." Beide nutzen dasselbe carousel.js
 * mit derselben Wischgeste - der Unterschied liegt also nicht in der
 * Mechanik, sondern im Inhalt:
 *
 *     Lets_DJ        1 Knopf, 1 Bild        =  2 Elemente je Kachel
 *     Produktraster  Label, 2 Preview-
 *                    Reiter, Haekchen,
 *                    Play, 2 Sprungmarken,
 *                    Popup                  = 12 Elemente je Kachel
 *
 * Zehnmal so viel zu zeichnen bei jeder Bewegung, und auf der Haelfte
 * davon liegt ein backdrop-filter. p13 hat sie nur in der neuen
 * Scrollbahn abgeschaltet - das alte Raster heisst .dj-track und war
 * nicht erfasst.
 *
 * Deshalb war Lets_DJ immer fluessig: Dort gibt es schlicht nichts zu
 * verwischen.
 */

/*
 * Die Flaechen, die vorher durch das Glas lebten, brauchen jetzt einen
 * eigenen Grund - sonst steht heller Text auf hellem Cover.
 */
.tile-scroller .product-card-label,
.tile-scroller .product-card-kicker,
.tile-scroller .product-card-preview-tab,
.tile-scroller .product-card-skip,
.tile-scroller .product-card-check,
.dj-track .product-card-label,
.dj-track .product-card-kicker,
.dj-track .product-card-preview-tab,
.dj-track .product-card-skip,
.dj-track .product-card-check {
    background-color: color-mix(in srgb, #0d2438 62%, transparent);
}

/*
 * Auch grosse Schatten kosten bei jeder Bewegung. Ein flacherer tut
 * dasselbe fuer das Auge und deutlich weniger fuer den Prozessor.
 */
.tile-scroller .product-card,
.dj-track .product-card {
    box-shadow: 0 6px 18px rgba(16, 20, 25, .16);
}

/*
 * Am Desktop, wo mit der Maus geblaettert wird, darf der Uebergang
 * bleiben - dort gibt es kein Nachlaufen, mit dem er konkurriert.
 */
@media (hover: hover) and (pointer: fine) {
    /*
     * AUF DER KARTE, nicht auf dem Element darum (Korrektur 3.5.0-p26).
     *
     * Die Deckkraft steht auf `> .product-card`. Ein Uebergang auf dem
     * Elternteil hat nie etwas bewirkt - er beobachtete eine
     * Eigenschaft, die dort nie wechselt.
     */
    .tile-scroller-item > .product-card {
        transition: opacity .25s ease;
    }
}

/*
 * Zwei oder drei Kacheln nebeneinander ab Tablet - der Platz ist da,
 * und dann muss weniger gewischt werden.
 */
@media (min-width: 700px) {
    .tile-scroller {
        scroll-padding-inline: 0;
        padding-inline: 0;
    }

    .tile-scroller-item {
        width: calc((100% - 18px) / 2);
        /*
         * ENTFALLEN (3.5.0-p26): Hier stand opacity: 1.
         *
         * Gemeint war wohl, ab Tablet nicht mehr zu daempfen. Gewirkt
         * hat es nie - die Deckkraft steht auf der Karte, nicht hier.
         *
         * Seit p24/p25 entscheidet das die Klasse
         * tile-scroller-komplett: Passt alles, wird nicht gedaempft.
         * Das ist die bessere Antwort, weil sie nicht an einer
         * Fensterbreite haengt, sondern am tatsaechlichen Platz.
         */
    }
}

@media (min-width: 1000px) {
    .tile-scroller-item {
        width: calc((100% - 36px) / 3);
    }
}

/*
 * Wer die Bewegung reduziert haben moechte, bekommt kein weiches
 * Scrollen - weder beim Wischen noch beim Pfeilklick.
 */
@media (prefers-reduced-motion: reduce) {
    .tile-scroller {
        scroll-behavior: auto;
    }

    .tile-scroller-item > .product-card {
        transition: none;
    }
}