/* carousel.css — das Karussell (DEV-LOG [88], [89], [107], [108]).

   Bis DEV-LOG [108] standen diese Regeln in layout.css. Seitdem hat das
   Karussell eine laufende Vorschau im Bedienfeld (Tab „Diaschauen"), und das
   Bedienfeld lädt layout.css nicht und soll es auch nicht (Header, Sektionen,
   Container). Eine eigene Datei, die BEIDE laden — wie slideshow.css und
   tilefx.css. Was das Bedienfeld aus layout.css zusätzlich braucht (Raster,
   Kachel, Bild), steht dort in settings.css bei der Vorschau.

   Die Zeiten der Automatik (--car-hold, --car-rewind, --car-fade) sind
   Einstellungen: schemaFieldsCarousel() in lib/schema.php, Zahlen in
   Sekunden auf :root. carousel.js liest sie am Raster.

   566px muss zu BP_MOBILE in lib/schema.php passen — der Selbsttest prüft es. */

/* ── Karussell (DEV-LOG [88]) ─────────────────────────────────────────────
   Das einzige Raster, das scrollt: eine Zeile, beliebig viele Kacheln, und
   immer eine HALBE Kachel rechts angeschnitten als Hinweis "hier geht es
   weiter". Wie viele im Fenster stehen, sagt --car-vis (layoutGrids()['vis'],
   ausgegeben von renderGrid(); der Rückfall hier gilt nur für Prüfstände ohne
   Settings-Block).

   .mgrid ist dabei SELBST der Scrollbereich — kein Wrapper. Breite (--box-w),
   Bündigkeit der Zelle und alle Kachelregeln greifen dadurch unverändert.

   Die Kachelbreite ist die Breite des Fensters minus der sichtbaren Abstände,
   geteilt durch die sichtbaren Kacheln. */
.mgrid--car {
  --car-vis: 6.5;
  --car-tile: calc((100% - (var(--car-vis) - 1) * var(--grid-gap)) / var(--car-vis));
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: var(--car-tile);
  overflow-x: auto;
  overflow-y: hidden;
  /* Kein Zurückblättern im Browserverlauf, wenn das Trackpad am Ende weiterwischt. */
  overscroll-behavior-x: contain;
  /* KEIN Snap auf dem Desktop: die Umlenkung des Mausrads (derzeit aus,
     DEV-LOG [90]) scrollt in kleinen Schritten, und 'mandatory' zöge nach jedem
     davon zurück auf die Kachel. Die Fahrt des Diaprojektors nimmt den Snap nur
     im Mobilblock weg (.is-auto) — wer ihn hier einschaltet, braucht die Regel
     auch oben. */
  /* Unten der Platz für den Scrollbalken, oben und unten Luft für den
     Hover-Effekt 'lift' (tilefx.css) — ein Scrollbereich schneidet alles ab,
     was über seine Kante ragt. */
  padding-block: 0.4rem 0.6rem;
  margin-block: -0.4rem 0;

  /* Der Scrollbalken: siehe die ::-webkit-scrollbar-Regeln weiter unten. */
}

/* DER VERLAUF AN DEN ENDEN — ABGESCHALTET (Betreiber, 2026-09-15, DEV-LOG [89]).
   Die Regeln bleiben und hängen an .mgrid--fade; renderGrid() gibt die Klasse
   nur aus, wenn layoutGrids()['carousel']['fade'] true ist. Wieder an: dort
   umschalten, sonst nichts. */
.mgrid--car.mgrid--fade {
  /* DER VERLAUF IST EINE MASKE, KEINE FARBFLÄCHE. Eine Fläche in --sec-bg
     stimmte nur auf einer einfarbigen Sektion; auf einem Hintergrundbild oder
     einer Diaschau läge ein farbiger Streifen über dem Bild. Die Maske blendet
     die Kacheln selbst aus, egal was dahinter liegt.

     ZWEI EBENEN: die obere mit dem Verlauf über der Bildfläche, die untere
     deckend über dem Scrollbalken — sonst verblasste der Balken rechts mit.
     Dessen Höhe misst carousel.js (--car-sb); ohne JavaScript ist sie 0 und
     der Balken blendet am Ende eben mit aus.

     --car-fl / --car-fr: Verlaufsbreite links und rechts. Rechts ist er da,
     bis das Ende erreicht ist (.is-end), links erst nach dem ersten Scrollen
     (.is-moved) — beide Klassen setzt carousel.js. Ohne JavaScript bleibt es
     beim Verlauf rechts. */
  --car-fw: calc(var(--car-tile) * 0.6);
  --car-fl: 0px;
  --car-fr: var(--car-fw);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 var(--car-fl), #000 calc(100% - var(--car-fr)), transparent 100%),
    linear-gradient(#000, #000);
  mask-image:
    linear-gradient(to right, transparent 0, #000 var(--car-fl), #000 calc(100% - var(--car-fr)), transparent 100%),
    linear-gradient(#000, #000);
  -webkit-mask-size: 100% calc(100% - var(--car-sb, 0px)), 100% var(--car-sb, 0px);
  mask-size: 100% calc(100% - var(--car-sb, 0px)), 100% var(--car-sb, 0px);
  -webkit-mask-position: left top, left bottom;
  mask-position: left top, left bottom;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  /* opacity: das Ausblenden am Ende (.is-out, weiter unten) — die Liste hier
     schlägt die dortige Regel über die Spezifität und muss sie mitführen. */
  transition: --car-fl 0.25s ease, --car-fr 0.25s ease, opacity calc(var(--car-fade, 0.5) * 1s) ease;
}
.mgrid--fade.is-moved { --car-fl: var(--car-fw); }
.mgrid--fade.is-end   { --car-fr: 0px; }
/* Registriert, damit sich die beiden Breiten überblenden lassen — eine
   unregistrierte Custom Property springt. Wer @property nicht kennt, springt
   eben; die Regel bleibt richtig. */
@property --car-fl { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }
@property --car-fr { syntax: "<length-percentage>"; inherits: false; initial-value: 0px; }

/* DER SCROLLBALKEN: dünn, in der Textfarbe der Sektion, abgeschwächt — und
   OHNE PFEILKNÖPFE (Vorgabe des Betreibers, DEV-LOG [89]). Auf macOS blendet das
   System ihn ohnehin aus, bis gescrollt wird; der eigentliche Hinweis ist die
   halbe Kachel.

   ZWEI WEGE, UND SIE SCHLIESSEN SICH AUS. Chrome ignoriert jede
   ::-webkit-scrollbar-Regel, sobald scrollbar-width oder scrollbar-color
   gesetzt ist — und sein „thin" hat unter Windows Pfeile. Nur über die
   Pseudo-Elemente lassen sie sich wegnehmen. Die Standard-Eigenschaften
   bekommt deshalb nur, wer die Pseudo-Elemente nicht kennt (Firefox; dessen
   dünner Balken hat keine Pfeile). */
.mgrid--car::-webkit-scrollbar { height: 6px; }
.mgrid--car::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.mgrid--car::-webkit-scrollbar-track { background: transparent; }
.mgrid--car::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 35%, transparent);
  border-radius: 3px;
}
@supports not selector(::-webkit-scrollbar) {
  .mgrid--car {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, currentColor 35%, transparent) transparent;
  }
}

/* OHNE SCROLLBALKEN (cellProps()['carbar'], DEV-LOG [107]) — dieselben zwei
   Wege wie oben, aus demselben Grund. Der Platz darunter bleibt, damit das
   Raster beim Umschalten nicht springt. */
.mgrid--car.mgrid--nobar::-webkit-scrollbar { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  .mgrid--car.mgrid--nobar { scrollbar-width: none; }
}

/* ZIEHEN MIT DER MAUS (cellProps()['cardrag'], data-car-drag, DEV-LOG [107]):
   die Hand steht auf dem ganzen Raster und schlägt den Zeigefinger der
   Großansicht (gleiche Spezifität, spätere Regel) — das Bild öffnet sich
   trotzdem per Klick, carousel.js verschluckt nur den Klick nach einem
   echten Ziehen. Nicht im Bearbeitungsmodus, dort zieht edit.js Kacheln.
   Der greifende Zeiger gehört an die QUELLE (Pointer-Capture, CLAUDE.md). */
body:not(.ck-edit) .mgrid--car[data-car-drag],
body:not(.ck-edit) .mgrid--car[data-car-drag] > .mtile:not(.mtile--video) { cursor: grab; }
body:not(.ck-edit) .mgrid--car[data-car-drag].is-dragging,
body:not(.ck-edit) .mgrid--car[data-car-drag].is-dragging > .mtile { cursor: grabbing; }
.mgrid--car[data-car-drag] img { -webkit-user-drag: none; user-select: none; }

/* AUSBLENDEN AM ENDE (data-car-loop="fade", DEV-LOG [107]): carousel.js setzt
   .is-out, springt unsichtbar an den Anfang und nimmt die Klasse wieder weg.
   Die Dauer ist die Einstellung car.fade (Sekunden, Tab „Diaschauen",
   DEV-LOG [108]) — carousel.js liest DIESELBE Variable, damit Skript und
   Übergang dieselbe Zahl haben. Das ganze Raster samt Balken — sonst sähe man
   den Balken springen. Der Rückfall gilt für Prüfstände ohne Settings-Block. */
.mgrid--car { transition: opacity calc(var(--car-fade, 0.5) * 1s) ease; }
.mgrid--car.is-out { opacity: 0; }

/* Per Tastatur fokussiert: der Ring aus base.css läge AUSSERHALB der Box und
   würde von der Maske abgeschnitten. Nach innen gezogen. Die Maske bleibt:
   lightbox.js gibt den Fokus beim Schliessen ans Karussell zurück, und nach
   einem Escape wertet Chrome das als :focus-visible — ein Karussell, das dann
   plötzlich ohne Verlauf dastünde, sähe kaputt aus. */
.mgrid--car:focus-visible { outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) {
  .mgrid--fade { transition: none; }
}

/* ── Mobil ─────────────────────────────────────────────────────────────── */
@media (max-width: 566px) {
  /* Mobil: kleinere Kacheln (--car-vis kommt aus
     layoutGrids()['vis_m'] über ckStyleM()), damit man mehrere sieht und
     nicht eine Kachel den Bildschirm füllt. Hier MIT Snap — gewischt wird
     mit dem Finger, und dort gibt es kein Mausrad, das dagegen arbeitet. */
  .mgrid--car {
    --car-vis: 2.5;
    scroll-snap-type: x mandatory;
  }
  .mgrid--car > .mtile { scroll-snap-align: start; }
  /* Während carousel.js selbst weiterschaltet (.is-auto, DEV-LOG [89]), setzt
     es scrollLeft Bild für Bild — und 'mandatory' zöge nach jedem Schritt auf
     die nächste Kachel zurück. Das Ziel ist ohnehin ein Kachelanfang. */
  .mgrid--car.is-auto { scroll-snap-type: none; }
}